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

Setting grid height correctly

2 Answers 829 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 2
Iron
Iron
Pierre asked on 16 Jul 2013, 08:00 PM
Hi,
We create the grid and fill it with data dynamically at the page startup.

We first create a div like that:
$grid = $("<div></div>");
then we set the height:
$grid.filter('div').css("height", '300px')
then set all other parameters (datasource, column,...). After initialising the grid:
$grid.kendoGrid({});
The gird height do not fill all the container DIV height. If I use paging or filter, sorting, the grid reseized and fill the container DIV
I try to call this function after initialisation:
ConstV7.prototype.resizeGrid = function(grid) {
    var gridElement = grid,
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function () {
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

This function work perfectly if I set a breakpoint before calling it. The grid resized and fill the container DIV. But if I let the code run normally, I got the same problem like if the function was called too erlied. 
Any suggestion?


2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 17 Jul 2013, 10:53 AM
Hi Pierre,

The provided code seems to be taken from the following jsFiddle. It works as expected, please debug and compare your scenario with it:

http://jsfiddle.net/dimodi/SDFsz/

I suppose the resizeGrid function is not executed at the right time in your case - it should be executed in the Grid's dataBound event and the window resize event.

On a side note, the fiddle is designed to work with a 100% height style applied to the Grid <div>, but it can work with any <div> height.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 2
Iron
Iron
answered on 17 Jul 2013, 04:12 PM
Hi,
I update my code to resize in the DataBound event. That do not work. But in the Windows Resize that work when I resize the browser.
I will try to do a jsfiddler with my code.
Tags
Grid
Asked by
Pierre
Top achievements
Rank 2
Iron
Iron
Answers by
Dimo
Telerik team
Pierre
Top achievements
Rank 2
Iron
Iron
Share this question
or