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. Image for the cookie policy date

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

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

3 Replies

PP Pooja Priya Krishna Moorthy Syncfusion Team August 12, 2019 09:44 AM UTC

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. 
 
Regards, 
Pooja Priya K. 



XI xia replied to Pooja Priya Krishna Moorthy August 21, 2019 01:28 AM UTC

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. 
 
Regards, 
Pooja Priya K. 


Thank you Pooja Priya K!


GA Gurunathan A Syncfusion Team August 21, 2019 06:12 AM UTC

Hi Xia, 
  
You are welcome. 
  
Regards, 
Gurunathan 


Loader.
Up arrow icon