Grid not display rows on Ipad Chrome.

[Dome]

I'm facing really strange behavior run core mvc app on Ipad chrome/edge browser on Ipad. This happen for all grids in the app. 

I get the following error:

kendo.all.js:67733 Uncaught TypeError: Cannot read property 'rows' of null
at init._scrollable (kendo.all.js:67733)<br>
at init._thead (kendo.all.js:69496)<br>
at init._continueInit (kendo.all.js:63660)

 

I haven't at the moment touched any k-* styles for the grids.

The same grids work very fine in the desktop browsers (and in Ipad Safari).

FYI: The problem can be reproduced also using Edge development tools on desktop simulating mobile browser.

Any advise?

 

[Dome]

PS: Using Net 5 and Telerik UI for ASP.Net Core 2021.1.119 release

[Tsvetomir]

Hi Dome,

I have investigated the provided information and with the product version that you have provided the issue should not be present. Indeed, this was a bug that has already been fixed. 

https://feedback.telerik.com/kendo-jquery-ui/1492989-typeerror-cannot-read-property-rows-of-null-using-kendoui-all-min-v-3-1021-on-mobile-mode

Is it possible for you to ensure that all of the JavaScript and CSS files and not only the NuGet package for the ASP.NET Core? 

I have tested our live demos with the emulators of the browsers - both Chrome and Edge, as you have outlined and it appears that there are no errors in the console.

Do let me know if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik

[Dome]

I confirm that unless I enable "VirtualScroll" for the grids, the Chrome/Edge on Ipad doesn't show rows. Safari works fine in any case. That's an issue because virtualscroll with pageble grid can be a usage mess by users...

[Tsvetomir]

Hi Dome,

It is correct that the simultaneous usage of the paging along with virtual scrolling is by no means recommended. 

Unfortunately, I cannot seem to replicate the defect in any of our live demos. Can you take a look at the following demo and let me know if you can see the JavaScript error in the console?

https://demos.telerik.com/aspnet-core/grid/index

If yes, are there any specific steps that I should take into account in order to reproduce the issue locally?

 

Kind regards,
Tsvetomir
Progress Telerik

[James]

I had this problem initially with .NET Core . In addition to updating the Telerik nuget package, check that you have updated the javascript sources in the header of your _Layout.cshtml, since these won't update automatically:

<p>    <link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" /><br><br>    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script><br>    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script><br>    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.aspnetmvc.min.js"></script></p><p></p>

[James]

<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.aspnetmvc.min.js"></script>

[Tsvetomir]

Hi James,

When using the CDN to load the client-side scripts, you should update the versions manually as actual references are pointing to a hard-coded URL. In order to make this a bit easier, you could add a C# variable and change the version at a single place:

    @{ var kendoVersion = "2021.1.119";}
    <link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/@kendoVersion/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />

    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/@kendoVersion/js/kendo.aspnetmvc.min.js"></script>

I hope you find this helpful.

 

Kind regards,
Tsvetomir
Progress Telerik