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

Kendo Grid Responsive behavior

3 Answers 320 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Siddhartha
Top achievements
Rank 1
Siddhartha asked on 30 May 2014, 03:30 PM
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

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 31 May 2014, 07:56 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
AFIS Team
Top achievements
Rank 1
answered on 11 Jan 2017, 03:16 PM

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?

0
Dimo
Telerik team
answered on 12 Jan 2017, 02:28 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Siddhartha
Top achievements
Rank 1
Answers by
Dimo
Telerik team
AFIS Team
Top achievements
Rank 1
Share this question
or