Responsive Grid - Hide column

8 posts, 0 answers
  1. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 02 Dec 2016 Link to this post

    Hi,

    I have read the following in the docs:

    Kendo UI Grid Integrates a responsive pager, which automatically adjusts to different screen widths and provides the ability to define which columns to be hidden on small view ports. This makes them more flexible for mobile web usage.

    • How to define a specific column to be hidden on small view ports?

    I use MVC Core Version of the grid and cannot find a property for the columns to set this?

    robert

  2. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 05 Dec 2016 Link to this post

    Hello,

    You can try the solutions provided in this StackOverflow thread: http://stackoverflow.com/questions/26112233/how-can-i-hide-columns-in-a-kendo-ui-grid, i.e.

    // Hiding during grid definition
    // Using the JavaScript implementation you can add hidden: true:
     
    $("#gridName").kendoGrid({
      columns: [
        { hidden: true, field: "id" },
        { field: "name" }
      ],
      dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
    });
     
    // Or, with Kendo MVC you can use Hidden():
     
    @(Html.Kendo().Grid<Something>()
        .Name("GridName")
        .Columns(columns =>
        {
            columns.Bound(m => m.Id).Hidden()
            columns.Bound(m => m.Name)
        })
    )
     
    //Hide a column by css selector
     
    $("#gridName").find("table th").eq(1).hide();
     
    // Hide a column by column index - http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-hideColumn
     
    var grid = $("#gridName").data("kendoGrid");
    grid.hideColumn(1);
     
    // Hide a column by column name
     
    var grid = $("#gridName").data("kendoGrid");
    grid.hideColumn("Name");
     
    // Hide a column by column object reference
     
    var grid = $("#gridName").data("kendoGrid");
    grid.hideColumn(grid.columns[0].columns[1]);


    Regards,
    Rumen
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 05 Dec 2016 in reply to Rumen Link to this post

    Hi,

    If use use ".Hidden()" in MVC the column is always hidden not only on small viewports!

    I thought that I can specify the columns which should be hidden on smaller viewports and shown on large ones?

    robert

  4. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 06 Dec 2016 Link to this post

    Hi Robert,

    This is already supported via the minScreenWidth attribute for grid columns. See this section from the docs API for more info: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth

    Best regards,
    Rumen
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  5. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 07 Dec 2016 in reply to Rumen Link to this post

    Hi,

    but this is for the Javascript Version of the grid - where can I find this property in the MVC Wrapper?

    robert

  6. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 08 Dec 2016 Link to this post

    Hello Robert,

    Here you go: MinScreenWidth(System.Int32), i.e.

     

    @(Html.Kendo().Grid(Model)
       .Name("Grid")
       .Columns(columns => columns.Bound(o => o.OrderID).MinScreenWidth(450))
    )

     

     

    Best regards,
    Rumen
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  7. Robert Madrian
    Robert Madrian avatar
    229 posts
    Member since:
    Apr 2003

    Posted 08 Dec 2016 in reply to Rumen Link to this post

    No - this is not availible in MVC (Core) Version of the Control (see Picture)

    it seems there are a lot of differnces between MVC, MVC Core and Javascript Version of the Control

    see also here:
    http://www.telerik.com/forums/no-records-message-wrong-documentation#meq3dCvTMEyttMUw_HbIZg

    robert

     

  8. Rumen
    Admin
    Rumen avatar
    14462 posts

    Posted 08 Dec 2016 Link to this post

    Hello Robert,

    I logged the issue in our bug tracking system https://github.com/telerik/kendo-ui-core/issues/2522 and we will do our best to fix it for the next major release in January.

    Best regards,

    Rumen
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top