ASP.NET GridView Update Gridview on row click

Example

Gridviews are more useful if we can update the view as per our need. Consider a view with a lock/unlock feature in each row. It can be done like:

Add an update panel:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> </asp:UpdatePanel>

Add a ContentTemplate and Trigger inside your UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate>
    </ContentTemplate>

    <Triggers>
    </Triggers>
</asp:UpdatePanel>

Add your GridView inside ContentTemplate:

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
          <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
                            CommandName="togglelock"
                            CommandArgument='<%#Container.DataItemIndex%>'/>
                        
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

</ContentTemplate>

Here we are giving our GridView1 one constant column, for lock button. Mind it, databind has not taken place till now.

Time for DataBind: (on PageLoad)

using (SqlConnection con= new SqlConnection(connectionString)) 
{
            SqlCommand sqlCommand = new SqlCommand(" ... ", con);
            SqlDataReader reader = sqlCommand.ExecuteReader();
            GridView1.DataSource = reader;
            GridView1.DataBind();
}

Lock/Unlock image will be different as per the value of a certain column in your GridView. Consider a case where your table contains an attribute/column titled "Lock Status". Now you wish to (1) hide that column just after DataBind and just before page rendering and (2) Assign different images to each row on basis of that hidden column value i.e. if Lock Status for a row is 0, assign it "lock.jpg", if status is 1 assign it "unlock.jpg". To do this, we'll use OnRowDataBound option of GridView, it mingles with your GridView, just before rendering each row to the HTML page.

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> ...

In cs file

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Cells[8].Visible = false; //hiding the desired column which is column number 8 in this case
            GridView1.HeaderRow.Cells[8].Visible = false; //hiding its header
            ImageButton imgDownload = (ImageButton)e.Row.FindControl("imgDownload");
            string lstate = ((CheckBox)e.Row.Cells[8].Controls[0]).Checked.ToString();
            if (lstate == "True")
            { imgDownload.ImageUrl = "images/lock.png"; }
            else
            {
                imgDownload.ImageUrl = "images/unlock.png";
            }
        }
    }

Now the GridView will be rendered as we want, now let us implement button click events on that Lock/Unlock image button. Understand, that to perform a specific operation on a specific row, a command has to be given to that row and GridView provides us with the same functionality named OnRowCommand.

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
...
</ContentTemplate>

It'll create a function in cs file which takes an object sender and GridViewCommandEventArgs e With e.CommandArgument we can get the index of the row which gave the command Point to be noted here is that, a row can have multiple buttons and the cs code needs to know which button from that row gave the command. So we'll use CommandName

<asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
                            CommandName="togglelock"
                            CommandArgument='<%#Container.DataItemIndex%>'/>

Now in the backend one can distinguish commands from different rows and different buttons.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "togglelock")
        {
            using (SqlConnection con= new SqlConnection(connectionString)) 
            {
               int index = Convert.ToInt32(e.CommandArgument);
               SqlCommand sqlCommand = new SqlCommand(" ... ", con);
               SqlDataReader reader = sqlCommand.ExecuteReader();
               GridView1.DataSource = reader;
               GridView1.DataBind();
            }
        }
    }

Add <asp:PostBackTrigger ControlID="GridView1"/> to the Trigger and it will update the GridView once the DataBind is done.

Use HorizontalAlign="Center" to place the GridView at the center of the page.