Setting grid height correctly

3 posts, 0 answers
  1. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 16 Jul 2013 Link to this post

    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:
    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. Dimo
    Dimo avatar
    8407 posts

    Posted 17 Jul 2013 Link to this post

    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:

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 17 Jul 2013 Link to this post

    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.
Back to Top