Is there any way to put Edit Delete and Add buttons to the same cell in ejTreeGrid?

[xia]

Hi

We had a demand to put Edit Delete and Add buttons to the same cell(parent row) in ejTreeGrid.

We noticed the demo site has an example about column command, but that can only put Edit Delete or Save Cancel into a cell at the same time.

Here is our prototype design -- https://drive.google.com/open?id=10x7PO0Hq5cHy48SDkqAbkCCXHOwsay29

Could someone help us? Thank you

[Pooja Priya Krishna Moorthy]

Hi Xia, 

 

We can include custom buttons in command column to perform custom actions using the type property. By using queryCellInfo event of TreeGrid control, we can include the custom buttons only for the parent records. By using the addRow method, we can dynamically add the empty rows on custom button click action, using the click event of button control. 

Please find the below code example. 

 

 

<script> 

       $("#TreeGridContainer").ejTreeGrid({ 

              //... 

              columns: [ 

              //... 

                      { 

                      field: 'custom', headerText: "Command Column", 

                      commands: [ 

                                    //... 

                                    { type: "Add", buttonOptions: { text: "Add", click: addRow } }, 

                             ] 

                      } 

              ], 

              queryCellInfo: function(args){ 

                      if (args.column.field == "custom") { 

                         if(!args.data.hasChildRecords){ 

                             $(args.cellElement).find(".e-Addbutton").css({ 'display': 'none'}); 

                         } 

                      } 

              } 

       }) 

       function addRow(args){ 

              var obj =  $("#TreeGridContainer").ejTreeGrid("instance"); 

              var index = obj.getIndexByRow(args.target.closest("tr")); 

              obj.selectRows(obj.getUpdatedRecords().indexOf(obj.model.currentViewData[index])); 

              var data = {}; 

              obj.addRow(data, ej.TreeGrid.RowPosition.Child); 

       } 

}); 

</script> 

 

Please find the below sample link. 

Link - https://jsplayground.syncfusion.com/spbmxudd 

 

Regards, 

Pooja Priya K. 

[xia]

Hi Xia, 

 

We can include custom buttons in command column to perform custom actions using the type property. By using queryCellInfo event of TreeGrid control, we can include the custom buttons only for the parent records. By using the addRow method, we can dynamically add the empty rows on custom button click action, using the click event of button control. 

Please find the below code example. 

 

 

<script> 

       $("#TreeGridContainer").ejTreeGrid({ 

              //... 

              columns: [ 

              //... 

                      { 

                      field: 'custom', headerText: "Command Column", 

                      commands: [ 

                                    //... 

                                    { type: "Add", buttonOptions: { text: "Add", click: addRow } }, 

                             ] 

                      } 

              ], 

              queryCellInfo: function(args){ 

                      if (args.column.field == "custom") { 

                         if(!args.data.hasChildRecords){ 

                             $(args.cellElement).find(".e-Addbutton").css({ 'display': 'none'}); 

                         } 

                      } 

              } 

       }) 

       function addRow(args){ 

              var obj =  $("#TreeGridContainer").ejTreeGrid("instance"); 

              var index = obj.getIndexByRow(args.target.closest("tr")); 

              obj.selectRows(obj.getUpdatedRecords().indexOf(obj.model.currentViewData[index])); 

              var data = {}; 

              obj.addRow(data, ej.TreeGrid.RowPosition.Child); 

       } 

}); 

</script> 

 

Please find the below sample link. 

Link - https://jsplayground.syncfusion.com/spbmxudd 

 

Regards, 

Pooja Priya K. 

Thank you Pooja Priya K!

[Gurunathan A]

Hi Xia, 

  

You are welcome. 

  

Regards, 

Gurunathan