Window resize

[gdycus]

Is there anyway to resize the grid when the window is resized?

[Dimo]

Hi Grady,

I suppose you are talking about vertical resizing (the Grid resizes horizontally automatically). In order to achieve the desired result, you need to do three things:

1. Calculate and set height to the Kendo Grid wrapper element ( div.k-grid ) - "A"

2. Calculate the cumulative height of all div.k-grid direct child elements (header, pager, group header, etc), except the scrollable container ( div.k-grid-content ) - "B"

3. Set height to the div.k-grid-content element: "C" = "A" - "B"

Alternatively, you can leave the Grid wrapper element with no height (height:auto). Yet another option is to set a 100% height to it, but you will still need to know the pixel height every time you will be setting height to the scrollable container.

Best wishes,
Dimo
the Telerik team

[gdycus]

Is there not a method that will allow me to reset the height and have the grid redrawn accordingly?

[Dimo]

Hi Grady,

Currently not. We will add one in the future, as it will be useful in certain scenarios, indeed.

Regards,
Dimo
the Telerik team

[gdycus]

Not having any luck. Below is the code that I think should work, but the pager is always off the screen. When I look at the new heights set using Firebug, it looks correct. Are you willing to create a working example on jsFiddle. I'm sure it will be helpful to others. Especially those using splitters.

$(window).resize(function () {

    var windowHeight = $(window).height();

    var headerHeight = $('#header-wrapper').outerHeight(true);

    var contentHeight = windowHeight - headerHeight;

    $('#grid').css("height", contentHeight + 'px');

 

    var gridPagerHeight = $('.k-grid-pager').outerHeight(true);

    var gridHeaderHeight = $('.t-grid-header').outerHeight(true);

    var tableContentHeight = contentHeight - (gridPagerHeight + gridHeaderHeight);

    $('#grid .k-grid-content').css("height", tableContentHeight + 'px');

});

[Dimo]

Hello Grady,

In case you have a Splitter, probably the above code is executed too early, before the Splitter has adjusted its layout. Since the Grid dimensions depend on its parent elements, try using a timeout or even better, set the Grid height in the Splitter's resize event.

http://demos.kendoui.com/splitter/events.html

Best wishes,
Dimo
the Telerik team