We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Get row data when clicking on custom command from Command Column

Hi, I'm using a grid with a child grid. In the last one i have a custom button from command column and on click event i want to get all row values (i mean the row in where the button is clicked). How to do that?
I saw this in another thead, but it gets the values from the main grid.

var grid = $("#Grid").ejGrid("instance");
var index = this.element.closest("tr").index();
var record = grid.getCurrentViewData()[index];
console.log("Record Details: " + JSON.stringify(record));


3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 4, 2016 09:04 AM UTC

Hi Ignacio, 

We could see you would like to get the data of the clicked button’s row placed within the child Grid. To get the row details of the Child Grid, you have to create an instance of the child Grid. Refer to the following code example. 

    <div id="Grid"></div> 
    <script type="text/javascript"> 
        $(function () { 
                dataSource: window.employeeView, 
                      . . . 
                childGrid: { 
                    dataSource: window.gridData, 
                    queryString: "EmployeeID", 
                    allowPaging: true, 
                    columns: [ 
                           . . .  
                                 . . 
                                        headerText: "Employee Details", 
                                        commands: [ 
                                  type: "details", 
                                  buttonOptions: { 
                                      text: "Details", 
                                      click: function (args) { 
                                          //Child Grid instance 
                                          var gridInstance = $(args.target.closest(".e-grid")).ejGrid("instance"); 
                                          //get index of the row getIndexByRow() 
                                          var inx = gridInstance.getIndexByRow(args.target.closest("tr")); 
                                          //CurrentViewData using Index 
                                          var data = gridInstance.getCurrentViewData()[inx]; 
                                          console.log("Record Details: " + JSON.stringify(data)); 

We have also prepared a sample that can be downloaded from the following location. 

Refer to the following Help Documents. 

Seeni Sakthi Kumar S. 

IG Ignacio October 5, 2016 12:36 PM UTC

Thanks. In my enviroment i'm getting "args.target is undefine", maybe some change in version ?  i'm working with I change the code to use args.e.target and it seems to be working fine.

BTW it's recomended to change to the last version or i can stay with 14.2 ?


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 6, 2016 08:58 AM UTC

Hi Igancio, 

In the click event of ejButton, you can get the target element (args.target) in latest version v14.3.0.49 and it is the added advantage which is not available in the previous versions. You can either use the (args.e.target) with the earlier versions or else you can upgrade to the latest version for utilizing new update in ejButton. However, Essential Studio JavaScript has upgraded some features in its latest release. Please check the release notes on v14.3.0.49. 

If you would like to upgrade to the latest version, please follow the below steps. 

1)      Download and install the Essential Studio v14.3.0.49  from the below link.   
2)      Replace the Syncfusion scripts, and CSS in your project from the following location. 

            Scripts and CSS: C:\Program Files (x86)\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets 

Here XX.X.X.XX denotes the product version( 

And also after upgrading please ensure to clear the browser cache to avoid accidental reference of the old scripts/CSS. 

Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon