Edit Update ASP.Net GridView cell value on Click using jQuery

Last Reply 8 days ago By pandeyism

Posted 8 days ago

I have a GridView that I want to update one field of it just by click on that field and type my value. I don't want to click on the edit button for update my data. I just want that click on the field and then update my data.

this is my grid, and I want to insert the value on Mark field just by clicking on it.

            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
                    <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                    <asp:BoundField DataField="StudentId" HeaderText="StudentId" SortExpression="StudentId" />
                    <asp:BoundField DataField="Mark" HeaderText="Mark" SortExpression="Mark" />
                </Columns>
            </asp:GridView>

how can I do this?

You are viewing reply posted by: pandeyism 8 days ago.
Posted 8 days ago

Hi dorsa,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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*=GridView1] tr td').on('click', function () {
                if ($(this).index() > 1) {
                    $('[id*=GridView1] tr td').each(function () {
                        if ($(this).index() > 1) {
                            $(this).find('span').show();
                            $(this).find('input[type=text]').hide();
                            $(this).find('span').html($(this).find('input[type=text]').val());
                        }
                    });
                    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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                <asp:BoundField DataField="StudentId" HeaderText="StudentId" SortExpression="StudentId" />
                <asp:TemplateField HeaderText="Mark">
                    <ItemTemplate>
                        <asp:Label ID="lbl_Text1" runat="server" Text='<%# Bind("Mark") %>'></asp:Label>
                        <asp:TextBox ID="txt_Text1" runat="server" Text='<%# Bind("Mark") %>' CssClass="hideControl"
                            AutoPostBack="true" OnTextChanged="Change"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.Data.SqlClient
Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM UpdateTable", con))
        {
            using (SqlDataAdapter da = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                da.Fill(dt);
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }
    }
}

protected void Change(object sender, EventArgs e)
{
    TextBox txtMark = sender as TextBox;
    GridViewRow row = (GridViewRow)txtMark.NamingContainer;
    string query = "UPDATE UpdateTable SET Mark = @Mark WHERE Id = @Id";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            cmd.Parameters.AddWithValue("@Mark", txtMark.Text);
            cmd.Parameters.AddWithValue("@Id", row.Cells[0].Text);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
    BindGrid();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        BindGrid()
    End If
End Sub

Private Sub BindGrid()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("SELECT * FROM UpdateTable", con)
            Using da As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim dt As DataTable = New DataTable()
                da.Fill(dt)
                GridView1.DataSource = dt
                GridView1.DataBind()
            End Using
        End Using
    End Using
End Sub

Protected Sub Change(ByVal sender As Object, ByVal e As EventArgs)
    Dim txtMark As TextBox = TryCast(sender, TextBox)
    Dim row As GridViewRow = CType(txtMark.NamingContainer, GridViewRow)
    Dim query As String = "UPDATE UpdateTable SET Mark = @Mark WHERE Id = @Id"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(query, con)
            cmd.Parameters.AddWithValue("@Mark", txtMark.Text)
            cmd.Parameters.AddWithValue("@Id", row.Cells(0).Text)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using

    BindGrid()
End Sub

Screenshot