Enter Pre-Selected Value Into Numeric TextBox

[Ssekamatte James]

Dear Syncfusion,

I have a drop down field in which I provided an On Change Method called OnProductChange.In this change method,I want that when I select a product from the Dropdown Method, for example Maize,it goes to my products table under the QuantityAvailable column and returns a Value for the Available Quantity which should be filled in the QuantityAvailable Numeric Text field automatically.

My problem is that the OnProductChange method is working fine and the value is returned from the database but this value is not put in the QuantityAvailable numeric text field as I want it to be since this is supposed to be a Read Only field.

Thank You

The DropDown and Numeric TextBox Fields

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

                       <SfDropDownList ID="ProductName" TItem="ViewPurchase" @bind-Value="@(sal.ProductName)" TValue="string" DataSource="@skpurchaseproducts" FloatLabelType="FloatLabelType.Always" Placeholder="Product">

                            <DropDownListFieldSettings Value="StockProductId" Text="StockProductName"></DropDownListFieldSettings>

                            <DropDownListEvents TItem="ViewPurchase" TValue="string" ValueChange="OnProductChange"></DropDownListEvents>

                       </SfDropDownList>

                       </div>

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

                        <SfNumericTextBox ID="QuantityAvailable" @bind-Value="@(sal.QuantityAvailable)" @ref="QttyAvailable" Placeholder="Quantity Available" FloatLabelType="FloatLabelType.Always"></SfNumericTextBox>

                    </div>

                </div>

My Change Method

 public void OnProductChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ViewPurchase> args)

    {

        try

        {

            var product = args.ItemData;

            sal.QuantityAvailable = product.QuantityAvailable;

            StateHasChanged();

        }

        catch (Exception ex)

        {

            throw ex;

        }

    }

Attachment: QuantityAvailable_b839745e.rar

[Berly Christopher]

Hi Boris, 

Greetings from Syncfusion support. 

Based on the shared information, the reported issue is not occurred at our end. And the Numeric Textbox component only accepts the numeric values. We suggest you to ensure that assigned value for the numeric textbox component is in the proper numeric format. So, we have prepared the sample and attached it below. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server_164706486072374  

 

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Numeric_Bind_164706-118949667  

Please check the above sample and share the below details that will help us to check and proceed further from our end.  

• Share the details about received value in the product.QuantityAvailable variable assigned to the numeric component.

• Syncfusion NuGet version.

 

• Have you used DropDownList and Numeric Textbox inside the Grid Edit template?

• Modify the attached sample with the reported issue.

 

Regards, 

Berly B.C

[Ssekamatte James]

I have noticed your solution is in .Net 3.1 and for my application, it is in .Net 5.0, could it be that .Net 5.0 is not supported yet ?

[Ssekamatte James]

I have attached a recording of my screen.The effect in my textbox only changes after I click , which is not what I want. i have provided you my full razor page to help me out.

Attachment: Screen_Record_6b378b39.rar

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hello Ssekamatte , 

Good day to you. 

We checked the attached video. On examining the attached video, you have updated the value of Numeric Textbox from the component instance. We would like to know you that updating the bind-value variable would automatically update the value of the Numeric Textbox. Therefore, we suggest you to update the value by updating the bind-value variable. Please refer the below code snippet.


 

<Template> 

            @{ 

                var employee = (context as EmployeeData); 

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

                    <SfDropDownList ID="StockProductName" TItem="EmployeeData" @bind-Value="employee.FirstName" TValue="string" DataSource="@Employees" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" Placeholder="Product"> 

                        <DropDownListFieldSettings Value="EmployeeID" Text="FirstName"></DropDownListFieldSettings> 

                        <DropDownListEvents TItem="EmployeeData" TValue="string" ValueChange="OnProductChange"></DropDownListEvents> 

                    </SfDropDownList> 

                </div> 

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

                    <SfNumericTextBox ID="QuantityAvailable" TValue="double?" @bind-Value="@NumericValue" @ref="QttyAvailable" FloatLabelType="FloatLabelType.Always"></SfNumericTextBox> 

                </div> 

            } 

        </Template> 

 

 

 public double? NumericValue { get; set; } 

 

