Wednesday, July 25, 2012

Asp.Net jQuery GridView Selected Row Index


The click event on the row of a GridView can be tracked using the click event handler of jQuery and the index of the selected row can be obtained using the rows index() value as follows.

$("#grdEmployee tr").click(function(event) {
   alert($(this).index());
});


When we click on any of the rows in the GridView, the click event gets triggered and the index of the selected Row is displayed in a message box.

Example

<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
// Add Grid Style
$("#grdEmployee").addClass("Grid");
//
// Add Grid Cell Style
$("#grdEmployee td").addClass("GridCell");
      //
      // Add Header Style
$("#grdEmployee th").addClass("GridHeader");
      //
      // Add Row Style
      $("#grdEmployee tr").addClass("GridRow");
      //     
// Row Selected Index
$("#grdEmployee tr").click(function(event) {
   alert($(this).index());
}); 
});
</script>   
<asp:GridView
   ID="grdEmployee"
   runat="server"
   AutoGenerateColumns="true"></asp:GridView>

Add your logic in codebehind to populate the Grid with data.

Stylesheet.css

.Grid
{
      border: 1px solid #000000;
}
.GridCell
{
    padding: 3px 3px 3px 3px; /* Cellpadding */
    border: 1px solid #000000;
    font-family:Verdana;
    font-size:10pt;   
}
.GridHeader
{
      background-color:#999966;
}
.GridRow
{
    background-color:#ffffcc;

Search Flipkart Products:
Flipkart.com

2 comments:

Unknown said...

<a href="http://www.ios9releasedate.org/>iOS 9 Latest News</a>

Unknown said...

iOS 9 Latest News