Need to apply responsive design to kendo grid MVC

[sandy]

Hi Team,

I have a Kendo MVC Grid. i need to apply responsive design to grid.

am trying to apply but not achieved. please resolve my issue.

here i want to show columns in all widths.

Please apply changes in my solution only.  am deleted kendo scripts version 2020.3.1118 in attached rar file.

if you unable to rar my file then please provide me a  sample example kendo grid mvc with more than 10 columns.

 

 

[Ivan Danchev]

Hello Sandy,

The first 4 columns are getting shrunk when the browser window is resized. This is because they don't have Width set, while the other columns have Width set to 60 or 70. As a result those columns that have their Width set maintain it, while the first 4 are shrinking proportionally and at smaller window widths they are not visible.

If you want the first 4 columns to be visible set their Width as well, e.g., Width(100). This is the recommended approach if you want to avoid the shrinking of the columns. At smaller window sizes a horizontal scroll bar will appear and you will be able to scroll through all of the columns.

Regards,
Ivan Danchev
Progress Telerik

[sandy]

if we given width then whats the use of these style classes col-sm-1 col-md-1 col-lg-1 col-xl-2. here am given width to all columns and am applying above style classes. how can i apply both styles. i want to apply bootstrap styles also.

suppose i want to apply column width based on screen resolution. but if we apply specific width then bootstrap classes are not applying depending on resolution.

example: if screen resolution is above 1200 i want to apply 250px width to 2 columns.
if screen resolution is above 900 i want to apply 200px width to 2 columns.
if screen resolution is above 700 i want to apply 150px width to 2 columns.

[Ivan Danchev]

The Telerik UI for ASP.NET MVC Grid is not compatible with the classes you listed. They are used for the Bootstrap Grid and do not apply to our Grid. However, in order to achieve the described behavior, you can use the Media option of the columns. Since you want a different column width depending on 3 different screen sizes, you can set this as shown below:

columns.Bound(p => p.EmpName.EmployeeName).ClientTemplate("#=EmpName.EmployeeName#").Filterable(ftb => ftb.Multi(true).Search(true)).EditorTemplateName("EmployeeName").Title("Resource Name").Width(150).Media("(max-width: 899px) and (min-width: 700px)");
columns.Bound(p => p.EmpName.EmployeeName).ClientTemplate("#=EmpName.EmployeeName#").Filterable(ftb => ftb.Multi(true).Search(true)).EditorTemplateName("EmployeeName").Title("Resource Name").Width(200).Media("(max-width: 1199px) and (min-width: 900px)");
columns.Bound(p => p.EmpName.EmployeeName).ClientTemplate("#=EmpName.EmployeeName#").Filterable(ftb => ftb.Multi(true).Search(true)).EditorTemplateName("EmployeeName").Title("Resource Name").Width(250).Media("(min-width: 1200px)");

Note that these are 3 columns bound to the same field and having the same configuration except for the Width and Media options. The columns are declared with different widths (150, 200 and 250) for the respective screen size. Based on the screen size only one of these 3 declared columns will be visible. You can apply the same approach to other columns.