Accessing GridView controls using Client side code/ Jquery

Accessing GridView controls from server side is such a easy task, but when we access GridView controls from client side then generally we face problem, because if we use getElementById() to get GridView controls then it creates complexity.

In this article, I am going to explain – How you can access GridView controls from client side?  By using this method not only you can access single control but also you can access more than one control with single line of code.

In this example, I am using Jquery. Here I am accessing GridView control (LinkButton) and hiding/showing that control from client side.

First, I have defined one blank CSS class - clsFind

<style type ="text/css">
    .clsFind
    {
    }
</style>

Note-  

Using this CSS class only, we will access GridView Control.

Now I have defined these two functions to get GridView control (LinkButton) and after that I am hiding/ showing that control.

<script type ="text/javascript" >
    //Function to Hide control
    function HideControl() {
        var con = $(".clsFind");
        con.hide();
        return false;
    }

    //Function to Show control
    function ShowControl() {
        var con = $(".clsFind");
        con.show();
        return false;
    }
    </script>

Note-
 
HideControl function will be called when you will press Hide Control Button.
ShowControl function will be called when you will press Show Control Button.

Now I have designed GridView like this-

Here is .aspx code-
 
<asp:GridView ID="GrdEmpData" runat="server" AutoGenerateColumns="false"
                onrowdeleting="GrdEmpData_RowDeleting" Width ="50%">
                <Columns>
                    <asp:TemplateField HeaderText="EmpId" ItemStyle-HorizontalAlign  ="Left"  ItemStyle-Width ="20%">
                        <ItemTemplate>
                            <asp:Label ID="lblEmpId" runat="server" Text='<% # Eval("EmpId") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="EmpName" ItemStyle-HorizontalAlign  ="Left"  ItemStyle-Width ="30%">
                        <ItemTemplate>
                            <asp:Label ID="lblEmpName" runat="server" Text='<% # Eval("EmpName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="DeptId" ItemStyle-HorizontalAlign  ="Left"  ItemStyle-Width ="30%">
                        <ItemTemplate>
                            <asp:Label ID="lblDeptName" runat="server" Text='<% # Eval("DeptName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField  HeaderText="Delete" ItemStyle-HorizontalAlign  ="Left"  ItemStyle-Width ="20%">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" CommandName ="delete" CssClass  ="clsFind"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <br />
        <asp:Button ID="btnShowControl" runat="server" Text="Show Delete Button" OnClientClick ="return ShowControl();"/>
        <asp:Button ID="btnHideControl" runat="server" Text="Hide Delete Button" OnClientClick="return HideControl();" />

Now done, when you will press Hide Control Button then delete LinkButton will be disappeared, and your GridView will be like this-

To show LinkButton again, you can press Show Control Button.

Note-
 
The main advantage of this approach is that, you can access more than one controls using single line of code. For that,  you have to code like this-

 <asp:LinkButton ID="lnkDelete" runat="server" Text="Delete" CommandName ="delete" CssClass  ="clsFind"></asp:LinkButton>

 <asp:LinkButton ID="lnkShow" runat="server" Text="show"  CssClass ="clsFind"></asp:LinkButton>
 
Means, you have to give same CSS class for controls. Now when you will use this statement –

 var con = $(".clsFind");

Then using "con" object only, you can set properties for lnkDelete and lnkEdit  LinkButtons. Like this-

  con.hide();

This approach is useful when we have multiple controls and we want to set same type of values for their properties.


Update  :

To get control value :


Suppose you have LinkButton inside GridView with Text "Delete"

<asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20%">
  <ItemTemplate>
      <asp:LinkButton ID="lnkDelete" runat="server" Text="Delete"  CommandName="delete"  CssClass="clsFind"></asp:LinkButton>
   </ItemTemplate>
</asp:TemplateField>

Now to get control value, We have one button outside of the GridVIew

 <asp:Button ID="btnGetValue" runat="server" Text="Get Value" OnClientClick="return GetValue();" />


Use these code to get value-

 <script type="text/javascript">

    //Function to get control value

        function GetValue() {
            var con = $(".clsFind");
           
  // Way 1:To get combine text of all link button in GridView
            var combineText = con.text()
            alert(combineText);


  //Way 2: To get text of any particular link button in GridView (for first row)
            var firstRowLinkButtonText1 = con[0].innerHTML
            alert(firstRowLinkButtonText );


  //Way 3: To get text of any particular link button in GridView (for first row)

            var firstRowLinkButtonText2 = $('#GrdEmpData tr>td>a[id*=lnkDelete]')[0].innerHTML;
            alert(firstRowLinkButtonText2);
 
            return false;
        }
   
    </script>



Try these way and let me know.

 

Thanks