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 help from client side javascript 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() + "')");
    }
    m_iRowIdx++;
}							
							

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 onGridViewRowSelected javascript function. We did not use row index 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 onclick handler.

Client Side

Now the only task that is left is writing client side javascript that will change the row highlighting. Following code snippet shows the javascript that I have used in the sample project.

<script language="javascript" type="text/javascript">
    var gridViewCtlId = '<%=ctlGridView.ClientID%>';
    var gridViewCtl = null;
    var curSelRow = null;
    function getGridViewControl()
    {
        if (null == gridViewCtl)
        {
            gridViewCtl = document.getElementById(gridViewCtlId);
        }
    }
    
    function onGridViewRowSelected(rowIdx)
    {
        var selRow = getSelectedRow(rowIdx);
        if (curSelRow != null)
        {
            curSelRow.style.backgroundColor = '#ffffff';
        }
        
        if (null != selRow)
        {
            curSelRow = selRow;
            curSelRow.style.backgroundColor = '#ff0022';
        }
    }
    
    function getSelectedRow(rowIdx)
    {
        getGridViewControl();
        if (null != gridViewCtl)
        {
            return gridViewCtl.rows[rowIdx];
        }
        return null;
    }
</script>							
							

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.