Get data of row in childgrid from custom command click

Question

So I have a grid with a child grid (just showing the child grid var below). I am trying to get the row data when the custom command is clicked. It works for the grid but not the childgrid as it returns null for rowObj. It gets the correct row ID though with the closest expression. I am sure this is simple, but I can't get to the childgrid apparently. Thoughts?

var childGrid = {
    dataSource: childGridData,
    queryString: 'gridId',
    queryCellInfo: childQueryCellInfo,
    columns: [
        {field: 'week_num', headerText: 'Week', type: 'number'},
        {field: 'result_text', headerText: 'Results', type: 'text'},
        {headerText: 'Manage Results', textAlign: 'center',
            commands: [
                {type: 'Edit Results', buttonOption: {iconCss: 'e-icons e-calculatedmember',cssClass: 'e-flat',click: commandResultsClickHandler}}
            ]
        }
    ],
};

function commandResultsClickHandler(args){
    mode='result';
    var rowObj = grid.getRowObjectFromUID(jQuery(args.target).closest('.e-row').attr('data-uid'));
    data = rowObj.data;
}

Edit:  I tried this as well, but I get Cannot read property 0 of undefined, so its not finding the childgrid instance:

function commandResultsClickHandler(args){
    mode='result';
    var cgrid = jQuery('#Grid').parentsUntil(args.target, 'e-grid'); 
    console.log(cgrid.ej2_instances[0].getRowInfo(args.target).rowData);
}

Balaji Sekar · Answer

Hi Mark, 
 
Greetings from the Syncfusion support. 
 
We could see you would like to get the row data in the command click action. We suggest you to use the commandClick event of the Grid it is trigger when click a command button and we can get the row details in this event. Please refer the below code example and sample for more information. 
 




[index.js] 
 
 childGrid: { 
            dataSource: dataManger, 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            commandClick: function(args){ 
             console.log(args.rowData); 
            }, 
            columns: [ 
              { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
              { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 
              { field: 'Freight', headerText: 'Freight', width: 120 }, 
              { field: 'ShipName', headerText: 'Ship Name', width: 150 }, 
              { 
                headerText: 'Manage Results', textAlign: 'center', 
                commands: [ 
                  { type: 'Edit Results', buttonOption: { iconCss: 'e-icons e-edit', cssClass: 'e-flat' } } 
                ] 
              }, 
            ] 
        }, 
 
 
Sample link: https://stackblitz.com/edit/wejjcj-xxzf9a?file=index.js 

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/grid/#commandclick 

Please get back to us if you need further assistance. 

Regards, 
Balaji Sekar

Mark · Answer

Awesome.  This worked like a champ.  Can I suggest the documents be updated or the two commands be made the same, because we spent days working on this by following the documents here:  https://ej2.syncfusion.com/javascript/documentation/grid/edit/#custom-command.  It there a reason why they pass different sets of args?

Balaji Sekar · Answer

Hi Mark, 
 
Sorry for inconvenience caused, 
 
We have bind the button component in the Grid using command column feature. In this Documentation, enabled the click event of the button component since it is not Grid related event. We have provided the commandClick event of the Grid. We suggest you to use the commandClick event that has been Grid component event and please refer the following Documentation for more information. 
 
Help Documentation:     https://ej2.syncfusion.com/javascript/documentation/api/grid/commandClickEventArgs/ 
                                                https://ej2.syncfusion.com/javascript/documentation/api/grid/#commandclick 
 
We have validated the provided information and logged a documentation task for the reported problem. Until then we appreciate your patience. We will modify the sample and refresh the documentation in any of our upcoming release. Until then we suggest you to refer the sample for more information about command click in Grid. 
 
Sample link: https://stackblitz.com/edit/wejjcj-xxzf9a?file=index.js  
 
Regards, 
Balaji Sekar.