[Solved] Initially Hidden Grid with locked columns

[jeff]

Hi folks!

Our ui framework is based on bootstrap/kendo; I have a grid that has a few locked columns that is initially hidden. If I don't specify the widths of each section, the table doesn't expand until a button/pagination is clicked, etc.. so I'm using this css to cover the widths:

 

#Grid .k-grid-content-locked,
#Grid .k-grid-header-locked {
    min-width: 290px;
}
#Grid .k-grid-content,
#Grid .k-grid-header,
#Grid .k-grid-header-wrap {
    min-width: 788px;
}

 

But when the browser is smaller (or on a smaller device) and using a smaller footprint/media queries, this grid is still very wide, obviously.. Do you have any ideas on how I can have the table expand/contract under these conditions without specifying the width of .k-grid-content or .k-grid-header, etc..

 

Thank you!

 

[Patrick]

Hello Jeff,

By default, the Kendo Grid is responsive, and additional CSS is not required.

I've created a demo to illustrate that the grid is still responsive with hidden and locked columns.

Hope this helps!

[jeff]

Hi Patrick,

Maybe reread the initial post? Here's the root cause, the grid being initialized in a hidden container:

http://docs.telerik.com/kendo-ui/web/grid/appearance#initialize-the-grid-inside-a-hidden-container

 

Anyways, thank you, I'll figure it out.

[jeff]

Ahhh.. solution:

 

var gridWidget = $("#Grid").data("kendoGrid");

gridWidget.resize(true);

 

That's all it took, thank you though!