Autoincrement the Primary key column value on new row Insert in React Grid

[Farzana]

Hi,

I am trying to do a batch Add functionality and each time when I add a new record i want to have the PrimarykeyColumn to be autopopulated with an incremental value and display the inserted row.

I tried with BeforeBatchAdd Event in which i was passing the Primarykeycolumn value in the Defaultdata parameter. I can see the value automatically incrementing ,but the row is not displaying in the Grid.In the console log can see the defaultdata object, but row is not showing up .

this is the BeforeBatchAdd Event

beforeBatchAdd(e){

        console.log(e)

        /*data={

            'Region':null,

            'Site':null,

            'Factory':null,

            'ProjectID':val

        }*/

       // addRecord(data)

        var val=this.state.projectIdValue + 1

        e.defaultData.ProjectID=val

        this.setState({

            projectIdValue:val

        })

       console.log(this.state.projectIdValue)

    }

And i am binding the event to the Grid Component.

 <GridComponent dataSource={this.state.data} childGrid={this.childGridOptions}  ref={grid => this.gridInstance = grid} enableAutoFill={true}  toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} 

                actionBegin={this.actionBegin.bind(this)} beforeBatchSave={this.batchSave.bind(this)} beforeBatchAdd={this.beforeBatchAdd.bind(this)}

                 allowResizing={true}  autoFitColumns={true}  >

Please provide me inputs as to how to make the row shown up on the grid.

Am i approaching in the correct way or should i need to use a different event.

[Balaji Sekar]

Hi Farzana, 

 

Greetings from the Syncfusion support, 

 

Based on your update, we have created a sample with provided the information and validated the report issue but it is unsuccessful. Please refer the below sample for more information. 

 

Sample link: https://stackblitz.com/edit/react-d8jpjf-2yuxym?file=index.js 

 

If you facing the same issue in your end, please reproduce the problem in above sample and share to us it will help to validate further. 

 

Regards, 

Balaji Sekar. 

[Farzana]

Hi Balaji,

Thank you for confirming it. I was able to get it work.

I had done the similar manner for hierarchical grid but the mistake i made was, in the render part  I had defined the child grid which was causing the issue  of the row to disapper immediately after it is added. Now i am initialising the child grid inside the class itself and the issue got resolved. But when i click on the arrow button to view the child grid, for a second it shows no data available and then shows the child data which is having a small flickering, but this doesn't happen if i define the childgrid in the render.

How to get this flickering issue resolved.

export class BatchEdit extends SampleBase {

    constructor() {

        super(...arguments);

        this.state = {projectIdValue:0,localdata:employeeData,childata:orderDatas};

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

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };

        this.editparams = { params: { popupHeight: '300px' } };

        this.validationRule = { required: true };

        this.orderidRules = { required: true, number: true };

        this.pageSettings = { pageCount: 5 };

        this.childGrid = {

            dataSource: this.state.childata,

            queryString: 'EmployeeID',

            allowPaging: true,

            pageSettings: { pageSize: 6, pageCount: 5 },

            columns: [

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },

                { field: 'ShipCity', headerText: 'Ship City', width: 120 },

                { field: 'Freight', headerText: 'Freight', width: 120 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 }

            ]

            

        };

    }

  beforeBatchSave(args) {

    

  }

  beforeBatchAdd(e) {

    

     var val=this.state.projectIdValue + 1

        e.defaultData.EmployeeID=val

        this.setState({

            projectIdValue:val

        })

  }

  actionBegin(args) {

    

  }

    render() {

        return (<div className='control-pane'>

        <div className='control-section'>

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

              <GridComponent dataSource={employeeData} childGrid={this.childGrid} pageSettings={this.pageSettings} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} beforeBatchAdd = {this.beforeBatchAdd.bind(this)} beforeBatchSave = {this.beforeBatchSave.bind(this)} actionBegin = {this.actionBegin.bind(this)}>

2. I want to display a spinner before the grid shows up with data on the screen / or while the grid is completley loaded with the data. In which event i can call the showSpinner()/HideSpinner() method or even use the reactpopups.

3. Similarly i want to show spinner when making the post call to a url using the batchSave() . And hide the spinner after the response is successful. How can i do that

[Balaji Sekar]

Hi Farzana, 

Thanks for your update, 

Query #1: How to get this flickering issue resolved. 

We have tried to reproduced the reported problem in our end but it is unsuccessful. We have created a sample with your requirement. In below code example, Parent Grid added new data with EmployeeID and child Grid will be bind parent grid’s EmployeeID value basis. Please refer the below code example and sample for more information. 

[index.js] 

    this.childGrid = { 

            dataSource: orderDatas, 

            queryString: 'EmployeeID', 

            allowPaging: true, 

            pageSettings: { pageSize: 6, pageCount: 5 }, 

            columns: [ 

             .        .       .       . 

            ], 

              

        }; 

    }  

  

 return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent dataSource={this.localdata} ref={g=>this.grid=g} childGrid={this.childGrid} allowSorting={true} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} beforeBatchAdd = {this.beforeBatchAdd.bind(this)}  beforeBatchSave = {this.beforeBatchSave.bind(this)} > 

                        <ColumnsDirective> 

                            <ColumnDirective field='OrderID' headerText='Order ID' isPrimaryKey='true' width='125' textAlign='Right' type="number"/> 

                             

                            <ColumnDirective field='FirstName' headerText='Name' width='125' type="string"/> 

                            <ColumnDirective field='Title' headerText='Title' width='180' type="string"/> 

                             <ColumnDirective field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right' type="number"/> 

                            <ColumnDirective field='ReportsTo' headerText='Reports To' width='135' type="string" textAlign='Right'/> 

                        </ColumnsDirective> 

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

                    </GridComponent> 

Sample link: https://stackblitz.com/edit/react-hjhetb-tvphuj?file=index.js 

Query #2:  I want to display a spinner before the grid shows up with data on the screen / or while the grid is complete loaded with the data 

As per you query we have suggest to call the showspinner in the load event of the Grid. It is call before rendered the Grid content and data. Since we recommended to use this event in your application and you can achieve the showing spinner on Grid while Grid complete binding 

API link: https://ej2.syncfusion.com/react/documentation/api/grid/#load 

Query #3:  i want to show spinner when making the post call to a url using the batchSave() 

 

Based on you query, we suggest to defined showSpinner method beforeBatchSave event of the Grid then you will call hideSpinner once get response i.e response event of Ajax or actionComplete event of Grid. 

Please refer the below code example for more information. 

 beforeBatchSave(e){       

      this.grid.showSpinner();        

    } 

actionComplete(e){       

      if(e.requestType == "batchsave"){ 

        console.log("Saved...."); 

        this.grid.hideSpinner(); 

      } 

    } 

 

Please get back to us, if you have any concern. 

 

Regards, 

Balaji Sekar.