Grid way to trigger a function when a row is expanded.

Question

I tried detailDataBound function of Grid, but that seems to trigger only on initial expand. I want to trigger a function everytime a row is expanded.

Dhivya Rajendran · Answer

Hi Robin, 

Thanks for contacting Syncfusion support. 

Query :  I want to trigger a function everytime a row is expanded 
 
We have validated your query and you can achieve your requirement by using the below way. In the below sample, we have bind the click event for the grid and check whether the target element contains e-detailrowexpand class(contains when row expand). You can also achieve your requirement by using the below way. 

Kindly refer to the below code example and sample for more information. 





import { enableRipple, closest } from '@syncfusion/ej2-base'; 
Grid.Inject(Page, Selection, DetailRow); 
let grid: Grid = new Grid({ 
    dataSource: employeeData, 
    allowSorting: true, 
    columns: [ 
        { field: 'EmployeeID', headerText: 'Employee ID', width: 125 }, 
        { field: 'FirstName', headerText: 'Name', width: 125 }, 
    ], 
    childGrid: { 
       dataSource: dataManger, 
        queryString: 'EmployeeID', 
        allowPaging: true, 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID' width: 120 }, 
        ], 
    }, 
}); 
grid.appendTo('#Grid'); 
 
grid.element.addEventListener('click', (e) => { 
    let cell = closest(e.target, 'td'); // details cell element 
    if (cell.classList.contains('e-detailrowexpand')) { 
     const rowIndex = parseInt(cell.parentElement.getAttribute('aria-rowindex'), 10); 
     const data = grid.getCurrentViewRecords()[rowIndex]; // get details row data 
     alert("Child Grid"); 
    } 
}); 


Sample : https://plnkr.co/edit/XKC5RCfvpOfeBsFC7ofK?p=preview  

Regards,R.Dhivya