[Solved] Grid mobile: setOptions causes blank grid

[Eurotracs]

We are using the Kendo Grid in one of our applications. The grid is working perfectly in "desktop" mode but as soon as we test our code on mobile devices, it won't work.
We are saving and restoring only the columns (we get the options and get the columns from there). As soon as we get the saved state, we update our data object and execute the setOptions method.
When the setOptions method is completed, everything from our grid disappears (headers, rows, ...). Forcing a refresh or querying the dataSource does not fix the issue.

Even if I call the setOptions with a new, empty object, the grid goes blank while it works perfectly in "desktop" mode.
We are using following versions:
- Kendo: v2014.3.1119
- jQuery: 2.0.3

Any suggestions how we can fix this issue?

[Eurotracs]

I might have found the cause of this issue: the clean-up of elements isn't done correctly on mobile devices. 
When you execute the "setOptions" method, you will clear the "element" (which is the grid), however, in mobile devices the grid is wrapped in multiple other div's for mobile purposes (mobile scrollbars etc). These div's do not get cleared (because only element.empty() is called). When the element.empty() call has succeeded, the 'init'-method is called. This will re-create the table from start to end, wrapping the element AGAIN in the mobile containers. If you remove these additional containers (e.g. move the elements to main mobile wrappers in Chrome), everything shows up as it is supposed to.

TL;DR: setOptions on mobile is broke due to not clearing the wrapping mobile containers. 

[Eurotracs]

To make it clear, I've attached some pictures of the HTML.
Explanation for the pictures:

AfterFirstInit
You can see the mobile wrappers in the transparent red divs. Note the transparent green square, showing the div has not been cleared.

AfterElementEmpty
Same as the above, only the transparent green square has no more arrow, showing that the div has been cleared.

AfterReInit
Again, you see the mobile wrappers in the transparent red divs. However, the child is not the actual grid div anymore, it has MORE mobile wrappers (transparent yellow squares). The additional mobile wrapper (yellow squares) should not be there, it should be identical to the 'AfterFirstInit' set-up.

[Kiril Nikolov]

Hello Christiaan,

 

Would it be possible to extract a runnable sample that we can look at and reproduce the issue. You can use the Kendo UI Dojo for this.

Thanks for the cooperation.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Eurotracs]

I'm not able to reproduce this issue with Dojo. However, I've provided a single HTML page that reproduces this issue (same code as in Dojo).
Please, reduce the screen size to "mobile" (in Chrome developer, you can select mobile devices, pick one of those).
If you need any more information, please let me know.

[Kiril Nikolov]

Hello Christiaan,

You are missing height setting for your grid. Please note that when used in mobile mode you need to set explicit height for the grid. I have tested your example on mobile device and when height was added I was able to run it properly.

Regards,
Kiril Nikolov
Telerik

 

 

[Eurotracs]

Hi Kiril

Let me explain why I think this fix isn't that good: we are using the grid in an application that requires the grid to take as much space as available. This means we cannot set a fixed height because the height is calculated when the application is running.
Setting a fixed height on the grid would break our application.

Also: most of your examples do not set any height at all. Your examples should advice to set a height if it is required....

Regards

[Kiril Nikolov]

Hello Christiaan,

 

Our adaptive rendering demo, suggest that a height should be set for the Grid in mobile application. Here is the demo that I am referring to:

http://demos.telerik.com/kendo-ui/grid/adaptive

 

Regards,
Kiril Nikolov
Telerik

 

 

[Eurotracs]

Hello

We have followed your advice on setting the grid height.
This does not fix the issue completely.

The previous mobile grid wrappers still exist, causing the grid to get messed up. I've changed my example to reflect this issue!

Regards

[Kiril Nikolov]

Hello Christiaan,

I have managed to reproduce the issue and logged it in our internal bug tracker. As soon as more information is available, I will make sure to get back to you.

Regards,
Kiril Nikolov
Telerik

 

 

[Kiril Nikolov]

Hello Christiaan,

This issue has been fixed for the next internal build, which should be released by the end of next week. When it is released, please upgrade and let us know if the problem persists.

Regards,
Kiril Nikolov
Telerik

 

 

[Eurotracs]

Dear

I've updated to the next internal build (v2014.3.1409).
The notes of this version tell us the issue should be fixed, however the issue is still not fixed.
It still stacks multiple containers.

Kind regards

[Eurotracs]

Dear

We have TEMPORARILY fixed this issue by settings the following CSS:

.km-scroll-container {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

We still require a fix for this issue, as the containers are still stacking.

Regards

[Kiril Nikolov]

Hello Christiaan,

I am not able to reproduce the issue, can you please send again a runnable sample, so we can see exactly what happens?

Regards,
Kiril Nikolov
Telerik

 

 

[Eurotracs]

Hi

I'm still able to reproduce. Please, check the attachement.
I've made a screenshot and added it to the zip file.

Regards

[Kiril Nikolov]

Hello Christiaan,

This HTML is expected, in order to get the Grid correctly resized on all devices nested view inside a pane is needed. The same is the behavior without using setOptions. Please check the following screencast that shows the expected scenario:

http://screencast.com/t/pQfJtcxe

Regards,
Kiril Nikolov
Telerik

 

 

[Eurotracs]

Hi

Very odd behavior.
It seems it is working correctly for you, while we are running version "2014.3.1409" and still have issues with the grid becoming wrapped in multiple km-pane-wrappers.
Which version are you using?

Regards

[Kiril Nikolov]

Hello Christiaan,

I am using the latest internal build, that is available for download from your account.

Regards,
Kiril Nikolov
Telerik