Different column widths on mobile, tablet, and desktop

[Lee]

I have a kendo ui grid where the first column has a button in it. The button has an icon and full text on desktop but on mobile it is only three vertical dots. I need it to be 200px wide on desktop but only 50px wide on tablet and mobile. There are 3 other columns in the grid. I would like the grid to scroll horizontally still when on mobile. I do not want to exclude any columns. I would like to set min-widths on all of the columns for each breakpoint if possible. How would I do this? 

[Teya]

Hi Lee,

You can achieve such behavior by using the Media property of the column and assigning different widths to the columns that will be displayed based on the different media queries, e.g:

{
  field: "ContactTitle",
  title: "Contact Title",
  width: 250,
  media: "(min-width: 769px)"
}, {
  field: "ContactTitle",
  title: "Contact Title",
  width: 50,
  media: "(max-width: 768px)"
}

I have created the following example demonstrating the suggested approach:

https://dojo.telerik.com/OdiqEHER

I hope this helps.

 

Regards,
Teya
Progress Telerik

[Lee]

Perfect! Thank you.