I have checked your code as you have used Boostarp so the class name you have use as hide to make TextboxControl hidden please make the class name different so the CssClass name will not conflict with bootstrap hide class.
Just change in two Place it will work fine.
1) Change class name hide with other well name class name so it will not conflict with bootstrap hide class.
2) Same change in CssClass for textbox in Gridview as named with new CssClass hideControl.
Refer the below sample code for your reference.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="row">
<div class="col-sm-12">
<asp:GridView ID="grid1" runat="server" AutoGenerateColumns="False" BorderWidth="1px"
BackColor="#DEBA84" CellPadding="3" CellSpacing="2" BorderStyle="Solid" BorderColor="#DEBA84"
Width="100%">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="False" />
<asp:TemplateField HeaderText="#" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="LblOrderId" runat="server" Text='<%#Bind("id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="اسم الصنف" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="LblOrderName" runat="server" Text='<%#Bind("ic_name1") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="الكمية المطلوبة" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="LblOrderAmount" runat="server" Text='<%#Bind("amount") %>'></asp:Label>
<asp:TextBox ID="txtOrderAmount" runat="server" Text='<%#Eval("amount") %>' CssClass="hideControl"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="الملاحظات" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblNote" runat="server" Text='<%#Bind("notes") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-2">
<asp:Button ID="Button1" Text="Update" class="btn btn-info" runat="server" OnClick="Update"/>
</div>
<div class="col-sm-5">
</div>
</div>
<div>
<style type="text/css">
.hideControl
{
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*=grid1] tr td').on('click', function () {
$('[id*=grid1] 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>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4]{new DataColumn("id",typeof(int)),new DataColumn("ic_name1",typeof(string)), new DataColumn("amount",typeof(int)),new DataColumn("notes",typeof(string))});
dt.Rows.Add(1, "IC Name 1", 10, "Notes 1");
dt.Rows.Add(2, "IC Name 2", 20, "Notes 2");
dt.Rows.Add(3, "IC Name 3", 30, "Notes 3");
dt.Rows.Add(4, "IC Name 4", 40, "Notes 4");
grid1.DataSource = dt;
grid1.DataBind();
}
}
protected void Update(object sender, EventArgs e)
{
// code for update the record.
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("id", typeof(int)), new DataColumn("ic_name1", typeof(string)), new DataColumn("amount", typeof(int)), new DataColumn("notes", typeof(string)) });
foreach (GridViewRow row in grid1.Rows)
{
int id = int.Parse((row.FindControl("LblOrderId") as Label).Text);
string orderName = (row.FindControl("LblOrderName") as Label).Text;
int orderAmount = int.Parse((row.FindControl("txtOrderAmount") as TextBox).Text);
string note = (row.FindControl("lblNote") as Label).Text;
dt.Rows.Add(id, orderName, orderAmount, note);
}
grid1.DataSource = dt;
grid1.DataBind();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn(3) {New DataColumn("id", GetType(Integer)), New DataColumn("ic_name1", GetType(String)), New DataColumn("amount", GetType(Integer)), New DataColumn("notes", GetType(String))})
dt.Rows.Add(1, "IC Name 1", 10, "Notes 1")
dt.Rows.Add(2, "IC Name 2", 20, "Notes 2")
dt.Rows.Add(3, "IC Name 3", 30, "Notes 3")
dt.Rows.Add(4, "IC Name 4", 40, "Notes 4")
grid1.DataSource = dt
grid1.DataBind()
End If
End Sub
Protected Sub Update(ByVal sender As Object, ByVal e As EventArgs)
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn(3) {New DataColumn("id", GetType(Integer)), New DataColumn("ic_name1", GetType(String)), New DataColumn("amount", GetType(Integer)), New DataColumn("notes", GetType(String))})
For Each row As GridViewRow In grid1.Rows
Dim id As Integer = Integer.Parse((TryCast(row.FindControl("LblOrderId"), Label)).Text)
Dim orderName As String = (TryCast(row.FindControl("LblOrderName"), Label)).Text
Dim orderAmount As Integer = Integer.Parse((TryCast(row.FindControl("txtOrderAmount"), TextBox)).Text)
Dim note As String = (TryCast(row.FindControl("lblNote"), Label)).Text
dt.Rows.Add(id, orderName, orderAmount, note)
Next
grid1.DataSource = dt
grid1.DataBind()
End Sub
Screenshot
