Friday, December 30, 2011

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-



GridView

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-



Hiding Control in GridView


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

6 comments:

  1. Thank you for this post.
    When i try it i get microsoft JScript runtime error:'$'
    is undefined.
    I tried to code document.getElementById instead of '$'.
    what i got was:
    microsoft JScript runtime error:Unable to get value of the property 'hide': object is null or undefined.
    many thanks

    ReplyDelete
  2. Hi,

    For this you need to add jquery plugin in your page, for steps follow this article-

    http://steptodotnet.blogspot.in/2011/12/jquery-popup-window-in-aspnet.html

    Try this and let me know;

    ReplyDelete
  3. thanks for this post...
    It is really helpful and working great.
    Could you tell me how to read text of linkbutton/label by using this code ???
    Thanks in advance.

    ReplyDelete
    Replies
    1. Thanks for appreciation.

      To get Control value check update section of this article just now I have added code for it.

      Try this and let me know.

      Delete