Kendo Grid Responsive behavior

4 posts, 0 answers
  1. Siddhartha
    Siddhartha avatar
    10 posts
    Member since:
    Oct 2011

    Posted 30 May 2014 Link to this post


    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.

  2. Dimo
    Dimo avatar
    8445 posts

    Posted 31 May 2014 Link to this post

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Pavel
    Pavel avatar
    3 posts
    Member since:
    Aug 2014

    Posted 11 Jan 2017 Link to this post

    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?

  4. Dimo
    Dimo avatar
    8445 posts

    Posted 12 Jan 2017 Link to this post

    Hi Pavel,

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

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

    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.
Back to Top