loosing added or edited data from grid on state update

[Venkatesh Babu S N]

hi,

in batch edit mode, loosing the newly added or edited record/data  on update of state varibles.

this issue is replicationg only when i include pagination template.

please find below steps to replicate the issue

1.add new record to the grid or edit  existing record

2.you will find that newly added or edited record in "grid.getBatchChanges()" method.

4.update some other state varible by clicking on something outside the grid ( add an icon outside the grid and click on that. onclick of that update some state variable using setstate method)

5.after updating state varible the newly added record or edited data is getting removed from the grid.

6.but the newly added or edited  record can still be found in "grid.getBatchChanges()" method.

if i remove pagination template, everthing is working as expected. syncfusion version i am using is 18.4.44. below is my code

<GridComponent

                    dataSource={this.state.data}

                    allowSorting={false}

                    allowMultiSorting={false}

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

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

                    allowReordering={true}

                    allowResizing={true}

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

                    allowPaging={true}

                    allowSelection={true} 

                    editSettings={this.editOptions}

                    selectionSettings={this.settings}

                    pageSettings={{ template: this.template.bind(this), pageSize: 5 }}

                    rowSelected={this.rowSelected}

                    contextMenuItems={this.contextMenuItems}

                    contextMenuClick={this.contextMenuClick}

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

                    queryCellInfo={this.customizeCell}> 

                    <Inject services={[Page,Edit,Toolbar, Sort, Reorder, Resize, ContextMenu]} /> 

                  GridComponent>

template(pagerData) {

  return (

    <div className="e-pagertemplate">

      <div className="col-lg-12 control-section">

          <div className="content-wrapper">

          <NumericTextBoxComponent min={1} max={3} value={pagerData.currentPage} format='###.##' change={this.change.bind(this)}>NumericTextBoxComponent>

        div>

      div>

      <div

        id="totalPages"

        className="e-pagertemplatemessage" style={{ marginTop: 8, marginLeft: 30, border: "none", display: "inline-block"}}>

        <span className="e-pagenomsg">

          {pagerData.currentPage} of {pagerData.totalPages} pages ({pagerData.totalRecordsCount} items)

        span>

      div>

    div>

  );

}

change(args) {

  this.gridInstance.pageSettings.currentPage = args.value;

}

please help me to fix this issue.

[Shalini Maragathavel]

Hi Venkatesh, 

Thanks for the contacting syncfusion support. 

By default, React components are automatically re-rendered based on the state value change. In this cause, Grid component is also forced to re-render. So the Grid previous state neglect in this process. To overcome the reported issue we suggest you to call the endEdit method(to save the edited cell values) before updating the state using setState method as demonstrated in the below code snippet, 

 

 

export class NormalEdit extends SampleBase { 

  constructor() { 

    super(...arguments); 

 

    this.refreshGrid = false; 

    this.state = { 

      pageNumber: 1, 

      count: 1 

    }; 

    this.handleClick = this.handleClick.bind(this) 

    

  } 

  actionBegin(args) {} 

  clickHandler(args) {} 

 

  template(pagerData) { 

    console.log(pagerData); 

 

    return ( 

      <div className="e-pagertemplate"> 

        <div className="col-lg-12 control-section"> 

          <div className="content-wrapper" /> 

        </div> 

        <div 

          id="totalPages" 

          className="e-pagertemplatemessage" 

          style={{ 

            marginTop: 8, 

            marginLeft: 30, 

            border: "none", 

            display: "inline-block" 

          }} 

        > 

          <span className="e-pagenomsg"> 

            {pagerData.currentPage} of {pagerData.totalPages} pages ( 

            {pagerData.totalRecordsCount} items) 

          </span> 

        </div> 

      </div> 

    ); 

  } 

  gridTemplate(props) { 

    console.log(props); 

    console.log(this.state.pageNumber); 

    return <div>{props.CustomerID}</div>; 

  } 

  template1(data) { 

    return <div>hfskfjdsf</div>; 

  } 

  handleClick(input) { 

    this.gridInstance.endEdit(); 

     

    this.setState({ count: this.state.count + 1 }); 

    

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div id="target" className="col-lg-12 target-element"> 

          <button onClick={this.handleClick.bind(this, 0)}>Click Me</button> 

          <GridComponent 

            id="Grid" 

            dataSource={orderDataSource.slice(0, 2)} 

            pageSettings={{ template: this.template.bind(this), pageSize: 12 }} 

          > 

            <ColumnsDirective> 

             . . . 

            </ColumnsDirective> 

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

          </GridComponent> 

        </div> 

     </div> 

    ); 

  } 

} 

 

 

Please find the  below sample for your reference. 

Sample : https://stackblitz.com/edit/react-4dy6fm-akiush?file=index.js 

API Link: https://ej2.syncfusion.com/react/documentation/api/grid/#endedit

Let us know if you have any concerns. 

Regards,
Shalini M.