OnActionComplete calls a handler with args.Data = null

[Andrzej]

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

[Vignesh Natarajan]

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. 

[Andrzej]

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

[Vignesh Natarajan]

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.  

 

[Andrzej]

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();
        }

[Vignesh Natarajan]

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 

 

Sample: https://www.syncfusion.com/downloads/support/forum/152291/ze/EFGrid136321099  

 

After referring the sample, if you are still facing the issue kindly get back to us with issue reproducible sample.  

 

Regards, 

Vignesh Natarajan. 

[Andrzej]

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.

            }

        }

    }

[Vignesh Natarajan]

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.