Grid not displaying on iOS devices

[Randy]

We've built an MVC app using Kendo MVC tools. It runs perfectly in a Windows desktop environment under all major browsers. However, on iOS devices none of our grids appear using Chrome. Using Safari, our grids appear but no scroll bars appear. I've attached images of each. This was captured using BrowserStack which emulates most major devices and browsers.

Please advise on why are grids are not appearing under Chrome and why we're missing scroll bars under Safari. Also, no JavaScript errors are being generated.

Thanks very much.

[Teya]

Hi Randy,

It looks like the grid width is larger than the one of the viewport, which is why you are not seeing scrollbars. Does this happen when you initially load the page or when you are changing the viewport size to see how the grid works on different devices? You can try the resizing the grid every time the window is being resized with the following code snippet:

var gridElement = $("#grid");

function resizeGrid() {
  gridElement.data("kendoGrid").resize();
}

$(window).resize(function(){
  resizeGrid();
});

Can you please give this a try and let me know if you are still experiencing the issue? If you do, can you please send me your Grid configuration or prepare a sample project where the faulty behavior is reproducible so that I can investigate it further?

I am looking forward to your reply!

 

Regards,
Teya
Progress Telerik

[Randy]

Hi Teya - This is the lesser of my two problems. Could you please first address the issue of grids not displaying at all under iOS devices running Chrome? This is also happening on Android devices as well.

Thanks very much.

[Teya]

Hi Randy,

I have created a sample MVC project containing a grid (attached here) and tested it on three different iOS devices- iPad with iOS version 10.3.3, iPhone with iOS v. 12.4.4 and iPad with iOS version 13.3 and the grid is visible on all three devices in Chrome. Can you please let me know on which iOS version are you testing? Also, can you please share a sample project or edit the attached one in a way that the behavior is reproducible so that I can check it further? Do you have the option to test your app on a real iOS device and if so, are you reproducing the same behavior?

Furthermore, the different operating systems and browsers are displaying scrollbars in different manners. In iOS on mobile devices, the native scrollbar becomes visible once you start scrolling, maybe this is why you don't see a scrollbar in the Grid? However, since this is the native scrollbar appearance for the specific operating system and browser, we cannot do much to change it.

Regards,
Teya
Progress Telerik

[Mark]

I'm having the same issue.  Is there a resolution?

I was able to recreate the problem in desktop chrome buy opening developer tools, setting the device to iPad then navigating to the live demo at https://demos.telerik.com/aspnet-core/grid/index.  After clicking run live demo.  I get the same behavior as actual iPad.

[Denitsa]

Hi Mark,

I suppose you are experiencing a new issue that we have in the current Kendo version R3 2020 SP1. Indeed in mobile mode, the grid is not bound and throws a JS Error. The issue is fixed:

https://github.com/telerik/kendo-ui-core/issues/6106

It is available in the latest internal build and will be fixed with the next official release.

Please, inform us if the issue persists with the new versions or it is another problem.

Regards,
Denitsa
Progress Telerik

[Mark]

Denitsa

We just upgraded to 3.1118 and the issue with grid is resolved.  Unfortunately, we are experiencing a similar issue with the toolbar.  The buttons fire fine in full size but don't respond on iOS chrome.  Is this a known issue?

[Denitsa]

Hi Mark,

I couldn't reproduce the issue with the Toolbar on our demo page at https://demos.telerik.com/kendo-ui/toolbar/events

Maybe it is related to a particular combination of buttons and dropdowns as described in this issue:

https://github.com/telerik/kendo-ui-core/issues/6002

 

Nevertheless, please write questions and feedback about different components in the corresponding Forum or submit a support request to our Support system.

 

Regards,
Denitsa
Progress Telerik