ShowDetailsRowInfoColumn in EJ2 TreeGrid

Question

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 · Accepted Answer

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 · Answer

The problem has been solved using the method you provided.Thank you Manivannan!

Manivannan Padmanaban · Answer

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