expand/collapse specific child grid after command click

[enas]

I hide the expand/collapse icon for all child grid when loading data, after hide expand/collapse icon when user click command click in specific index how can I open the child grid for this parent row , so that only this child opens and not all child grid ? like image bellow

[Santhosh Iruthayaraj]

Hi Enas,

Greetings from Syncfusion Support.

In response to your request, we have prepared a sample demonstrating how to expand and collapse the Child Grid using the command column button. Please find the code snippet and sample below for your reference:

[index.js]

 

function commandClick(args) {

  if (args.commandColumn.buttonOption.content === 'Expand/Collapse') {

    let rowIndex = parseInt(

      args.target.closest('.e-row').getAttribute('data-rowindex')

    );

 

    let isExpanded =

      args.target.closest('.e-row').firstChild.getAttribute('aria-expanded') ===

      'true'

        ? true

 

        : false;

    if (isExpanded) {

      this.detailRowModule.collapse(rowIndex);

    } else {

      this.detailRowModule.expand(rowIndex);

    }

  }

}

 

Sample: https://stackblitz.com/edit/command-column-expand-collapse

Feel free to reach out if you have any further queries.

Regards,
Santhosh I