1. Home
  2. Forum
  3. jQuery
  4. Get row from child grid when clicking on custom command from Command Column

Get row from child grid when clicking on custom command from Command Column

Hey,
I have a grid with 3 child girds, I add action column with custom command. 
I'm trying to get the row and remove it from the table but not delete it from the database. 
I can't figure out how to get the row.. 
Please help


5 Replies
JK Jayaprakash Kamaraj Syncfusion Team April 27, 2016 12:54 PM UTC

Hi Tzelon, 
Thank you for contacting Syncfusion support.   
In Grid, we have in-built support to add CRUD action buttons as one of the Grid columns using type and buttonOptions properties of commands.   
Type property supports the default (Edit / Delete / Save / Cancel) UnboundType buttons. Through buttonOptions property, you can specify all the button options that are supported by Essential Studio JavaScript button control.   
Please refer to the below code example, Help document and sample.  
 
columns: [ 
                       { field: "EmployeeID",isPrimaryKey:true, headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 }, 
……                                      { 
                                   headerText: "Manage Records", 
                                   commands: [ 
                                        
                                       { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } } 
                                                        
                                   ], 
                                   isUnbound: true, width: 130 
                               } 
                ], 

To delete a row manually using custom button, we suggest you to bind the Click event in buttonOptions property of commands and get the row details in the Click event. Refer to the following code example.   

$("#Grid").ejGrid({ 
                dataSource: data, 
               …. 
, 
                columns: [ 
                       { field: "EmployeeID",isPrimaryKey:true, headerText: 'Employee …. 
ej.TextAlign.Left, width: 100 }, 
                                      { 
                                          headerText: "Employee Details", 
                                          commands: [ 
                                { 
                                    type: "details", 
                                    buttonOptions: { 
                                        text: "Details", 
                                        width: "100", 
                                        click: "onClick" 
                                    } 
                                } 
                                          ], 
                                          isUnbound: true, 
                                          textAlign: ej.TextAlign.Left, 
                                          width: 150 
                                      } 
                ], 
…….. 
            }); 
        }); 
        function onClick(args) { 
            var grid = $("#Grid").ejGrid("instance"); 
            var row = this.element.closest("tr"); 
            var index = row.index(); 
            var record = grid.getCurrentViewData()[index]; 
            // do your operations here. 
        } 

If we have misunderstood your requirement, share the following information to find the cause of the issue and provide a solution                                                                          
1.          Do you want to remove the data only in table?   
2.          Do you want to remove the data from the table manually using command column?   
3.          Share a sample if possible or sample hosted link.  
 
Regards, 
Jayaprakash K. 
  
  


TZ Tzelon April 27, 2016 01:09 PM UTC

Hey, Sorry for not being clear.
The problem lays when I have child gird. 
this is my grid setup:
  this.$el.ejGrid({
                    dataSource: data,
                    columns: [
                        {field: "tradeId", headerText: "Trade Id"},
                        {field: "ccyPair", headerText: "CCY Pair"},
                        {field: "product", headerText: "Product"},
                        {field: "direction", headerText: "Direction"},
                        {field: "amount", headerText: "Amount"},     
                    childGrid: {
                        dataSource: data1,             
                        queryString: "tradeId",
                        allowSorting: true,
                        allowMultiSorting : true,
                        editSettings : {
                            allowEditing : true,
                            allowAdding : true,
                            allowDeleting : true
                        },               
                        columns: [
                            { field: "tradeId},
                            {field: "severityId", width: "6%", headerText: 'Severity', template: "{{:severity}}"},
                            {field: "server", width: "10%", headerText: 'Server'},
                            {field: "duplicates", width: "4%", headerText: 'Dups'},
                            {field: "createDate", width: "10%", headerText: 'Create Date',  format: "{0:dd/MM/yyyy hh:mm:ss}"},
                            {field: "information", width: "40%", headerText: 'Info'},
                            {
                                headerText : "Action",
                                commands : [
                                    { type: "remove", buttonOptions: { text: "Remove", click: this.removeFromTable.bind(this) } }
                                ],
                                isUnbound : true,
                                textAlign : ej.TextAlign.Center,
                                width: "30%"
                            }
                        ] 
                    }
                });
As you can see have child grid, when I click on the Remove button on a row inside a child grid, I couldn't find a way to get the record and remove it from the child gird. (only from the table)
Also I would like to know how can I add new row to a specific child grid, but the parent Id (tradeId in the example above)


Thank you
Tzelon

JK Jayaprakash Kamaraj Syncfusion Team April 28, 2016 01:15 PM UTC

Hi Tzelon, 

Thanks for the update 

Query 
Response 
Query1: As you can see have child grid, when I click on the Remove button on a row inside a child grid, I couldn't find a way to get the record and remove it from the child gird. (only from the table) 
Previously, we have mentioned that delete the childgrid row using type and buttonOptions properties of commands. Please refer to the below code example and sample. 
<script type="text/javascript"> 
        $(function () { 
            var data = ej.DataManager(window.employeeView).executeLocal(ej.Query().take(9)); 
                     var data1 = ej.DataManager(window.gridData).executeLocal(ej.Query().take(200)); 
 
            $("#Grid").ejGrid({ 
                dataSource: data, 
                … 
                                      
                ], 
                childGrid: { 
                    dataSource: data1, 
                    queryString: "EmployeeID", 
                    allowPaging: true, 
                                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 
                                                  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false },                 
                enableAutoSaveOnSelectionChange: false, 
                    columns: [ 
                      { field: "OrderID", headerText: 'Order ID',isPrimaryKey:true, textAlign: ej.TextAlign.Right, width: 75 }, 
.. 
  { 
                                   headerText: "Manage Records", 
                                   commands: [ 
                                        
                                       { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } }, 
                                                     
                                   ], 
                                   isUnbound: true, width: 130 
                               }, 
                                     
                    ], 
 
 
                }, 
 
            }); 
        }); 
    </script> 


