Adding the Code to make it all work

The final step is to add the code behind functions to tie it all together. Some steps are a little out of the ordinary, but once you have these steps correctly defined Gaia Widget Controls become very easy to implement.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;

namespace DPMSWeb
{
public partial class MyCode : System.Web.UI.Page
	{
		DataTable dtData;
		
		protected void Page_Load(object sender, EventArgs e)
		{
			GetData();
			SetupGrid();
			BindGrid();
		}

//Normally you will get the data from a database, here we can just create it.
protected void GetData()
{
	dtData = new DataTable();
	dtData.Columns.Add("LastName", typeof(string));
	dtData.Columns.Add("FirstName", typeof(string));
	DataRow dr = dtData.NewRow();
	dr[“LastName”] = “Smith”;
	dr[“FirstName”] = “John”;
	dtData.Rows.Add(dr);
	dr = dtData.NewRow();
	dr[“LastName”] = “Jones”;
	dr[“FirstName”] = “Tom”;
	dtData.Rows.Add(dr);
}

protected void SetupGrid()
{
//Turn Off Auto Generation of the columns
gvMyGridView.AutoGenerateColumns = false;
//Clear any columns that may have already been created
	gvMyGridView.Columns.Clear();
	//Add the normal bound fields so someone can see what they are selecting.
	BoundField bc = new BoundField();
	bc.HeaderText = "Last Name";
	bc.DataField = "LastName";
	bc.ReadOnly = true;
	gvMyGridView.Columns.Add(bc);
	bc = new BoundField();
	bc.HeaderText = "First Name";
	bc.DataField = "FirstName";
	bc.ReadOnly = true;
	gvMyGridView.Columns.Add(bc);
	
	//Here comes the magic
	//Create a new template field using your new class and add it to the GridView
     	 TemplateField tf = new TemplateField();
      	tf.HeaderText = "Go";

//Here is where we create and associate the new class created above
	// Notice the 3rd parameter. This is the reference to the method created below that 
	// ties the function we want out button to call to the delegate we created 
// in the ITemplate class
tf.ItemTemplate = new DPMSWeb.GridViewGaiaButtonTemplate("Go", "Go", processGridClick);
      	gvMyGridView.Columns.Add(tf);
}

protected void processGridClick(object sender, EventArgs e)
    	{
      		//Enter your code here

//Our first task is to find out which row the user clicked. It doesn’t help to work
		//on a data table if you don’t know which row was selected
		int iRow = ((sender as Gaia.WebWidgets.Button).NamingContainer as GridViewRow).DataItemIndex;

//The second task is to find out which button was clicked if there is more than
		//one added to the GridView. Remember we passed in a command argument
		//to the class when we created the Template Field. Now we just need to get that value
		switch ((sender as Gaia.WebWidgets.Button).CommandName)
		{
			case “Go”:
			//do something here to the data
			//We know which button was pressed by getting the CommandName
			//And we know which row the user wants to do something on by the iRow
			//We pulled from the GridView
			break;
			case “Some Other CommandName for a different button”
			//Do Something
			break;
		}
		//Refresh the Data if necessary
		GetData(); 
		//Re-bind the New Data to the Grid
		BindGrid();
		
	
   	 }

protected void BindGrid()
{
	gvMyGridView.DataSource = dtData;
	gvMyGridView.DataBind();
}
 }

Conclusion

As you can see, this is a very straight forward process. Once you understand the use of the ITemplate derived class and the delegate, all the pieces fall in place. This also opens up a world of opportunities for displaying data and having it update asynchronously without a page refresh. Gaia dynamic images in the grid, list boxes, almost anything can be embedded using this method.

Download the code for this tutorial.

James Ward, Gaia Core Team Lead