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

PanelBar and Expanding textbox

5 Answers 304 Views

PanelBar

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

OfficeBooks Team asked on 02 Sep 2011, 11:29 PM

Hello,
I have a problem with a expandable textbox and RadPanelBar.
I'm using jQuery () and an elastic library to make the expanded effect in the textbox:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="Scripts/jquery.elastic.source.js" type="text/javascript"></script>

Elastic source is: http://unwrongest.com/projects/elastic/

Everything is fine until I move the textbox inside an PanelItem content and start writing, everytime I press enter to move to a new line in the text box my cursor is gone, it seems to go to the default button of the form and the component loses focus.
Have to click in text fields to continue typing.
It's happening with IE 8 or inferior versions. (not with IE 9)
Looks like there is an internal event when RadPanelItem growth his vertical size that makes the cursor move from his actual position to other place, I can see the cursor position after texbox growth but then just go to somewhere else.
As you will see, the textbox outside panel item works fine and the one inside the collapsed panel item doesn't work.
Do you have any suggestion or workaround to fix this in IE 8 or bellow?
Thanks so much in advanced for your help.

Here is the code of my test web page:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testcontrol.aspx.vb" Inherits="mytestproject.testcontrol" %>

<!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>Test</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="Scripts/jquery.elastic.source.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">

function OnClientLoad(sender, args) {

var txt1 = '<%=txtExtDesc.ClientID %>';

var txt2 = '<%=txtNotes.ClientID %>';

$('#' + txt1).elastic();

$('#' + txt2).elastic();

}

</script>

</telerik:RadScriptBlock>

<telerik:RadScriptManager CdnSettings-TelerikCdn="Enabled" EnablePageMethods="true"

ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div style="margin-left: 25px; margin-right: 25px; margin-top: 10px; margin-bottom: 10px;width:100%;text-align: center;">

<div style="width:925px;">

<fieldset style="margin: 10px 25% 10px 25%; position: relative; width: 50%; padding-bottom: 10px;">

<legend>Options:</legend>

<span style="text-align: center">

<asp:Button ID="btnUpdateItem" runat="server" CommandName="Update" CssClass="rgPagerButton" Text="Update" CausesValidation="true" ValidationGroup="basicValidation" />

<asp:Button ID="btnInsertItem" runat="server" CommandName="Insert" CssClass="rgPagerButton" Text="Insert" CausesValidation="true" ValidationGroup="basicValidation" />

</span>

</fieldset>

<div style="width: 100%; vertical-align: middle; text-align: left">

<asp:ValidationSummary runat="server" ID="validationSummary" ShowMessageBox="True" ValidationGroup="basicValidation" />

</div>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%">

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" Skin="Web20" OnClientLoad="OnClientLoad">

<Items>

<telerik:RadPanelItem runat="server" Selected="True" Expanded="True" Text=" .- Basic Information" ToolTip="Basic information about the item">

<Items>

<telerik:RadPanelItem Value="basicInfo" runat="server">

<ContentTemplate>

<div class="text" style="background-color: #edf9fe; padding-left: 50px;">

<ul class="formList" id="basicInfo">

<li>

Some controls

</li>

<li class="lastListItem">

Some controls

</li>

</ul>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Selected="false" Expanded="false" Text=" .- Other Details" ToolTip="Other details about the item">

<Items>

<telerik:RadPanelItem Value="otherdetInfo" runat="server">

<ContentTemplate>

<div class="text" style="background-color: #edf9fe; padding-left: 50px;">

<ul class="formList" id="otherdetInfo" >

<li>

<asp:Label CssClass="labelField" runat="server" ID="lblExtDesc" AssociatedControlID="txtExtDesc">Inside doesn't work:</asp:Label>

<asp:TextBox ID="txtExtDesc" runat="server" Rows="3" Columns="50" MaxLength="4999" TextMode="MultiLine" Text=""></asp:TextBox>

</li>

</ul>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

<asp:Label CssClass="labelField" runat="server" ID="lblIntNote" AssociatedControlID="txtNotes">This one works:</asp:Label>

<asp:TextBox ID="txtNotes" runat="server" Rows="3" Columns="50" MaxLength="255" TextMode="MultiLine" Text=""></asp:TextBox>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

5 Answers, 1 is accepted

answered on 08 Sep 2011, 12:01 PM

Hello Gregg,

I tested your scenario and I was able to reproduce the issue that you encounter. I also tried to replace the ContentTemplate with a simple ItemTemplate and that solved the issue from my side. I also needed to make some changes in the OnClientLoad client-side function so I could find the textbox that is needed. Here is the altered code snippet:

function OnClientLoad(sender, args) {

var panelbar = $find("<%= RadPanelBar1.ClientID %>");

var item = panelbar.findItemByValue("otherdetInfo");

var txt1 = item.findControl("txtExtDesc");

var txt2 = '<%=txtNotes.ClientID %>';

$('#' + txt1).elastic();

$('#' + txt2).elastic();

}

I also tested it in IE8 and IE9 and works fine from my side. Please give it a try and let me know if this is a suitable solution for you.

All the best,
Kate
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 12 Sep 2011, 04:56 PM

Hello Kate, I was unable to fix the problem, I've changed the ContentTemplate to ItemTemplate and the new java script doesn't found the control, but I changed the ClientIdMode of text control to Static and write the control name directly, but still is happening the same.

Maybe is because I'm using the Telerik.Web.UI dll version 2011.1.519.40, I can't upgrade at this moment because I need to fix some problems first, so use the new version is not an option.

Here is your suggested code with my mods (Remember it's not working on IE 8 or bellow):

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testcontrol.aspx.vb" Inherits="mytest.testcontrol" %>

<!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 id="Head1" runat="server">

<title>Test</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="Scripts/jquery.elastic.source.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">

function OnClientLoad(sender, args) {

var txt2 = '<%=txtNotes.ClientID %>';

$('#txtExtDesc').elastic();

$('#' + txt2).elastic();

}

</script>

</telerik:RadScriptBlock>

<telerik:RadScriptManager CdnSettings-TelerikCdn="Enabled" EnablePageMethods="true"

ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div style="margin-left: 25px; margin-right: 25px; margin-top: 10px; margin-bottom: 10px;width:100%;text-align: center;">

<div style="width:925px;">

<fieldset style="margin: 10px 25% 10px 25%; position: relative; width: 50%; padding-bottom: 10px;">

<legend>Options:</legend>

<span style="text-align: center">

<asp:Button ID="btnUpdateItem" runat="server" CommandName="Update" CssClass="rgPagerButton" Text="Update" CausesValidation="true" ValidationGroup="basicValidation" />

<asp:Button ID="btnInsertItem" runat="server" CommandName="Insert" CssClass="rgPagerButton" Text="Insert" CausesValidation="true" ValidationGroup="basicValidation" />

</span>

</fieldset>

<div style="width: 100%; vertical-align: middle; text-align: left">

<asp:ValidationSummary runat="server" ID="validationSummary" ShowMessageBox="True" ValidationGroup="basicValidation" />

</div>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%">

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" Skin="Web20" OnClientLoad="OnClientLoad">

<Items>

<telerik:RadPanelItem runat="server" Selected="True" Expanded="True" Text=" .- Basic Information" ToolTip="Basic information about the item">

<Items>

<telerik:RadPanelItem Value="basicInfo" runat="server">

<ContentTemplate>

<div class="text" style="background-color: #edf9fe; padding-left: 50px;">

<ul class="formList" id="basicInfo">

<li>

Some controls

</li>

<li class="lastListItem">

Some controls

</li>

</ul>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Selected="false" Expanded="false" Text=" .- Other Details" ToolTip="Other details about the item">

<Items>

<telerik:RadPanelItem Value="otherdetInfo" runat="server">

<ItemTemplate>

<div class="text" style="background-color: #edf9fe; padding-left: 50px;">

<ul class="formList" id="otherdetInfo" >

<li>

<asp:Label CssClass="labelField" runat="server" ID="lblExtDesc" AssociatedControlID="txtExtDesc">Inside doesn't work:</asp:Label>

<asp:TextBox ID="txtExtDesc" ClientIDMode="Static" runat="server" Rows="3" Columns="50" MaxLength="4999" TextMode="MultiLine" Text=""></asp:TextBox>

</li>

</ul>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

<asp:Label CssClass="labelField" runat="server" ID="lblIntNote" AssociatedControlID="txtNotes">This one works:</asp:Label>

<asp:TextBox ID="txtNotes" runat="server" Rows="3" Columns="50" MaxLength="255" TextMode="MultiLine" Text=""></asp:TextBox>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

answered on 15 Sep 2011, 08:18 AM

TextBox.png

PanelBarElasticTextBox.zip

Hello Gregg,

Here I have attached the page that I used for testing and an image of what I get in IE7 when using the code provided. Please take a look at it and let me know if it is acceptable for your scenario or am I missing something.

Regards,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal

answered on 15 Sep 2011, 02:16 PM

Hi Kate, I'm using your example file, but there is a main issue:

If you debug the javascript code you will see that this line is returning null

var txt1 = item.findControl("txtExtDesc");

txt1 is null and it never get the expanding javascript procedure executed in to it.
That is why you are looking the textbox inside with the normal behavior, it's not expanding like the one outside. (same behavior in your picture attached).

What we need is that the box inside have the same behavior that the box outside the panel (expanding while writing).

Maybe you can find a workaround to fix this, thanks.

answered on 21 Sep 2011, 03:13 PM

Hi Officebooks Team,

Indeed, the control can not be found using the approach that I previously suggested because the TextBox renders with a different ID. So, one way we could think of as a workaround to the issue (when using the ContentTemplate and the code from your very first post) is to use jQuery and keypress to set the focus to the TextBox when the Enter key is pressed - first you need to check if the enter key is pressed and if so, use focus() and set focus to the TextBox.

Kind regards,
Kate
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