responsive groupable

[Morten]

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.

 

[Dimo]

Hi Morten,

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

@media screen and (max-width: 767px) { /*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