In the Click event we are able to get the row details using getCurrentViewData method of grid. Refer to the following code example. 

    <script type="text/javascript"> 
        $(function () { 
            var data = ej.DataManager(window.employeeView).executeLocal(ej.Query().take(9)); 
                     var data1 = ej.DataManager(window.gridData).executeLocal(ej.Query().take(200)); 
 
            $("#Grid").ejGrid({ 
                dataSource: data, 
                 
                                      
                ], 
                childGrid: { 
                    dataSource: data1, 
                    queryString: "EmployeeID", 
                    allowPaging: true, 
                                   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 
                                                  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false },                 
                enableAutoSaveOnSelectionChange: false, 
                    columns: [ 
                      { field: "OrderID", headerText: 'Order ID',isPrimaryKey:true, textAlign: ej.TextAlign.Right, width: 75 }, 
…                                  
                                    { 
                                   headerText: "Employee Details", 
                                   commands: [ 
                                       { 
                                           type: "details", 
                                           buttonOptions: { 
                                               text: "Detail", 
                                               width: "100", 
                                               click: "onClick" 
                                           } 
                                       } 
                                   ], 
                                   isUnbound: true, 
                                   textAlign: ej.TextAlign.Left, 
                                   width: 150 
                               } 
                    ], 
 
 
                }, 
 
            }); 
        }); 
    </script> 
 
    <script type="text/javascript"> 
        function onClick(args) { 
              var id = $(".e-detailcell").children().attr("id") 
            var grid = $("#"+id).ejGrid("instance"); 
            var index = this.element.closest("tr").index(); 
            var record = grid.getCurrentViewData()[index]; // here you will get row details. 
              // do your operations here. 
        } 
    </script> 

 


Query2: Also I would like to know how can I add new row to a specific child grid, but the parent Id (tradeId in the example above) 
 
In child grid, row will be added based on parentId(EmployeeID).For example if parentid is 2 and adding new row for corresponding child grid then parent id (EmployeeID) for new row is automatically set as 2.Please refer to the below code example. 
 
childGrid: { 
                    dataSource: data1, 
                    queryString: "EmployeeID", 
                    allowPaging: true, 
                                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 
                                                  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false },  
 
If we have misunderstood your requirement, share the following information to find the cause of the issue and provide a solution                                                                           
 
1.     You want to add new row based on parent id? 
2.     Added row data should reflect  in your database?  
 
 
 
 

 
Regards, 
 
Jayaprakash K. 


SP Sunil patra January 18, 2018 07:20 AM UTC

and how to do for typescript

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 19, 2018 12:44 PM UTC

Hi Sunil , 

As per your requirement, we have add custom button in the command column for the child Grid and In the Click event we are able to get the row details using getCurrentViewData method of grid in Typescript. 

Please refer to the code example:- 

App.component.html 
<ej-grid #grid [allowpaging]="true" [allowsorting]="true" [datasource]="gridData" [childgrid]="childData" > 
    <e-columns> 
        <e-column field="EmployeeID" headertext="Employee ID" width="85" textalign="right"></e-column> 
        .   .   .  
    </e-columns> 
 
App.component.ts 
 
export class GridComponent { 
    public gridData: any; 
    public childData: any;   
    @ViewChild('grid') Grid: EJComponents<any, any>;  
     constructor() { 
       this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true}; 
      this.childData = { 
            dataSource: ej.DataManager({ url: " http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders", crossDomain: true }), 
            queryString: "EmployeeID", 
            allowPaging: true, 
              { field: "OrderID", headerText: 'Order ID', isPrimaryKey: true , textAlign: ej.TextAlign.Right, width: 75 }, 
                {   headerText: "Employee Details",  
                                      columns: [ 
commands: [  
                                       {  
                                          type: "details",  
                                            buttonOptions: {  
                                               text: "Detail",  
                                               width: "100",  
                                               click: function(args) { 
                                                   var id = $(".e-detailcell").children().attr("id")  
                                                    var grid = $("#"+id).ejGrid("instance");  
                                                    var index = this.element.closest("tr").index();  
                                                    var record = grid.getCurrentViewData()[index];  
                                                      console.log(record); 
                                              } 
                                           }  
                                       }  
                                   ],  
                                   isUnbound: true,  
                                   textAlign: ej.TextAlign.Left,  
                                   width: 150  
                             }, 
             ], 
                      
       } 
               
    } 
        
} 

Please refer to the attached files:- 

Please refer to the documentation Link:- 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


Loader.
Up arrow icon