Accessing Controls Inside Gridview Using C#/Jquery

We know that accessing controls from C# code is a much preferred way over accessing from the Client side. Sometimes we are required to access them from the client side too and this is something, which most of us find a little challenging.

First we will start with C#

Suppose, we have a Gridview in our page, as given below-

<asp:GridView ID="grdviewnew" runat="server" CellPadding="10" OnRowDataBound="grd_RowDataBound"
    AutoGenerateColumns="false" OnRowCommand="grd_Rowcommand">
    <Columns>
        <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="lbltext" runat="server" Text='<%#Eval("name") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Mobile">
            <ItemTemplate>
                <div id="divdata" runat="server">
                    <%#Eval("mobile") %>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Action">
            <ItemTemplate>
                <asp:Button ID="btngetval" Text="Update Data" runat="server" CommandName="UpdateData"
                    CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

As you can see, there are three columns in this Gridview. First column has an ASP Label, second has an HTML Div tag and third column contains a button.

Now, we will bind the Gridview with some data. 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("name");
        dt.Columns.Add("mobile");
        DataRow dru = dt.NewRow();
        dru["name"] = "Raj";
        dru["mobile"] = "9999999999";
        dt.Rows.Add(dru);
        dru = dt.NewRow();
        dru["name"] = "Sam";
        dru["mobile"] = "8888888888";
        dt.Rows.Add(dru);
        dru = dt.NewRow();
        dru["name"] = "Ajay";
        dru["mobile"] = "7777777777";
        dt.Rows.Add(dru);
        dru = dt.NewRow();
        dru["name"] = "Nitin";
        dru["mobile"] = "6666666666";
        dt.Rows.Add(dru);
        dt.TableName = "table1";
        grdviewnew.DataSource = dt;
        grdviewnew.DataBind();
    }
}

Now, our Gridview is bound with four rows, as given below-

Now, when we click the button in third column, we need to update the Label in First column as well as Div in second column.

We will achieve this, using “OnRowCommand” event of Gridview.

The code is given below-

protected void grd_Rowcommand(object sender, GridViewCommandEventArgs e)
{
    try
    {
        if (e.CommandName == "UpdateData")
        {
            //Getting the index of Row to update
            int index = Convert.ToInt32(e.CommandArgument);

            //Here we access the Label
            Label lbl = (Label)grdviewnew.Rows[index].FindControl("lbltext");
            lbl.Text = "Updated Label";

            //Here we access the Div
            HtmlGenericControl mydiv = (HtmlGenericControl)grdviewnew.Rows[index].FindControl("divdata");
            mydiv.InnerHtml = "Updated Div";
        }
    }
    catch (Exception ex)
    {
    }
}

You can clearly see and understand from the code, given above, how to access and update Label as well as Div in Gridview. In a similar way, we can access each and every control inside Gridview.

Now on clicking the button, the corresponding row will be updated.

Now we will look how to do the same from client side - using Jquery!

For this, our Gridview will be slightly different, as given below-

<asp:GridView ID="grdviewnew" runat="server" CellPadding="10" OnRowDataBound="grd_RowDataBound"
            AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="lbltext" runat="server" Text='<%#Eval("name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Mobile">
                    <ItemTemplate>
                        <div id="divdata" runat="server">
                            <%#Eval("mobile") %>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Action">
                    <ItemTemplate>
                        <asp:Button ID="btngetval" Text="Update Data" runat="server" OnClientClick="return updatedata(this.id)" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

As you can see, we removed “OnRowCommand” from Gridview as well as removed “CommandName” & “CommandArgument” from the button.

We have also called a JavaScript function "updatedata" in button's "OnClientClick". We now bind Gridview with the data, which will be using similar step, as provided above. Now, our Gridview has four rows and on click of the button, we need to update the Label and Div.

Thus, our JavaScript function "updatedata" is given below-

<script type="text/javascript">
        function updatedata(id) {
            //Splitting the Button ID
            id = id.split('_');

            //Assigning the unique number in the ID to a variable
            val = id[id.length - 1];

            //Updating the Label and Div
            $('#grdviewnew_lbltext_' + val).html('Updated Label');
            $('#grdviewnew_divdata_' + val).html('Updated Div');
            return false;
        }
    </script>

We are passing the "ID" of the button as an argument to this function. Now, the most important thing to note is how we are getting the ID of controls inside the Gridview. We know that even if we give an ID to our controls in Gridview, these ID's will change for the client side on run time. There is a trick to identify those ID's. They all follow a pattern. For each row, the ID of the controls will change only in the last auto increment number.

The screenshot of the Browser's inspect element of our gridview is given below-

As you can see, the ID of the Label in the first row and second row differs only by an auto increment number, i.e starting from 0, it adds +1 to each row.

Also, all the ID will be having a general format - Gridviewid_LabelID_Autoincrementnumber.

We may need to find out ID of the particular control in one row by checking the Browser's inspect element and based on it, we can set it in our function.

Please note that above ID pattern may change with respect to the structure of your page, as you like, if you have a master page or an update panel, the above pattern may change. The last auto-increment number will be there and this is the key!

Now, coming to our JavaScript function, we have already discussed, we are passing ID of the button as an argument. This will help us to find the auto increment number for that particular row by splitting it out from the button ID. Now, we will get ID of our Label and Div. With this, it updates.

That's it! 

Conclusion

In this article, we learned, how to access and update the controls inside Gridview from the Server Side as well as the Client Side!

If you are an expert in jQuery, you can simply make the use of parent, children, siblings, etc. in jQuery for the same purpose. The method, provided above is relatively simple way!

Hope, this article will be helpful.