Rad Textbox under Rad Tab Strip with Empty Message Style

3 posts, 0 answers
  1. mosswgreentea
    mosswgreentea avatar
    10 posts
    Member since:
    Dec 2009

    Posted 06 Mar 2012 Link to this post

    We use the RAD Tab strip to divide the form under various sections and noticed that when we try to set a textbox value of one tab with value entered in another tab, we get an overlapping style in the target textbox.

    This happens if the target textbox has a empty message set. I've attached the markup code below:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <script type="text/javascript" id="telerikClientEvents1">
    //<![CDATA[
     
            function txtTab1Title_ClientOnBlur(sender, args) {
                //Add JavaScript handler code here
                var ctrl1 = $("input[id$='txtTab2Title']");
                var txtTab2Title = $find(ctrl1.get(0).id);
                txtTab2Title.set_value(sender.get_value());
            }
     
            function txtTab2Title_ClientOnBlur(sender, args) {
                //Add JavaScript handler code here
                var ctrl1 = $("input[id$='txtTab1Title']");
                var txtTab1Title = $find(ctrl1.get(0).id);
                txtTab1Title.set_value(sender.get_value());
            }
    //]]>
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.       
        </script>
        <div class="MasterContainer">
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
                SelectedIndex="0" Skin="Hay" Width="100%">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Tab1" Value="Tab1" Owner="RadTabStrip1"
                        Selected="True" PageViewID="rpvTab1" />
                    <telerik:RadTab runat="server" Text="Tab2" Value="Tab2" Owner="RadTabStrip1" PageViewID="rpvTab2" />
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
                <telerik:RadPageView ID="rpvTab1" runat="server" Selected="true" Width="100%">
                    <h4>
                        Tab1 Tab Contents</h4>
                    <div class="FormContainer">
                        <telerik:RadTextBox ID="txtTab1Title" runat="server" EmptyMessage="Tab1 Title"
                            Label="Title:" Width="400px">
                            <ClientEvents OnBlur="txtTab1Title_ClientOnBlur" />
                        </telerik:RadTextBox>
                    </div>
                </telerik:RadPageView>
                <telerik:RadPageView ID="rpvTab2" runat="server" Width="100%">
                    <h4>
                        Tab2 Tab Contents</h4>
                    <div class="FormContainer">
                        <telerik:RadTextBox ID="txtTab2Title" runat="server" EmptyMessage="Tab2 Tab Title"
                            Label="Title:" Width="400px">
                            <ClientEvents OnBlur="txtTab2Title_ClientOnBlur" />
                        </telerik:RadTextBox>
                    </div>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        </form>
    </body>
    </html>


  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 09 Mar 2012 Link to this post

    Hi mosswgreentea,

    Thank you for contacting us.

    I can confirm that this is a bug with the set_value of RadTextBox since it does not change correctly the styles of the control. I am updating your Telerik Points  as appreciation for reporting us this bug. We will try our best to fix this for the next service pack and if possible even for the internal build next week.

    Kind regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 09 Mar 2012 Link to this post

    Hello mosswgreentea,

    Currently you could add this script after your RadScriptManager for a workaround:
    <script type="text/javascript">
      Telerik.Web.UI.RadTextBox.prototype._updateDisplayElementStyle = function ()
      {
        if (this.__isEmptyMessage() && !this._focused)
        {
          Telerik.Web.UI.RadTextBox.callBaseMethod(this, "_updateDisplayElementStyle");
        }
        else if (this._displayElement)
        {
          this._displayElement.style.display = "none";
        }
      }
    </script>


    Regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top