Grid rendering with white space in Kendo UI for jQuery

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

Grid rendering with white space

9 Answers 185 Views

Grid

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

Ilya asked on 02 Nov 2014, 02:39 PM

white-space.jpg

filtered-grid.jpg

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?

9 Answers, 1 is accepted

answered on 04 Nov 2014, 07:35 AM

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?

answered on 05 Nov 2014, 09:02 AM

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!

answered on 02 Aug 2018, 06:46 AM

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.