Click/select Row in ASP.NET GridView or HTML Table

Make entire Table Row clickable/selectable by adding "onclick" event and formatting features via Javascript and CSS3

The suggested technique applies to ASP.NET GridView objects, and essentially to any HTML Tabletr elements. First, it makes the entire GridView row object (rendered as "tr" element) "clickable" by adding the "onclick" event (see Listing 1 coded in C#). The associated event handle procedure performs the custom formatting of the clicked/selected row to make it visually different from the others in the same table (see Listing 2 for JavaScript code snippet implementing this feature). 

Demo

The functional demo of the embedded YouTube Video Player, demonstrating the suggested technique,as the image below to open the link)


 
Fig 1. Demo snapshot demonstrates the Table row corresponding to item 6 has been selected by modifying text attributes in the first cell.

Listing 1: Add onclick event (C# code behind)

 Collapse | Copy Code

    protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){
        if (e.Row.RowType == DataControlRowType.DataRow){
            // javascript function to call on row-click event
            e.Row.Attributes.Add("onClick", "javascript:void SelectRow(this);");
        }
    }

 

Listing 2: Add JavaScript function to the page head section

 Collapse | Copy Code

<script type="text/javascript">
         // format current row
         function SelectRow(row) {
             var _selectColor = "#303030";
             var _normalColor = "#909090";
             var _selectFontSize = "3em";
             var _normalFontSize = "2em";
             // get all data rows - siblings to current
             var _rows = row.parentNode.childNodes;
             // deselect all data rows
             try {
                 for (i = 0; i < _rows.length; i++) {
                     var _firstCell = _rows[i].getElementsByTagName("td")[0];
                     _firstCell.style.color = _normalColor;
                     _firstCell.style.fontSize = _normalFontSize;
                     _firstCell.style.fontWeight = "normal";
                 }
             }
             catch (e) { }
             // select current row (formatting applied to first cell)
             var _selectedRowFirstCell = row.getElementsByTagName("td")[0];
             _selectedRowFirstCell.style.color = _selectColor;
             _selectedRowFirstCell.style.fontSize = _selectFontSize;
             _selectedRowFirstCell.style.fontWeight = "bold";
         }
</script>

Development Notes

Note 1: Event-binding could also be done on the client side, for example, using jQuery .click()event. For mostly didactic purpose, it's implemented here using C# and DataRowBound event to be consistent with core .NET technology set.
 
Note 2: In order to select/play the first item in the grid on "page load" event, use the jQuery code snippet shown below (it inserts the small time delay):

 Collapse | Copy Code

$(document).ready(function () { 
  // start the first item after small delay 
  setTimeout('PlayRowItem()', _initDelay); 
});

 
Note 3: As it's been pointed out in comments thread, visual effects could be applied to the selected row by using a pair of addClass() and removeClass() jQuery methods. Styling the rows via CSS3 and jQuery rather than directly modifying elements' properties via jQuery as shown in Listing 2. should be considered a preferable approach for future web development, but be aware that certain deficiencies have been reported in regards to these methods prior to jQuery version 1.4.2 (starting from that version and going forward, both methods works seemingly well in all major web browsers).