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

FormDecorator messes up "setSelectionRange"

2 Answers 134 Views

FormDecorator

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

Sam asked on 22 May 2012, 08:34 PM

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:

<%@ 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

2 Answers, 1 is accepted

Accepted

answered on 25 May 2012, 12:15 PM

Hi Sam,

I think the issue under Chrome and Safari is caused by another focusing of element, that's occurring after the textbox has been focused. To avoid this issue I would recommend focusing the textbox with a timeout. The modified code would look like the following:

<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

window.setTimeout(function ()

{

var textLength = text.value.length;

text.focus();

text.setSelectionRange(textLength, textLength);

}, 0);

}

</script>

All the best,
Pero
the Telerik team

Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.