Batch Edit For Rows

[Puneet]

Hi there,

There is a feature in grid called batch edit it shows us a particular column in flash color after edited same as batch edit flash for columns I want to use it into row. My row should be flash colored after edited.

Warm Regards

Puneet

[Mohammed Farook J]

Hi Puneet, 

 

Greetings from Syncfusion.  

 

We have validated your requirement and you can achieved your requirement by the following way. 

 

[app.component.html] 

<ejs-grid #grid  (beforeBatchSave)='beforeBatchSave($event)' (cellSave)='cellSave($event)' (queryCellInfo)='queryCellInfo($event)'  [dataSource]='data' > 

            <e-columns> 

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

                <e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column> 

                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> 

                <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit' textAlign='Right'></e-column> 

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> 

            </e-columns> 

        </ejs-grid> 

 

 

[app.component.ts] 

 

 . . . 

export class AppComponent { 

    public data: Object[]; 

. . . 

    public pageSettings: Object; 

    public editedPrimaryKeys : []; 

    public savedPrimaryKeys: []; 

    @ViewChild('grid') 

    public grid : GridComponent; 

    queryCellInfo(args){ 

      if(args.column.field == 'CustomerID'){ 

        args.cell.classList.add('e-custom') // apply the background color only the cutomerID column 

      } 

// check the primaryKey value if matched with edited record 

 

      if(this.savedPrimaryKeys.indexOf(args.data[this.grid.getPrimaryKeyFieldNames()[0]]) !== -1){ 

         args.cell.classList.add('e-custom') // apply the background color for edited cell 

      } 

    } 

    beforeBatchSave(args){ 

      (this.grid.getBatchChanges()as any).changedRecords.filter(function(e, index){ 

// check the primaryKey value if matched with edited record 

         if(this.editedPrimaryKeys.indexOf(e[this.grid.getPrimaryKeyFieldNames()[0]]) !== -1){  

           let savePkValue = e[this.grid.getPrimaryKeyFieldNames()[0]]; 

           this.savedPrimaryKeys.push(savePkValue); // stored the primarykey value when the save the record 

         } 

        }.bind(this)) 

      this.editedPrimaryKeys = []; 

    } 

    cellSave(args){ 

      if(args.columnName == 'CustomerID'){ 

        let pkField: any = this.grid.getPrimaryKeyFieldNames()[0]; 

        let pkValue:any = args.rowData[this.grid.getPrimaryKeyFieldNames()[0]]; 

        this.editedPrimaryKeys.push(pkValue); // store the  primarykey value in the edited record in the CustomerID only.  

      } 

    } 

    public ngOnInit(): void { 

. . . 

        this.editedPrimaryKeys =[]; 

        this.savedPrimaryKeys = []; 

    } 

} 

 

 

 

In the above code example,  We have stored the primaryKey value of the edited record in the cellSave event(editedPrimaryKeys) and stored the primaryKey value(savedPrimarykeys) in beforeBatchSave event of Grid.  And we have applied the background color of the edited row by using ‘queryCellInfo’ event. You can get the edited record by using ‘getBatchChanges()’ method in Batch editing of Grid. 

 

Sample :  https://stackblitz.com/edit/angular-p3isg2?file=app.component.ts  

 

 

 

Regards, 

J Mohammed Farook