Grid rendering with white space

[Ilya]

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?

[Dimo]

Hi Ilya,

Frozen columns require a Grid height:

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

Regards,
Dimo
Telerik

 

 

[Ilya]

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? 

[Dimo]

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

 

 

[Ilya]

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?

[Dimo]

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

 

 

[Ilya]

Hi Dimo,

thanks in advance!

Regards,
Ilya

[Marvin]

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?

 

 

[Dimo]

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

[Marvin]

Thank you Dimo! 

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