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

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


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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team March 4, 2019 05:43 AM

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. 

LA Laurens Albers March 4, 2019 07:42 AM

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

TS Thavasianand Sankaranarayanan Syncfusion Team March 4, 2019 11:08 PM

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

Live Chat Icon For mobile
Up arrow icon