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.

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.

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:
Telerik.Web.UI
Telerik.Web.Design
System.Web.Extensions (.NET 3.5)

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 RadListBox control from this list, name your wrapper “RadListBoxWrapper” 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 RadListBox control.

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.

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 “RadListBoxForm”.
The new Form is created and added to the project.

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

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 “RadListBoxControl”.

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 Telerik RadListBox 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 RadListBox 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 telerik:radlistbox control markup.

Next, we need to open the RadListBoxForm.resx file in designer-view and open the “mobjRadListBoxWrapper.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 RadListBoxControl.ascx control, after that line.

Change the ID of the telerik:radlistbox in Markup to “hosted_control_id”.

Add this element right after the current ‘@ Register’ directive:

Add a ScriptManager element before the telerik:radlistbox element:

Place the cc1:c1calendar element inside a ContentTemplate contained in an UpdatePanel:

At this point, our RadListBox is wrapped and ready to be used.

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 Telerik RadListBox would give you when used in pure ASP.NET, only this this time it would be contained inside your Visual WebGui application.

We have gone through wrapping Telerik RadListBox control and set it up to be fully functional.
The RadListBox control required a ScriptManager component, so we added a ScriptManager and an UpdatePanel to allow for Ajax communication of this control with the control’s server-side.

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 Telerik RadListBox control in a few simple and quick steps.

Enjoy.