Hi shardul,
I have created sample. Here you can only edit Name,Address field.
For update refer the below link.
HTML
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Label ID="lblId" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
<asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' CssClass="hide"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
<asp:TextBox ID="txtAddress" runat="server" Text='<%# Eval("Address") %>' CssClass="hide"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button Text="Update" runat="server" OnClick="Update" />
</div>
<div>
<style type="text/css">
.hide
{
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1] tr td').on('click', function () {
$('[id*=GridView1] tr td').each(function () {
$(this).find('span').show();
$(this).find('input[type=text]').hide();
});
var val = $(this).find('span').html();
$(this).find('span').hide();
$(this).find('input[type=text]').val(val);
$(this).find('input[type=text]').show();
$(this).find('input[type=text]').focus();
});
});
</script>
</div>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BindGrid();
}
}
protected void Update(object sender, EventArgs e)
{
// code for update the record.
}
private void BindGrid()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3]
{
new DataColumn("Id"),
new DataColumn("Name"),
new DataColumn("Address")
});
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}
Screenshot
