RadTextBox disappears

3 posts, 0 answers
  1. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 16 May 2014 Link to this post

    Hi,

    I'm having some challenges hiding/showing a RadTextBox.
    The set_visible client side method does not seem to work, so I'm using the following:
      document.getElementById('<%= txtURL.ClientID %>').style.display = 'block';

    This makes the box visible, but as soon as I move the mouse over the field, it disappears!
    Also, once the box is visible if I check another radio button like File, and then come back and check Link, the box does not reappear.
    It seems that it only shows the first time I check the Link button.
    Happening in IE, FF and Chrome.

    Here's my complete scenario (see attached screenshot).
    I have 3 radio buttons all of which have an OnClientCheckedChanged event defined.
    These event handlers hide/show relevant controls.
    I check the None radio button and hide all of the related labels/controls in the Page_Load event (code behind).

    Here's the relevant code snippets.

    Code Behind:
    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                lblURL.Style.Add("display", "none");
                txtURL.Style.Add("display", "none");
                lblUpload.Style.Add("display", "none");
                uplAttachment.Style.Add("display", "none");
                lblFileName.Style.Add("display", "none");
                lblFileNameValue.Style.Add("display", "none");
     
                optAttachment.Checked = false;
                optURL.Checked = false;
                optNone.Checked = true;
     
                taskID = Request.QueryString["taskID"].ToString();
                txtTaskID.Text = taskID;
            }
        }

    RadTextBox declaration:
    <tr>
                            <td class="templateLabel">
                                <asp:Label ID="lblURL" ToolTip="Specify a link (must start with http:// or https://)"
                                    runat="server" Text="Link:"></asp:Label>
                                <asp:Label ID="lblFileName" ToolTip="File Name of last upload"
                                    runat="server" Text="File Name:"></asp:Label>
                            </td>
                            <td class="templateValue">
                                <telerik:RadTextBox ID="txtURL" MaxLength="300" runat="server" EmptyMessage="Specify a link (must start with http:// or https://)"
                                    Width="450px"
                                    Enabled='<%# (Boolean)Session["EditProcess"] %>'>
                                </telerik:RadTextBox>
                                <asp:Label ID="lblFileNameValue" Text="File Name goes here" ToolTip="File Name of last upload"
                                    runat="server"></asp:Label>
                            </td>
                        </tr>

    Radio Buttons:
    <tr>
        <td class="templateLabel">
             <asp:Label ID="lblAttachmentType" runat="server" Text="Reference:"></asp:Label>
        </td>
        <td class="templateValue">
            <telerik:RadButton runat="server" AutoPostBack="False" Enabled='<%# (Boolean)Session["EditProcess"] %>' ID="optAttachment" ButtonType="ToggleButton" ToggleType="Radio" GroupName="urlOrAtt" Text="File" Value="attachment" OnClientCheckedChanged="optAttachment_CheckedChanged"></telerik:RadButton>
            <telerik:RadButton runat="server" AutoPostBack="False" Enabled='<%# (Boolean)Session["EditProcess"] %>' ID="optURL" ButtonType="ToggleButton" ToggleType="Radio" GroupName="urlOrAtt" Text="Link" Value="url" OnClientCheckedChanged="optUrL_CheckedChanged"></telerik:RadButton>
            <telerik:RadButton runat="server" AutoPostBack="False" Enabled='<%# (Boolean)Session["EditProcess"] %>' ID="optNone" ButtonType="ToggleButton" ToggleType="Radio" GroupName="urlOrAtt" Text="None" Value="none" OnClientCheckedChanged="optNone_CheckedChanged"></telerik:RadButton>
        </td>
    </tr>

    OnClientCheckedChanged Handlers:
    function optUrL_CheckedChanged(sender, eventArgs) {
                if (!g_rowSelected) {
                    if (sender.get_checked()) {
                        alert('Link selected');
                        //var txtURL = $find("<%=txtURL.ClientID%>");
                        //txtURL.clear();
                        //txtURL.set_visible(true);
                        document.getElementById('<%= txtURL.ClientID %>').style.display = 'block';
                        document.getElementById('<%= lblURL.ClientID %>').style.display = 'block';
                        $find("<%=uplAttachment.ClientID%>").set_visible(false);
                        document.getElementById('<%= lblUpload.ClientID %>').style.display = 'none';
                        document.getElementById('<%= lblFileName.ClientID %>').style.display = 'none';
                        document.getElementById('<%= lblFileNameValue.ClientID %>').style.display = 'none';
                    }
                    EnableSave();
                }
            }
     
            function optAttachment_CheckedChanged(sender, eventArgs) {
                if (!g_rowSelected) {
                    if (sender.get_checked()) {
                        alert('File selected');
                        var txtURL = $find("<%=txtURL.ClientID%>");
                        txtURL.clear();
                        txtURL.set_visible(false);
                        document.getElementById('<%= lblURL.ClientID %>').style.display = 'none';
                        $find("<%=uplAttachment.ClientID%>").set_visible(true);
                        document.getElementById('<%= lblUpload.ClientID %>').style.display = 'block';
                        document.getElementById('<%= lblFileName.ClientID %>').style.display = 'block';
                        document.getElementById('<%= lblFileNameValue.ClientID %>').style.display = 'block';
                    }
                    EnableSave();
                }
            }
     
            function optNone_CheckedChanged(sender, eventArgs) {
                if (!g_rowSelected) {
                    if (sender.get_checked()) {
                        alert('None selected');
                        var txtURL = $find("<%=txtURL.ClientID%>");
                        txtURL.clear();
                        txtURL.set_visible(false);
                        document.getElementById('<%= lblURL.ClientID %>').style.display = 'none';
                        $find("<%=uplAttachment.ClientID%>").set_visible(false);
                        document.getElementById('<%= lblUpload.ClientID %>').style.display = 'none';
                        document.getElementById('<%= lblFileName.ClientID %>').style.display = 'none';
                        document.getElementById('<%= lblFileNameValue.ClientID %>').style.display = 'none';
                    }
                    EnableSave();
                }
            }


    Any thoughts?

    My thanks in advance.

    Jim
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 May 2014 in reply to jlj30 Link to this post

    Hi,

    As a work around please try to attach the 'OnMouseOut','OnBlur','OnFocus' and 'OnMouseOver' event to show the RadTextBox.

    ASPX:
    ...
    <
    telerik:RadTextBox ID="txtURL" MaxLength="300" runat="server" EmptyMessage="Specify a link" Width="450px" ClientEvents-OnMouseOut="Show" ClientEvents-OnBlur="Show" ClientEvents-OnFocus="Show"
        ClientEvents-OnMouseOver="Show">
    ...

    JavaScript:
    function Show(sender, args) {
        sender._element.style.display = "block";
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 19 May 2014 in reply to Shinu Link to this post

    Shinu,

    Thanks for your response.
    I have since placed the associated controls including the RadTextBox within an asp Panel and am showing/hiding that without any issues.
    Not sure what was happening with the textbox, but I'm happy with the solution I now have in place.

    Thanks again for your workaround.  I'll keep it in mind should this problem reappear.

    Jim
Back to Top