Detail Template hide and show on toggle button in Treegrid

[Wilma Hill]

Hello,

1.I want to show detail template in treegrid when a toggle button is clicked.

2.In default detail column need to hide.

3.when button is clicked from a row then only selected row show the detail template rather than all row.

Regards,

Wilma Hill

[Farveen Sulthana Thameeztheen Basha]

Hi Wilma, 

Thanks for your interest in Syncfusion Components. 

Query#:- Detail Template hide and show on toggle button in Treegrid 

 

We have checked your query and by default TreeGrid display the detail Template in Expanded state only. Refer to the documentation Link:- 

https://ej2.syncfusion.com/angular/documentation/treegrid/row/#detail-template 

So before proceeding this we need some more additional details to achieve this requirement. 

1. Do you want to Hide/Show the detail template based on the customized button placed on the corresponding row?
2. Or want to show/hide Template using Expand/Collapse icon?(already in TreeGrid)
3. Screenshot(if any) to demonstrate your requirement.

This above provided details will be helpful to provide you solution as early as possible. 

Regards, 

Farveen sulthana T 

[Wilma Hill]

Hi Farvenn,

I want to 

1. Hide/Show the detail template based on the customized button placed on the corresponding row?

Regards,

Wilma Hill

[Farveen Sulthana Thameeztheen Basha]

Hi Wilma, 

We have achieved your requirement by following the below steps. 

1.  Initially we have collapsed the detailTemplate using detailCollapseAll method of Grid in dataBound and Expanded event of the TreeGrid.
2. In order to display Customized buttons(Expand/Collapse) using Custom buttons of the Columns. In the corresponding button click action, we have hide and show for the corresponding detailrow by applying the CSS display as “none” and “table-row”

Refer to the code below:- 

App.Component.html 

 <ejs-treegrid #treegrid [dataSource]='data' height=317 width='auto' childMapping='Children' 

        (dataBound)='dataBound($event)' (expanded)='expanded($event)'> 

        <e-columns> 

            <e-column field = 'Name' headerText='First Name' width='160'></e-column> 

            <e-column headerText = 'Commands' width=120 [commands]='commands'></e-column> 

            <e-column headerText = 'Commands' width=120 [commands]='commands1'></e-column> 

             .       .      . 

 

</e-columns> 

 

App.component.ts 

 

export class AppComponent{ 

  public data: Object[] = []; 

  public commands: any; 

  public commands1: any; 

  @ViewChild('treegrid') 

    public treegrid: TreeGridComponent; 

 

  ngOnInit() : void { 

    this.data = textdata; 

    this.commands = [ 

      { 

        buttonOption: { 

          content: 'Expand', 

          cssClass: 'e-flat', 

          click: this.onExpand.bind(this)       //bind click event for Expand button 

 

          } 

    } 

    ]; 

    this.commands1 = [ 

      { 

        buttonOption: { 

          content: 'Collapse', 

          cssClass: 'e-flat', 

          click: this.onCollapse.bind(this)       //bind click event for Collapse button 

 

        } 

       } 

    ]; 

  } 

  public onExpand = (args: Event) => { 

    let DetailRow = < HTMLTableRowElement > ( 

      closest(args.target as Element, '.e-row') 

    ); 

    DetailRow.nextSibling.style.display = 'table-row';  //display the row on clicking the button 

 

}; 

public onCollapse = (args: Event) => { 

    let DetailRow = < HTMLTableRowElement > ( 

      closest(args.target as Element, '.e-row') 

    ); 

    DetailRow.nextSibling.style.display = 'none';  //Hide the row on clicking the button 

 

}; 

dataBound(args) { 

    this.treegrid.grid.detailCollapseAll();  //Collapse detail row on Initial render 

 

} 

expanded(args) { 

    this.treegrid.grid.detailCollapseAll();//Expand detail row on Initial render 

} 

 

Sample Link:-  https://stackblitz.com/edit/angular-m9kdjy-djcx5z?file=app.component.ts 

Refer to the API link:-  https://ej2.syncfusion.com/angular/documentation/api/treegrid/#databound 

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

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

 

Screenshot:- 

 

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

Regards, 

Farveen sulthana T