Grid Client Scrolling on iPad with latest IOS 11.3

4 posts, 1 answers
  1. Mike
    Mike avatar
    2 posts
    Member since:
    Feb 2014

    Posted 03 Apr 2018 Link to this post

    Hi Team,

    The latest update to the iPad was IOS 11.3, which "appears" to have broken Grid Scrolling.

    We had IOS 11.2.6 running on an iPad, and I was able to perfectly scroll up/down inside a fixed-height radgrid with Client Scrolling on (ie. the contents scrolled properly without scrolling the entire webpage, as expected).  One of our customers complained that his iPad running IOS 11.3 was not able to scroll any longer, and as soon as we updated our testing iPad to IOS 11.3, the RadGrid Client Scrolling became broken.  With IOS 11.3, the entire page now scrolled instead of the contents of the Radgrid.

    I thought it was our software, but then I checked out your Grid Scrolling sample on your Telerik site and I see the same problem on your demo site (using an iPad upgraded to IOS 11.3).  Ie. the same thing happened; the whole page scrolled instead of your Grid contents.

    Would you be able to reproduce this with your iPad updated to 11.3 on your own Grid Scrolling Page here?  Are you getting the same issue?

    Your Page: Grid - Scrolling

    https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/scrolling/scrolling/defaultcs.aspx 

    Thx,
    Mike

  2. Answer
    Attila Antal
    Admin
    Attila Antal avatar
    547 posts

    Posted 06 Apr 2018 Link to this post

    Hi Mike,

    Indeed, there is some change with the newer version of iOS, as it worked with version 10.x. The case is under investigation.

    In the meantime, you can try the following JavaScript workaround and see if that works for you.
    <script>
        Telerik.Web.UI.TouchScrollExtender.prototype._startDragOrg = Telerik.Web.UI.TouchScrollExtender.prototype._startDrag;
        Telerik.Web.UI.TouchScrollExtender.prototype._startDrag = function (g) {
            if ($(g.target).parents("div.RadGrid").length > 0) {
                return;
            }
            else {
                this._startDragOrg(g);
            }
        }
        function pageLoad(app, args) {
            $("#" + '<%= RadGrid1.ClientID %>' + "_GridData")
            .css("overflow", "scroll");
        }
    </script>


    Kind regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Mike
    Mike avatar
    2 posts
    Member since:
    Feb 2014

    Posted 07 Apr 2018 in reply to Attila Antal Link to this post

    Thank you so much Attila, we will try that on our side.
  4. Peter Milchev
    Admin
    Peter Milchev avatar
    832 posts

    Posted 22 May 2018 Link to this post

    Hello,

    An update with another approach that should resolve the issue in all Telerik controls: 

    <script type="text/javascript">
        function fixTelerikControlsScrollingInIOS() {
            var fixed = $telerik.$("[class^='Rad'], .rddlSlide");
            fixed.on('touchmove', function (e) {
                // if the control does not have scrollbars, it should not prevent page scroll
                if ($telerik.$(e.currentTarget).find(".RadTouchExtender").length > 0) {
                    e.preventDefault();
                }
            });
        }
        Sys.Application.add_load(fixTelerikControlsScrollingInIOS);
    </script>

    More information and updates can be found in the following KB article - Cannot scroll Telerik control in iOS 11.3 - the page scrolls instead.

    Please give it a try and let us know how that works for you, we would appreciate the feedback. 

    Regards,
    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top