Wednesday, July 25, 2012

Asp.Net jQuery GridView Column Value


The values in a specific column of a GridView can be obtained using the following jQuery script.

 $("#grdEmployee tr td:nth-child(n)").each(function() {
      alert($(this).text());
 });



Here n refers to the column whose value is to be obtained, in the following example we will get the values of the 2nd column from the GridView grdEmployee. Column index starts with 0.

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"); 
      //
      // Add Row Hover Style
      // MouseOver
      $("#grdEmployee tr").mouseover(function() {
      $(this).addClass("GridRowHover");
      })
      // MouseLeave
      $("#grdEmployee tr").mouseleave(function() {
      $(this).removeClass("GridRowHover");
      })
      //
      // Loop Through a Specific Column (Names)
      // Column index starts with 1
      $('#cmdGetNames').click(function(event) {
         event.preventDefault();
         $("#grdEmployee tr td:nth-child(2)").each(function() {
            alert($(this).text());
         });
       });
});
</script> 


<asp:GridView
   ID="grdEmployee"
   runat="server"
   AutoGenerateColumns="true"></asp:GridView>
<br>
<asp:Button ID="cmdGetNames" runat="server" Text="Get Names" />

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;
}
.GridRowHover
{
    background-color:#CCCCCC;
}


Search Flipkart Products:
Flipkart.com