ShowDetailsRowInfoColumn in EJ2 TreeGrid

[Zhenhua Wang]

Hello,

I'm working on migrating my web application from EJ1 to EJ2, and there is 'showDetailsRowInfoColumn' property in EJ1 TreeGrid, when I set it to 'true', there will be an additional column showing in the grid:

and uses can clicking on this button to make the detail information visible.

But I can't find a similar property from the TreeGrid of EJ2. And in the demos of this control, the detail info is always visible for every record in TreeGrid which is not acceptable in my application.

Is there some way that users can toggle the detail info to show or hide in TreeGrid?

Thanks!

[Manivannan Padmanaban]

Hi Zhenhua, 

Greeting from Syncfusion Support. 

Query: Is there some way that users can toggle the detail info to show or hide in TreeGrid? 

 

We have achieved your requirement using the command column feature and detailDataBound event of Tree Grid. Refer the below code example, 

 

import { TreeGrid, DetailRow , IRow, CommandColumn} from '@syncfusion/ej2-treegrid'; 

……………    

// import the CommandColumn feature 

 

TreeGrid.Inject(DetailRow,CommandColumn); // inject the CommandColumn feature 

 

let onClick = (args: Event) => { 

    let row: any = (<HTMLTableRowElement>closest(args.target as Element, '.e-row')).nextSibling;  // get the details row. 

    if (row.style.display == "none") { 

        row.style.display = "";    // Show/hide the details row. 

    } else { 

      row.style.display = "none"; 

    } 

     

} 

   

     

var onDetailDataBound = function(args) { 

  args.detailElement.parentElement.style.display = "none";  // hide the details row. 

 

} 

 

    let treegrid: TreeGrid = new TreeGrid( 

        { 

……………………………….. 

            detailDataBound: onDetailDataBound, 

            width: 'auto', 

            columns: [ 

……………………………………… 

                { headerText: 'Row Details', textAlign:'Left', width: 120, 

commands: [{ buttonOption: { content:"Details RowInfo", click: onClick } }]}, 

            ] 

        }); 

    treegrid.appendTo('#TreeGrid'); 

 

Sample Link: https://stackblitz.com/edit/gwfyrp-9rkasc 

Also, refer to the below API and help documentation links. 

https://ej2.syncfusion.com/documentation/treegrid/edit/#custom-command 

https://ej2.syncfusion.com/documentation/api/treegrid#detaildatabound 

If you need further assistance, please get back to us. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban 

[Zhenhua Wang]

The problem has been solved using the method you provided.

Thank you Manivannan! 

[Manivannan Padmanaban]

Hi Zhenhua, 

Thanks for the update. 

We are happy to hear that your requirement was achieved. 

Kindly get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban