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

Laurens Albers

Asked On March 1, 2019 09:27 AM UTC

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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.

Reply | Reply with quote

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. 

Regards,

Thavasianand S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143034	Mar 1,2019 09:27 AM UTC	Mar 5,2019 04:08 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US