Jquery to Get Read DatakeyNames value of GridView Selected Rows in Asp.Net C# VB.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 client side 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. The important tip you need to know is, we cannot directly access DataKeyNames values of a GridView. To get the value, here I am using a template column to store the same DataKeyValue in a hiddenfield. After that through iteration by Jquery I will read the hiddenfield values which will be same as datakeynames values.

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

Objective/Outcome:
Jquery to read DatakeyNames value of Selected Rows of GridView in Asp.Net Csharp VB.Net

First Add the Jquery Reference:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Now prepare the GridView Control & Button Control Like Below:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">   
            <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>

        <asp:Button ID="cmdGetData" runat="server" Text="Get Data" /> 

Note: I have added HiddenField ID=”IDVal” to capture DataKeyName alternatively.

Now bind some Data to GridView to Test the Example:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            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();
        }
    }

Note: Don’t forget to add “System.Data” namespace.

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dt As DataTable = New DataTable()

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

            Dim oItem As DataRow = 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()

        End If
    End Sub

Note: Don’t forget to add “System.Data” namespace.

Now Jquery Code to Get GridView Selected Rows DatakeyNames:

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

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, Gridview, JQuery, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*