Responsive Grid - Hide column

4 Answers 6812 Views

Grid

Robert Madrian asked on 02 Dec 2016, 09:23 AM

grid.jpg

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

4 Answers, 1 is accepted

answered on 05 Dec 2016, 03:25 PM

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.

Robert Madrian

commented on 05 Dec 2016, 03:41 PM

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

Robert Madrian

commented on 07 Dec 2016, 06:07 PM

Hi,

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

robert

Robert Madrian

commented on 08 Dec 2016, 12:39 PM

minscreenwidth.jpg

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