Click here to Skip to main content
15,867,686 members
Articles / Web Development / HTML5
Tip/Trick

Click/Select row in ASP.NET GridView or HTML 5 Table

Rate me:
Please Sign up or sign in to vote.
4.84/5 (32 votes)
15 Feb 2015CPOL2 min read 266.6K   51   26
Make entire table row clickable/selectable by adding "onclick" event and formatting features via JavaScript and CSS3.

Introduction

The suggested technique applies to ASP.NET GridView objects, and essentially to any HTML Table tr element. First, it makes the entire GridView row object (rendered as "tr" element) "clickable" by adding the onclick event (see Listing 1 in C#). The associated event handler 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

Click on the image below to open the functional demo of the embedded YouTube video player, demonstrating the suggested technique:

YouTube Embedded Video

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)

C#
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

JavaScript
<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 purposes, it's implemented here using C# and the 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 a small time delay):

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

Note 3: As it's been pointed out in the comments, 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).

Additional Resources

Embedded YouTube SDK on CodeProject at:

  1. YouTube™ Embedded Video Player: Extended API (C#)[^]

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun10-Feb-15 20:35
Humayun Kabir Mamun10-Feb-15 20:35 
GeneralRe: My vote of 5 Pin
DrABELL11-Feb-15 5:12
DrABELL11-Feb-15 5:12 
Thanks!
<lol>Life is 2short 2remove USB safely

Questiongridview hyperlinked Pin
Mauxel21-Jun-12 23:13
Mauxel21-Jun-12 23:13 
QuestionSelect GridView row on cell click Pin
amit_jain_online8-May-12 3:12
amit_jain_online8-May-12 3:12 
GeneralReason for my vote of 5 Good work. Pin
Halil ibrahim Kalkan16-Jan-12 22:40
Halil ibrahim Kalkan16-Jan-12 22:40 
GeneralRe: Many Thanks! Pin
DrABELL17-Jan-12 1:53
DrABELL17-Jan-12 1:53 
GeneralReason for my vote of 1 loop will gone slow the browser.. Pin
Technoses30-Dec-11 18:42
Technoses30-Dec-11 18:42 
GeneralRe: Actually the solution works pretty fast in demo implementati... Pin
DrABELL31-Dec-11 2:26
DrABELL31-Dec-11 2:26 
GeneralReason for my vote of 4 Good artical for beginners Pin
Nigam Patel28-Dec-11 19:52
Nigam Patel28-Dec-11 19:52 
GeneralRe: Thanks. Pin
DrABELL31-Dec-11 2:15
DrABELL31-Dec-11 2:15 
GeneralReason for my vote of 5 Nice.... interesting stuff here... ... Pin
BrianBissell20-Sep-11 2:59
BrianBissell20-Sep-11 2:59 
GeneralRe: Yes, Brian, I probably should :) Thanks for your input. - My... Pin
DrABELL20-Sep-11 3:32
DrABELL20-Sep-11 3:32 
GeneralThis is very nice but I would rather use css class to do thi... Pin
DNikolov19-Sep-11 23:40
DNikolov19-Sep-11 23:40 
GeneralRe: Thanks! The use of .addClass()/.removeClass() is a valid app... Pin
DrABELL20-Sep-11 3:54
DrABELL20-Sep-11 3:54 
Generalthanks but i want to select a row on page load or grid view ... Pin
deepakdudeja19-Sep-11 21:04
deepakdudeja19-Sep-11 21:04 
GeneralRe: You are welcome. You could use jQuery "$(document).ready" to... Pin
DrABELL20-Sep-11 3:42
DrABELL20-Sep-11 3:42 
GeneralReason for my vote of 5 nice one Pin
Monjurul Habib17-Sep-11 7:38
professionalMonjurul Habib17-Sep-11 7:38 
GeneralRe: Many Thanks! Regards-AB Pin
DrABELL17-Sep-11 9:51
DrABELL17-Sep-11 9:51 
GeneralReason for my vote of 5 Thanks! Pin
Dr.Walt Fair, PE26-Jun-11 7:04
professionalDr.Walt Fair, PE26-Jun-11 7:04 
GeneralRe: Likewise, thank you, Sir! Pin
DrABELL26-Jun-11 9:51
DrABELL26-Jun-11 9:51 
GeneralReason for my vote of 4 it easy to access and have a beautif... Pin
ravikanth19220-Jun-11 18:31
ravikanth19220-Jun-11 18:31 
GeneralRe: Thanks! Pin
DrABELL21-Jun-11 2:55
DrABELL21-Jun-11 2:55 
GeneralMy 5! Can't we do the event-binding at the client side... ju... Pin
RakeshMeena11-Jun-11 20:09
RakeshMeena11-Jun-11 20:09 
GeneralRe: Hi Rakesh, Thanks for your note! You are absolutely right: s... Pin
DrABELL12-Jun-11 10:42
DrABELL12-Jun-11 10:42 
GeneralReason for my vote of 5 Nice tip Pin
Wonde Tadesse11-Jun-11 13:44
professionalWonde Tadesse11-Jun-11 13:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.