FormDecorator messes up "setSelectionRange"

3 posts, 1 answers
  1. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 22 May 2012 Link to this post

    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. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 25 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 15 Jun 2012 Link to this post

    That worked! Thank you!
Back to Top