Friday, August 21, 2009

Asp DataGrid with Editable cell with out Postback using Javascript

This is created for one of my friend. he want's in his project. so i thought of sharing with everyone am writing in my blog.

step 1:

create asp grid control with binding dummy value.

step 2:

<asp:GridView ID="grView" runat="server" AutoGenerateColumns="false"
onprerender="grView_PreRender">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div id="lblDiv" runat="server">
<asp:Label ID="lblID" runat="server" Text='<%# Eval("Empid") %>'></asp:Label>
</div>
<div id="txtDiv" style="display:none" runat="server">
<asp:TextBox ID="txtID" runat="server" Text='<%# Eval("Empid") %>'></asp:TextBox>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

step 3:

DataTable DT = new DataTable();
DataColumn dc1 = new DataColumn("Empid");
DataColumn dc2 = new DataColumn("Empname");
DataColumn dc3 = new DataColumn("EmpSalary");
DataColumn dc4 = new DataColumn("EmpAddress");
DT.Columns.Add(dc1);
DT.Columns.Add(dc2);
DT.Columns.Add(dc3);
DT.Columns.Add(dc4);
DataRow DR;
for (int i = 0; i <>
{
DR = DT.NewRow();
DR["Empid"] = i.ToString();
DR["Empname"] = "Bala";
DR["Empid"] = "Salary";
DR["Empid"] = "Address";
DT.Rows.Add(DR);
}
grView.DataSource = DT;
grView.DataBind();

step 4:

Calling javascript for the cell through.

protected void grView_PreRender(object sender, EventArgs e)
{
foreach (GridViewRow dr in grView.Rows)
{
Label lbl = (Label)dr.FindControl("lblID");
lbl.ID = "lblID";
lbl.Attributes.Add("onclick", "javascript:lbltoTxt(this)");
TextBox txt = (TextBox)dr.FindControl("txtID");
txt.Attributes.Add("onblur", "javascript:txttoLbl(this)");
}
}

Step 5:
<script language="javascript">
function lbltoTxt(obj)
{
var divtxtObj = document.getElementById(obj.id.replace('lblID', 'txtDiv'));
var txtObj = document.getElementById(obj.id.replace('lblID', 'txtID'));
if (divtxtObj != null)
{
if (divtxtObj.style.display == "none")
{
divtxtObj.style.display = "block";
txtObj.focus();
}
}
var divlblObj = document.getElementById(obj.id.replace('lblID', 'lblDiv'));
if (divlblObj != null)
{
if (divlblObj != null)
{
divlblObj.style.display = "none"
}
}
}
function txttoLbl(obj) {
var divlblObj = document.getElementById(obj.id.replace('txtID', 'lblDiv'));
var lblObj = document.getElementById(obj.id.replace('txtID', 'lblID'));
if (divlblObj != null) {
if (divlblObj.style.display == "none") {
divlblObj.style.display = "block";
lblObj.innerText = obj.value;
}
}
var divtxtObj = document.getElementById(obj.id.replace('txtID', 'txtDiv'));
if (divtxtObj != null) {
if (divtxtObj != null) {
divtxtObj.style.display = "none"
}
}
}
</script>