This is a migrated thread and some comments may be shown as answers.

RadTextBox disappears

2 Answers 49 Views
Input
This is a migrated thread and some comments may be shown as answers.
jlj30
Top achievements
Rank 2
jlj30 asked on 16 May 2014, 07:18 PM
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 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 19 May 2014, 12:50 PM
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.
0
jlj30
Top achievements
Rank 2
answered on 19 May 2014, 02:14 PM
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
Tags
Input
Asked by
jlj30
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 1
jlj30
Top achievements
Rank 2
Share this question
or