How to make a Grid Responsive?

5 posts, 1 answers
  1. Uday
    Uday avatar
    17 posts
    Member since:
    Jun 2014

    Posted 17 Nov 2014 Link to this post

    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
  2.
  3. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 19 Nov 2014 Link to this post

    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.

     
  5. Uday
    Uday avatar
    17 posts
    Member since:
    Jun 2014

    Posted 19 Nov 2014 in reply to Dimo Link to this post

    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();
  7. Answer
    Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 19 Nov 2014 Link to this post

    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.

     
  8.
  9. Uday
    Uday avatar
    17 posts
    Member since:
    Jun 2014

    Posted 19 Nov 2014 in reply to Dimo Link to this post

    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");
    });
Back to Top