DataGrid scrolling problem

Kevin O'Donvovan asked on Oct 6, 2020 5:22 PM

There seems to be a problem with the DataGrid scrolling. I initially noticed this on my own site, then created a simple project (attached) to highlight it. I also copied and pasted the component from the Local Data demo, and that also shows the problem. See the screencast here. There are three problems:

Not visible in the video, but at the start I am trying to scroll using the mouse wheel, but the grid is not responding
Placing the cursor in a cell and repeatedly cursoring down take the active cell off screen without scrolling the grid
When scrolling the entire page, the grid bleeds into the nav bar. I’ve seen this before with other components and corrected it with a zindex change in the CSS, but that didn’t help with the DataGrid

I can correct this by embedding the grid in a fixed height div, but this isn’t reflected in the demo. It also requires extra plumbing to make full use of the available space on the page as the browser window is resized

I’ve attached a sample project that demonstrates the issue. Two components are present – a simple page as the index and your local data demo accessible from the navbar

Attachments:

7206.GridProblem.zip

Replies

0

Andrew Goldenbaum answered on Oct 6, 2020 1:47 AM

Hello Kevin,

I have taken a look at the sample project you have provided, and it appears that in the sample, the issue here is that the grid is not what is scrolling – the page is. The grid is resizing itself to whatever size it needs to measure all of the records, and this is the reason that the mouse wheel is not responding, the arrow scrolling is not working, and manually scrolling leads to the grid bleeding into the nav bar.

When looking at the console, I believe that this likely has something to do with the <div> that the Blazor application is generating has a height and width of 100%, as does the DataGrid, and so this allows the grid to measure to the height of all of its rows. At the moment, I am unsure why this is, and I will be checking with our development staff on this.

I hope to have more information for you on this matter soon.
- 0
  
  Kevin O'Donvovan answered on Oct 6, 2020 8:50 AM
  
  To be honest, there's probably not a lot they can do, as its the containing element that needs to be aware of this, rather than the grid. Might just be a case of highlighting the need in the demos/documentation
  - 0
    
    Andrew Goldenbaum answered on Oct 6, 2020 5:22 PM
    
    Hello Kevin,
    
    Thank you for your update on this matter.
    
    I have been investigating into this a bit further with my colleagues, and I can confirm that this issue is indeed a result of the CSS applied, in that there is no parent or grandparent that has 100% height set, and so the grid is essentially measuring to the full size of its rows.
    
    If you take a look at the element tree in the developer tools of your browser, you essentially need to ensure that every element between the DataGrid and the <html> tag uses height = 100%, but you will also need to adjust the “main” div and the “content” divs such that the content div won’t use 100% of its parent height, but instead use 100% of the available height. You may be able to use a flex box to achieve this if you do not want to hard-code the actual height of a div that you place your grid inside of.
    
    Please let me know if you have any other questions or concerns on this matter.