Value from EditMode.Dialog is not being passed in the ActionEventArgs

[David Adler]

I am using SyncFusion.Blazor v18.2.0.44

I have a DataGrid that is using the EditMode.Dialog setting and when I edit a value in the popup dialog and then click Save, it does not passed with the ActionEventArgs value.

This was working earlier properly before I updated from v18.1.0.55 to v18.2.0.44. I can't seem to identify why it is no longer working. 

Here is my Grid markup;

    <SfGrid @ref="@Grid" DataSource="@OrderLineItemData" Height="100%" Width="100%" Toolbar="@(new List<string>() { "Edit" })">

        <GridEvents OnActionComplete="ActionBeginHandler" TValue="OrderLineItem"></GridEvents>

        <GridEditSettings AllowEditing="true" Dialog="DialogParams" Mode="EditMode.Dialog">

            <Template>

                @{

                    var lineItem = (context as OrderLineItem);

                    <div width="400px">

                        <div class="row">

                            <div class="col-12">

                                <div class="form-group">

                                    <label>Product</label>

                                    <SfTextBox ID="Product" Value="@(lineItem.ProductName)" Enabled="false"></SfTextBox>

                                </div>

                            </div>

                        </div>

                        <div class="row">

                            <div class="col-4">

                                <div class="form-group">

                                    <label>Qty</label>

                                    <SfNumericTextBox ID="Quantity" Value="@(lineItem.UnitQuantity)" Enabled="true" ShowSpinButton=true Format="n0" Min="0">

                                    </SfNumericTextBox>

                                </div>

                            </div>

                            <div class="col-8">

                            </div>

                        </div>

                    </div>

                }

            </Template>

        </GridEditSettings>

        <GridTemplates>

            <DetailTemplate>

                @{

                    var orderLineItem = (context as OrderLineItem);

                }

                <div class="row">

                    <div class="col-4">

                        <img src="@orderLineItem.ImageUrl" class="img-thumbnail" />

                    </div>

                    <div class="col-8">

                        <div class="card">

                            <div class="card-body">

                                <h5 class="card-title">@orderLineItem.ProductName</h5>

                                <p class="card-text">@orderLineItem.Description</p>

                            </div>

                        </div>

                    </div>

                </div>

            </DetailTemplate>

        </GridTemplates>

        <GridColumns>

            <GridColumn HeaderText="" Width="100px" AllowEditing="false">

                <Template>

                    @{

                        var lineItem = (context as OrderLineItem);

                    }

                    @if (lineItem.UnitQuantity > 0)

                    {

                        <button class="btn btn-outline-danger btn-sm" type="button" title="Reset qty to 0"

                                @onclick="@(_ => { if (context != null) HandleQtyClear(lineItem);})">

                            <span class="fas fa-times"></span> Clear

                        </button>

                    }

                </Template>

            </GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.Id) HeaderText="Id" AllowEditing="false" Visible="false" IsPrimaryKey="true"></GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.UnitQuantity) HeaderText="Qty" AllowEditing="true" Width="75px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.ProductName) HeaderText="Product" Width="300px" AllowEditing="false"></GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.UnitPrice) HeaderText="Each" Format="C2" Width="100px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" AllowEditing="false"></GridColumn>

            <GridColumn Field=@nameof(OrderLineItem.Total) HeaderText="Extended" Format="C2" Width="100px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" AllowEditing="false">

                <Template>

                    @{

                        var lineItem = (context as OrderLineItem);

                        var itemTotal = lineItem.UnitPrice * lineItem.UnitQuantity;

                        <p>@itemTotal.ToString("C")</p>

                    }

                </Template>

            </GridColumn>

        </GridColumns>

    </SfGrid>

And here is my ActionBeginHandler method.

        protected void ActionBeginHandler(ActionEventArgs<OrderLineItem> args)

        {

            decimal subTotal = 0;

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

            {

                var productId = args.Data.ProductId;

                foreach (var item in OrderLineItemData)

                {

                    if (item.ProductId == productId)

                    {

                        if (args.Data.UnitQuantity > 0)

                        {

                            item.UnitQuantity = args.Data.UnitQuantity;

                        }

                        item.Total = item.UnitPrice * item.UnitQuantity;

                    }

                    subTotal += item.Total;

                    if (subTotal > 0)

                    {

                        ShowAlert = false;

                    }

                    CreateOrderLineItems.OrderSubTotal = subTotal;

                }

                StateHasChanged();

                Grid.Refresh();

            }

        }

I edit a row and change the UnitQuantity value from 0 to 10, for example. But when I debug the ActionBeginHandler code and examine the args property, the Data being passed in still has zero as the value for the arga.Data.UnitQuantity property.

I didn't see anything in the Release Notes for v18.2.0.44 that seemed to relate to this issue. 

Any ideas?

[Dhivya Rajendran]

Hi David, 

Greeting from Syncfusion support. 

We have validated the provided code example, In your sample you are using dialog template feature in Grid. While using DialogTemplate, EditTemplate etc.,  its necessary to use @bind for Value/Property  binding.  Please refer the below code example and demo sample for more information. 

<SfGrid DataSource="@GridData" AllowPaging="true" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 

    <GridEvents OnActionComplete="ActionCompleteHandler" OnActionBegin="ActionBeginHandler" TValue="OrdersDetails"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams"> 

        <Template> 

            @{ 

                var Order = (context as OrdersDetails); 

            } 

            <div> 

                . . . . . 

                <div class="form-row"> 

                    <div class="form-group col-md-6"> 

                        <SfNumericTextBox ID="Freight" @bind-Value="@(Order.Freight)" Enabled="true" ShowSpinButton=true Format="n0" Min="0" ></SfNumericTextBox> 

                    </div> 

                    <div class="form-group col-md-6"> 

                        <SfDatePicker ID="OrderDate" @bind-Value="@(Order.OrderDate)" FloatLabelType="FloatLabelType.Always" Placeholder="Order Date"> 

                        </SfDatePicker> 

                    </div> 

                </div> 

                . . . . . 

            </div> 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn> 

        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" Width="140" TextAlign="@TextAlign.Right" ValidationRules="@(new ValidationRules{ Required=true, Range = new double[]{1, 1000}})" HeaderTextAlign="@TextAlign.Right"></GridColumn> 

         

    </GridColumns> 

</SfGrid> 

Note: We have introduced several API break in this release. We would like you to review the breaking changes from the below location. 

https://blazor.syncfusion.com/documentation/release-notes/18.2.44/?type=breaking-changes 

Regards, 

R.Dhivya 

[David Adler]

The problem was, as you suggested, that I was using value= rather than @bind-Value= . I made the correction and everything is working as expected now. Thanks. 

[Dhivya Rajendran]

Hi David, 

Thanks for your update. 

We are happy to hear that the provided suggestion was helpful to achieve your requirement. 

Please get back to us if you require further assistance from us. 

Regards, 

R.Dhivya