This is a migrated thread and some comments may be shown as answers.

Grid not displaying on iOS devices

7 Answers 49 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 13 Jan 2020, 03:38 PM

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.

7 Answers, 1 is accepted

Sort by
0
Teya
Telerik team
answered on 15 Jan 2020, 11:13 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Randy
Top achievements
Rank 1
answered on 15 Jan 2020, 11:28 AM

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.

0
Teya
Telerik team
answered on 15 Jan 2020, 02:56 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Mark
Top achievements
Rank 1
answered on 08 Nov 2020, 08:28 PM

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.

0
Denitsa
Telerik team
answered on 10 Nov 2020, 10:10 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mark
Top achievements
Rank 1
answered on 11 Dec 2020, 02:35 PM

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?

0
Denitsa
Telerik team
answered on 14 Dec 2020, 08:20 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Randy
Top achievements
Rank 1
Answers by
Teya
Telerik team
Randy
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Denitsa
Telerik team
Share this question
or