Hi,
I have a javascript function that uses "setSelectionRange" to set the cursor to the end of text inside a textbox after a postback.
Everything works great in FireFox and IE.
In Chrome/Safari, the javascript function runs without errors, but the cursor is not set.
If I remove the FormDecorator from the page, every thing works in Chrome/Safari.
The attached code demonstrates what I'm seeing.
Just connect to different DB.
Test in Chrome/Safari.
Run one test with the RadFormDecorator enabled = true
Test again with enabled = false
If RadFormDecorator enabled = false, both the textbox and grid filter focus correctly in Chrome.
I have a few issues that clients report "only happen in Chrome" that I could never track down...I wonder if the FormDecorator was causing more issues than I realize.
Just to be safe, I disable the FormDecorator if Chrome/Safari is detected, but I lose a lot of the nice skinning the FormDecorator provides.
Any suggestions?
aspx:
codebehind:
I have a javascript function that uses "setSelectionRange" to set the cursor to the end of text inside a textbox after a postback.
Everything works great in FireFox and IE.
In Chrome/Safari, the javascript function runs without errors, but the cursor is not set.
If I remove the FormDecorator from the page, every thing works in Chrome/Safari.
The attached code demonstrates what I'm seeing.
Just connect to different DB.
Test in Chrome/Safari.
Run one test with the RadFormDecorator enabled = true
Test again with enabled = false
If RadFormDecorator enabled = false, both the textbox and grid filter focus correctly in Chrome.
I have a few issues that clients report "only happen in Chrome" that I could never track down...I wonder if the FormDecorator was causing more issues than I realize.
Just to be safe, I disable the FormDecorator if Chrome/Safari is detected, but I lose a lot of the nice skinning the FormDecorator provides.
Any suggestions?
aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadControlsWebAppTesting._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
id
=
"Head1"
runat
=
"server"
>
<
title
></
title
>
<
telerik:RadStyleSheetManager
ID
=
"RadStyleSheetManager1"
runat
=
"server"
/>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManagerMain"
runat
=
"server"
EnablePageMethods
=
"true"
EnableScriptGlobalization
=
"true"
>
<
Scripts
>
<
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
>
<
telerik:RadSkinManager
ID
=
"RadSkinManagerMain"
runat
=
"server"
ShowChooser
=
"false"
>
<
TargetControls
>
<
telerik:TargetControl
ControlsToApplySkin
=
"NotSet"
/>
</
TargetControls
>
</
telerik:RadSkinManager
>
<
telerik:RadFormDecorator
ID
=
"RadFormDecoratorMain"
runat
=
"server"
DecoratedControls
=
"Buttons"
Skin
=
"Web20"
Enabled
=
"true"
EnableRoundedCorners
=
"false"
EnableEmbeddedBaseStylesheet
=
"true"
EnableAjaxSkinRendering
=
"true"
EnableEmbeddedScripts
=
"true"
EnableEmbeddedSkins
=
"true"
/>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManagerMain"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanelMain"
runat
=
"server"
BackColor
=
"Transparent"
>
</
telerik:RadAjaxLoadingPanel
>
<
script
type
=
"text/javascript"
>
//Put your JavaScript code here.
function SetCursorToTextEnd(textControlID) {
var text = document.getElementById(textControlID);
if (text != null && text.value.length > 0) {
if (text.createTextRange) {
//IE
var range = text.createTextRange();
range.moveStart('character', text.value.length);
range.collapse();
range.select();
}
else if (text.setSelectionRange) {
//FF, web-kit
var textLength = text.value.length;
text.focus();
text.setSelectionRange(textLength, textLength);
}
}
}
</
script
>
<
div
>
<
asp:TextBox
ID
=
"TextBox1"
runat
=
"server"
></
asp:TextBox
>
<
br
/>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Button"
/>
<
hr
/>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AllowMultiRowSelection
=
"False"
AllowPaging
=
"False"
PageSize
=
"20"
AllowFilteringByColumn
=
"true"
AllowSorting
=
"False"
ShowStatusBar
=
"false"
ShowFooter
=
"false"
ShowHeader
=
"True"
AutoGenerateColumns
=
"False"
GridLines
=
"None"
EnableEmbeddedSkins
=
"True"
GroupingSettings-CaseSensitive
=
"false"
Width
=
"99%"
DataSourceID
=
"SqlDataSource1"
>
<
PagerStyle
Mode
=
"NumericPages"
Visible
=
"False"
AlwaysVisible
=
"False"
Position
=
"Bottom"
Height
=
"0px"
></
PagerStyle
>
<
StatusBarSettings
LoadingText
=
"Loading Data"
ReadyText
=
"Data Loaded."
/>
<
ClientSettings
EnablePostBackOnRowClick
=
"False"
>
<
Scrolling
AllowScroll
=
"true"
EnableVirtualScrollPaging
=
"False"
ScrollHeight
=
"250"
SaveScrollPosition
=
"False"
/>
<
Selecting
AllowRowSelect
=
"True"
EnableDragToSelectRows
=
"True"
/>
<
ClientEvents
/>
</
ClientSettings
>
<
MasterTableView
AutoGenerateColumns
=
"False"
DataSourceID
=
"SqlDataSource1"
TableLayout
=
"auto"
>
<
RowIndicatorColumn
Visible
=
"True"
FilterControlAltText
=
"Filter RowIndicator column"
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
RowIndicatorColumn
>
<
ExpandCollapseColumn
Visible
=
"True"
FilterControlAltText
=
"Filter ExpandColumn column"
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
ExpandCollapseColumn
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"EMP_LNAME"
FilterControlAltText
=
"Filter EMP_LNAME column"
UniqueName
=
"GridBoundColumnDescription"
FilterControlWidth
=
"100%"
HeaderText
=
"Search List"
CurrentFilterFunction
=
"Contains"
AutoPostBackOnFilter
=
"false"
ShowFilterIcon
=
"False"
FilterDelay
=
"700"
>
</
telerik:GridBoundColumn
>
</
Columns
>
<
ExpandCollapseColumn
Visible
=
"False"
>
</
ExpandCollapseColumn
>
<
RowIndicatorColumn
Visible
=
"False"
>
</
RowIndicatorColumn
>
</
MasterTableView
>
</
telerik:RadGrid
>
<
asp:SqlDataSource
ID
=
"SqlDataSource1"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:ADVAN65010ConnectionString %>"
SelectCommand="SELECT [EMP_LNAME] FROM [EMPLOYEE]"></
asp:SqlDataSource
>
</
div
>
</
form
>
</
body
>
</
html
>
codebehind:
Imports
Telerik.Web.UI
Partial
Class
_Default
Inherits
System.Web.UI.Page
Private
Sub
Button1_Click(sender
As
Object
, e
As
System.EventArgs)
Handles
Button1.Click
Me
.Page.ClientScript.RegisterStartupScript(
Me
.
GetType
(),
"focus_script"
,
"SetCursorToTextEnd('"
&
Me
.TextBox1.ClientID &
"');"
,
True
)
End
Sub
Private
Sub
RadGrid1_ItemCommand(sender
As
Object
, e
As
Telerik.Web.UI.GridCommandEventArgs)
Handles
RadGrid1.ItemCommand
Select
Case
e.CommandName
Case
"Filter"
Dim
filteringItem
As
GridFilteringItem =
DirectCast
(RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)(0), GridFilteringItem)
Dim
box
As
TextBox = TryCast(filteringItem(
"GridBoundColumnDescription"
).Controls(0), TextBox)
Me
.Page.ClientScript.RegisterStartupScript(
Me
.
GetType
(),
"focus_script"
,
"SetCursorToTextEnd('"
& box.ClientID &
"');"
,
True
)
End
Select
End
Sub
Private
Sub
RadGrid1_PreRender(sender
As
Object
, e
As
System.EventArgs)
Handles
RadGrid1.PreRender
If
Not
Me
.IsPostBack
And
Not
Me
.IsCallback
Then
Dim
filteringItem
As
GridFilteringItem =
DirectCast
(RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)(0), GridFilteringItem)
Dim
box
As
TextBox = TryCast(filteringItem(
"GridBoundColumnDescription"
).Controls(0), TextBox)
With
box
.Focus()
End
With
End
If
End
Sub
End
Class