RadNumericTextbox set_visible() not working

[Mansi]

Hi,

I am using radnumeric textboxes inside gridview, and trying to set their visiblity by javascript, but neither set_visible(), nor the .display='', is working.

I tried by taking a simple textbox outside the grid too, but for that also set_visible is not working.

Tried solution provided at http://www.telerik.com/community/forums/aspnet-ajax/input/set-visible-true.aspx, but no help.

Here is my code for the gridview textboxes.

  var   rows = document.getElementById('<%= grdTeeDetails.Clientid%>').rows;
    for(i=1;i <rows.length;i++)
            {
                if(document.getElementById('ctl00_cphMainContent_grdTeeDetails_ctl02_txtLPar' + i) != null)
               {
                    document.getElementById('ctl00_cphMainContent_grdTeeDetails_ctl02_txtLPar' + i).style.visibility='visible';
                    document.getElementById('ctl00_cphMainContent_grdTeeDetails_ctl02_txtLPar' + i).style.display='';
                    txtLPar=$find(document.getElementById('ctl00_cphMainContent_grdTeeDetails_ctl02_txtLPar' + i).id);
                    txtLPar.set_visible(true);
                }
           }

There is not a single javascript bug, but the code is not working.

Thanks,

Mansi Shah

[Mansi]

Is there any solution for this?

[Mansi]

Nobody to reply?

[hari]

Hi Mansi,

I think the problem is with using document.getelementbyid().

Code below works well.
var txtbox = $find("<%= RadTextBox1.ClientID %>");
txtbox.set_visible(false);
 

[Mansi]

Thanks for the reply.
But I have the radnumeric texboxes inside the gridview. How can I use var txtbox = $find("<%= RadTextBox1.ClientID %>"), in that case?

[hari]

Hi,

Could you please post some more of your code.

[Mansi]

 <asp:GridView ID="grdTeeDetails" runat="server" AutoGenerateColumns="False" ShowHeader="true"
        ShowFooter="false" Width="950px">
        <HeaderStyle CssClass="pagelabel" />
        <Columns>
            <asp:TemplateField HeaderText="Hole" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="29px"
                ItemStyle-Width="29px">
                <ItemTemplate>
                    <asp:Label ID="lblHole" runat="server" Text='<%# Eval("Hole") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Par" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="29px"
                ItemStyle-Width="29px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtSinglePar" width="25px" emptymessage="Par">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="SI" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="29px"
                ItemStyle-Width="29px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtSingleSI" width="25px" emptymessage="SI">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="LPar" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="29px"
                ItemStyle-Width="29px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtSingleLPar" width="25px" emptymessage="LPar">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="LSI" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="29px"
                ItemStyle-Width="29px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtSingleLSI" width="25px" emptymessage="LSI"
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="true" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="115px"
                ItemStyle-VerticalAlign="middle" ItemStyle-Width="115px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtTee1" width="25px" emptymessage="Len" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtPar1" width="20px" emptymessage="Par" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtSI1" width="20px" emptymessage="SI" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLPar1" width="20px" emptymessage="LPar" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLSI1" width="20px" emptymessage="LSI" style="display:none">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="true" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="115px"
                ItemStyle-Width="115px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtTee2" width="25px" emptymessage="Len" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtPar2" width="20px" emptymessage="Par" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtSI2" width="20px" emptymessage="SI" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLPar2" width="20px" emptymessage="LPar" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLSI2" width="20px" emptymessage="LSI" style="display:none">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="true" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="115px"
                ItemStyle-Width="115px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtTee3" width="25px" emptymessage="Len" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtPar3" width="20px" emptymessage="Par" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtSI3" width="20px" emptymessage="SI" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLPar3" width="20px" emptymessage="LPar" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLSI3" width="20px" emptymessage="LSI" style="display:none">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="true" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="115px"
                ItemStyle-Width="115px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtTee4" width="25px" emptymessage="Len" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtPar4" width="20px" emptymessage="Par" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtSI4" width="20px" emptymessage="SI" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLPar4" width="20px" emptymessage="LPar" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLSI4" width="20px" emptymessage="LSI" style="display:none">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="true" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="115px"
                ItemStyle-Width="115px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtTee5" width="25px" emptymessage="Len" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtPar5" width="20px" emptymessage="Par" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtSI5" width="20px" emptymessage="SI" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLPar5" width="20px" emptymessage="LPar" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLSI5" width="20px" emptymessage="LSI" style="display:none">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="true" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="115px"
                ItemStyle-Width="115px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtTee6" width="25px" emptymessage="Len" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtPar6" width="20px" emptymessage="Par" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtSI6" width="20px" emptymessage="SI" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLPar6" width="20px" emptymessage="LPar" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLSI6" width="20px" emptymessage="LSI" style="display:none">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ShowHeader="true" ItemStyle-HorizontalAlign="center" HeaderStyle-Width="115px"
                ItemStyle-Width="115px">
                <ItemTemplate>
                    <telerik:radnumerictextbox runat="server" id="txtTee7" width="25px" emptymessage="Len" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtPar7" width="20px" emptymessage="Par" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtSI7" width="20px" emptymessage="SI" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLPar7" width="20px" emptymessage="LPar" style="display:none">
                                            </telerik:radnumerictextbox>
                    <telerik:radnumerictextbox runat="server" id="txtLSI7" width="20px" emptymessage="LSI" style="display:none">
                                            </telerik:radnumerictextbox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

