Get complex data (JSON) out of Batch-save

[Dennes]

Hello,

when I have a complex column structure like in the Image, the output is still flat like:

(dataGrid.beforeBatchSave)

how do i get the correct structure like defined in the columns?

Thanks!

[Pavithra Subramaniyam]

Hi Dennes, 

 

Greetings from Syncfusion support. 

 

By default the entered data will be mapped to the format in which the “column.field” has been defined. In your sample we suspect that you have a simple column field (without the dot operator) which might be the cause of the behavior. So if you want the complex structure you need to define the column field with dot(.) operator. Please refer to the below code example, documentation link and sample link for more information. 

 

[component.ts] 

 

@Component({ 

    selector: 'app-root', 

    template: `<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' (beforeBatchSave)="beforeBatchSave($event)" [pageSettings]='pageSettings' 

    [editSettings]='editSettings' [toolbar]='toolbar'> 

    <e-columns> 

      <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' type="number" 

        [validationRules]='orderidrules'></e-column> 

      <e-column headerText='Order Details' [columns]='orderColumns'></e-column> 

 

    </e-columns> 

  </ejs-grid>`, 

}) 

export class AppComponent { 

    

    public ngOnInit(): void { 

         

        this.orderColumns = [ 

            { 

                field: 'Order.CustomerID', 

                headerText: 'Customer ID', 

                width: 130, 

                textAlign: 'Right', 

                type:"string" 

            }, 

            { 

                field: 'Order.Freight', 

                headerText: 'Freight ($)', 

                width: 120, 

                format: 'C1', 

                textAlign: 'Right', 

                type: "number" 

            } 

        ]; 

    } 

    beforeBatchSave(args){ 

      console.log(args.batchChanges.addedRecords[0]); 

    } 

} 

 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#complex-data-binding 

 

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

 

Please get back to us if you need further assistance. 

Regards,   

Pavithra S