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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Get row data when clicking on custom command from Command Column

Thread ID:

Created:

Updated:

Platform:

Replies:

126237 Oct 3,2016 01:53 PM UTC Oct 6,2016 08:58 AM UTC JavaScript 3
loading
Tags: ejGrid
Ignacio
Asked On October 3, 2016 01:53 PM UTC

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 [Syncfusion]
Replied On 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 () { 
            $("#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. 


Refer to the following Help Documents. 


Regards, 
Seeni Sakthi Kumar S. 


Ignacio
Replied On October 5, 2016 12:36 PM UTC

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 [Syncfusion]
Replied On 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(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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;