DataGrid simple CRUD, how?

Question

Hello,I have the following base Grid: With the following eventhandlers: public void ActionCompleteHandler(ActionEventArgs args) { if (args.RequestType == Action.Save) { //var id = args.Data.Id; //var value = OrdData.Find(X => X.OrderID == Args.Data.OrderID); if (args.Action == "add") { //await Service.InsertOrderAsync(Args.Data); } else { //await Service.UpdateOrderAsync(Args.Data.OrderID.ToString(), Args.Data); } } if(args.RequestType == Action.Delete) { //await Service.DeleteOrderAsync(Args.Data.OrderID.ToString()); } } public void CellSaved(CellSaveArgs args) { } public void CommandClickHandler(CommandClickEventArgs args) { if (args.CommandColumn.Type != CommandButtonType.Save) return; var lookup = args.RowData; StateHasChanged(); }Simply my problem is that these events are randomly called (looks like) and doesn't provide the right data.Issues:-ActionCompleteHandler: called when adding row, and deleting row, except the last one. When deleting the last one, the UI just hangs.. The Data is null when updating.- CellSaved is not called at all (not even when changing the EditMode)- CommandClickHandler - just only called when clicking on Save | Delete, and called twice with wrong (not modified) data. (It maybe because of the ServerMode in the settings). Not able to detect adding new item.Others:- Why the ID column has to be added to make the grid work?- How can I add a new item without specifying the Id? It is be generated somewhere else.So, what I am looking for - any function or event where can I can catch the data changes reliable and able to update my database manually. Optionally show the errors and revert the changes.Please give me hint how can I achieve it.Thanks,Istvan

Vignesh Natarajan · Answer

Hi Istvan,

Thanks for contacting Syncfusion support.

Query: “Simply my problem is that these events are randomly called (looks like) and doesn't provide the right data”

From your query we understand that you are trying to get the edited record details to save the changes in your database. We suggest you to achieve your requirement using OnActionBegin event instead of OnActionComplete event of the Grid when RequestType is Save. OnActionBegin event will be triggered when certain action is initiated in Grid. So while updating / inserting the records, this event will be triggered with Save RequestType. And in the event arguments you can get the edited / inserted record details.

Refer the below code example.

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

<GridEvents OnActionBegin="OnBeginHandler" TValue="Order"></GridEvents>

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

<GridColumns>

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

. . . . . .. . .

</GridColumns>

</SfGrid>

@code{

public List<Order> Orders { get; set; }

private void OnBeginHandler(ActionEventArgs<Order> Args)

{

if(Args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

{

if(Args.Action == "add")

{

var t = Args.Data; //returns the edited / insrted record details.

//insert into your db

}

else

{

//update data into your db

}

. . . . . .. . . .

}

Refer our UG documentation for your reference

https://blazor.syncfusion.com/documentation/datagrid/events/#onactionbegin

Query: “CellSaved is not called at all (not even when changing the EditMode)”

CellSaved event will be triggered only when EditMode is of BatchMode. Because batch editing is based on the cell. While all other edit modes are row based editing. So OnActionComplete and OnActionBegin event will be triggered when using EditMode as normal, dialog, inline. While cell based event, OnCellSave, OnCellEdit etc event will be triggered only when editMode is of Batch type.

https://blazor.syncfusion.com/documentation/datagrid/editing/#batch

Query: “CommandClickHandler - just only called when clicking on Save | Delete”

CommandClicked event will be triggered only while clicking the command buttons in the Grid. In the event arguments you can get the original data from the data source in the RowData property of the arguments. It will not give the edited records details. You can use OnActionBegin event to get the edited/ inserted record details.

Query: “Why the ID column has to be added to make the grid work?- How can I add a new item without specifying the Id? It is be generated somewhere else.”

We suspect that you have auto incremented / generated PrimaryKey column in your database. If yes, then we suggest you to use IsIdentity property of GridColumn. So that it is not necessary to give value to Id (primaryKey-autoincrement in db) while inserting a record. Refer the below code example.

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> <GridEvents OnActionBegin="OnBeginHandler" CommandClicked="OnCC" TValue="Order"></GridEvents> <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> <GridColumns> <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsIdentity="true" IsPrimaryKey="true" ValidationRules="@(new { required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>. . . . .. . . </GridColumns></SfGrid>

Query: “deleting row, except the last one. When deleting the last one, the UI just hangs”

We are not able to reproduce the reported issue at our end. After applying the above solution, if you are still facing the issue, kindly get back to us with more details about the issue your facing.

Regards,

Vignesh Natarajan.

Istvan Piroska · Answer

Hello,Thank you for the answer, I start understanding the behaviour of the grid a bit better.Implementing the OnActionBegin event solved my problem.Just asking on the side, that using custom adaptor can be another option to achieve the same functionality?Regarding the removing the last row issue. I created a quick gif that shows the problems (see the attachment).1. After removing the last item, the progress ring pops up and stay in the background. I can't add any items anymore.2. The lookup values counter doesn't work properly, looks like it is one action behind.The implementation is simply:Lookup Values (@LookupValues.Count)Code:Try 1.:        private List lookupValues;        public List LookupValues        {            get => lookupValues;            set            {                lookupValues = value;                StateHasChanged();            }        }Try 2.:        public void LookupValuesGridActionBegin(ActionEventArgs args)        {            if (args.RequestType == Action.Save)            {                if (args.Action == "add")                {                }                // Update (edit)                else                {                }            }            else if (args.RequestType == Action.Delete)            {            }            else            {                Debug.WriteLine(args.RequestType + " - " + args.Action);            }            StateHasChanged();        }     The LookupValues list is updated, but after the OnActionBegin. What is the lifecycle of the grid events when I can call the StateHasChanged manually (if it is the right solution)?Attachment: sfgrid_d449b630.zip

Vignesh Natarajan · Answer

Hi Istvan,  
 
Thanks for the update.  
 
Query: “After removing the last item, the progress ring pops up and stay in the background. I can't add any items anymore.” 
 
We understand that you are facing issue while deleting the last record of the Grid. Since the spinner is shown continuously , exception might be thrown in browser console. So kindly share the following details which will be helpful for us to validate the reported issue at our end.  
 

Share the exception details in browser console (Ctrl+F12). 
Share the Grid code example. 
Share the Syncfusion Nuget package version.
Share the type of your data source 
 
Query2: “The lookup values counter doesn't work properly, looks like it is one action behind.” 
 
We suspect that you want to update the LookupValues (property) based on the grid record count. You can use OnActionComplete event of the Grid, since OnActionComplete event will be triggered when certain action is completed. You can get the exact detail in that event. So to update the changes in the data base kindly use OnActionBegin and to update the total record count, kindly use OnActionComplete event of the Grid.  
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan

Istvan Piroska · Answer

Hello,Thank you, getting there :)1. Using the OnActionComplete is updating the values correctly.2. The errors after deleting the last row:https://prnt.sc/rw3moyUncaught TypeError: Super expression must either be null or a function    at e.exports (syncfusion-blazor.min.js:1)    at syncfusion-blazor.min.js:1    at Object.initBlazorAdaptor (syncfusion-blazor.min.js:1)    at Object.initComponent (syncfusion-blazor.min.js:1)    at syncfusion-blazor.min.js:1    at syncfusion-blazor.min.js:1syncfusion-blazor.min.js:1 Cannot read property 'children' of nullTypeError: Cannot read property 'children' of null    at r.getDataRows (http://localhost:52449/_content/Syncfusion.Blazor/scripts/grids-0cd524.min.js:1:274235)    at t.clearRowSelection (http://localhost:52449/_content/Syncfusion.Blazor/scripts/grids-0cd524.min.js:1:158043)    at t.clearSelection (http://localhost:52449/_content/Syncfusion.Blazor/scripts/grids-0cd524.min.js:1:157828)    at t.dataReady (http://localhost:52449/_content/Syncfusion.Blazor/scripts/grids-0cd524.min.js:1:212381)    at e.blazorCallback (http://localhost:52449/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:44036)    at e.notify (http://localhost:52449/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:43806)    at r.notify (http://localhost:52449/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:97909)    at e.<anonymous> (http://localhost:52449/_content/Syncfusion.Blazor/scripts/grids-0cd524.min.js:1:101745)    at e.notify (http://localhost:52449/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:43706)    at r.e.trigger (http://localhost:52449/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:76132)

Vignesh Natarajan · Answer

Hi Istvan,  

Query: “that using custom adaptor can be another option to achieve the same functionality?” 

Yes. You can also achieve your requirement using Custom Adaptor. Request will be sent to adaptor Read method for each and every action in Grid with a corresponding query as a DataManageRequest. You can handle the action in it. Similarly for CURD operation Insert /InsertAsync, Remove/ RemoveAsync, Update /UpdateAsync method will be triggered. Refer our UG documentation and online sample for your reference 

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/?no-cache=1#custom-binding  

https://blazor.syncfusion.com/documentation/datagrid/custom-binding/?no-cache=1#crud-operation  

https://blazor.syncfusion.com/demos/datagrid/custom-binding?theme=material    

Regards, 
Vignesh Natarajan.

Istvan Piroska · Answer

Hi Vignesh,Thank you for the confirmation. Good to know that I can achieve the same thing in different ways.Can you please check my last issue, relating deleting the last item from the grid? I attached the js error message from the console.Regards,Istvan

Vignesh Natarajan · Answer

Hi Istvan,  
 
Thanks for the update. 
 
Query: “Can you please check my last issue, relating deleting the last item from the grid? I attached the js error message from the console.” 
 
We have considered it as a bug and logged defect report for the same “exception occur while removing the last record in Grid”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our next Bi-Weekly release which is expected to be rolled out on or before April 15th 2020.  
   
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   
   
Feedback: https://www.syncfusion.com/feedback/13375/exception-occur-while-removing-the-last-record-in-grid  
 
Till then we appreciate your patience.  
 
Regards, 
Vignesh Natarajan

Istvan Piroska · Answer

Nice, thank you.

Vignesh Natarajan · Answer

Hi Istvan,  

We are glad to inform that our latest Nuget package (18.1.0.44) has been successfully rolled out. In this release we have included the fix for the issue “Exception occur while deleting the last record”. So kindly upgrade to our latest version to resolve the reported query. Please find the latest Nuget package from below.  
                                                           
Please find the latest Nuget package from below   
 
Nuget:  https://www.nuget.org/packages/Syncfusion.Blazor/18.1.0.44  
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan

Jon Elster · Answer

Can you provide a full working example?  I'm having similar issues. thx

Renjith Singh Rajendran · Answer

Hi Jon, 

We have prepared a sample(in latest version 19.3.0.46) based on this scenario and tried deleting last row in grid. But we could not face any exceptions when deleting the last row in grid. Please download the sample from the link below, 
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1104416164 
Reference : https://blazor.syncfusion.com/documentation/datagrid/editing#command-column 
 
Kindly refer the above attachments and if you are still facing difficulties then the following details would be helpful for us to proceed further. 


Share the exact scenario you are facing this reported problem.
Share the Syncfusion version details you are using.
Share the details of any exception/error occurred in browser console.
Share a simple issue reproducing sample for us to validate.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith R