This is a migrated thread and some comments may be shown as answers.

Initially Hidden Grid with locked columns

3 Answers 198 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jeff
Top achievements
Rank 1
jeff asked on 10 Aug 2015, 03:37 PM

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!

 

3 Answers, 1 is accepted

Sort by
-1
Patrick
Top achievements
Rank 1
answered on 10 Aug 2015, 11:01 PM

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!

0
jeff
Top achievements
Rank 1
answered on 11 Aug 2015, 11:28 AM

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.

0
jeff
Top achievements
Rank 1
answered on 11 Aug 2015, 11:52 AM

Ahhh.. solution:

 

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

 

That's all it took, thank you though!

Tags
Grid
Asked by
jeff
Top achievements
Rank 1
Answers by
Patrick
Top achievements
Rank 1
jeff
Top achievements
Rank 1
Share this question
or