update data source info after edit

[Unknown]

Hello,

I'v made a GridComponenet with data source and edit enable but when i change a record in the table it wont update the change in data source, how do i update the data source?   

import data from './Tablesource/WorkGroupsQuery.json'

import {GridComponent , Inject, Edit ,ColumnDirective,ColumnsDirective, Toolbar} from '@syncfusion/ej2-react-grids'

let WorkGroupsQueryData = []

  data.Parameters.map( (info, index) =>{WorkGroupsQueryData.push(info)})

 const toolbaritems= ['Add', 'Edit', 'Delete', 'Cancel',Update']

const editsettings = {allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' }

<GridComponent

          dataSource={WorkGroupsQueryData}

          editSettings = {editsettings}

          toolbar = {toolbaritems}

        >

          <ColumnsDirective>

            <ColumnDirective field='Field' headerText='Field' width='100' textAlign="Right" />

            <ColumnDirective field='Type' headerText='Type' width='100' textAlign="Right"/>

            <ColumnDirective field='Caption' headerText='Caption' width='100' textAlign="Right"/>

            <ColumnDirective field='Visible' headerText='Visible' width='100' textAlign="Right"/>

            <ColumnDirective field='LookUp' headerText='LookUp' width='100' textAlign="Right"/>

            <ColumnDirective field='ShowOperators' headerText='ShowOperators' width='100' textAlign="Right"/>

            <ColumnDirective field='OperatorGroup' headerText='OperatorGroup' width='100' textAlign="Right"/>

            <ColumnDirective field='DefaultOperator' headerText='DefaultOperator' width='100' textAlign="Right"/>

            <ColumnDirective field='DefaultValue' headerText='DefaultValue' width='100' textAlign="Right"/>

            <ColumnDirective field='Orientation' headerText='Orientation' width='100' textAlign="Right"/>

          </ColumnsDirective>

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

        </GridComponent>

[Rajapandiyan Settu]

Hi EyaL, 

Thanks for contacting Syncfusion support. 

We have analyzed your query at our end. By further validating your code, we found that there is no primaryKey column in your Grid. 

In EJ2 Grid, Editing feature requires a primary key column for CRUD operations. All the CRUD actions are performed based on the primary key only. Refer to the below documentation for more information. 

Grid-Edit:  

https://ej2.syncfusion.com/react/documentation/grid/edit/ 

https://ej2.syncfusion.com/react/documentation/grid/edit/#batch 

isPrimaryKey: 

https://ej2.syncfusion.com/react/documentation/api/grid/column/#isprimarykey  

   

So, we suggest you to set isPrimaryKey as true in any one of the unique columns. To define primary key, set columns.isPrimaryKey to true in particular column. 

[index.js] 

 

  <GridComponent dataSource={data} toolbar={this.toolbarOptions} editSettings={this.editSettings}> 

        <ColumnsDirective> 

               <ColumnDirective field='OrderID' headerText='Order ID' isPrimaryKey={true}></ColumnDirective> 

                  ---- 

             </ColumnsDirective> 

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

  </GridComponent> 

 

Find the below sample for your reference. 

Sample: https://stackblitz.com/edit/react-vnu8zx 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S