0

I would like to hide label and grid view in javascript.
I had succeed to hide images and checkboxes but not yet label and grid view.
How to do it using javascript?

javascript

<script type="text/javascript">
        function txtOnKeyPress(txt1)
         {
            if (txt1 != 'undefined') 
            {
             document.getElementById("GVPaymentDetails").style.display='none';
             document.getElementById('LblValidReg').style.display='none';

            }
         }
    </script>

aspx code

 <asp:TextBox ID="txtRegno" runat="server"  AutoPostBack="false"
            MaxLength="10"  onkeydown="txtOnKeyPress(this);"></asp:TextBox>



 <asp:GridView ID="GVPaymentDetails" runat="server" AutoGenerateColumns="False" 
            BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" 
            CellPadding="4" GridLines="Horizontal" EmptyDataText="No Records Found">
            <RowStyle BackColor="White" ForeColor="#333333" />
            <Columns>
                <asp:BoundField HeaderText="Enquiry id" DataField="EnquiryId" />
                <asp:BoundField HeaderText="Reg Number" DataField="RegistrationNumber" />
                <asp:BoundField HeaderText="Name" DataField="Name" />
            </Columns>
            <FooterStyle BackColor="White" ForeColor="#333333" />
            <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
        </asp:GridView>

 <asp:Label ID="LblValidReg" runat="server"></asp:Label>
Improve this question
5
  • Why don't you wrap them in a div or asp:Panel and hide that? Then you're only dealing with one object instead of two. Commented Sep 18, 2015 at 11:17
  • but im unable to hide any of them @HugoYates Commented Sep 18, 2015 at 11:20
  • i have kept label in div with this id - divValidReg@HugoYates Commented Sep 18, 2015 at 11:24
  • document.getElementById('divValidReg').style.display = "none"; not working Commented Sep 18, 2015 at 11:31
  • Check both control id using browser console. Generated id of both controls may be different so you can not access in java script. use clientId Mode="static" in both controls. Commented Sep 18, 2015 at 11:42

3 Answers 3

Reset to default
1

The ID that you see in the .aspx markup is not the ID that ends up on the client-side page. ASP.NET generates a bunch of stuff in place of this ID. Options you have:

  1. If your javascript is in the same .aspx file, you can embed client side ID into it, like this:

    document.getElementById("<%= GVPaymentDetails.ClientID %>").style.display='none';

  2. If you can give 100% guarantee that there is no other control on the page with the same ID, use static ID mode, which will force ASP.NET to render the exactly same ID on the client side:

    <asp:GridView ID="GVPaymentDetails" ClientIDMode="Static"

    In that case your code will work as is:

    document.getElementById("GVPaymentDetails").style.display='none';

Also as already pointed out in the comments, it will make your live easier to wrap these controls in some kind of a container like Panel or just a div.

Update

In fact if you just put a simple div around them you won't need any of the trickery above:

<div id="GridViewContainerDiv">
    <asp:GridView ID="GVPaymentDetails" ...
    <asp:Label ID="LblValidReg" ...
</div>

document.getElementById("GridViewContainerDiv").style.display='none';
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 
<script type="text/javascript">
    function txtOnKeyPress(txt1)
     {
        if (txt1 != 'undefined') 
        {
         document.getElementById("<%= GVPaymentDetails.ClientId%>").style.display='none';
         document.getElementById('<%= LblValidReg.ClientId%>').style.display='none';

        }
     }
</script>

OR

<asp:GridView ID="GVPaymentDetails" runat="server" AutoGenerateColumns="False" ClientIdMode="static" 


<asp:Label ID="LblValidReg" ClientIdMode="Static" runat="server"></asp:Label>
Improve this answer

1 Comment

Doesn't it look exactly the same as the other answer, only appearing later?
0

use

$("#<%=GVPaymentDetails.ClientID %>").css('display','none');
$("#<%=LblValidReg.ClientID %>").css('display','none');

Insted Of

 document.getElementById("<%= GVPaymentDetails.ClientId%>").style.display='none';
 document.getElementById('<%= LblValidReg.ClientId%>').style.display='none';
Improve this answer

4 Comments

This assumes jquery, which OP might not be using. Besides, what's wrong with style.display='none'?
style.display='none' is ok but,It's may be use Master page i doubt on document.getElementById
Your code works internally exactly the same as document.getElementById. In fact, it calls it. And this is javascript, there are no master/content pages here, at least in ASP.NET sense
friends. i found y its not displaying. if any of the element null . it breaks the code . and further not moving kindly tell how to check null. if null also it should go into next statement

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.