ios7 Grid styles in mobile apps

[axel]

Hi,

since ios7, all grid styles seem to be incorrect in mobile applications

kendoui.complete.2013.2.918.commercial
same with version 926

    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.black.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>

kind regards

[Iliana Dyankova]

Hello Axel,

This is a known issue, however it is already addressed - please upgrade your application to the latest internal build and let me know if you still observe any problems.
 

Regards,
Iliana Nikolova
Telerik

[axel]

Hello Iliana,

internal build 2013.2.1104 doesn't fix it.

Regards
Axel

[Iliana Dyankova]

Hi Axel,

I tested Kendo UI Grid in a mobile application using Q3 2013 Beta (v2013.3.1030) release and everything is rendered as expected. Please test your application using the aforementioned version and let me know if this helps.

Regards,
Iliana Nikolova
Telerik

[axel]

Hi Iliana,

chrome renders as expected (chrome.jpg).
the rendering on ipad safari is still incorrect (ipad.png)

by the way. making the grid height 100% and auto resizable with follwing code

$(window).resize(function() {
        var gridElement = $("#grid"),
        newHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
        otherElements.each(function(){
                otherElementsHeight += $(this).outerHeight();
        });
        gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});

also only works with chrome (ipad_autoheight.png)

thanks 
axel

[Iliana Dyankova]

Hi Axel,

First of all I would like to apologize for the overlook - I double checked and was able to observe the issue. I forwarded it to the developers and the fix will be included in our next internal build. Once again I apologies for the inconvenience caused.

Regards,  
Iliana Nikolova
Telerik

[axel]

Hi Iliana,
thank you for your reply.

is there a quick fix to make the grid 100% height and auto resizable?

two more annotations:
1)  thouch scrolling is unsupported in chrome (safari works fine)
2) when grid is wider than screen diagonal scrolling becomes a torment on ipad. 

Kind regards
axel

[Iliana Dyankova]

Hi Axel,

Apologies for not getting back you earlier. 

In order to make the Grid with height 100% and auto resizable on a mobile device I recommend the following:

• Using the new adaptive Grid;
• Set data-stretch="true" to  the view:

  <div data-role="view" data-init="initGrid" id="highGrid" data-stretch="true">
      <div id="grid"></div>
  </div>
  
  <script>
  function initGrid() {
    //grid configuration
  }
  </script>

• Apply the following CSS rule:

#highGrid .km-content > .km-scroll-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

Regarding the two more annotations:

1. I tested Kendo UI demos in Google Chrome browser on iPhone and scrolling is working as expected;
2. I wasn't able to reproduce this issue too. 

Could you please elaborate a bit more on the aforementioned issues or provide an example which demonstrates them? Thank you in advance for your time and cooperation.  

Regards,
Iliana Nikolova
Telerik