Grid Client Scrolling on iPad with latest IOS 11.3

[Mike]

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

[Attila Antal]

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

[Mike]

Thank you so much Attila, we will try that on our side.

[Peter Milchev]

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