Most of us are familiar with how to select the GridView rows using checkboxes. This article goes one step further and highlights the checked rows in the GridView control.
Introduction:
Most of us are familiar with how to select the GridView rows using checkboxes. This article goes one step further and highlights the checked rows in the GridView control.
Populating the GridView Control:
The first step is to populate the GridView control. I am using the Northwind database “Categories” table in this demo. Check out the code below:
private void BindData()
{
gvCategories.DataSource = GetData();
gvCategories.DataBind();
}
private DataSet GetData()
{
string connectionString = "Server=localhost;Database=Northwind;Trusted_Connection=true";
SqlConnection myConnection = new SqlConnection(connectionString);
SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories", myConnection);
DataSet ds = new DataSet();
ad.Fill(ds);
return ds;
}
The GetData() method simply fills the DataSet with the data from the “Categories” table and return to the BindData() method. The BindData method populates and bind the GridView control.
HTML Code for the GridView Control:
I have used TemplateFields inside the GridView control. Let’s check out the HTML code for the GridView control.
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" onclick="changeColor(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="Tan" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>
The most important line in the HTML code is the declaration of the CheckBox control.
<asp:CheckBox ID="chkSelect" runat="server" onclick="changeColor(this)" />
I have attached the onclick event of the Checkbox to fire the changeColor function. The changeColor function takes the current object as the argument which in this case is the Checkbox control.
The Client Side Code:
Let’s take a look at the client side code where all the magic happens. Here is the changeColor function which is responsible for changing the color of the GridView checked row.
function changeColor(obj)
{
var rowObject = getParentRow(obj);
var parentTable = document.getElementById("gvCategories");
if(color == '')
{
color = getRowColor();
}
if(obj.checked)
{
rowObject.style.backgroundColor = 'Yellow';
}
else
{
rowObject.style.backgroundColor = color;
color = '';
}
// private method
function getRowColor()
{
if(rowObject.style.backgroundColor == '') return parentTable.style.backgroundColor;
else return rowObject.style.backgroundColor;
}
}
There are couple of interesting things to note in the changeColor method. First, I am using a getParentRow function to get the parent row of the Checkbox control. I can easily reference the parent using the following code:
Obj.parentElement.parentElement;
Although the above approach will work but it looks ugly. That is why I created a simple function getParentRow which will simply return the parent row of the object. Below is the implementation of the getParentRow function.
// This method returns the parent row of the object
function getParentRow(obj)
{
do
{
if(isFireFox())
{
obj = obj.parentNode;
}
else {
obj = obj.parentElement;
}
}
while(obj.tagName != "TR")
return obj;
}
To make the code browser compatible I created another small method isFireFox() which, checks whether the user’s browser is FireFox or not.
function isFireFox()
{
return navigator.appName == "Netscape";
}
The changeColor function also contains a private method getRowColor which simply returns the old color of the row.
This code will also work with GridView having different color alternate rows. The alternate rows are not assigned any color but they inherit the background color of the GridView control.
Check out the final result in the screen shot below:
I hope you liked the article, happy programming!