Customize commands for rows being added / rerender row after custom command executed

Question

Greetings!I have a grid with a commands column with actions edit, delete, save, cancel and a custom command that alters the row data.  I managed to customize my custom command for existing rows using "rowDataBound" event.Question 1:Now when a new row is being added using "grid.addRecord()" I want to show only commands "Save" and "Cancel" for the new row. How can I do that? The events "rowDataBound" and "queryCellInfo" are not triggered for new records. The same is true for editing a row.Question 2:When I click on my custom command then the row data is changed and this should be reflected in the grid row. How do I rerender the row after my command is executed? It should be similar to the built-in "save" command that can be clicked when edit the row (rerenders the row).Thanks in advance,Steffen

Praveenkumar Gajendiran · Accepted Answer

Hi Steffen,Thanks for contacting Syncfusion support.Query1: “Now when a new row is being added using "grid.addRecord()" I want to show only commands "Save" and "Cancel" for the new row. How can I do that?” 
 
Based on your query we understand that you want to hide the custom command button when the row is in edit or add form. You can achieve your requirement by adding and removing custom CSS class through actionBegin and actionComplete event of Grid. This is demonstrated in the below code example. 
Code example:  




actionBegin(args){ 
      if(args.requestType == 'beginEdit' || args.requestType == 'add'){ 
        this.grid.element.classList.add('g-added') // here we add the class to hide the add icon when the row in add or edit form  
      } 
    } 
actionComplete(args){ 
      if(args.requestType == 'cancel' || args.requestType =='save'){ 
        this.grid.element.classList.remove('g-added') // here we remove the added class to show the icon when the save or cancel action completed  
      } 
    }  ______________________________________________________________________________[Index.css] 
.g-added .e-alter{ 
  display: none; 
} 
Refer the below document link for the actionBegin and actionComplete event of Grid.Documentation Link: https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin                                       https://ej2.syncfusion.com/react/documentation/api/grid/#actioncompleteQuery 2:  “When I click on my custom command then the row data is changed and this should be reflected in the grid row. How do I rerender the row after my command is executed? It should be similar to the built-in "save" command that can be clicked when edit the row (rerenders the row).” 
We suspect that you want to update and refresh the row value when  the custom command button is clicked . If so you can achieve your requirement by using “setRowData()” method through commandClick event of Grid. Please refer the below code example and sample for more information. 
Code example:  




commandClick(args)  {  // commandClick Function  
    if (this.grid && args.commandColumn.buttonOption.id == "alter") { 
      var newData = args.rowData; // here you can get the current row data by args.rowData 
       newData.ShipCountry = "Germany";  // here you can set the changed value to the row data 
       newData.CustomerName = "Yang Wang"; 
      this.grid.setRowData(newData.OrderID,newData) // here you can update the new row data by using setRowData method of Grid 
 
    } 
  } 
In the above code example, we have updated the changed value row to the Grid by passing parameter as primaryKey value of row and changed row data to the  setRowData() method of Grid.Refer the below document link for the setRowData method and commandClick event of Grid,Documentation Link: https://ej2.syncfusion.com/react/documentation/api/grid/#setrowdata                                       https://ej2.syncfusion.com/react/documentation/api/grid/#commandclickHere, we have prepared a sample for your reference.Sample: https://stackblitz.com/edit/react-x2qcjc-3u6bxb?file=index.js 
If this does not meet your requirement, please elaborate or describe your requirement with pictorial representation, that will be helpful for us to provide appropriate solution.Regards,Praveenkumar G

Elzbieta · Answer

HelloIn the demo: https://stackblitz.com/edit/react-x2qcjc-3u6bxb?file=index.js Is it possible to hide or not to show "ALTER" button for Ship Country = "Germany" ? It make a user confusing because nothing happens.Kind regards Ela

Pavithra Subramaniyam · Answer

Hi Elzbieta,You can achieve your requirement by hiding the button inside the “rowDataBound”
event based on the row data value. Please refer to the below code example, documentation, and sample link for more information.

rowDataBound(args) {
    if (args.data['ShipCountry'] == 'Germany') {
      args.row.querySelector('.e-alter').style.display = 'none';
    }
  }

Documentation: https://ej2.syncfusion.com/react/documentation/grid/row/row/#row-customizationSample               : https://stackblitz.com/edit/react-x2qcjc-vyrmhj?file=index.jsRegards,Pavithra S