DropDownList doesn't bind with data on instantiation

[Judi Smith]

My issue is that when the grid edit dialog loads a record with a populated value in membership,SignUpFeeTaxRate, which is the bind-Value for the drop-down list, even though I have confirmed the value is present in the record, the dropdown list still shows the placeholder rather than the bound value. I have also confirmed that the numbers are the same. The tax is calculated correctly for the SfNumericTextBox display. 

The dropdown list performs correctly when selecting a value and saving it to the database. However, it does not bind when the record is loaded.

I did try creating a playground, but I couldn't get it to work. I even tried the Syncfusion examples (e.g., https://blazor.syncfusion.com/documentation/dropdown-list/value-binding), which didn't produce a functional dropdown list when copied and pasted straight from your web pages.

I have three classes:

public class MembershipOption{
pubic bool SignUpFeeIsTaxable {get; set}
public decimal? SignUpFeeTaxRate {get; set;}
pubic bool MembershipFeeIsTaxable {get; set}
​public decimal? MembershipFeeTaxRate {get; set;}
public Location Location {get; set;}
}

public class Location{
public string TaxRate1Label {get; set;}
public decimal? TaxRate1 {get; set;}
public string TaxRate2Lable {get; set;}
public decimal? TaxRate2 {get; set;}
}
public class TaxRates
{
    public string TaxRateLabel { get; set; }
    public decimal? TaxRate { get; set; }
}

I have a Grid that uses a dialog for editing. In the edit dialog, I have a DropDownList. The declaration of the DropDownList is

<SfDropDownList TValue="decimal?" TItem="TaxRates" DataSource="@_taxRates" bind-Value="@(membership.SignUpFeeTaxRate)" Placeholder="Select Tax Rate" Enabled="@(membership.SignupFeeIsTaxable)">
    <DropDownListFieldSettings Text="TaxRateLabel" Value="TaxRate"/>
    <DropDownListEvents TValue="decimal?" TItem="TaxRates" ValueChange="@CalculateSignUpSalesTax"></DropDownListEvents>

</SfDropDownList>

@code{
List<TaxRates> _taxRates;

In the GridEvent, I reference  OnActionBegin. My OnActionBegin Method is as follows:

private async Task OnActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs<MembershipOption> args)
{
    if (args.RequestType.Equals(Action.Add) || args.RequestType.Equals(Action.BeginEdit))
    {
        _membershipOption = args.Data;


        // Initialize the _taxRates list
        _taxRates = new List<TaxRates>
        {
            new TaxRates() {TaxRateLabel = _membershipOption.Location.TaxRate1Label, TaxRate = _membershipOption.Location.TaxRate1 ?? 0},
            new TaxRates() {TaxRateLabel = _membershipOption.Location.TaxRate2Label, TaxRate = _membershipOption.Location.TaxRate2 ?? 0}
        };


        //Set the saved values for the SetUpFee Taxes and Membership Taxes
        SignUpFeeCheckboxCalculateSalesTax();
        //MembershipFeeCheckboxCalculateSalesTax();
    }
}

The SignUpFeeCheckboxCalculateSalesTax method is

private void SignUpFeeCheckboxCalculateSalesTax()

{
    if (_membershipOption.SignupFeeIsTaxable)
    {
        var taxAmount = _membershipOption.SignUpFee * _membershipOption.SignUpFeeTaxRate.GetValueOrDefault();
        _signUpFeeTotal = _membershipOption.SignUpFee + taxAmount;
    }
    else
    {
        _signUpFeeTotal = _membershipOption.SignUpFee;
    }

    StateHasChanged();
}

​

Thank you in advance,

Judi Smith

[UdhayaKumar Duraisamy]

In the shared code snippet, you are dynamically showing the DropdownList and assigning values to the component immediately after setting the Data Source. Due to potential asynchronous delays, the value may not be properly bound to the component. The recommended approach is to assign the value to the component with a slight delay after the Data Source has been updated.

    private async Task Click()

    {

        enabled = true;

        string[] daysText = CultureInfo.CurrentCulture.DateTimeFormat.DayNames;

        daysData = new List<DropDownFields>

        {

            new DropDownFields() { Value = "SU", Text = daysText[0] },

            new DropDownFields() { Value = "MO", Text = daysText[1] },

            new DropDownFields() { Value = "TU", Text = daysText[2] },

            new DropDownFields() { Value = "WE", Text = daysText[3] },

            new DropDownFields() { Value = "TH", Text = daysText[4] },

            new DropDownFields() { Value = "FR", Text = daysText[5] },

            new DropDownFields() { Value = "SA", Text = daysText[6] }

        };

        await Task.Delay(1);

        dayNameValue = "SU";

    }

Sample: https://blazorplayground.syncfusion.com/embed/VXLTZRCmJLoahTGG?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

If you are still encountering the issue after applying the above suggestion, please share a runnable sample. This will help us understand how you are integrating and interacting with the component in your project, allowing us to provide a more accurate and effective solution.