Blazor Grid Move horizontal scrollbar below Aggregate rows

[Giles Wakefield]

I have a project which uses a grid and one or more frozen columns, and I've added a basic grand total via Aggregates, which works OK.

however, if there are enough columns to cause a horizontal scrollbar to be required, then the scrollbar appears between the internal data rows and the total row. This looks a little bit strange and I would like the scrollbar to appear at the very bottom of the grid, underneath the total row too.

The grid appears to render the scrollbar element inside the element containing just the rows, with the element with the aggregate row being outside this.

I have figured out that I can work around this with some JS to dynamically move the HTML elements after rendering and this doesn't seem to cause any issues, but is not exactly an elegant solution:

 //find the scrollbar element (.e-scrollbar)
let sb = document.getElementsByClassName('e-scrollbar');
var fragment = document.createDocumentFragment();
fragment.appendChild(sb[0]);

//find the overall grid container (.e-grid)
let gridContainer = document.getElementsByClassName('e-grid');

//append scrollbar to end of grid container
gridContainer[0].appendChild(fragment)

So:

1. Is there any potential problem with moving the scrollbar element like this (seems to work fine)?
2. Is there a better way to accomplish this without resorting to DOM manipulation via JS?

I have attached a sample solution which demonstrates this. I have added the above JS code into the _Host.cshtml file so it runs 5 seconds after the page loads (via window.setTimeout()), so you can first see the scrollbar in its default position, then it moves to the bottom of the grid after a short wait.

Attachment: FreezeDirection_d662bf5.zip

(Edit to add: this small demo app is using V20.4.0.48, but my actual app is currently using 21.1.39 but has the same behaviour)

[Monisha Saravanan]

Hi Giles,

We would like to inform you that the DataGrid comprises of Header, Content and Footer section and the GridAggregate column is placed inside the footer template, which is separated from the grid content or body. The horizontal scrollbar is generated by performing calculation of the Grid body (i.e.) If the width of DataGrid exceeds the parent container then it will generate horizontal scrollbar. So we have appended the scrollbar in Grid content section.

In your shared code after applying styles we could see that the scrollbar is rendered as an separate section (header, content, footer, scrollbar). So it is not feasible to handle your requirement at source level to append the scrollbar element inside container body.

Please let us know if you have any concerns.

Regards,

Monisha

[Giles Wakefield]

I appreciate that the scrollbar is based on the grid contents, but it does​ scroll the footer section as well so it's not completely unlinked.

Can you not add a feature to allow the scrollbar - once it is calculated based on the contents - to just then be rendered at the bottom of the footer? 

My solution using JS does seem to work, the only issue being it's a little difficult to work out exactly when the grid has finished rendering so sometimes by the time it runs the scrollbar is not yet in position so it fails to find it before moving it.  Can you not do this internally somehow?

"No, we think a scrollbar should appear horizontally in the middle of all the content which it will scroll" is frankly not a particularly good answer IMO.

[Monisha Saravanan]

Hi Giles,

We have reviewed your requirement and we would like to let you know that we have template support for aggregate column. So we can render the footer container height as per our requirement. If we render scrollbar below the aggregate column then the vertical scrollbar should be rendered up to the horizontal scrollbar for better user experience and it is impossible for us to maintain the vertical scroll position for the dynamically generated footer container and also It will break our current architecture. So it is not feasible to achieve your requirement at our end.

If you still have queries then please let us know the difficulties you are experiencing with the current architecture.

Regards,

Monisha