Subscribe
Please visit my new Web Site https://coderstechzone.com
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:
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:
how to get value of dataitem index of selected row of gridview using javascrpt not jquery
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() + ',';
});
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;
}
I WOULD BE DELIGHTED TO HEAR FROM YOU