Sunday, October 10, 2010

Jquery to read DatakeyNames value of Selected Rows of GridView in Asp.Net

As we know GridView is a very popular control. We always experiment to enhance the GridView control to provide better experience to user. Since javascript is also a popular clientside language, most of the times we use this in client side operations like validation, Row coloring, cell coloring etc. Now a days Jquery is more popular so that in this article i will explain how you can capture the selected rows of a GridView control and also read the datakeyname values using JQuery. So at first i will tell you how we capture selected rows of a GridView. In this example i don't consider the built in Select command. Instead of select command here i use checkbox to select rows by user. The another important tip is we cannot directly access DataKeyNames values of a GridView. To get the value, here I will use a template column to store the same DataKeyValue in a hiddenfield. After that through iteration by Jquery I will read the hiddenfield values which looks alike datakeynames values.

For selecting/deselecting all checkboxes of a GridView using Javascript click here.


My example output look like below:
GridView_Datakeynames_jQuery

The GridView Control HTML will be:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="ID">   
            <Columns>   
                <asp:TemplateField>   
                    <ItemTemplate>   
                        <asp:CheckBox ID="chkSelect" runat="server" />   
                        <asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("ID") %>' />   
                    </ItemTemplate>   
                </asp:TemplateField>   
                <asp:TemplateField>   
                    <HeaderTemplate>   
                        Name   
                    </HeaderTemplate>   
                    <ItemTemplate>   
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>   
                    </ItemTemplate>   
                </asp:TemplateField>   
            </Columns>   
        </asp:GridView>

The Jquery Script also given below:
<script type="text/javascript">   
    $(document).ready(function() {  
    var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');   
    $('#<%= cmdGetData.ClientID %>').click(function (e) {
        var DataKeyName="";  
        $('input:checkbox[id$=chkSelect]:checked', gridView1Control).each(function (item, index) {   
            if(DataKeyName.length==0)
            {
                DataKeyName = $(this).next('input:hidden[id$=IDVal]').val();
            }
            else
            {
                DataKeyName += "," + $(this).next('input:hidden[id$=IDVal]').val();
            }
        });   
        alert(DataKeyName);
        return false;   
    });   
   });   
</script>

Now Bind the GridView data within Page_Load Event:
protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("ID");
        dt.Columns.Add("Name");

        DataRow oItem = dt.NewRow();
        oItem[0] = "1";
        oItem[1] = "Shawpnendu Bikash Maloroy";
        dt.Rows.Add(oItem);

        oItem = dt.NewRow();
        oItem[0] = "2";
        oItem[1] = "Bimalendu Bikash Maloroy";
        dt.Rows.Add(oItem);

        oItem = dt.NewRow();
        oItem[0] = "3";
        oItem[1] = "Purnendu Bikash Maloroy";
        dt.Rows.Add(oItem);

        GridView1.DataSource = dt;
        GridView1.DataBind();

    }

The complete markup language of this example is:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView_DataKeyNames_Jquery.aspx.cs" Inherits="GridView_DataKeyNames_Jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Get Selected rows of a GridView using Jquery</title>
<script src="Script/jquery.js" type="text/javascript"></script>

<script type="text/javascript">   
    $(document).ready(function() {  
    var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');   
    $('#<%= cmdGetData.ClientID %>').click(function (e) {
        var DataKeyName="";  
        $('input:checkbox[id$=chkSelect]:checked', gridView1Control).each(function (item, index) {   
            if(DataKeyName.length==0)
            {
                DataKeyName = $(this).next('input:hidden[id$=IDVal]').val();
            }
            else
            {
                DataKeyName += "," + $(this).next('input:hidden[id$=IDVal]').val();
            }
        });   
        alert(DataKeyName);
        return false;   
    });   
   });   
</script>   
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="ID">   
            <Columns>   
                <asp:TemplateField>   
                    <ItemTemplate>   
                        <asp:CheckBox ID="chkSelect" runat="server" />   
                        <asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("ID") %>' />   
                    </ItemTemplate>   
                </asp:TemplateField>   
                <asp:TemplateField>   
                    <HeaderTemplate>   
                        Name   
                    </HeaderTemplate>   
                    <ItemTemplate>   
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>   
                    </ItemTemplate>   
                </asp:TemplateField>   
            </Columns>   
        </asp:GridView>   
  
        <br />   
        <asp:Button ID="cmdGetData" runat="server" Text="Get Data" />    
    </div>
    </form>
</body>
</html>

Hope you got my trick & now you can read get selected rows of a GrodView control using jQuery.

3 comments:

Anonymous said...

how to get value of dataitem index of selected row of gridview using javascrpt not jquery

BuckBear said...

Hey I was looking for a similar solution. for some reason this one didnt work for me but the code below did. Thought u might be interested

$('#gv tr:has(input:checked) input[type=hidden]').each(function (i, item)
{
DataKeyName = $(item).val() + ',';
});

Anonymous said...

function GetSelectedRow(lnk) {
var row = lnk.parentNode.parentNode;
var rowIndex = row.rowIndex - 1;
var customerId = row.cells[0].innerHTML;
var city = row.cells[1].getElementsByTagName("input")[0].value;
alert("RowIndex: " + rowIndex + " CustomerId: " + customerId + " City:" + city);
return false;
}

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash