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:
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
>
</
div
>
</
form
>
</
body
>
</
html
>