Programmatically Set Cell Value in Batch Mode

[James]

Batch mode allows pending changes in all rows and columns in the grid to be stored until the Toolbar Update button is pressed. The pending changes are then written to the bound data object. Changes are highlighted in green in the grid. The grid must therefore be storing the pending changes in a data object independent of the bound data object

Question:  How do I programmatically set the cell value of a cell in batch mode such that it is the same as though a user set the cell. That is, the 'Update' toolbar registers the change, and the 'green' background is illuminated?

If I use the grid.setCellValue(), it changes the displayed value in the grid, however, the 'Update' button is not activated, and the cell is not coloured green to indicate a change. If I change the bound data, then the grid refreshes and all pending changes are lost.

[Balaji Sekar]

Hi James, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and prepared sample based on your requirement. In that sample we have created a button to update the cell data programmatically. When the button clicked the click event will be triggered and in that event we have called the updateCell method to update a cell value in particular row. In that function we have passed the rowIndex, fieldname and the data to be changed. This method will form a updated cell(green color cell) and also enable the update button in the toolbar. Now you can save your value using the update button. You can also save them by calling the batchSave method. We have shared the sample for your reference. 

 

App.Component.ts 

public btnClick(args):void { 

      this.grid.updateCell(0,'CustomerID','valueUpdated'); 

    } 

 

App.componenet.html 

<div> 

  <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6"> 

                    <button ejs-button cssClass="e-info" (click)="btnClick()">updateCell</button> 

                </div> 

</div> 

<div class="control-section"> 

        <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

 

Sample Link: https://stackblitz.com/edit/angular-xrrcmu-ntxyhf?file=app.component.html 

 

Documentation Links: 

https://ej2.syncfusion.com/documentation/api/grid/#updatecell 

https://ej2.syncfusion.com/documentation/api/grid/edit/#batchsave 

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[James]

Thankyou

[Balaji Sekar]

Hi James, 

  

Thanks for the update. Please get back to us if you require further other assistance from us  

 

Regards, 

Balaji Sekar.