public void OnProductChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, EmployeeData> args) 

    { 

        //var product = args.ItemData; 

        //selling.QuantityRemaining = product.QuantityAvailable; 

        //StateHasChanged(); 

 

        var product = args.ItemData; 

        NumericValue = product.EmployeeID; 

 

        //selling.QuantityAvailable = product.QuantityAvailable; 

 

        //QttyAvailable.Value = product.QuantityAvailable; 

        //SellPrice.Value = product.ProductSellingPrice; 

        //sal.ProductSellingPrice = product.ProductSellingPrice; 

        //this.StateHasChanged(); 

    } 

 

 

Regards, 

Jeyanth. 

[Ssekamatte James]

Dear Jeyanth,

Thank you for your response. However, it is still not doing what I want.it can ably pick the values but still they are not automatically populated in the required feilds as I want them to. I need to click outside of the dialog template first before the values are populated as I have shown in the attached video. 

 I have again attached a video and my _Host file together with the razor file.

I will be glad for your further assistance.

Attachment: Errors_3b2196d9.rar

[Berly Christopher]

Hi Ssekamatte,  

  

We have prevented the unwanted rendering of components to improve the performance and so the updated value of Numeric textbox is not rendered. To resolve this, we suggest you to invoke the PreventRender method of the grid in OnActionComplete event and then set the new modified numeric textbox value by using the below code. We have also prepared a sample for your reference which can be downloaded by using the below link.  

  

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1166912370  

  

Documentation - https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance/  

  

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

    <GridEvents TValue="OrdersDetails" OnActionComplete="ActionComplete"></GridEvents>  

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

        <Template>  

            @{  

                var Order = (context as OrdersDetails);  

                <div>  

                    <div class="form-row">  

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

                            <label class="e-float-text e-label-top">Order ID</label>  

                            <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)"Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox>  

                        </div>  

                    </div>  

                    <div class="form-row">  

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

                            <label class="e-float-text e-label-top">Freight</label>  

                            @{                               

                                Order.Freight = IsFreightModified ? Freight : Order.Freight;  

                                IsFreightModified = false;  

                            }  

                            <SfNumericTextBox @ref="Numeric" ID="Freight" @bind-Value="@(Order.Freight)"TValue="double?"></SfNumericTextBox>  

                        </div>  

                    </div>  

                    <div class="form-row">  

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

                            <label class="e-float-text e-label-top">Ship Country</label>  

                            <SfDropDownList ID="ShipCountry" @bind-Value="@(Order.ShipCountry)"TItem="OrdersDetails" TValue="string" DataSource="@GridData">  

                                <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>  

                                <DropDownListEvents TItem="OrdersDetails" TValue="string" ValueChange="OnChange"></DropDownListEvents>  

                            </SfDropDownList>  

                        </div>  

                    </div>  

                </div>  

            }  

        </Template>  

    </GridEditSettings>  

..  

..  

</SfGrid>  

  

@code{  

    SfNumericTextBox<double?> Numeric { get; set; }  

    public double? Freight { get; set; }  

    public bool IsFreightModified { get; set; }  

    public SfGrid<OrdersDetails> Grid { get; set; }  

  

    public void ActionComplete(ActionEventArgs<OrdersDetails> args)  

    {  

        if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add) || args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit))  

        {  

            Grid.PreventRender(false);  

        }  

    }      

  

    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, OrdersDetails> args)  

    {  

        IsFreightModified = true;  

        Freight = args.ItemData.Freight + 1;  

    }  

}  

 

Please get back to us if you have any other queries.  

 

Regards,  

Berly B.C 

[Ssekamatte James]

Hi Berly B.C,

Thank you so much for your response. 

My issue has finally been resolved with the solution you gave.

[Berly Christopher]

Hi Ssekamatte, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C