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 76 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, 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

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Rad Textbox under Rad Tab Strip with Empty Message Style

2 Answers, 1 is accepted