How to make a Grid Responsive?

[Uday]

Hi,

What is the best way to make a grid responsive on different screens. I added 'hidden-xs' class to html attribute on the grid column and headers. It seems to hide the column header and values but not the actual column. See the image attached.


Is there any way to achieve responsiveness? 

Thanks for your help.

Uday

[Dimo]

Hi Uday,

HtmlAttributes() influences data cells. You also need to set HeaderHtmlAttributes() to influence header cells.

Regards,
Dimo
Telerik

 

 

[Uday]

Hi Dimo,

Thank you for your responsive. I did actually use the both HeaderHtmlAttributes and HtmlAttributes on the columns. It was still showing taking up the space for the columns. Any other thoughts?

Html.Kendo().Grid(ModelHere)
    .Name("GridNameHere")
    .Columns(columns =>
    {
        columns.Bound(l => l.col1).Title("Col 1").HeaderHtmlAttributes(new { @class = "hidden-xs" }).HtmlAttributes(new { @class = "hidden-xs" });
        columns.Bound(l => l.col2).Title("Col 2").HeaderHtmlAttributes(new { @class = "hidden-xs" }).HtmlAttributes(new { @class = "hidden-xs" });

    })
    .HtmlAttributes(new { style = "height: 300px;" })
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
    )
    .Render();

[Dimo]

Hello Uday,

OK, so I didn't understand you correctly.

The problem is in the <col> elements. They will need the hidden-xs class too, but you will need to add it with Javascript, as there is no declarative way to reference these elements:

http://jsfiddle.net/heq8x7ss/

Keep in mind that scrollable Grids have two tables:

http://docs.telerik.com/kendo-ui/web/grid/appearance#scrolling

The observed behavior is browser-dependent too, e.g. IE11 doesn't seem to need classes for the <col>s.

Regards,
Dimo
Telerik

 

 

[Uday]

Hello Dimo,

Thanks for your time. I was able to add the 'hidden-xs' class to the grid <col/> elements and it worked fine. 

$(function() {
    $("div.k-grid-content").find("col").addClass("hidden-xs");
    $("div.k-grid-header").find("col").addClass("hidden-xs");
});