Gaia enabled GridView for ASP.NET

Result is available at http://ajaxwidgets.com/gridviewsample/

This tutorial will demonstrate how you can embed custom Gaia controls into an ASP.Net GridView and have all the versatility and usability of the GridView with the ajax features of Gaia. First we will start with a basic overview of the GridView. The ASP.Net GridView is a very powerful control that appeared in .Net 2.0. In its basic form, you can drag the control onto the form, bind a datasource to it and you are done. The issues arise when you want to extend the GridView with Gaia controls such as buttons. The best way (or at least the way I found) to Extending the GridView is through the use of TemplateFields. TemplateFields allow the user to create a ITemplate class that will embed any control you want into the cell of a GridView. The controls I have chosen happen to be Gaia controls. This code can be adapted for almost all of the controls, but I have chosen a Gaia button for this example.

Create the ITemplate Class

The first step is to create the New ITemplate derived class. This class will become the backbone of the template and will do the creating and handle the events for the new template control. The code should look similar to this:




In the sample code above, we have only 2 functions. The first is the class declaration for the Template Control. Here you will define the variables and the functions. Notice I have defined a Caption, a Command argument (as I will use this later to figure out what routine to run when the button is clicked), a delegate (very important and will be discussed later) and a variable to reference the delegate. Next we have the code for the public constructor. This will be called from our main class as normal. Here is where we associate the passed in variables with this control. Finally, the “InstanciateIn” method. This is required by the ITemplate class and us used by .Net to create and associate the control within the GridView. Here is where we are actually creating the control and setting any variables. Very Important, don’t forget to add the control (after it is created) to the “container” variable. If you leave out this step, you will never see your control in the grid.

Create the aspx web page

The second step is to create a new asp.net web page or web site then web page if you haven’t already. On the page add a gaia:panel. The gaia:panel will be used to update the information in the GridView when it changes. This is accomplished automatically when you set the ForceUpdate property on the gaia:Panel. This must be done or you won’t see the changes reflected in the grid. Next add the asp:GridView control to the gaia:panel. The code should look like this:




No go on to adding the code