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

[Tzelon]

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

[Jayaprakash Kamaraj]

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 

                               } 

                ], 

http://help.syncfusion.com/js/grid/columns#command-column 

Sample: http://jsplayground.syncfusion.com/zh12heev 

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. 

  

  

[Tzelon]

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

[Jayaprakash Kamaraj]

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>  Sample: http://jsplayground.syncfusion.com/kbih3sfg  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. 

[Sunil patra]

and how to do for typescript

[Farveen Sulthana Thameeztheen Basha]

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:- 

http://www.syncfusion.com/downloads/support/directtrac/123848/NEB6C3~1-324215643.ZIP 

Please refer to the documentation Link:- 

https://help.syncfusion.com/angular/grid/columns#command-column 

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

Regards, 

Farveen sulthana T