1. Home
  2. Forum
  3. Blazor
  4. OnActionComplete calls a handler with args.Data = null

OnActionComplete calls a handler with args.Data = null

Hello,
I try to use CRUD functionality with a Grid component. I've tested a sample BlazorApp11839260801.zip. It works correctly as long as it is compiled with an old version of Syncfusion.EJ2.Blazor.
The function OnComplete(ActionEventArgs<Order> Args) gets proper Args.Data containing an instance of  <Order>.

However if I update it to last stable version of Syncfusion.EJ2.Blazor then Args.Data contains null.
I tried <GridEditSettings Mode="EditMode.Normal"> but it doesn't help.

What should I change to get the proper instance of  <Order> when using Syncfusion.EJ2.Blazor 17.4.0.54?
Best regards

7 Replies
VN Vignesh Natarajan Syncfusion Team March 10, 2020 07:24 AM UTC

Hi Andrzej,  
 
Thanks for contacting Syncfusion forums.  
 
Query: “What should I change to get the proper instance of  <Order> when using Syncfusion.EJ2.Blazor 17.4.0.54?” 
 
In forum F148069, sample (BlazorApp11839260801.zip), we have provided solution to insert a record using OnActionBegin and OnActionComplete event. But in our latest stable version (17.4.0.54) we will not be able to get the record details in the OnActionComplete event while inserting a record. We suggest you to achieve you requirement using OnActionBegin event of the Grid. Refer the below code example. 
 
<EjsGrid TValue="Order" DataSource="@GridData" @ref="Grid" AllowPaging="true" Toolbar="@(new List<Object>() { "Add", "Edit", "Delete", "Cancel", "Update",  new ItemModel() { Text = "Save", TooltipText = "Save", PrefixIcon = "M_PV_Save", Id = "DirtySave", Align=ItemAlign.Right} })"> 
    <GridEvents OnToolbarClick="ToolbarClickHandler" OnActionBegin="OnBegin" TValue="Order" /> 
. . .. . . . . 
</EjsGrid> 
@code{ 
  
    EjsGrid<Order> Grid; 
 . . . .. . . . . . .. .. . . 
    public void OnBegin(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save && Args.Action == "add") 
        { 
            if (Args.Data.OrderID == null) 
            { 
                Args.Cancel = true; //Prevent the default action 
                Db.AddOrder(Args.Data); // insert the record into your datasource 
                Db.SaveChanges(); // save the changes in your databased             
            Grid.Refresh(); // and refresh the Grid. 
            } 
        } 
    } 
  
,. . . . .. . . . ..  
} 
 
  
Kindly get back to us with more details if you still facing the issue.   
 
Regards, 
Vignesh Natarajan. 


AN Andrzej March 10, 2020 09:39 PM UTC

Thanks a lot. Now I can perform the CRUD operations. However after deleting or adding a record the grid in not refreshed in spite of using Grid.Refresh(). Only reloading the page helps. I've read that first there was a flag added @ref:suppressField to allow this to work but then it was removed in further versions of  Syncfusion.EJ2.Blazor. Could you give some advice how force the Grid to update about added/deleted records? Best regards

VN Vignesh Natarajan Syncfusion Team March 11, 2020 06:09 AM UTC

Hi Andrzej,   
  
Thanks for the update.  
  
Query: “Could you give some advice how force the Grid to update about added/deleted records? Best regards”  
 
We suggest you to update the dataSource of the Grid with new set of updated data source using the property binding once the database is updated. Refer the below code example   
 
<EjsGrid TValue="Order" DataSource="@GridData" @ref="Grid" AllowPaging="true" Toolbar="@(new List<Object>() { "Add", "Edit", "Delete", "Cancel", "Update",  new ItemModel() { Text = "Save", TooltipText = "Save", PrefixIcon = "M_PV_Save", Id = "DirtySave", Align=ItemAlign.Right} })"> 
    <GridEvents OnToolbarClick="ToolbarClickHandler" OnActionBegin="OnBegin" TValue="Order" /> 
    . . .. . . . . 
