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

FormDecorator messes up "setSelectionRange"

2 Answers 55 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
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">
<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

Sort by
0
Accepted
Pero
Telerik team
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.
0
Sam
Top achievements
Rank 1
answered on 15 Jun 2012, 05:18 PM
That worked! Thank you!
Tags
FormDecorator
Asked by
Sam
Top achievements
Rank 1
Answers by
Pero
Telerik team
Sam
Top achievements
Rank 1
Share this question
or