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

Different column widths on mobile, tablet, and desktop

2 Answers 19 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 31 Mar 2020, 07:17 PM
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? 

2 Answers, 1 is accepted

Sort by
0
Teya
Telerik team
answered on 02 Apr 2020, 02:24 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 02 Apr 2020, 02:25 PM
Perfect! Thank you.
Tags
Grid
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Teya
Telerik team
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or