</EjsGrid> 
@code{ 
  
    EjsGrid<Order> Grid; 
    protected override void OnInitialized() 
    { 
        GridData = OrderData.GetAllOrders().ToList(); 
    } 
. . . .. . . . . . .. .. . . 
public void OnBegin(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save && Args.Action == "add") 
        { 
            if (Args.Data.OrderID == null) 
            { 
                Args.Cancel = true; //Prevent the default action 
                Db.AddOrder(Args.Data); // insert the record into your datasource 
                Db.SaveChanges(); // save the changes in your databased 
                //update the Grid datasource with updated database records 
                GridData = OrderData.GetAllOrders().ToList();  
            } 
        } 
    }  
,. . . . .. . . . .. 
} 
 
 
Kindly get back to us if you have further queries.    
  
Regards,  
Vignesh Natarajan.  
 


AN Andrzej March 11, 2020 09:50 AM UTC

Unfortunately reloading of DB-contents doesn't help. The new contents is visible only after I refresh the page.
Here is my code:

<EjsGrid TValue="TblClientUsers" @ref="DefaultGrid" DataSource="@colClientUsers"
   Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"               AllowSorting="true" AllowMultiSorting="true" AllowResizing="true" AllowFiltering="false" AllowExcelExport="false" ShowColumnChooser="false" GridLines="GridLine.Both"
     EnableVirtualization="false" AllowPaging="true" Height="410" Width="auto">
     <GridEvents OnActionBegin="ActionBeginHandler" OnActionComplete="ActionCompletedHandler" OnActionFailure="ActionFailureHandler" TValue="TblClientUsers"></GridEvents>
     <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
     <GridColumns>
         <GridColumn Field=@nameof(TblClientUsers.ClientNumber) HeaderText=@txt("txt" + "ClientNumber") IsPrimaryKey="true" TextAlign="TextAlign.Left" AllowEditing="false" Width=120></GridColumn>
     <GridColumn Field=@nameof(TblClientUsers.ClientName) HeaderText=@txt("txt" + "ClientName") TextAlign="TextAlign.Left" EditType="EditType.DefaultEdit" Width="120"></GridColumn>
     ......

@code{
    private EjsGrid<TblClientUsers> DefaultGrid;
    List<TblClientUsers> colClientUsers;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            await Task.Delay(100);
                    colClientUsers = await @Db.GetAllTblClientUsers(SQLDbTblLogin1);
        }
        catch (Exception ex)
        { throw (ex); }
     }

   public async void ActionBeginHandler(ActionEventArgs<TblClientUsers> Args)
    {
       if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save && Args.Action == "add")
        {
            Args.Cancel = true; //Prevent the default action
             if (!validateClientData(Args.Data))
                return;
            else if (Db.AddTblClientUsers(Args.Data))
            {
                Db.SaveChanges();
            }
            else
            {
                ToastShow("Cannot save the client data");
            }
            colClientUsers = await @Db.GetAllTblClientUsers(SQLDbTblLogin1);
            await Task.Delay(100);
            DefaultGrid.Refresh();
        }



VN Vignesh Natarajan Syncfusion Team March 12, 2020 06:47 AM UTC

Hi Andrzej,  
 
Query: “Unfortunately reloading of DB-contents doesn't help. The new contents is visible only after I refresh the page” 
 
We have modified our solution to save the changes the changes into your database in the OnActionComplete event of the Grid. In the OnActionBegin event we will save the inserted / Edited record details and update the database in the OnActionComplete event of the Grid.  
 
Refer the below code example   
 
<EjsGrid @ref="Grid" DataSource="@GridData" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowFiltering="true" AllowSorting="true" AllowPaging="true"> 
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings> 
    <GridEvents OnActionBegin="OnBegin" OnActionComplete="OnComplete" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsIdentity="true" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Id" Width="150"></GridColumn> 
    </GridColumns> 
