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

Rad Textbox under Rad Tab Strip with Empty Message Style

2 Answers 109 Views

Input

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

mosswgreentea asked on 06 Mar 2012, 07:22 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 Answers, 1 is accepted

answered on 09 Mar 2012, 09:52 AM

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.

answered on 09 Mar 2012, 10:23 AM

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