Get row data when clicking on custom command from Command Column

[Ignacio]

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));

Thanks!

[Seeni Sakthi Kumar Seeni Raj]

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 () { 

            $("#Grid").ejGrid({ 

                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)); 

                                      } 

                                  } 

                              } 

                                        ] 

                                    } 

                    ] 

                }, 

 

            }); 

        }); 

    </script> 

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

http://jsplayground.syncfusion.com/zofailsm 

Refer to the following Help Documents. 

https://help.syncfusion.com/js/api/ejgrid#methods:getindexbyrow 

https://help.syncfusion.com/js/api/ejgrid#methods:getcurrentviewdata 

Regards, 

Seeni Sakthi Kumar S. 

[Ignacio]

Thanks. In my enviroment i'm getting "args.target is undefine", maybe some change in version 14.3.0.49 ?  i'm working with 14.2.0.26. 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 ?

Thanks!

[Seeni Sakthi Kumar Seeni Raj]

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. 

https://help.syncfusion.com/js/release-notes/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.   

 

Link: https://www.syncfusion.com/forums/126177/essential-studio-2016-volume-3-release-v14-3-0-49-is-available-for-download 

 

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(14.3.0.49). 

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

Regards, 

Seeni Sakthi Kumar S.