Built-in Grid CRUD with EF Core and local DB. Update works but not Add / Delete
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
SIGN IN To post a reply.
5 Replies
VN
Vignesh Natarajan
Syncfusion Team
October 4, 2019 01:37 PM UTC
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
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
Refer the below link’s note section for your reference
Please back to us if you have further queries.
Regards,
Vignesh Natarajan.
Vignesh Natarajan.
TR
Travis
October 4, 2019 05:08 PM UTC
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
VN
Vignesh Natarajan
Syncfusion Team
October 7, 2019 04:14 AM UTC
Hi Travis,
Thanks for the update and compliment.
Please get back to us if you have any other queries.
Regards,
Vignesh Natarajan.
TR
Travis
October 15, 2019 01:42 AM UTC
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.
RS
Renjith Singh Rajendran
Syncfusion Team
October 15, 2019 12:46 PM UTC
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,
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.
SIGN IN To post a reply.
