Cascading Dropdown does not show Selected Value in Edit Mode

[Salimkhan Pathan]

Hi Developers

I have a query regarding dropdown control. In edit mode, I filled data to dropdown and also set their @bind-value with property. But after load the data, dropdown looks empty. In my case Country Dropdown.

When I focus on my textbox and lost focus from the control, the Country Dropdown value gets populated.....

Here I have attached my code... Please go through it. Thanks in advance.

                    <EditForm EditContext="@editContext" OnValidSubmit="@(() => SaveCity(model))">
                        <DataAnnotationsValidator />
                        <div class="form-group">
                            <SfDropDownList AllowFiltering="true" FilterBarPlaceholder="true" FloatLabelType="FloatLabelType.Always" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" IgnoreCase="true" ShowClearButton="true" DataSource="@countryList" Placeholder="Country Name" @bind-Value="@SelectedCountryId">
                                <DropDownListEvents TValue="long" ValueChange="ddlCountryValueChange"></DropDownListEvents>
                                <DropDownListFieldSettings Text="CountryName" Value="CountryId" />
                            </SfDropDownList>
                        </div>
                        <div class="form-group">
                            <SfDropDownList @ref="ddlState" Enabled="@EnableStateDropDown" Query="@StateQuery" AllowFiltering="true" FilterBarPlaceholder="true" FloatLabelType="FloatLabelType.Always" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" IgnoreCase="true" ShowClearButton="true" DataSource="@stateList" Placeholder="State Name" @bind-Value="@SelectedStateId">

                                <DropDownListFieldSettings Text="StateName" Value="StateId" />

                            </SfDropDownList>
                        </div>
                        <div class="form-group">
                            <SfTextBox Placeholder="City Name" @bind-Value="model.CityName" CssClass="@cssClass" FloatLabelType="FloatLabelType.Always" Blur="CityNameBlurEvent"></SfTextBox>
                            <ValidationMessage For="@(() => model.CityName)" />
                        </div>

                        <div class="form-group text-center">
                            <br /><br /><br />
                            <SfButton CssClass="e-success" HtmlAttributes="@( new Dictionary<string, object> {{ "type", "submit" }})" IconPosition=IconPosition.Left IconCss="e-icons M_PV_Save">&nbsp;Save&nbsp;</SfButton>&nbsp;
                            <SfButton CssClass="e-danger" HtmlAttributes="@( new Dictionary<string, object> {{ "type", "button" }})" @onclick="Cancel" IconPosition=IconPosition.Left IconCss="e-icons e-close e-info ">Cancel</SfButton>
                        </div>
                    </EditForm>
 

@code {

    #region

    private CityMaster model;
    private EditContext editContext;
    private string cssClass { get; set; }
    private IEnumerable<CountryMaster>
    countryList
    { get; set; }
    private IEnumerable<StateMaster>
        stateList
    { get; set; }
    [Parameter]
    public long CityId { get; set; }
    public object SelectedCountryId { get; set; }
    public object SelectedStateId { get; set; }
    public bool EnableStateDropDown = false;
    public Query StateQuery { get; set; } = null;
    public string ToastContent { get; set; } = "";
    MessageBox ToastObj;
    private MessageBox.MessageType messageType { get; set; }

    SfDropDownList<object, StateMaster>
        ddlState;

    #endregion

    protected async override Task OnInitializedAsync()
    {
        model = new CityMaster();
        editContext = new EditContext(model);
        EnableStateDropDown = true;
        await FillDropdownList();

        var responseMessage = await cityService.GetCityById(CityId);
        if (responseMessage.StatusCode == HttpStatusCode.OK)
        {
            var result = await responseMessage.Content.ReadAsStringAsync();
            model = JsonConvert.DeserializeObject<CityMaster>
                (result);

            responseMessage = await stateService.GetStateById(model.StateId.Value);
            if (responseMessage.StatusCode == HttpStatusCode.OK)
            {
                StateMaster stateMaster = new StateMaster();
                var data = await responseMessage.Content.ReadAsStringAsync();
                stateMaster = JsonConvert.DeserializeObject<StateMaster>
                    (data);


                //////// Country Value not set in Edit Mode
                this.SelectedCountryId = stateMaster.CountryId;
                //StateHasChanged();

                this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = SelectedCountryId, IgnoreCase = false, IgnoreAccent = false });

                //////// State Value not set in Edit Mode
                this.SelectedStateId = model.StateId;
                //StateHasChanged();

            }
        }
    }


    private async Task FillDropdownList()
    {
        var responseMessage = await countryService.GetCountryList();

        if (responseMessage.StatusCode == HttpStatusCode.OK)
        {
            var result = await responseMessage.Content.ReadAsStringAsync();
            countryList = JsonConvert.DeserializeObject<List<CountryMaster>>(result);
        }
        responseMessage = await stateService.GetStateList();

        if (responseMessage.StatusCode == HttpStatusCode.OK)
        {
            var result = await responseMessage.Content.ReadAsStringAsync();
            stateList = JsonConvert.DeserializeObject<List<StateMaster>>(result);
        }

    }



      public void ddlCountryValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<long> args)
    {
        this.EnableStateDropDown = true;
        this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
        this.SelectedStateId = null;
    }


}

[Ponmani Murugaiyan]

Hello Salimkhan, 

 

Greetings from Syncfusion support. 

 

Based on your requirement, we have prepared sample for ”cascading sample in dropdownlist component”. Please find the code snippet and test sample below for reference. 

 

[Index.razor] 

 

@code { 

    public bool EnableStateDropDown = false; 

    public bool EnableCitytDropDown = false; 

    public string StateValue { get; set; } = null; 

    public Query StateQuery { get; set; } = null; 

    public string CityValue { get; set; } = null; 

    public Query CityQuery { get; set; } = null; 

 

    public List<Countries> country = new List<Countries>(); 

    public List<State> States = new List<State>(); 

    public List<city> cites = new List<city>(); 

 

    protected override async Task OnInitializedAsync() 

    { 

        country = await Countries.GetAllRecords(); 

        States = await State.GetAllRecords(); 

        cites = await city.GetAllRecords(); 

    } 

 

    public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 

    { 

        this.EnableStateDropDown = true; 

        this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false }); 

        this.StateValue = null; 

        this.CityValue = null; 

    } 

    public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args) 

    { 

        this.EnableCitytDropDown = true; 

        this.CityQuery = new Query().Where(new WhereFilter() { Field = "StateId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false }); 

        this.CityValue = null; 

    } 

} 

 

 

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

Kindly check with the above provided sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M