How to highlight gridview when row is selected
If you are seeing this section and do not see download links, this means that you are not logged into our site. If you already are a member, click on the login link
and login into site and come back to this page for downloading the control files. If you are not a member, click on registration link to
become a Winista member and download the control for free.
In this article I will be discussing how you can highlight a row in gridview when user clicks on a row. This technique is not
simply limited to highlighting. You can make any modifications to the row as per requirements of your application. The click
event I have handled in this article is not the one that may have come across when row is in selected for editing of data in it. This
is about handling normal clicking action of user in rows. This is like lot of desktop windows application where you have a list view or
grid where the whole row is highlighted when user clicks on it. Thats the kind of user interface we are dealing with in this sample.
Row Click Event
Since all the action is going to happen when user clicks in side the row, we need a mechanism to capture this event. We will take
onclick event handler along with server side
RowCreated event. In the
server side event, when each row is being added, add "onclick" attribute on each data row. Following code shows how it is done for
the sample project attached with this article.
protected void OnRowCreated(object sender, GridViewRowEventArgs e)
if (e.Row.RowType == DataControlRowType.DataRow)
e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + m_iRowIdx.ToString() + "')");
Notice that we have used a class variable
m_iRowIdx to keep track of the index which we are going to
specify in our client side
value specified in GridViewRowEventArgs argument. The reason is that if you have headers or rows other than data row then you will
have an index value which would point to wrong row when click action occurs. And this technique also allows you to selectively
decide which rows can handle click event which ones can't. Now when gridview is rendered you can look at the page source and you
will find that in each data row's "tr" tag there is
var gridViewCtlId = '<%=ctlGridView.ClientID%>';
var gridViewCtl = null;
var curSelRow = null;
if (null == gridViewCtl)
gridViewCtl = document.getElementById(gridViewCtlId);
var selRow = getSelectedRow(rowIdx);
if (curSelRow != null)
curSelRow.style.backgroundColor = '#ffffff';
if (null != selRow)
curSelRow = selRow;
curSelRow.style.backgroundColor = '#ff0022';
if (null != gridViewCtl)
You can notice how the client side code is keeping track of current selected row and previous selected row. This way when
user is moving from one row to another, the style of previous row is restored to its original style.
You can download the sample project and play with it to see how this works.