How to read edited data back out of Grid.dataSource

[pcafstockf]

Hi,

I have successfully created an editable, template driven, grid similar to the one in the documentation:

template-driven-forms

When I add or remove a row, grid.dataSourceChanged event is fired (as expected), and grid.dataSource array contains the added element (or in the case of remove, grid.dataSource no longer contains the element).

However when I inline edit an existing row, grid.dataSourceChanged event is never fired and even though the Grid displays the changed information, grid.dataSource still reflects the old information.

I can even see the rowDataBound event fired and it contains the updated data, but again, grid.dataSource array still contains the old information.

Is this a defect?  Why does  grid.dataSourceChanged fire for add/remove rows, but not for update rows?  Why is grid.dataSource changed for add/remove rows, but not for update rows?

[Thavasianand Sankaranarayanan]

Hi Earl, 

Greetings from Syncfusion support, 

                 

We have validated the reported query “dataSourceChange event is not fired and Grid dataSource is not reflected while editing a Grid” but, it is unsuccessful from our side. We have demonstrate a video with the reported query as given below. 

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CRUDDSCevent-1703783500.zip 

By default, dataSourceChanged event is triggered when we update the grid data. You can perform the CRUD operation by using this event and you can get the changed records details in this event arguments. Finally you need to call the Grid endEdit method to update the modified data in Grid. 

If you have provide a datasource like ({result: […], count: …}) format, then you can use dataSourceChanged to get the edited records details. 

Sample link: https://stackblitz.com/edit/angular-umeuhb-saufni 

Please get back to us, if you need further assistance. 

Regards, 

Thavasianand S. 

[pcafstockf]

Hi Earl, 

Greetings from Syncfusion support, 

                 

We have validated the reported query “dataSourceChange event is not fired and Grid dataSource is not reflected while editing a Grid” but, it is unsuccessful from our side. We have demonstrate a video with the reported query as given below. 

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CRUDDSCevent-1703783500.zip 

By default, dataSourceChanged event is triggered when we update the grid data. You can perform the CRUD operation by using this event and you can get the changed records details in this event arguments. Finally you need to call the Grid endEdit method to update the modified data in Grid. 

If you have provide a datasource like ({result: […], count: …}) format, then you can use dataSourceChanged to get the edited records details. 

Sample link: https://stackblitz.com/edit/angular-umeuhb-saufni 

Please get back to us, if you need further assistance. 

Regards, 

Thavasianand S. 

"If you have provide a datasource like ({result: […], count: …}) format, then you can use dataSourceChanged to get the edited records details."

Thanks, I had missed that part and was just using a simple data array.

I've simplified the sample project you sent to better understand it (removed the http aspect, and updated libraries to current versions).

https://stackblitz.com/edit/angular-umeuhb-azrp89

But I still have a closely related question...

In NormalEditComponent.dataStateChange, you will see I added code to log the data at the time that event is fired (aka 'before'), and then to log it once again in a setTimeout (aka 'after').

The dataSource does not reflect the updates at the time the state change event is fired, but the data is correct once everything has settled.

My question is, Is there an event I can listen for that will be fired *when* the dataSource actually updates?

[Thavasianand Sankaranarayanan]

Hi Earl, 

You can use the actionComplete event for achieving your requirement. The API documentation and modified sample is given below for your reference, 

Api Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete 

Sample: https://stackblitz.com/edit/angular-umeuhb-qjqzpo?file=normal-edit.component.ts 

 

Regards, 

Thavasianand S. 

[pcafstockf]

Thank You.

There is still something I'm missing in the sample though.

Updating an existing record does work (thank you for your help with that).

However, attempting to add or delete a record, simply results in a spinner that never completes.

Sample: https://stackblitz.com/edit/angular-umeuhb-qjqzpo?file=normal-edit.component.ts 

[Thavasianand Sankaranarayanan]

Hi Earl, 

In the sample we provided in our first update, the CRUD operations were performed in the client-side using the Crud service when the datasource is of ({result: […], count: …}) format. Since you had removed the CRUD operation related code from the sample the edit actions are not getting performed. If your requirement is only to get the updated data source while performing edit operations then you can directly assign the data to the grid’s dataSource property and use the actionComplete event for getting the updated data source. 

<ejs-grid #grid (actionComplete)= 'actionComplete($event)' [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='id' headerText='Customer ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 

            <e-column field="name" headerText="Customer Name" width="150"></e-column> 

        </e-columns> 

</ejs-grid> 

 

var customers = [ 

        { id: 1, name: 'HANAR' }, 

        { id: 2, name: 'VINER' }, 

        { id: 3, name: 'JOHN' }, 

        { id: 4, name: 'TOMSP' }, 

        { id: 5, name: 'SUPRD' } 

]; 

 

constructor() { 

        this.data = customers; 

} 

 

// Grid’s actionComplete event function 

public actionComplete(args) { 

     if (args.requestType === 'save' || args.requestType === 'cancel') { 

         // Here you can get the updated data source after performing the edit operations 

         console.log('Updated data source: ' + JSON.stringify((<any>this.grid.dataSource).result)); 

     } 

} 

We have modified the previously provided sample based on this. You can find it below, 

Sample: https://stackblitz.com/edit/angular-umeuhb-n2nbmi?file=normal-edit.component.ts 

 

Regards, 

Thavasianand S. 

[pcafstockf]

Hi Thavasianand,

Complexity in my own code, and not being aware of the 'delete' requestType blinded me to the simplicity of this whole thing.

I simplified the code again and now have all the answers/info I need.  Thanks for your patience and help on this.

I'm posting the latest sample link for anyone who may have similar questions.

https://stackblitz.com/edit/angular-umeuhb-yda4md?file=normal-edit.component.ts

Performing basic CRUD operations on the sample and watching the console log, has helped me understand not only the Grid actions/events, but how that pattern works within Syncfusion components in general.

Thanks again.

[Pavithra Subramaniyam]

Hi Earl,  

Thanks for sharing the sample with us. 

We are glad to hear that you achieved your requirement. 

Please contact us if you need any further assistance on Grid. As always, we will be happy to assist you.  

Regards,  

Pavithra S.