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

[Laurens Albers]

Hi,

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

.html

//1 of the 4

  <ejs-grid #grid1 id="grid1" height="110px" width="100%"

              [columns]='columns1'

              [dataSource]='dataSource1'

              [rowHeight]='30'

              [toolbar]='toolbar'

              [editSettings]='editSettings'

              droppable //ng-drag-drop npm

              (created)="created($event)"

              (onDrop)="onGridDrop1($event)"

              [dragOverClass]="'drag-target-border-green'"

              [dragHintClass]="'drag-hint'">

    </ejs-grid>

.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?

greetings,

Laurens

Attachment: image_4ae320f5.zip

[Thavasianand Sankaranarayanan]

Hi Laurens, 

Greetings from Syncfusion. 

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

Refer the below code example. 

[scrolling.html] 

<ejs-grid #grid [dataSource]='data' (dataBound)='dataBound($event)' height='400'> 

    <e-columns> 

        <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> 

    </e-columns> 

</ejs-grid> 

--------------------------------------------------------------------------------------------------------------------- 

[scrolling.component.ts] 

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. 

Link: https://stackblitz.com/edit/angular-3zumph?file=scrolling.component.ts 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid#databound 

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

Regards, 

Thavasianand S. 

[Laurens Albers]

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

[Thavasianand Sankaranarayanan]

Hi Laurens, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.