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
answered on 27 Feb 2014, 01:39 PM
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
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.
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
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.
answered on 28 Feb 2014, 07:53 AM
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).
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.