Hi Ashley ,
We have validated the provided the code example, we
noticed that the default editing was cancelled and programmatic cell editing
was initiated. However, it appears that the programmatic cell editing was
initiated before the default cancel process was completed, which resulted in
the cell not being edited properly. We recommend invoking the programmatic edit
with a time interval. To achieve this, we used the setTimeout function.
You can refer to the sample and code snippet below for more information.
Code sample :
|
app.component.ts
clickHandler(args: ClickEventArgs): void {
switch (args.item.text?.toLowerCase()) {
case 'click':
args.cancel = true;
if (this.grid?.getSelectedRows().length! <= 0) {
console.log('Select the Row');
return;
}
setTimeout(() =>
this.grid?.editCell(
this.grid?.getSelectedRowIndexes()[0],
'CustomerID'
)
);
}
|
Sample : Syncfusion-content
- Ej2 Angular Docs (forked) - StackBlitz
Query : I've tried
reverting back to the normal inline edit mode and saving the data one by one,
and preforming a batch update to my backend using an external save button which
retrieves the grids currentViewData. the problem with this is that data changes
do not persist when adding new rows of data
By default, the Grid's inline editing allows editing
only one row at a time. Once the editing process is saved or canceled, we can
proceed to edit the next row. But the Grid's batch editing is different and
allows us to edit, add, delete, and save these changes in a single request.
If you find that your data is
not being saved in the datasource, we suggest that you check if you have
defined the primaryKey column in your column definition. The Grid
editing process works based on the primary key, so it's important to make sure
it's properly defined in your sample.
|
<ejs-grid [dataSource]='data'
[editSettings]='editSettings' [toolbar]='toolbar' height='265px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right'
isPrimaryKey='true'
width=100></e-column>
<e-column field='CustomerID' [edit]='stringParams' headerText='Customer
ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right'
editType= 'numericedit' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' editType=
'dropdownedit' width=150>
</e-column>
</e-columns>
</ejs-grid>
|
If you wish to programmatically
update the value without entering a value in batch edit mode, we suggest using
the updateCell method of the grid. This method allows you to
update a cell value in a particular row by passing the rowIndex, field
name, and the data to be changed. Upon using this method,
the cell will be marked as updated (indicated by a green color), and the update
button in the toolbar will be enabled. You can then save your value using the
update button or by calling the batchSave method. We've provided
a sample for your reference.
|
App.Component.ts
public
editCell(args):void {
this.grid.updateCell(0,'CustomerID','valueUpdated');
}
public
save(args):void {
this.grid.editModule.batchSave()
}
|
Batch save documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#batchsave
Documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/#updatecell
Demo for inline editing : https://ej2.syncfusion.com/angular/demos/#/material3/grid/normal-edit
Demo for batch editing : https://ej2.syncfusion.com/angular/demos/#/material3/grid/batch-editing
Please get back to us, if you need further assistance
Regards,
Johnson Soundararajan S
