Grid with ObservableCollection?

[Manuel Reinacher]

Hello ;)

I want to use the Grid in a server side application  to edit a few values which needs processing after editing.

So I need an event when the user changed something in the List.

My idea was to use an ObservableCollection to implement this.

For adding a new value this works fine, but it looks like editing and removing is not working.

I'm getting an error in the browser console when I turn detailed error reporing on.

I assume, that I can use any IEnumerable as a DataSource?

(I can not paste the code here after an edit - some parts are missing...)

https://pastebin.com/81rW8uGg

regards Manuel

[Vignesh Natarajan]

Hi Manuel,  

Thanks for contacting Syncfusion support.  

Query: “For adding a new value this works fine, but it looks like editing and removing is not working.” 

                                                      

We have prepared a sample using your code example and we are able to reproduce the reported issue at our end too. The root cause of an issue is while performing CRUD (Add, Edit, Delete etc ) action, it is necessary to define the IsPrimaryKey property to any of the available Grid columns. (i.e) one column must be PrimaryKey column whose value must be unique. Based on primaryKey value only, inserting, editing, deleting operation will take place. Refer our UG documentation for your reference 

UG: https://ej2.syncfusion.com/blazor/documentation/grid/editing/#toolbar-with-edit-option  

Refer the below cod example for your reference 

<EjsGrid DataSource="@ObsOrders"  AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete" })"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

…………………… 

</EjsGrid> 

 

Please get back to us if you have further queries.  

Regards,
Vignesh Natarajan. 

[Manuel Reinacher]

Hello Vignesh Natarajan,

Thanks for your help.

Adding and removing is now working fine.

When I edit a value I don't get any CollectionChanged event on the list.

- This would be very useful, because then you could use these events to handle the changes from the grid.

regards Manuel

[Vignesh Natarajan]

Hi Manuel, 

Thanks for the update.   

We are glad to hear that your query has been resolved.  

Query: “When I edit a value I don't get any CollectionChanged event on the list.” 

 

CollectionChanged method itself will be triggered only when entire list is changed, removed or added. So it will not be triggered when one of the individual member is changed. Refer the below stackoverflow link for your reference. 

https://stackoverflow.com/questions/15698195/observablecollection-collectionchanged-not-firing  

Same requirement (use these events to handle the changes from the grid) can be achieved using OnActionComplete event of EjsGrid. This event will be triggered whenever certain actions are completed in Grid. In the event arguments you can get the modified data and request type.  

Refer the below code example  

<EjsGrid DataSource="@ObsOrders"  AllowPaging="true"  Toolbar="@(new List<string>() { "Add", "Edit", "Delete" })"> 

    <GridEvents OnActionComplete="OnComplete" TValue="Order"></GridEvents> 

    .          .            .         .        .     .  

</EjsGrid> 

.          .            .        .         .  

  public void OnComplete(ActionEventArgs<Order> Args) 

    { 

        if(Args.RequestType.ToString() == "Save") 

        { 

 

        } 

    } 

  

Also refer our UG documentation for the list of available events 

https://ej2.syncfusion.com/blazor/documentation/grid/events/#onactionbegin  

Please get back to us if you have further queries.   

Regards, 

Vignesh Natarajan.