GridView control and DHTML tool tips using AJAX:
You can even use DHTML tool tips with the GridView control.
In this small example I will show how you can get the data by clicking on the column and without making a postback.
Populate the GridView Control:
Your first task is to populate the GridView Control.
private void BindGridView()
{
DataSet ds = GetDataSet();
myDatagrid.DataSource = ds;
myDatagrid.DataBind();
}
private DataSet GetDataSet()
{
// make the query
string query = "SELECT * FROM Categories";
SqlConnection myConnection = new SqlConnection(ConnectionString);
SqlDataAdapter ad = new SqlDataAdapter(query, myConnection);
DataSet ds = new DataSet();
ad.Fill(ds, "Categories");
return ds;
}
Here is the screen shot of the GridView. Notice that the last column is the says select which is just a template column and has a href tag. You can download the complete code and view it in detail.
Now, when you click the select link the "CategoryID" is send to the database and then it returns the "Description" of the particular Category.
Implementing the Server Side Method:
[Ajax.AjaxMethod]
public string GetDescriptionByID(int categoryID)
{
StringBuilder sb = new StringBuilder();
DataSet ds = GetDataSet();
foreach (DataRow row in ds.Tables[0].Rows)
{
if (Convert.ToInt32(row["CategoryID"]) == categoryID)
{
sb.Append(row["Description"] as String);
sb.Append("<BR>");
}
}
return sb.ToString();
}
The method "GetDescriptionByID" simply takes an ID and iterate through the DataSet and appends the "Description" of the matching categoryID to the StringBuilder object.
Calling the server method from the client - AJAX:
The first thing you need to do is to make the href object in the template column. This is the column which says "Select".
<asp:GridView ID="myDatagrid" runat="server" AutoGenerateColumns="False" BackColor="White"
BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" />
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<a href="#" id="MyHyperlink" onclick="GetDescriptionByID('<%# Eval("CategoryID") %>')">Select</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="White" ForeColor="#003399" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
</asp:GridView>
The href calls the "GetDescriptionByID" method.
function GetDescriptionByID(categoryID)
{
_Default.GetDescriptionByID(categoryID,GetDescriptionByID_Callback);
}
function GetDescriptionByID_Callback(response)
{
if(response == null) return;
document.getElementById("Display").style.backgroundColor = "lightYellow";
document.getElementById("Display").style.visibility = "visible";
document.getElementById("Display").innerHTML = response.value;
}
Let's check how this looks.
As, you can see the description is displayed at the bottom of the GridView control. Please keep in mind that this is done without any postback hence the page will not refresh and will increase performance.
I hope you like the article, happy coding!