Grid rendering with white space

10 posts, 0 answers
  1. Ilya
    Ilya avatar
    9 posts
    Member since:
    Oct 2014

    Posted 02 Nov 2014 Link to this post

    Hi there,

    I've been using Node JS/Express rendering of Kendo Grid with EJS on Windows
    and get next visual (d)efect just after grid initialization (see pic. White space.jpg). After
    column re-sizing everything become OK. But after filter also there is a visual
    (d)efect (see pic. Filtered Grid.jpg). I checked in all browsers with the same result.
    Anybody knows something how to avoid it?
  2.
  3. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 03 Nov 2014 Link to this post

    Hi Ilya,

    Frozen columns require a Grid height:

    http://docs.telerik.com/kendo-ui/web/grid/appearance#locked-columns-frozen-columns

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Ilya
    Ilya avatar
    9 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 in reply to Dimo Link to this post

    Hi Dimo,

    please, clarify me, I'm a new one in Kendo.
    I dynamically defined array of columns on Node JS and added last command column as here:
    .....
    gridColumns[gridColumns.length] ={ command: ["edit", "destroy"],
                                                        title: " ",
                                                        width: "200px",
                                                        filterable: false,
                                                        height: "18px", // doesn't understand line-height
                                                        locked: true
        };
    ...

    And then defined grid:

    var grid = {
    ...
    columns: gridColumns,
    .....
    };

    res.render(...);

    Firstly, It doesn't understand "line-height". And there isn't any visual effects.  
    Where I'm wrong? 



  7. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 04 Nov 2014 Link to this post

    Hi Ilya,

    Grid height means a height style applied to the Grid <div> or a height setting defined in the Grid configuration. Setting a height of a column will have no effect. I recommend you to review the following demo.

    http://demos.telerik.com/kendo-ui/grid/frozen-columns

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Ilya
    Ilya avatar
    9 posts
    Member since:
    Oct 2014

    Posted 05 Nov 2014 in reply to Dimo Link to this post

    Hi Dimo,

    thanks! It works.
    By the way, I'm using the same code for rendering a few hundreds of forms.
    How can I set exactly height if I now row quantity on the page?
  11. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 05 Nov 2014 Link to this post

    Hello Ilya,

    If you now the row count on a given Grid, you can set some height, which depends on the font-size that you use in your application.

    If you prefer not to hard-code magic numbers, then you can execute the following script right after the Grid is created.

    http://docs.telerik.com/kendo-ui/basics/events-and-methods#bind-to-events-after-widget-initialization


    $("#grid").kendoGrid({
       // do not set ahy height in the Grid configuration
    });
     
    $("#grid").data("kendoGrid").one("dataBound", function (e) {
        var gridElement = e.sender.wrapper;
        var dataArea = gridElement.children(".k-grid-content");
        var diff = dataArea[0].scrollHeight - dataArea[0].clientHeight;
        gridElement.height(gridElement.height() + diff);
        e.sender.resize();
    });


    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Ilya
    Ilya avatar
    9 posts
    Member since:
    Oct 2014

    Posted 06 Nov 2014 in reply to Dimo Link to this post

    Hi Dimo,

    thanks in advance!

    Regards,
    Ilya
  14.
  15. Marvin
    Marvin avatar
    4 posts
    Member since:
    Aug 2011

    Posted 01 Aug 2018 in reply to Dimo Link to this post

    I am seeing the same white space at the bottom of the grid; but I would rather not specify the grid height; if I have 200 records, I want them to all be displayed, without paging.  Can the grid be modified to eliminate this white space without setting the grid height?

     

     

  17. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 02 Aug 2018 Link to this post

    Hello Marvin,

    I assume your Grid is configured to use frozen columns as well. If you have no column resizing enabled, you can try to get away with no set height by triggering one more layout adjustment after data binding:

    $("#Grid-ID").kendoGrid({
       dataBound: function(e) {
          e.sender.resize();
       }
    }

    If column resizing is enabled, you can try executing a resize routine after each column resize, with a timeout:


    columnResize: function(e) {
       setTimeout(function(){
          e.sender.resize();
       });
    }

    Here is an example:

    https://dojo.telerik.com/ixoVIBiT

    Please note that the above suggestions are not something that is officially recommended. Also, adjusting the Grid layout with resize can be a resource-intensive task if executed too often.

    On the other hand, there are two possibilities for a Grid with frozen columns:

    * There is a horizontal scrollbar for the non-frozen columns: https://dojo.telerik.com/OZeMoVOb
    In this case, the empty space below the frozen columns is caused by the fact that there is no scrollbar there. If there was no empty space, the frozen and non-frozen rows will be misaligned vertically.

    * There is no horizontal scrollbar for the non-frozen columns: https://dojo.telerik.com/OZeMoVOb/2
    In this case, there is no empty space, but such a setup defeats the purpose of having frozen columns enabled, so it is better to turn them off.

    The examples above use 20 records, but the logic for 200 is the same.

    Regards,
    Dimo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  19. Marvin
    Marvin avatar
    4 posts
    Member since:
    Aug 2011

    Posted 02 Aug 2018 in reply to Dimo Link to this post

    Thank you Dimo! 

    dataBound: function(e) { e.sender.resize(); },   - that did the trick!  Now the grid behaves exactly as we had hoped.

Back to Top