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

responsive groupable

1 Answer 27 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Morten
Top achievements
Rank 1
Veteran
Iron
Morten asked on 19 Jul 2015, 12:39 PM

My grid has "groupable: true", however only ​selected columns are groupable:

columns: [
  { field: "todo", groupable: false },
  { field: "author", minScreenWidth: 768 } ]

"Trouble" is the "grouping drop area" is visible on any screen size, but the groupable columns are not shown on small screens.

How can I control visibility of the "grouping drop area" based on screen size?

A "groupable.minScreenWidth" property would be great.

 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 22 Jul 2015, 06:05 AM
Hi Morten,

You can hide the grouping header with CSS and a media query:

@media screen and (max-width767px) { /*1px less than minScreenWidth */
  #grid > .k-grouping-header {
    display: none;
     
    /* the following styles are required to fool
    jQuery's size measurement algorithms for hidden elements */
    height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
  }
}


If the Grid has a height applied, you will also need to execute the widget's resize method with a true  parameter value, so that the widget recalculates the height of its data area.

http://docs.telerik.com/kendo-ui/basics/jquery-initialization#duplicate-kendo-ui-widget-initialization

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Morten
Top achievements
Rank 1
Veteran
Iron
Answers by
Dimo
Telerik team
Share this question
or