Responsive Grid - Hide column

[Robert Madrian]

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

[Rumen]

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

[Robert Madrian]

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

[Rumen]

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

[Robert Madrian]

Hi,

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

robert

[Rumen]

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

[Robert Madrian]

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

 

[Rumen]

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