on add new record and on delete record event in react grid

[Venkatesh Babu S N]

When we are trying to add or delete a row I need to capture the added or deleted record in the grid. 

How can I achieve this in case of normal edit mode(type = 'Normal')?

Can you guys help me with this?

[Rajapandi Ravi]

Hi Venkatesh, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to capture the event while the record was added/deleted in the Grid. You can achieve your requirement by using the actionBegin and actionComplete event of Grid.  

actionBegin: Triggers when Grid actions such as sorting, editing, filtering, paging, grouping etc. are beginning. 

actionComplete: Triggers when Grid actions such as sorting, editing, filtering, paging, grouping etc. are completed. 

Please refer the below code example and sample for more information. 

 

export class NormalEdit extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"]; 

    this.format = { type: "dateTime", format: "M/d/y hh:mm a" }; 

    this.droplist = [ 

      { text: "Top", value: "Top" }, 

      { text: "Bottom", value: "Bottom" } 

    ]; 

  } 

  actionBegin(args) { 

    if (args.requestType === "delete") { //triggers while deleting the record 

      console.log("actionBegin triggers"); 

      console.log(args.data); 

    } 

    if (args.requestType === "save") { //triggers while adding the record 

      console.log("actionBegin triggers"); 

      console.log(args.data); 

       

    } 

  } 

  actionComplete(args) { 

    if (args.requestType === "save") { // triggers when the record was added  

      console.log("actionComplete triggers"); 

      console.log(args.data); 

    } 

    if (args.requestType === "delete") { // triggers when the record was deleted 

      console.log("actionComplete triggers"); 

      console.log(args.data); 

    } 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <div className="col-md-9"> 

            <GridComponent 

              dataSource={orderDataSource} 

              ref={grid => (this.gridInstance = grid)} 

              actionBegin={this.actionBegin.bind(this)} 

              actionComplete={this.actionComplete.bind(this)} 

            > 

              <ColumnsDirective> 

                 .  .  .  .  .  .  .  .  . 

                 .  .  .  .  .  .  .  .  . 

              </ColumnsDirective> 

              <Inject services={[Page, Toolbar, Edit]} /> 

            </GridComponent> 

          </div>  

        </div> 

      </div> 

    ); 

  } 

} 

 

Sample: https://stackblitz.com/edit/react-bhvrey-1z2bzr?file=index.js 

Regards,
Rajapandi R