In this how to you will learn how to use the new Visual WebGui ASP.Net wrapper capabilities. This ability opens a new way for a Visual WebGui programmer to develop richer and even more customizable applications than before. The wrapper allows you to use third party ASP.Net components or your own ASP.Net components in Visual WebGui as fully integrated controls just like the Visual WebGui out of the box controls.
In our demo we will wrap Dundas charts and use them in a Visual WebGui application.
First let's create a new Visual WebGui application:
Right click the solution and click "Enable Visual WebGui":
Add the necessary reference to Dundas assembles:
Right click the project and click "Add ASP.NET Wrapper" control:
From the ASP.NET wrapper wizard select the Dundas Chart control and give it a name "DundasChart":
After clicking the OK button you will get a new wrapper class generated:
Because Dundas chart control renders images it needs a fixed size to relay on, otherwise you will get an error indicating that Dundas chart control does not support non pixel dimensions.
To force the wrapper to pass absolute dimensions you need to override the IsFixedSize property in the DundasChart.cs fileas following:
protected override bool IsFixedSize
{
get
{
return true;
}
}
The current wrapper generator does not work out ambiguous properties well and that still is left to be hand fixed, until the next version release.
After you compile the project you will get a list of warnings regarding ambiguous properties. Fix those warnings by changing the names of the properties / methods or
simply mark out the conflicting code:
After you compile the project and you open the Form1.cs designer, you will get the new wrapper in the toolbox, like this:
Now you can drag the new wrapper control to the form which will put in a place holder like this:
The new wrapper allows you to initialize the control by using a reference to an ASCX file.
Add a new WebUserControl1.ascx to the project
And in that ASCX you can add the control code and set his initialization.
In this demo we will paste in the current code which will initialize the Dundas chart so we will be able to just insert data from code (This code is taken from a Dundas sample)
<%@ Control Language="C#"%>
<%@ Register TagPrefix="dcwc" Assembly="DundasWebChart" Namespace="Dundas.Charting.WebControl" %>
<dcwc:chart id="hosted_control_id" runat="server" Height="796px" Width="712px"
BackColor="#F3DFC1" Palette="GrayScale" backgradienttype="TopBottom"
borderlinewidth="0" borderlinecolor="181, 64, 1"
imageurl="~/TempImages/ChartPic_#SEQ(300,3)">
<legends>
<dcwc:legend LegendStyle="Row" AutoFitText="False" DockToChartArea="Default" Docking="Bottom" DockInsideChartArea="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold'></dcwc:legend>
</legends>
<chartareas>
<dcwc:chartarea Name="Default" BorderColor="64, 64, 64, 64" BackGradientEndColor="White" BackColor="OldLace" ShadowColor="Transparent" BackGradientType="TopBottom">
<area3dstyle yangle="10" perspective="10" xangle="15" rightangleaxes="False" wallwidth="0" clustered="True"></area3dstyle>
<axisy linecolor="64, 64, 64, 64" labelsautofit="False">
<labelstyle font="Trebuchet MS, 8.25pt, style=Bold'></labelstyle>
<majorgrid linecolor="64, 64, 64, 64"></majorgrid>
</axisy>
<axisx linecolor="64, 64, 64, 64" labelsautofit="False">
<labelstyle font="Trebuchet MS, 8.25pt, style=Bold'></labelstyle>
<majorgrid linecolor="64, 64, 64, 64"></majorgrid>
</axisx>
</dcwc:chartarea>
</chartareas>
</dcwc:chart>
Now we can add a Visual WebGui button to the form and attach its click event to the following code (This code is taken from a Dundas sample)
string[] charts = { "Column", "Spline", "StepLine", "Spline" };
Random rnd = new Random();
private void button1_Click(object sender, EventArgs e)
{
// Add a series to the chart
Series series = myChart1.Series.Add("Series " + (myChart1.Series.Count + 1).ToString());
series.ChartArea = "Default";
series.ChartType = charts[myChart1.Series.Count - 1];
series.BorderWidth = 2;
int j = 0;
int MaxPoints = 10;
while (j++ < MaxPoints)
series.Points.Add(rnd.Next(5, 20));
myChart1.Update();
}
Open your web.config and add to it the Dundas http handler as following:
<add path="ChartAxd.axd" verb="*" type="Dundas.Charting.WebControl.ChartHttpHandler" validate="false"/>
Set Form1 to be the startup form using the right click as following:
Run the application and you will get the following screen:
After you click the button our code will refresh the chart and display the following view:
As you can see it is very simple to create a wrapper using the new ASP.NET wrapper feature. This is the first version (6.2.1) of Visual WebGui which has this capability and we intend to simplify the procedure even more.
-- Eyal Albert @ Eyal.Albert (at) Gizmox.com
To use an external file insert a path to your code (ASCX file) in the ControlCode property using the following format: “/[Assembly Resource Name]”
Perfect! Just perfect!!!!
Posted by nistam on Friday, November 14, 2008 7:00 AM
It works with visual studio 2005 and VWG 6.1.4
Posted by nelmaya on Friday, November 14, 2008 10:42 AM
It works with visual studio 2005 and VWG 6.1.4 ??
Posted by nelmaya on Friday, November 14, 2008 10:43 AM
Is it possible to wrap an asp.net control ??
Posted by nelmaya on Friday, November 14, 2008 10:48 AM
It's posible to rap any ASP.NET control
It works with vs 2008/2005 and 6.2.1
Enjoy
Posted by Eyal.Albert on Friday, November 14, 2008 1:54 PM
no "ASP.NET Control Wrapper" menu item on my VWG 6.2.1 under windows 2003 + vs2008
Posted by width on Saturday, November 15, 2008 11:17 PM
Hi,
You have to enable Visual WEbGui first.
Right click on the project and select enable Visual WebGui. This action will add all the features that where added from 6.2 to Visual Studio.
Posted by Eyal.Albert on Sunday, November 16, 2008 2:02 AM
Hi, I've enabled visualwebgui but still don't see the ASP Wrapper Option on the menu. What do I do?
Posted by Luke on Sunday, November 16, 2008 4:20 AM
Tried this with VS2005, VWG 6.2.1 & dundas charts 6.2. Had 2 issues. 1. had more than just compile warnings to change - had a number of "reset" and "shouldserialise" methods causing compile errors (Made them all return true). 2. IsFixedSize could not be overridden (no suitable method found to override). This lead to "chart height must be set in pixels" errors. Can anyone offer any suguestions
Posted by leafo on Tuesday, November 18, 2008 10:09 PM
I am getting the same thing as well, even though I have overriden the IsFixedSize, I am still getting the pixel error message... is it possible to post the source so we can dissect it to see what we may or may not be doing right and/or wrong?
Posted by Dodge on Thursday, November 20, 2008 11:32 AM
Sorry for the delay.
You can see the code snippet here
http://www.visualwebgui.com/Community/Resources/Codes/tabid/326/articleType/ArticleView/articleId/376/Dundas-charts-wrapping-example.aspx
Posted by Eyal.Albert on Sunday, November 23, 2008 1:21 AM
Hello, it's possible taht function Update of ASPWrappers works with AJAX. A method that not invoke a postback??
Thanks a lot
Posted by erik on Wednesday, November 26, 2008 12:51 PM
How to refer the hosted Control to the Web User Control ? I am using 6.3.8.a/vs2008
I have given reference of the WebUserControl1 (in which I have copied the aspx code of the wrapped control) in the "Control Code" property of hosted Control as "/WebUserControl1". Nothing else is there in "Control Code". Also Control ID is what I have set in the aspx code of the Control. All the initial parameters are set and aspx code of SqlDataSource is also there in WebUserControl1. But the Dialog Box with the message:"Value can not be null, Parameter Name: Format" is appeared when I try to save the changes or run the project. Also at run time the error: "Server Error '/' in Application. DataKeyField, DataStartField, DataEndField, DataSubjectField are required for Data Binding. These are initial parameters which I have set but could not be able to save because of Design time error message mentioned above. Please help me out.
Posted by sixthsense1986 on Wednesday, August 05, 2009 6:54 AM
Hi sixthsense1986
can you seend me a demo app with your peoblem
to eyal.albert (at)VisualWebgui.Com
Posted by Eyal.Albert on Thursday, August 06, 2009 1:36 AM
Hi Eyal.Albert !
I sent you my Wrapping Control app with mentioned problem at your e-mail: "eyal.albert@visualwebgui.com".
I am trying to wrap Telerik's Scheduler control in this app.
Please check it out.
Thanks,
Mahmood Nawaz.
Posted by sixthsense1986 on Thursday, August 06, 2009 3:24 AM