Scroll Container Height

[Marcin]

Hello
I'm using kendo grid on my mobile application. But I have 2 issues with it:
a) I would like to use internal grid scroll (this requires set heigh for grid and working when I set absolute value like 200px;) But I want to fill grid (max height to the size of scroll container. I can fill it with width without problem, however height is not working for me.

b) I have problem with flat theme on Windows Phone. There is something wrong with sizing. the settings of font size/ column sizes in grid (js, during creation) are different than on other devices. If everything looks good on iphone or android it is too large on windows phone. And all columns width, header sizes are not fitting properly. I have to use column sizes to use scrolling. There is also issue with group display on grid (on wp it shows ... where should be empty)

Regards

[Kamen Bundev]

Hi Marcin,

a) I'm not sure what are you trying to achieve. If you want to make the Grid 100% and use its scroller, instead of the one on the View, you can use the data-stretch option and then make the Grid 100% high (as the scrolling container doesn't have height on itself). If you had in mind something else, I will need a sample page with the issue isolated.

b) This may be due to the missing devicePixelRatio in Windows Phone which is needed to resize the app to the different device resolutions and sizes. To simulate this, we use a root font-size and since all our Widget styling is based on em units, they are resized accordingly. This may prove a problem for the Grid which is not really meant to fit in a mobile app. Can you share a sample page, reproducing this problem and I will see what I can do to help you fix it? Thank you in advance.

Regards,
Kamen Bundev
Telerik

[Marcin]

Hello,
I've created a sample project with grid where columns width are set. The widths are properly displayed on iphone or desktop browser but not on windows phone. The columns are too narrow, even grouped ones.

[Dimo]

Hello Marcin,

We have fixed the problem with IE10 showing ellipsis even in empty cells. You can use the same approach by adding:

.k-grouping-row  .k-group-cell
{
    text-overflow: none;
}

As for the column widths, the observed behavior is browser-related. If you add a 140px (or 100px) wide <div> above the Grid, you will see that the defined column widths are actually obeyed. It looks like the different devices size elements differently. This might be related to pixel density or other system quirks.

Regards,
Dimo
Telerik

[Marcin]

Hello,
thank you for explanation, so the only solution now, is to have different widths based on device. Is it possible to use css to set column widths and get the same scroll behaviour? Then I would use different css based on device and that would workaround my problem somehow.

Kind Regards
Marcin

[Dimo]

Hello Marcin,

Grid column widths cannot be controlled via external CSS. You can use client-side browser detection and define different widths during initialization.

Regards,
Dimo
Telerik