This is the second part of my first article where I am explaining how to edit the GridView using jQuery.
Introduction
In this example i am using the same table as I was in my previous article.
Create a new web page and add a gridview like this
<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server"
CellPadding="4" ForeColor="#333333"
GridLines="None" RowStyle-CssClass="record" Width="588px"
>
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" Width="270px" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
<RowStyle CssClass="record" Width="80px"></RowStyle>
<Columns >
<asp:TemplateField HeaderText="Name" HeaderStyle-Width="80px" ItemStyle-Width="270px" >
<ItemTemplate>
<span id= 'second<%# Eval("Id") %>' class='text'><%# Eval("name") %> </span>
<input type="text" id='temp1<%# Eval("ID") %>' class='edit' value ='<%# Eval("name") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Department" HeaderStyle-Width="80px" ItemStyle-Width="270px">
<ItemTemplate >
<span id= 'third<%# Eval("Id") %>' class='text'><%# Eval("dept") %> </span>
<input type="text" id='temp2<%# Eval("ID") %>' class='edit' value ='<%# Eval("dept") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Salary" HeaderStyle-Width="80px" ItemStyle-Width="270px" >
<ItemTemplate>
<span id= 'fourth<%# Eval("Id") %>' class='text'><%# Eval("salary") %> </span>
<input type="text" id='temp3<%# Eval("ID") %>' class='edit' value ='<%# Eval("salary") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit" HeaderStyle-Width="80px" ItemStyle-Width="270px">
<ItemTemplate>
<input type="button" id='edit<%# Eval("ID") %>' value="Edit" class='btn1' />
<input type="button" id='update<%# Eval("ID") %>' value="Update" class='btn3' />
<input type="button" id='cancel<%# Eval("ID") %>' value="cancel" class='btn2' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Go to cs page write this code
SqlConnection con = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SqlDataAdapter da = new SqlDataAdapter("select * from testemp1", con);
DataSet ds = new DataSet();
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
if we run we get a screen like this
this data is shown in a span.for editing there is a text box in each row that is not visible
this is the code for edit button
this is style sheet
<style type="text/css">
.edit
{
display: none;
width:80px;
}
</style>
$(document).ready(function() {
$('.btn2').hide();
$('.btn3').hide();
$('.btn1').click(function() {//edit button
$('#result').hide();
$('.btn1').show();
$('.btn3').hide();
$('.edit').hide();
$('.text').show();
$('.btn2').hide();
var ID = $(this).attr('id').replace("edit", "")
$('#cancel' + ID).show();
$('#update' + ID).show();
$('#edit' + ID).hide();
$('#temp1' + ID).show();
$('#temp2' + ID).show();
$('#temp3' + ID).show();
$('#second' + ID).hide();
$('#third' + ID).hide();
$('#fourth' + ID).hide();
});
});
if we press edit button we get a screen like this
here the datas in span is hide and datas in text box is visible
if we press cancel we get old screen
code for cancel button
$('.btn2').click(function() {//cancel button
$('.btn1').show();
var ID = $(this).attr('id').replace("cancel", "")
$('#update' + ID).hide()
$('#temp1' + ID).hide();
$('#temp2' + ID).hide();
$('#temp3' + ID).hide();
$('.btn2').hide();
$('#second' + ID).show();
$('#third' + ID).show();
$('#fourth' + ID).show();
});
next iam going to write update
this is code for update
$('.btn3').click(function() { //update button
$('#result').show();
$('.btn3').hide();
$('.btn1').show();
$('.btn2').hide();
var id = $(this).attr('id');
var ID = id.replace("update", "");
var td = $(this).closest('tr').children('td');
var name = $('#temp1' + ID).val();
var dept = $('#temp2' + ID).val();
var salary = $('#temp3' + ID).val();
var Data = 'id=' + ID + '&name=' + name + '&dept=' + dept + '&salary=' + salary;
if (name.length > 0 && dept.length > 0 && salary.length > 0) {
$.ajax({
type: "GET",
data: Data,
contentType: "text/html; charset=utf-8",
url: "gridprocess.aspx",
success: function(data) {
$('#temp1' + ID).hide();
$('#temp2' + ID).hide();
$('#temp3' + ID).hide();
$('#second' + ID).show();
$('#third' + ID).show();
$('#fourth' + ID).show();
$("#second" + ID).html(name);
$("#third" + ID).html(dept);
$("#fourth" + ID).html(salary);
$('#result').html("<b >Updated successfully</b>");
}
});
}
});
here we are passing value to gridprocess.aspx
add another web page and change to gridprocess.aspx
in the load event write this code
SqlConnection con = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
protected void Page_Load(object sender, EventArgs e)
{
string msg;
string id = Request.QueryString["id"];
string name = Request.QueryString["name"];
string dept = Request.QueryString["dept"];
string sal = Request.QueryString["salary"];
SqlCommand cmd = new SqlCommand("update testemp1 set name='" + name + "',dept='" + dept + "',salary='" + sal + "' where id='" + id + "'", con);
try
{
con.Open();
cmd.ExecuteNonQuery();
msg = "Success";
Response.Write(msg);
}
catch (Exception ex)
{
msg = ex.Message;
Response.Write(msg);
}
finally
{
con.Close();
}
}
change the text fields and press update button the record will update and shown in gridview without refresh
in this exmple i haven't wrote coding of paging .
hope you can understand.
book reference for this article is jquery cook book
i got the idea from a php example in 9the lessons
Regards
K L BAIJU