Tutorials

Visual WebGui allows simple & fast development & deployment of Web/Cloud applications while providing full flexibility & extensibility of other ASP.NET components. This article shows how to leverage 3rd party controls and use them within Visual WebGui projects which will be done by demonstrating the wrapping process of Infragistics UltraWebGrid control into Visual WebGui. 

Introduction

Visual WebGui allows developers to place ASP.NET controls inside their application and interact with those controls, as if they were ordinary Visual WebGui controls. This is done in Visual WebGui by a tool that is called the ‘Wrapping tool’. This tool is included within the Visual WebGui installation that integrates it into MS Visual Studio. This tool creates a wrapper for a selected ASP.NET control. The wrapper that is created is a Visual WebGui control that is used as some proxy between the ASP.NET control and the Visual WebGui application. The wrapper gets proxies to the public methods, properties and events of the control that is wrapped, exposing them to the developer at Visual WebGui server-side.

This article assumes that you are either using a Visual WebGui installation of VWG v6.3.9 or newer or VWG v6.4 Preview 2 or newer. Important changes have been made in those versions in the wrapping tool and underlying wrapper infrastructure. 

First Steps

Some ASP.NET controls require a System.Web.UI.ScripManager and a System.Web.UI.UpdatePanel, in order to work. Since these two components are located in the .NET3.5 System.Web.Extensions assembly, we will be working in MS Visual Studio 2008, with .NET3.5 and .NET3.5 assemblies of the controls themselves.

It may be a good practice for you to create your control wrappers in a separate library assembly and not on in the Visual WebGui Application project.
For simplicity, I will explain to you guys how to create these controls on the main application project.
To create a wrapper in a separate library assembly, the assembly references for this control need to be on the library and you need to register the control from the library assembly. If you are not familiar with these two steps, don’t worry. We will go over them in the next sections. 

Wrapping the Infragistics UltraWebGrid Control

References

First of all we need to create a new Visual WebGui Application project.

Now we need to add the references relevant to this control into our project.
These are the assemblies that I found that are needed for this control:
Infragistics35.Web.v9.1
Infragistics35.WebUI.Shared.v9.1
Infragistics35.WebUI.UltraWebGrid.v9.1
System.Design

Wrapper Tool

In order to create a wrapper for this control Now we need to use the Visual WebGui Wrapping Tool. To launch the Wrapping Tool we need to right click on the project item in the solution explorer and select Add –> ASP.NET Control Wrapper.

 



A “Choose ASP.NET Control” dialog window will now open. You need to select the UltraWebGrid control from this list, name your wrapper “UltraWebGridWrapper” in the TextBox below for example and click OK.
A new class is created in the project that is a proxy and place-holder for the UltraWebGrid control.

Handle Warnings

There are properties and methods in the wrapper class that was just now created that have names that match exactly names of properties and methods of classes it derives from, like the Gizmox.WebGUI.Forms.Control.
You need to manually change the names of these properties and methods by adding a prefix like “wrp” to their names. For example change ‘BackColor’ to ‘WrpBackColor’.
You can find those properties and methods by building your project at this point and looking in the Warnings sections of the Error List tab.

 

Build again when you finish to make sure there are no more such warnings.

Create Form

Now we need a Visual WebGui Form to place this control into, so we can use it.
Let’s create a new Visual WebGui Form by right clicking on the project in the Solution Explorer and selecting  Add –> Form… .
An “Add new Item” dialog will open. Enter the name you want for the Form, for example “UltraWebGridForm”.
The new Form is created and added to the project.

Since we want the UltraWebGrid on this Form, we need to open this Form in the Visual WebGui Form Designer and drag the UltraWebGridWrapper control from the ToolBox into the Form.
To complete this stem, let’s save the Form and Build the project.

Get Control Markup

Next we need to create an ASP.NET Web User Control, so let’s right click on the project item in the Solution Explorer, Add –> New Item –> Web User Control, and name it for example “UltraWebGridControl”.



The new Control is created and added to our project.
Now that we have our control let’s open it in designer and drag the Infragistics UltraWebGrid from the ToolBox into the designer window.
If you cannot find it in the ToolBox, right click on the ToolBox, select “Choose Items” and select the UltraWebGrid control.

You will now see this control in designer, giving you options to make modifications to layout and data etc.
For this example we will just leave it as it is (don’t forget to save).

Now we need to open the markup-view on this control and copy it’s contents other than the first line, that defines the control itself. We need the ‘@ Register’ directive markup, and the entire igtbl:UltraWebGrid control markup.

 

Next, we need to open the UltraWebGridForm.resx file in designer-view and open the “mobjUltraWebGridWrapper.ControlCode” string item for editing.
Remove the contents of the this item other than the first line(“<%@ Control Language="C#"%>”) and paste the markup we copied from the UltraWebGridControl.ascx control, after that line.

Markup modifications

Change the ID of the igtbl:UltraWebGrid in Markup to “hosted_control_id”.

Conclusion

At this point, our UltraWebGrid is wrapped and ready to be used.
It does not contain any data, so you can initialize it in the Visual WebGui Form to add the data you need to display in this control.
After adding some simple data in our example the wrapper UltraWebGrid looks like so:

 

You can now the data, styling and customizations you need to make the control look and behave the way you want it to.
This control would give you the same usability the Infragistics UltraWebGrid would give you when used in pure ASP.NET, only this this time it would be contained inside your Visual WebGui application. 

Summary

We have gone through wrapping the Infragistics UltraWebGrid control and set it up to be fully functional. 

At this point we can interact with our wrapped control using the methods and properties of the wrapper that we created both in design-time and in run-time.

This article showed how to wrap the Infragistics UltraWebGrid control in a few simple and quick steps. 

Enjoy.

Download Files