</EjsGrid> 
@code{ 
    EjsGrid<Order> Grid { get; set; } 
    public List<Order> GridData = new List<Order>(); 
    public Order AddedData = new Order(); 
    public Order EditedData = new Order(); 
    protected override void OnInitialized() 
    { 
        GridData = OrderData.GetAllOrders().ToList(); 
    } 
    public async void OnComplete(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 
        { 
            if (AddedData.OrderID != null) 
            { 
                //if your primarykey column is autoincremented, then remove the value of Primarykey while inseting into your database 
                AddedData.OrderID = null; 
                // insert new record in your database 
                await Task.Run(() => OrderData.AddOrder(AddedData)); 
                AddedData = new Order(); 
            } 
            else 
            { 
                //update the changes in your database 
                await Task.Run(() => OrderData.UpdateOrder(EditedData)); 
                EditedData = new Order(); 
            } 
  
        } 
        else if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Delete) 
        { 
            await Task.Run(() => OrderData.DeleteOrder(Args.Data.OrderID)); // delete the record from your database 
        } 
  
    } 
    public async void OnBegin(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 
        { 
            if (Args.Action == "add") 
            { 
                AddedData = Args.Data; // take the inserted record details 
            } 
            else 
            { 
                EditedData = Args.Data; //store the edited record details 
            } 
            // if your primarykey is auto increment column then its value will be null 
            if (Args.Data.OrderID == null) 
            { 
                //so kindly define the incremented value to primarykey to update in the Grid 
                Args.Data.OrderID = OrderData.GetAllOrders().ToList().Max(x => x.OrderID) + 1; // so assign value to IsIdentity 
            } 
        } 
    } 
} 
 
 
Note: kindly use green highlighted code when you have autoincrement primaryKey column in your database. otherwise ignore that code examples alone.   
 
Please download the modified sample from below 
 
 
After referring the sample, if you are still facing the issue kindly get back to us with issue reproducible sample.  
 
Regards, 
Vignesh Natarajan. 


AN Andrzej March 12, 2020 09:13 PM UTC

Hello, I've solved the case. The problem of no refreshing of the Grid lied in incorrect usage of Args.Cancel = true;. Now everything works OK with code below. It works with Syncfusion.EJ2.Blazor 17.4.0.5.
Thanks for your help and best regards.

    public async void ActionBeginHandler(ActionEventArgs<TblClientUsers> Args)
    {
        if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save && Args.Action == "edit")
        {
            if (!validateClientData(Args.Data))
            {
                Args.Cancel = true; //Prevent the default action
                DefaultGrid.Refresh(); // and refresh the Grid.
                return;
            }

            bool bRet = Db.UpdateTblClientUsers(Args.Data);
            if (bRet)
                bRet = await Db.SaveChanges();
            if (!bRet)
            {
                Args.Cancel = true; //Prevent the default action
                ToastShow("Cannot save the client data");
                DefaultGrid.Refresh(); // and refresh the Grid.
            }
        }
        else if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save && Args.Action == "add")
        {
            if (!validateClientData(Args.Data))
            {
                Args.Cancel = true; //Prevent the default action
                DefaultGrid.Refresh(); // and refresh the Grid.
                return;
            }
            bool bRet = Db.AddTblClientUsers(Args.Data);
            if (bRet)
                bRet = await Db.SaveChanges();
            if (!bRet)
            {
                Args.Cancel = true; //Prevent the default action
                ToastShow("Cannot save the client data");
                DefaultGrid.Refresh(); // and refresh the Grid.
            }
        }
        else if (Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Delete)
        {
            bool bRet = (Args.Data.ClientNumber != null);
            if (bRet)
                bRet = Db.DeleteTblClientUsers((int)Args.Data.ClientNumber, Args.Data.ClientEmail);
            if (bRet)
                bRet = await Db.SaveChanges();
            if (!bRet)
            {
                Args.Cancel = true; //Prevent the default action
                ToastShow("Cannot save the client data");
                DefaultGrid.Refresh(); // and refresh the Grid.
            }
        }
    }



VN Vignesh Natarajan Syncfusion Team March 13, 2020 04:38 AM UTC

Hi Fernando,  

Thanks for the update. 

We are glad to hear that you have resolved your query.  

Kindly get back to us if you have further queries.   

Regards, 
Vignesh Natarajan. 


Loader.
Up arrow icon