Kendo Responsive Web UI Example

Question

I implemented KendoUI in my WebApp, is there a way to make the grid responsive? For example, showing fewer columns at lower resolutions!

Answer 1

Now for each column there is a minScreenWidth parameter, which hides the column when the browser width is less than the specified one. In our application, we set some constants corresponding to the tracking points of the Bootstrap boot buffer, so instead of manually specifying the width each time, we use these constants, and therefore some columns are hidden when you are lower, for example. Bootstrap sm or xs breakpoints.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth

Answer 2

Yes. using the link below, you can get a responsive kenod mesh design.

http://codepen.io/anon/pen/QwPVNW

In your multimedia request, please use the following

  @media screen and (max-width: 600px) { .k-grid-content > table { } } 

Answer 3

I am afraid that the Grid does not currently provide you with such a responsive design.

Answer 4

Yes., You can do this by setting the width for the Grid columns.

if you set the width of the columns, kendo will automatically enable horizontal scrolling for lower resolutions.

Answer 5

This works for me on a boot site through jQuery. This is how I hid the 3rd and 4th (index 2 and 3) columns when the browser is narrow (up to 768 pixels).

 dataBound: function () { $("#contacts tr > td:nth-child(2)").addClass("hidden-xs"); $("#contacts tr > td:nth-child(3)").addClass("hidden-xs"); $("#contacts thead th:nth-child(2)").addClass("hidden-xs"); $("#contacts thead th:nth-child(3)").addClass("hidden-xs"); $("#contacts colgroup col:nth-child(2)").addClass("hidden-xs"); $("#contacts colgroup col:nth-child(3)").addClass("hidden-xs"); } 

Unfortunately, this creates an index dependency, so you cannot shuffle your columns without updating these rules.

Answer 6

I wrote a jQuery-based widget that can be used to make a responsive Kendo Ui grid.

You can get the widget here: https://github.com/loanburger/ResponsiveKendoGrid

Usage: after creating the grid, add the following code:

 $('#GridId').responsiveGrid( { columnsToShow: ['date','name','surname'], columns you want to show in responsive view mobileWidth: 860, // screen width to trigger the change idColumn: 'Id', //ID column tools: ['excel'] // if you have the excel export option or blank if not }); 

What it does is basically only support the first column and hide the other columns, but it changes the client template used. He then created the elements using the specified columns, and then stacks them from top to bottom.

This works for me in most cases when I just show the data, but not for inline editing or inline user controls - this happens later.