Setting grid height correctly

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

    Posted 16 Jul 2013 Link to this post

    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. Dimo
    Admin
    Dimo avatar
    8330 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:

    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!
  3. Kendo UI is VS 2017 Ready
  4. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 17 Jul 2013 Link to this post

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