Kendo Grid Responsive behavior

[Siddhartha]

Hi,

We are using Kendo grid and Bootstrap in our web application. We are trying to configure the grid for responsive behavior using bootstrap classes. When we apply the col-md-hidden class on a kendo grid column & its header the column is hidden but there is a white space on the right of the grid, and the white space keeps increasing as we hide more columns. The column widths does not get reset to expand when a column is hidden. BTW, we have not given any widths to the columns.

Sid

[Dimo]

Hi Sid,

The proper way to hide a column in all browsers is to apply a display:none style to the table cells from that column and remove the corresponding <col> element from the DOM. Naturally, the latter cannot be achieved with CSS only.

You can use the window.resize event to hide Grid columns with the widget's API.

http://docs.telerik.com/kendo-ui/api/web/grid#methods-hideColumn

Regards,
Dimo
Telerik

 

 

[AFIS Team]

Is this still in the latest version of Kendo UI (early 2017) the suggested way to do this?

Ideally we would like to define in the grid definition column an attribute like the Bootstrap classes "hidden-md", "hidden-xs", etc., and that would internally trigger the column hiding based on the resolution of the screen.

We're using Kendo UI with Angular 1.5, can you provide us an example on how to hide certain grid columns based on window size?

[Dimo]

Hi Pavel,

Now the Kendo UI Grid has a built-in mechanism to hide specific columns on smaller screens:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth

However, if you prefer to use Bootstrap CSS classes, the old suggestion still applies.

Regards,
Dimo
Telerik by Progress