This is a migrated thread and some comments may be shown as answers.
Grid rendering with white space
9 Answers 185 Views
This is a migrated thread and some comments may be shown as answers.
Ilya
Top achievements
Rank 1
Ilya asked on 02 Nov 2014, 02:39 PM
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

Sort by
0
Dimo
Telerik team
answered on 03 Nov 2014, 04:43 PM
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!
 
0
Ilya
Top achievements
Rank 1
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? 



0
Dimo
Telerik team
answered on 04 Nov 2014, 03:53 PM
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!
 
0
Ilya
Top achievements
Rank 1
answered on 05 Nov 2014, 07:22 AM
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?
0
Dimo
Telerik team
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!
 
0
Ilya
Top achievements
Rank 1
answered on 06 Nov 2014, 08:23 AM
Hi Dimo,

thanks in advance!

Regards,
Ilya
0
Marvin
Top achievements
Rank 1
answered on 01 Aug 2018, 05:02 PM

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?

 

 

0
Dimo
Telerik team
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.
0
Marvin
Top achievements
Rank 1
answered on 02 Aug 2018, 02:00 PM

Thank you Dimo! 

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

Tags
Grid
Asked by
Ilya
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ilya
Top achievements
Rank 1
Marvin
Top achievements
Rank 1
Share this question
or