This is the .aspx page code, and on a checkbox click, client side, calling a javascript which has been provided in my first post.
I just need to show/visible all the textboxes in the grid, if the checkbox is checked.

[Dimo]

Hello Mansi,

So your question is how to obtain reference to the RadNumericTextBox client instances when the checkbox is (un)checked. One option is to subscribe the each RadNumericTextBox OnLoad client event and fill in an array, to be used later. Here is a simple demo.

Another option is to construct an Array of the client instances themselves, not just the IDs. In this way you will not need to execute $find() every time.

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>A list of RadNumericTextBoxes. (Un)check the checkbox to toggle their visibility.</p>

<p><asp:CheckBox ID="CheckBox1" runat="server" onclick="toggleVisibility(this)" Checked="true" /></p>

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" ClientEvents-OnLoad="SaveID" />
<br /><br />
<telerik:RadNumericTextBox ID="RadNumericTextBox2" runat="server" ClientEvents-OnLoad="SaveID" />
<br /><br />
<telerik:RadNumericTextBox ID="RadNumericTextBox3" runat="server" ClientEvents-OnLoad="SaveID" />
<br /><br />
<telerik:RadNumericTextBox ID="RadNumericTextBox4" runat="server" ClientEvents-OnLoad="SaveID" />
<br /><br />
<telerik:RadNumericTextBox ID="RadNumericTextBox5" runat="server" ClientEvents-OnLoad="SaveID" />
<br /><br />
<telerik:RadNumericTextBox ID="RadNumericTextBox6" runat="server" ClientEvents-OnLoad="SaveID" />

<script type="text/javascript">

var textboxIDs = new Array();

function SaveID(sender, args)
{
    textboxIDs.push(sender.get_id());
}

function toggleVisibility(checkbox)
{
    if (checkbox.checked)
    {
        setAllVisible(true);
    }
    else
    {
        setAllVisible(false);
    }
}

function setAllVisible(visible)
{
    for (var j = 0; j < textboxIDs.length; j++)
    {
        $find(textboxIDs[j]).set_visible(visible);
    }
}

</script>

</form>
</body>
</html>

Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sonia]

Hello,
I have the same problem as Mansi,

RadNumericTextbox set_visible() does not work.

I have tried the solution proposed by Dimo and it does not work neither.

I have also tried to do that by using styles but with no success:
                RadNumericTextBox1._textBoxElement.style.cssText = show ? "display:inline;" : "display:none;";

[Eyup]

Hi Sonia,

I've created a sample RadGrid web site to test the described behavior and on my side the mentioned method works as expected. Can you please run the attached application and let me know about the result?

Regards,
Eyup
Telerik

 

 

[Sonia]

Hi Eyup,

I have tried your solution and it does not work. When pressing button "Toggle NumBox", nothing happens.
I have tested it on IE11 and Chrome and the behaviour is the same.

Kind regards,
Sonia.

[Eyup]

Hello Sonia,

Can you please verify whether you've tried the sample with the latest release version of the controls?

Looking forward to your reply.

Regards,
Eyup
Telerik