Grid Pager Info not displaying correctly inside of splitter in fullscreen when toolbar is enabled.

Progress® Telerik® UI for ASP.NET MVC Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 20 Jan 2021 12:29 by ADMIN

Kody

Created on: 04 Jan 2019 21:59

Category: Grid

Type: Bug Report

Grid Pager Info not displaying correctly inside of splitter in fullscreen when toolbar is enabled.

I'm trying to create a kendo grid inside of a kendo splitter in ASP.Net MVC. My problem is the pager info (i.e. "1 of 20 items") is not displayed on load. If the splitter is moved or a button inside of the splitter is pressed the grid resizes and the pager is displayed correctly. When there are more than 10 pages and the pager numbers and pager info size change to accommodate more digits the pager wrapper is not drawn correctly every time when changing pages. This issue seems to only be present when the grid has a toolbar

I have tried using the dataBound event to resize the grid elements, but the pager div is not computed yet. I also tried applying a flex box to the pager wrapper and that did not change anything. I added a size to the splitter and it fixed the issue when set to 400px. But when set to something like 33% the issue persists. I need the splitter pane to be bigger than 400px on load so that fix does not work.

I replicated the issue in this dojo: https://dojo.telerik.com/URIbinEY/12. The issue appears when in fullscreen mode on a 1920x1080 monitor. I have attached screen shots from my application showing the issue while navigating with the pager. paging 1.png shows the initial load fixed using a flex-box. paging 2.png shows navigating to the second page. The pager info is resized and moved off screen. paging 1.2 shows navigating back to page 1. There is a white space left at the bottom. Paging 3 shows the end of the pages. Paging 4 shows clicking the "..." to the previous paging page and the pager info being hidden. Paging inspected shows that the pager info is in the DOM, but resized off the screen when the toolbar is drawn.

The expected result should show the pager info on load and the grid should fill 100% of the splitter pane. The pager info should be adjusted when navigating to another page in the pager to always be displayed.

Any help with this issue will be much appreciated. Thanks!

Attached Files:

1 comment

ADMIN

Tsvetina

Posted on: 11 Jan 2019 09:19

Hello Kody,

As we discussed in the support thread you opened about this issue, the problem is related to the Grid sizing logic running before the Grid is actually populated and the issue is reproducible even without a toolbar. I am coping the information from he ticket in case anyone else hits this problem.

A quick solution for this is to explicitly resize the Grid after it is bound and rendered, so it can re-calculate the pager height:

dataBound: function(){

var grid = this;

setTimeout(function(){

grid.resize();

});

}

For Kody, it worked better to call grid.refresh() in this case because he also observed problems with the pager in his Grid, which we were unable to reproduce.

The timeout is needed because the dataBound event is fired when the Grid is bound but not fully rendered. Also, for better sizing of the Splitter, I suggest following this example to resize it and the Grid to 100%:
Resize and Expand the Kendo UI Grid to 100% Height (last snippet)

Here is an updated Dojo showing the workaround and the updated sizing:
http://runner.telerik.io/fullscreen/@tsveti/IJosugog

Regards,
Tsvetina
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.