Expand mode to be single in Hierarchy grid and log column values of expanded row

Kunal Bajaj

Asked On September 5, 2019 10:41 AM UTC

I am trying to implement hierarchy grid, in which I want to collapse other expanded grid and only open the one intended. Also I want to log the data in console for which the row is expanded. I tried using detailsDataBound method but it triggers only once and after that it is not logging values.

Sample Table structure:

I want to implement the collapse other and expand one thing for both parent and child tables. Thanks in advance!!

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On September 6, 2019 09:18 AM UTC

Hi Kunal

Greetings from Syncfusion.

We could see you would like to collapse all the rows except the currently expanding Row. We have achieved this by binding the capturing click event to the Grid element which will handle the required scenario for the Parent Element as well as its successor. Later, in the event, collapseAll method has been used to collapse the records. Refer to the following code example.

onLoad() : void {

// event capturing used

this.grid.element.addEventListener('click', this.collapseAll.bind(this), true);

}

collapseAll (args): void {

let tgt = args.target;

if (tgt.closest('.e-grid').getAttribute('id') !== this.grid.element.getAttribute('id')) {

// for child grid

if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) {

tgt.closest('.e-grid').ej2_instances[0].detailRowModule.collapseAll();

}

} else if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) {

// for Parent Grid Alone

this.grid.detailRowModule.collapseAll();

}

<ejs-grid #grid [dataSource]='data' (load)='onLoad($event)' [childGrid]="childGrid" >

. . .

. . ..

</ejs-grid>

</div>

Demo: https://stackblitz.com/edit/angular-jrmaaq?file=app.component.html

https://ej2.syncfusion.com/angular/documentation/api/grid/detailRow/#collapseall

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Kunal Bajaj

Replied On September 9, 2019 12:21 PM UTC

Hello Seeni,

Thanks for your help here.

Can you please let me know I need to capture the data for the expanded one as well but I am not able to achieve that using details Expand method. I tried using details Data Bound method but that works only once, but I want it to happen in every expansion. Can you please let me know the method to use here. Thanks!

Reply | Reply with quote

Seeni Sakthi Kumar Seeni Raj [Syncfusion]

Replied On September 10, 2019 09:21 AM UTC

Hi Kunal,

You can use getRowObjectsFromUID to get a row details. Refer to the following code example.

collapseAll (args): void {

let tgt = args.target;

if (tgt.closest('.e-grid').getAttribute('id') !== this.grid.element.getAttribute('id')) {

// for child grid

if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) {

var inst = tgt.closest('.e-grid').ej2_instances[0];

console.log(inst.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid')))

inst.detailRowModule.collapseAll();

} else if (tgt.classList.contains('e-dtdiagonaldown') || tgt.classList.contains('e-detailrowexpand')) {

var inst = tgt.closest('.e-grid').ej2_instances[0];

console.log(inst.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid')));

}

} else if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) {

console.log(this.grid.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid')));

// for Parent Grid Alone

this.grid.detailRowModule.collapseAll();

} else if (tgt.classList.contains('e-dtdiagonaldown') || tgt.classList.contains('e-detailrowexpand')) {

console.log(this.grid.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid')));

}

This solution will work for expanding as well as collapsing the Parent Grid and Child Grid rows.

Modified demo: https://stackblitz.com/edit/angular-jrmaaq-vdzhu9?file=app.component.ts

Regards,

Seeni Sakthi Kumar S

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147291	Sep 5,2019 10:41 AM UTC	Sep 10,2019 09:21 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US