Two-way data binding not working with ObservableCollection

[Dinesh Thamby Ambookkan]

I am using ObservableCollection trying to achieve two-way databinding on a TreeGridControl.

3 issues I am facing.

1. Data change from UI is not updated to model without manually assigning the value from event args.
2. Code behind change is not reflected in UI even after OnPropertyChangeEvent call.
3. Single Click edit not working.

I am using the below code to update the model from code behind for the 2nd case.

Also, As you can see, I am updating the model from args to get the model updated when UI changes. Why should I do that? 

I have attached a sample and video recording of what I am facing.

Please, let me know what I am doing wrong.

Thanks,

Dinesh T A

Attachment: Sample_and_VideoRecording_d28b8b04.zip

[Pon Selva Jeganathan]

Hi Dinesh Thamby Ambookkan,

Query1: Data change from UI is not updated to model without manually assigning the value from event args.

We are able to replicate the issue at our end. We would like to clarify that the data will be reflected in the datasource only when the changes are updated in TreeGrid. In your shared sample we could see that you are checking the changed data in observable collection inside cellsave event handler. The changed data will not be reflected in Datasource it will be maintained locally until we update it by clicking the update button.

Query2: Code behind change is not reflected in UI even after OnPropertyChangeEvent call.

We could see that you are trying to change the value of an observable collection inside Oncellsave event handler. If so we suggest you to use the UpdateCellAsync method. So that it will be reflected in TreeGrid.

Please refer the below code snippet,

public async Task CellSaveHandler(Syncfusion.Blazor.Grids.CellSaveArgs<BusinessObject> args)

    {

..

            if (args.Data.TaskRate != null)

            {

                if (args.Data.ParentId == null) //editing parent row...

                {

                        //Here pass the index as first params, fieldname as second params and value as a third parms

                    BusinessObjectGrid.UpdateCellAsync(0, "TaskRate", null);

 

Please refer to the below API documentation,

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_UpdateCellAsync_System_Int32_System_String_System_Object_

Query3: Single Click edit not working.

We are able to replicate the issue at our end. And this issue is fixed in our latest version(21.1.41). So please upgrade to our latest version of Syncfusion package to resolve the reported issue.