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

How to make a Grid Responsive?

4 Answers 562 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Uday
Top achievements
Rank 1
Uday asked on 17 Nov 2014, 04:12 PM
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

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Nov 2014, 02:34 PM
Hi Uday,

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

Regards,
Dimo
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Uday
Top achievements
Rank 1
answered on 19 Nov 2014, 03:34 PM
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();
0
Accepted
Dimo
Telerik team
answered on 19 Nov 2014, 05:10 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Uday
Top achievements
Rank 1
answered on 19 Nov 2014, 07:14 PM
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");
});
Tags
Grid
Asked by
Uday
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Uday
Top achievements
Rank 1
Share this question
or