We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid, setting auto scrollbar not working, TypeScript3+, Angular7+

Thread ID:





143034 Mar 1,2019 09:27 AM UTC Mar 5,2019 04:08 AM UTC Angular - EJ 2 3
Tags: Grid
Laurens Albers
Asked On March 1, 2019 09:27 AM UTC


I am trying to hide the "grayed out" scrollbars of 4 grids within 1 component(see image in zip). I found the class/element responsible for the setting it is initially set to
OverflowY: scroll, but i want it set to auto.

I have tried the following

//1 of the 4
  <ejs-grid #grid1 id="grid1" height="110px" width="100%"
              droppable //ng-drag-drop npm

.ts file
  created(args: any) {
    let parent: any = this.grid1.element.getElementsByClassName('e-gridcontent e-lib e-droppable');
    let child: any = parent[0].getElementsByClassName('e-content');
    child[0].style.overflowY = 'auto'; //Does not work

also tried things like, but does not work.
.e-gridcontent.e-lib.e-droppable {
  overflow-y: auto

.e-grid {
  overflow: auto;

.e-content {
  overflow: auto;

Any idea on how i set the scrollbars overflowY to auto?



Attachment: image_4ae320f5.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 4, 2019 10:43 AM UTC

Hi Laurens, 

Greetings from Syncfusion. 

We can achieve your requirement using the dataBound event of Grid.   

Refer the below code example. 


<ejs-grid #grid [dataSource]='data' (dataBound)='dataBound($event)' height='400'> 
        <e-column field='OrderID' headerText='Order ID' width='150' textAlign='Right'></e-column> 
        <e-column field='CustomerName' headerText='Customer Name' width='160'></e-column> 
        <e-column field='OrderDate' headerText='Order Date' format="yMd" width='155' textAlign='Right'></e-column> 
        <e-column field='Freight' headerText='Freight' width='130' format='C2' textAlign='Right'></e-column> 
        <e-column field='ShippedDate' headerText='Shipped Date' format="yMd" width='155' textAlign='Right'></e-column> 

public dataBound(args) : void{ 
       if (this.grid.currentViewData.length * this.grid.getRowHeight() < parseInt(this.grid.height)) { 
        var hdTable = this.grid.getHeaderContent(); 
        hdTable.style.paddingRight = '' 
        document.querySelector('.e-grid .e-content').style.overflowY = 'auto'; 
      else { 
        var hdTable = this.grid.getHeaderContent(); 
        hdTable.style.paddingRight = '16px'; 
        document.querySelector('.e-grid .e-content').style.overflowY = 'scroll'; 

We have prepared a simple sample in the following stackblitz link. 

Refer the help documentation. 

Please let us know if you need further assistance on this.  

Thavasianand S. 

Laurens Albers
Replied On March 4, 2019 12:42 PM UTC

Thanks! Based on your code I could rewrite it to make it work for my multiple grids within the component.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On March 5, 2019 04:08 AM UTC

Hi Laurens, 
We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon