Create the
one empty project application and write this code
Introduction
In this
article we are going to learn the topic of how to manipulate (getting the grid
rows and columns data)
the grid view rows and columns using the Jquery.
In the
server side I am writing the one sample data table data to bind to grid .
Coding
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace SampleTestingCodes
{
public partial class AccessGridControlsUsingJquery
: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(int));
dt.Columns.Add("UserName",
typeof(string));
dt.Columns.Add("Education",
typeof(string));
dt.Rows.Add(1, "Lokesh", "B.Tech");
dt.Rows.Add(2, "Vijay", "Msc");
dt.Rows.Add(3, "Balaji", "MS");
dt.Rows.Add(4, "Charan", "B.Tech");
dt.Rows.Add(5, "Durga", "MD");
dt.Rows.Add(6, "Shiva", "B.Tech");
dt.Rows.Add(7, "Venkat", "CA");
grdEmployee.DataSource = dt;
grdEmployee.DataBind();
}
}
}
}
And Design
side write this code
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="AccessGridControlsUsingJquery.aspx.cs"
Inherits="SampleTestingCodes.AccessGridControlsUsingJquery"
%>
<!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></title>
<script type="text/javascript">
//"element" parameter gives the control
object
function GetMarksData(element) {
//This line is used for getting the editing row in the
grid
var rowindex =
element.parentElement.parentElement.rowIndex;
//Using the javascript accessing the grid and find the
control in the grid using the index
var rowElement = document.getElementById('<%=
grdEmployee.ClientID %>').rows[rowindex].cells[3];
if (rowElement.getElementsByTagName("input")[0].value != "") {
alert(rowElement.getElementsByTagName("input")[0].value);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdEmployee"
runat="server"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="User
ID">
<ItemTemplate>
<asp:Label ID="lblUserId" runat="server" Text='<%# Bind("UserId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="User
Name">
<ItemTemplate>
<asp:Label ID="lblUserName" runat="server" Text='<%# Bind("UserName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Education">
<ItemTemplate>
<asp:Label ID="lblEducation" runat="server" Text='<%# Bind("Education") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Marks">
<ItemTemplate>
<%--<asp:TextBox
ID="lblMarks" runat="server"
onKeyUp="GetMarksData(this);"></asp:TextBox>--%>
<asp:TextBox ID="TextBox1" runat="server" onBlur="GetMarksData(this);"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
No comments:
Post a Comment