Grid does not scroll in mobile when content is a link

2 posts, 0 answers
  1. Matthew R Longhouse
    Matthew R Longhouse avatar
    15 posts
    Member since:
    Apr 2007

    Posted 05 Dec 2018 Link to this post

    I'm working in Chrome mobile.  I'm having an issue where the grid does not scroll horizontally when the swiping is initiated over content that is a hyperlink.  I attached event handlers to touchstart and touchend, and I can see that touchstart is called, and while touchmove is happening the grid does not scroll.  If I enlarge the page to more than the window size it will actually scroll the page (but not the grid).

    Scrolling in the grid works if pointer events are disabled on the hyperlink using CSS, but the click event doesn't work if this is done so it isn't a workable solution (pointer-events:none).

    You have to click on the link just right to reproduce.  I'm logging the events to the page for the first Test link in the grid to make this clear.  Sometimes you think you are clicking on it, but it doesn't actually raise the touchstart event, and in that case scrolling works.  However, when it does raise the touchstart event scrolling does not.  This makes scrolling in the grid really inconsistent for users.

     

    Code

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="REN_AppTest_Grid.aspx.cs" Inherits="Efficio.Web.TestPages.REN_AppTest_Grid" %>

    <!DOCTYPE html>

    <html>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <style type="text/css">
            a
            {
                /*pointer-events:none;*/
                /*touch-action: none;*/
            }

            a:visited, a:link
            {
                color: #007AFF;   
                font-weight: bold;
            }

            a:active
            {
                color: red;   
                font-weight: bold;
            }

            a:hover
            {
                color: yellow;   
                font-weight: bold;
            }

        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <a href="REN_AppTest_Grid.aspx" style="font-size: 2em; margin-left: 100px;">Refresh</a>
        <br/><br/>
        <a id="EventTest" href="#" style="font-size: 2em; margin-left: 100px;">Event Test</a>
        <br/><br/>
        <telerik:RadScriptManager ID="smScriptManager" EnablePageMethods="true" runat="server">
            <CacheSettings Enabled="false" />
            <Scripts>
                <asp:ScriptReference Path="~/lib/jquery/dist/jquery.min.js" />
                <asp:ScriptReference Path="~/lib/jquery-migrate/jquery-migrate.min.js" />
                <asp:ScriptReference Path="~/lib/jquery-browser/dist/jquery.browser.min.js" />            
            </Scripts>
        </telerik:RadScriptManager>
        Date: <%= DateTime.Now %>
        <br /><br />
        <asp:Panel ID="pnlGridScrolling" BorderWidth="1" Width="100%" BorderColor="Red" BorderStyle="Solid" runat="server">
            <Efficio:EfficioGridView ID="grdOne" Width="700" RenderMode="Mobile" runat="server">
                <ClientSettings>
                    <Scrolling AllowScroll="True" />
                </ClientSettings>            
                <MasterTableView Font-Size="2em">
                    <Columns>                        
                        <Efficio:EfficioGridTemplateColumn HeaderText="C1">
                            <ItemTemplate>
                                <asp:HyperLink NavigateUrl="javascript: alert('clicked');" Text='<%# DataBinder.Eval(Container.DataItem, "Column2").ToString() %>' runat="server" />
                            </ItemTemplate>
                        </Efficio:EfficioGridTemplateColumn>
                        <Efficio:EfficioBoundColumn DataField="Column2" HeaderText="C2" />
                        <Efficio:EfficioBoundColumn DataField="Column3" HeaderText="C3" />
                        <Efficio:EfficioBoundColumn DataField="Column4" HeaderText="C4" />
                        <Efficio:EfficioGridTemplateColumn HeaderText="C5">
                            <ItemTemplate>
                                <%--<a href="#" style="touch-action: pan-x;">Test</a>--%>
                                <asp:HyperLink ID="lnkTest" NavigateUrl="NotHere.aspx" Text="Test" runat="server" />
                            </ItemTemplate>
                        </Efficio:EfficioGridTemplateColumn>                    
                        <Efficio:EfficioBoundColumn DataField="Column6" HeaderText="C6" />
                        <Efficio:EfficioBoundColumn DataField="Column7" HeaderText="C7" />
                        <Efficio:EfficioBoundColumn DataField="Column8" HeaderText="C8" />
                        <Efficio:EfficioBoundColumn DataField="Column9" HeaderText="C9" />
                        <Efficio:EfficioBoundColumn DataField="Column10" HeaderText="C10" />
                    </Columns>
                </MasterTableView>
            </Efficio:EfficioGridView>    
            <br/>
            Status
            <div id="statusPanel">
                            
            </div>    
        </asp:Panel>                            
        </form>
        
    <script type="text/javascript">
        window.onerror = function(msg, url, line, col, error) {
            // Note that col & error are new to the HTML 5 spec and may not be 
            // supported in every browser.  It worked for me in Chrome.
            var extra = !col ? '' : '\ncolumn: ' + col;
            extra += !error ? '' : '\nerror: ' + error;

            // You can view the information in an alert to see things working like this:
            alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

            // TODO: Report this error via ajax so you can keep track
            //       of what pages have JS issues

            var suppressErrorAlert = true;
            // If you return true, then error alerts (like in older versions of 
            // Internet Explorer) will be suppressed.
            return suppressErrorAlert;
        };
       
        function touchstart(e)
        {        
            var status = $('#statusPanel');
            status.text(status.text() + ' touchstart');
            //e.preventDefault();
        }

        function touchend(e)
        {
            var status = $('#statusPanel');
            status.text(status.text() + ' touchend');
            //e.preventDefault();
        }

        function click(e)
        {
            var status = $('#statusPanel');
            status.text(status.text() + ' click');
            //e.preventDefault();
        }

        function touchmove(e) {
            var status = $('#statusPanel');
            status.text(status.text() + ' touchmove');
            //e.preventDefault();
        }

        function test()
        {
            var el = document.querySelector('#EventTest');
            el.addEventListener("click", click, false);
            el.addEventListener("touchstart", touchstart, false);
            el.addEventListener("touchend", touchend, false);
            
            el = document.querySelector('#grdOne_ctl00_ctl04_lnkTest');
            el.addEventListener("click", click, false);
            el.addEventListener("touchstart", touchstart, false);
            el.addEventListener("touchend", touchend, false);
            //el.addEventListener("touchmove", touchmove, false);
        }

        Sys.Application.add_load(test);   
    </script>
    </body>
    </html>

     

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace Efficio.Web.TestPages
    {
        public partial class REN_AppTest_Grid : System.Web.UI.Page
        {
            #region Fields

            private static readonly Random _random = new Random();

            #endregion

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    grdOne.DataSource = GenerateTestDataTable();
                    grdOne.DataBind();
                }
            }

            /// <summary>
            /// Generate a data source that is a data table
            /// </summary>
            /// <returns>A data table object with test data</returns>
            private static DataTable GenerateTestDataTable()
            {
                const int columnCount = 10;
                const int numberOfRecordsToGenerate = 10;

                DataTable dataSource = new DataTable();
                for (var i = 1; i <= columnCount; i++)
                {
                    dataSource.Columns.Add(new DataColumn(string.Format("Column{0}", i), typeof(int)));
                }


                // generate data
                for (var i = 0; i < numberOfRecordsToGenerate; i++)
                {
                    DataRow dataRow = dataSource.NewRow();
                    for (var j = 1; j <= columnCount; j++)
                    {
                        dataRow[string.Format("Column{0}", j)] = _random.Next(Int16.MinValue, Int16.MaxValue);
                    }
                    dataSource.Rows.Add(dataRow);
                }

                return dataSource;
            }
        }
    }

     

     

  2. Eyup
    Admin
    Eyup avatar
    3692 posts

    Posted 10 Dec 2018 Link to this post

    Hi Matthew,

    I've already replied to your formal support ticket for this matter. You can expect a additional reply there.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top