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

Virtual scrolling hides data when row is 2 lines high

2 Answers 58 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 17 Sep 2019, 02:59 PM

Hello,

I have a problem with the grid's virtual scrolling not taking into account the grid's row height. When a cell's data needs two lines to display properly, virtual scrolling doesn't adjust the available scroll to compensate. This makes data hide under the grid's defined box. 

Is there a way to handle this scenario properly?

Thank you for the help!!

David

2 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 20 Sep 2019, 10:25 AM

Hi David,

When the virtual scrolling functionality of the Kendo UI Grid is enabled, it is mandatory the grid's row heights be fixed. If the rows' heights alternate, unexpected behavior might occur, such as misalignments. The following CSS could be used to modify the height:

      .k-grid tbody tr {
        line-height: 14px;
      }

Or, to be more specific:

    <style>
      .k-virtual-scrollable-wrap td {
        font-size: 14px;        
        white-space:nowrap;
        line-height: 13px;
      }

      #grid .k-virtual-scrollable-wrap tr td{
        height: 15px
      }
    </style>

More information on the limitations of the virtual scrolling could be found here:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/scrolling/virtual-scrolling#known-limitations

I hope you find this helpful.

 

Best regards,
Tsvetomir
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
David
Top achievements
Rank 1
answered on 02 Oct 2019, 02:17 PM

Hi Tsvetomir,

 

Thank you for your reply! I hadn't stumbled upon the known limitations yet, thank you for sharing it!

I understand, I have added the nowrap to make sure my row heights don't get bigger. Since the columns width can be adjusted, this solution is just what I needed.

Thanks again!

David

Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
David
Top achievements
Rank 1
Share this question
or