Built-in Grid CRUD with EF Core and local DB. Update works but not Add / Delete

[Travis]

I'm testing syncfusion for a new project and I'm trying to get CRUD working in the datagrid.  

The project is Blazor - Server Side and I'm testing it with a local DB.  The final app will run on Azure and talk to an Azure DB through EF Core the same way the sample app does so I don't see any reason to create and expose Web API classes.  

I've edited the standard "orders" sample and have attached.

The project runs and I'm able to connect an ef core dbset to the grids list datasource.  

I've added a "DirtySave" button on the toolbar to call the db context savechanges.

I've noticed that when I add or delete a row to the grid's list, I need to separately repeat the action on the ef core db context before saving changes.  I do this through the OnCompleteAction event.  When I update a row though it seems to update the db context from the grid list automatically I can just call the DirtySave to save the results to the local database.  

First question would be:  How are updates to the Grid's list item propagated to the db's context and why doesn't it work for add / delete?

Second, when I add an order to the list and then delete a different order on the same list the component locks up. 

I'm guessing the built-in "Update" button works as a "dirty" indicator for the grid's list, showing when an item is not yet saved to the list, and then disabling when the list is not dirty.  Can we accomplish the same thing for the db context?

Any help would be appreciated.  

Thanks,

Travis

Attachment: BlazorApp1_c4efba3e.zip

[Vignesh Natarajan]

Hi Travis,  

Greetings from Syncfusion support.  

Query1: “ How are updates to the Grid's list item propagated to the db's context and why doesn't it work for add / delete?” 

It is default behavior of the EntityFrameWork to detect the changes automatically without any external action while updating the existing record. So the record gets updated directly in database while updating.  But you need to handle the separately for Add and Remove operation.  

Refer the below general link of your reference 

https://docs.microsoft.com/en-us/ef/core/saving/basic#updating-data 

Once we complete the Add / Delete operation we need to save the changes in database. For that we use SaveChanges method.   

Query2: “when I add an order to the list and then delete a different order on the same list the component locks up” 

We have analyzed the provided sample and we are also able to reproduce the reported issue at our end (i.e) Not able to delete the record from database, once a new record is added to it. This is because CRUD operation will take place based on PrimaryKey column. In the provided sample, Primarykey is OrderID and in provided Database (NorthWnd.Mdf) it has IsIdentity true. Which means it will generate its own unique value. So we need not handle the Primarykey value while adding.  

You can resolve the issue by enabling IsIdentity property to PrimaryKey column. So that its value will be handled at our source level. For your convenience,  we have modified the attached sample which can be downloaded from below  

Sample:   https://www.syncfusion.com/downloads/support/forum/148069/ze/BlazorApp1918325021  

Refer the below link’s note section for your reference 

https://ej2.syncfusion.com/blazor/documentation/grid/editing/  

Please back to us if you have further queries.  

Regards,
Vignesh Natarajan. 

[Travis]

Thank you Vignesh.  I will read the suggested links and view the modified sample.

Syncfusion seems very good with documentation, support and monitoring the forums.  It's much appreciated.

-Travis

[Vignesh Natarajan]

Hi Travis,  

Thanks for the update and compliment. 

Please get back to us if you have any other queries.  

Regards, 

Vignesh Natarajan.  

[Travis]

Adding the isIdentity attribute did not fix the problem.  The sample that was modified has the same problem.  Adding an "Order" and then deleting an order will cause the grid to lockup.

There still seems to be a mismatch between the IList GridData item that the EjsGrid component uses for a data source and the Entity "Orders".  

Adding or removing items from the IList GridData does not result in any changes to the entity so the context can not be saved.  

Whereas adding or removing items from the Entity directly do not show up in the grid unless the GridData re-queries the entity.

If I set the EjsGrid component data source directly to the entity (GridData = Db.context.Orders;) the grid locks up when adding orders.

The only way I have gotten CRUD to work with the EjsGrid connected to the IList object is to monitor the OnComplete event and force adds/deletes to the Entity, save the context, then force the grid data source (our IList object) to re-query the data so that the new object has it's identity value.  

What would be the recommended / best practice way to sync or bind the EjsGrid component to an Entity Framework Core entity when working with a local db?  

The information at https://ej2.syncfusion.com/blazor/documentation/grid/editing/#entity-framework does not seem to supply a complete working solution for this scenario.

[Renjith Singh Rajendran]

Hi Travis, 

We have modified the sample which is shared in our previous update based on this scenario. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11839260801 

In the above sample we have auto incremented the primary key value in the “OnActionBegin” handler of Grid to overcome the problem. Please use the below codes, 

 

<EjsGrid TValue="Order" DataSource="@GridData" @ref="Grid"...> 

    <GridEvents OnToolbarClick="ToolbarClickHandler" OnActionComplete="OnComplete" OnActionBegin="OnBegin" TValue="Order" /> 

    ... 

</EjsGrid> 

 

@code{ 

 

    EjsGrid<Order> Grid; 

    public static List<Order> GridData { get; set; } 

 

 

    protected override void OnInitialized() 

    { 

        GridData = Db.GetAllOrders().Where(x => x.CustomerID == "VINET").ToList(); 

    } 

 

    public void OnBegin(ActionEventArgs<Order> Args) 

    { 

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

        { 

            if (Args.Data.OrderID == null) 

            { 

                var val = Db.GetAllOrders().Max(X => X.OrderID);         //Fetch the max value for OrderID from db 

                Args.Data.OrderID = val + 1;             //Auto increment the OrderID value 

            } 

        } 

    } 

    ... 

    public void OnComplete(ActionEventArgs<Order> Args) 

    { 

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

        { 

            Args.Data.OrderID = null;           //Set null for the OrderID to get saved to db 

            Db.AddOrder(Args.Data); 

        } 

        ... 

    } 

    ... 

} 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.