Tree grid detailed row expand/collapse

[Iana Stapelberg]

Is there a way for angular treegrid component to add a collapse/expand to a detailed row?

https://ej2.syncfusion.com/angular/documentation/treegrid/row/detail-template?cs-save-lang=1&cs-lang=ts

[Pon Selva Jeganathan]

Hi Iana Stapelberg,

Query: Is there a way for angular treegrid component to add a collapse/expand to a detailed row?

Based on your query, we understand that you want to show or hide the detailed row based on the expand or collapse action. We achieved your requirement by using the custom command feature of the treegrid.

Please refer to the below code example,

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

            <e-columns>

           

…

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

            </e-columns>

this.commands = [

      {

        buttonOption: {

          content: 'Expand',

          cssClass: 'e-flat',

          click: this.expand.bind(this),

        },

      },

      {

        buttonOption: {

          content: 'Collapse',

          cssClass: 'e-flat',

          click: this.collapse.bind(this),

        },

      },

    ];

  }

  expand(args) {

    var row = <HTMLTableRowElement>closest(args.target as Element, '.e-row');

    var det_row = row.nextElementSibling; //here get the detail row element

 

 

    (det_row as any).style.display = '';

  }

  collapse(args) {

    var row = <HTMLTableRowElement>closest(args.target as Element, '.e-row');

    var det_row = row.nextElementSibling; //here get the detail row element

 

    (det_row as any).style.display = 'None';

  }

 

In the above code example, we have implemented the custom command feature. Depending on the action performed, we dynamically toggle the visibility of the detailed row using the display property in the CSS style.

Please refer to the below sample,

https://stackblitz.com/edit/angular-yhat5a-xghflv?file=src%2Fapp.component.ts

Please refer to the below help documentation,

https://ej2.syncfusion.com/angular/documentation/treegrid/editing/command-column-editing#custom-command

If the above solution does not meet your requirement. Please share the below details.

1. Could you please provide a detailed explanation of your requirement?
2. If possible, could you share a video demo or screenshot of your requirement
3. Complete code example.
4. If possible, share the simple sample.

Kindly get back to us for further assistance.

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.