Move horizontal scrollbar to bottom of aggregate section
Hello Syncfusion Team,
I created a grid using the Syncfusion component. The width of the grid is larger than the page, so a scrollbar appears below the grid, which is expected and desired behaviour. My issue however is that I have an aggregates section below the grid data and I would like the scrollbar to be below the aggregates section instead of being between the actual grid and the aggregates section.
Please refer to the following StackBlitz :
Regards,
Remy
SIGN IN To post a reply.
7 Replies
Hi Remy
Thanks for your update.
Query : Is there a way I can manually disable the default scrollbar and creating my own scrollbar at the bottom of the aggregate section?
By default in EJ2 Grid we have used browser scrollbar to scroll the contents in the Grid. So, there is no default way to do this. For this case, we suggest that you hide our default scrollbar using the overflow property and create a scrollbar to the external div element. Here we have created a scrollbar for the container element by setting the width to be based on the movable content width. Please refer to the below code and sample link.
|
[app.component.html]
<div class="container">
<ejs-grid. . . . > . . . . </ejs-grid>
</div>
[app.component.css]
.e-movablecontent {
overflow-x: hidden !important;
overflow-y: auto;
}
.container {
width: 200%; // Moveable content width
}
|
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S
Hello Thiyagu,
Thank you for your quick response. Is it possible that the solution you provided only works for a screen of a minimum size? When I run your StackBlitz project in full screen, the "overflow: hidden" seems to hide the original scroll bar successfully. However, if I simply make the window a little bit smaller and refresh the page, there seems to be a rendering problem and the portion of the scroll bar that is in the frozen columns stays visible.
Using your sample as a solid starting point, I was able to (almost) achieve my requirement using the following code in the dataBound event :
dataBound() {
// SCROLL GRID CONTENT WITH AGGREGATE SECTION WHEN USING THE SCROLLBAR BELOW THE AGGREGATE SECTION
const topScrollBar = document.querySelectorAll('.e-grid .e-movablecontent');
const bottomScrollBar = document.querySelectorAll('.e-grid .e-summarycontent .e-movablefootercontent');
bottomScrollBar[0].addEventListener('scroll', function() {
topScrollBar[0].scrollTo(bottomScrollBar[0].scrollLeft, 0);
}, false);
}
And the following in the CSS :
/**************************************************************/
/* SHOW SCROLLBAR BELOW AGGREGATE SECTION */
/**************************************************************/
.VacationsGrid .e-summarycontent .e-movablefootercontent {
overflow-x: scroll;
overflow-y: hidden !important;
}
/**************************************************************/
/* HIDE TOP SCROLLBAR */
/**************************************************************/
.VacationsGrid .e-movablecontent {
overflow: hidden !important;
}
The only thing missing is the issue mentioned at the beginning of this post (a portion of the original scrollbar still being visible, even with the overflow parameter hidden). Using Chrome's web inspector to set the overflow parameter to "hidden" after runtime seems to work correctly, but adding the "overflow: hidden !important" line directly in the project's CSS creates this problem :
Would you happen to know how I can get rid of this portion of the scrollbar?
Please refer to the following StackBlitz project :
Regards,
Remy
Hi Remy,
Thanks for your update.
We can achieve your requirement by customizing the height of frozencontent. Please review the below code and sample link,
|
.e-frozencontent {
height: inherit !important;
} |
Updated Sample link : https://stackblitz.com/edit/angular-ivy-rks5av?file=src%2Fapp%2Fapp.component.ts
Screenshot :
Please get back to us, if you need any further assistance.
Regards,
Thiyagu S.
SIGN IN To post a reply.
