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

Multi-line columns aren't rendered properly by scroll view

3 Answers 159 Views
Grid
This is a migrated thread and some comments may be shown as answers.
iCognition
Top achievements
Rank 1
iCognition asked on 27 Feb 2014, 04:22 AM
See gif,

There are 10 rows, but I can't scroll any further, I believe the JS isn't calculating the multi-line column height correctly.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Feb 2014, 01:39 PM
Hi Matt,

Generally, virtual scrolling relies on average row height calculations, which can fail if there are rows with different heights. You can either set explicit row height via CSS, or disable text wrapping.

#GridID .k-grid-content tr
{
    height: 60px; /* or whatever value is large enough */
}
 
#GridID .k-grid-content td
{
    white-space: nowrap;
}


If you provide your Grid configuration and appropriate dummy data (e.g. in a jsFiddle demo), I will check whether there is anything else causing the undesired behavior.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
iCognition
Top achievements
Rank 1
answered on 27 Feb 2014, 11:16 PM
The row heights are all the same, I can see what you're trying to do with your suggestion, but it's not really a solution.

Why doesn't the virtual scroll iterate over the _real_ row heights after dynamic loading?

Is there some sort of "recalculate virtual scrollbar" function I can call?

P.S. having a nowrap on the table cells causes a disjoint between the header and columns.
0
Dimo
Telerik team
answered on 28 Feb 2014, 07:53 AM
Hi Matt,

Misalignment between header cells and data cells can occur if the Grid column widths are configured incorrectly (e.g. if you are setting width styles to table cells) or there are some custom styles on the page, which interfere with the Grid layout (e.g. the table-layout style or the table widths).

http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

The average row height is calculated based on the already loaded rows, as the Grid has no access to all the data. The average row height and the total number of records are used to predict the total height of all data rows. This is how the virtual scrollbar is created.

Refreshing the virtual scrollbar can be achieved with calling gridObject.dataSource.fetch(), but I am not sure this will make any difference in your case.

http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#initializing-the-grid-inside-a-hidden-container

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
iCognition
Top achievements
Rank 1
Answers by
Dimo
Telerik team
iCognition
Top achievements
Rank 1
Share this question
or