1. Home
  2. Forum
  3. Blazor
  4. Cascading refresh and defautl selection of multiple DropDownList

Cascading refresh and defautl selection of multiple DropDownList

Hello Support Team.

I browsed already existing threads in the forum but I did not find a good answer.

Let's say, I got 4 DropDownList: Province, Region, District and County.

Province (1) <--> (N) Region (1) <--> (N) District (1) <--> (N) County.

I'd like to implement the following scenario:

Select a Province

     - This will raise an event OnProvinceValueSelect()

     - Update the list of Region based on the above selected Provice

     - Select the first item of Region

             - This will raise an event OnRegionValueSelect()

             - Update the list of District based on the above selected Region

             - Select the first item of District

                        - This will raise an event OnDistrictValueSelect()

                        - Update the list of County based on the above selected District

                        - Select the first item of County

Thank you in advance for your help.



<div class="col">

<SfDropDownList TValue="Int64?" TItem="Province" PopupHeight="230px" PopupWidth="auto" DataSource="@provinceList" @bind-Index="@selProvinceIdx" @bind-Item="@selProvinceVal">

<DropDownListEvents TItem="Province" TValue="Int64?" OnValueSelect="@OnProvinceValueSelect" ValueChange="@OnProvinceValueChanged"></DropDownListEvents>

<DropDownListFieldSettings Text="name" Value="id"></DropDownListFieldSettings>

</SfDropDownList>

</div>

<div class="col">

<SfDropDownList TValue="Int64?" TItem="Region" PopupHeight="230px" PopupWidth="auto" DataSource="@regionList" @bind-Index="@selRegionIdx" @bind-Item="@selRegionVal">

<DropDownListEvents TItem="Region" TValue="Int64?" OnValueSelect="@OnRegionValueSelect" ValueChange="@OnRegionValueChanged"></DropDownListEvents>

<DropDownListFieldSettings Text="name" Value="id"></DropDownListFieldSettings>

</SfDropDownList>

</div>

<div class="col">

<SfDropDownList TValue="Int64?" TItem="District" PopupHeight="230px" PopupWidth="auto" DataSource="@districtList" @bind-Index="@selDistrictIdx" @bind-Item="@selDistrictVal">

<DropDownListEvents TItem="District" TValue="Int64?" OnValueSelect="@OnDistrictValueSelect" ValueChange="@OnDistrictValueChanged"></DropDownListEvents>

<DropDownListFieldSettings Text="name" Value="id"></DropDownListFieldSettings>

</SfDropDownList>

</div>

<div class="col">

<SfDropDownList TValue="Int64?" TItem="County" PopupHeight="230px" PopupWidth="auto" DataSource="@countyList" @bind-Index="@selCountyIdx" @bind-Item="@selCountyVal">

<DropDownListEvents TItem="County" TValue="Int64?" ValueChange="@OnCountyValueChanged"></DropDownListEvents>

<DropDownListFieldSettings Text="name" Value="id"></DropDownListFieldSettings>

</SfDropDownList>

</div>


@code

{

private int? selProvinceIdx { get; set; }

private int? selRegionIdx { get; set; }

private int? selDistrictIdx { get; set; }

private int? selCountyIdx { get; set; }


private Province? selProvinceVal { get; set; }

private Region? selRegionVal { get; set; }

private District? selDistrictVal { get; set; }

private County? selCountyVal { get; set; }


private List<Province> provinceList { get; set; } = new List<Province>();

private List<Region> regionList { get; set; } = new List<Region>();

private List<District> districtList { get; set; } = new List<District>();

private List<County> countyList { get; set; } = new List<County>();


protected override async Task OnInitializedAsync()

{

provinceList = await locationSvc.GetProvincesAsync();

selProvinceIdx = 0;

}


private async Task OnProvinceValueSelect(Syncfusion.Blazor.DropDowns.SelectEventArgs<Province> args)

{

regionList = await locationSvc.GetRegionsOfProvinceAsync(args.ItemData.id);

selRegionIdx = null;

}


private async Task OnProvinceValueChanged(/*Syncfusion.Blazor.DropDowns.ChangeEventArgs<Province> eventArgs*/)

{

selRegionIdx = 0; // <== I expected that this will raise an event of OnRegionValueSelect() !!!!!!!!!

}


private async Task OnRegionValueSelect(Syncfusion.Blazor.DropDowns.SelectEventArgs<Region> args)

{

districtList = await locationSvc.GetDistrictsOfRegionsAsync(args.ItemData.id);

selDistrictIdx = null;

}


private void OnRegionValueChanged(/*Syncfusion.Blazor.DropDowns.ChangeEventArgs<Int64, Region> args*/)

{

selDistrictIdx = 0; // <== I expected that this will raise an event of OnDistrictValueChangedValueSelect() !!!!!!!!!

}


private async Task OnDistrictValueSelect(Syncfusion.Blazor.DropDowns.SelectEventArgs<District> args)

{

countyList = await locationSvc.GetCountysOfDistrictAsync(args.ItemData.id);

selCountyIdx = null;

}


private void OnDistrictValueChanged(/*Syncfusion.Blazor.DropDowns.ChangeEventArgs<Int64, District> args*/)

{

selCountyIdx = 0; // <== I expected that this will raise an event of OnCountyValueChanged() !!!!!!!!!

}


private void OnCountyValueChanged(/*Syncfusion.Blazor.DropDowns.ChangeEventArgs<Int64, County> args*/)

{

}

}


10 Replies 1 reply marked as answer
VJ Vinitha Jeyakumar Syncfusion Team January 24, 2022 01:14 PM UTC

Hi Artilizansa,

We have prepared a sample as per your requirement using cascading functionalities of the dropdown list. please check the sample below for your reference,

Code snippet:
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        <div class="cascading">
            <SfDropDownList TItem="Countries" TValue="string" Placeholder="Select a country" PopupHeight="auto" DataSource="@Country">
                <DropDownListEvents TItem="Countries" TValue="string" ValueChange="ChangeCountry"></DropDownListEvents>
                <DropDownListFieldSettings Text="CountryName" Value="CountryId"></DropDownListFieldSettings>
            </SfDropDownList>
        </div>
        <div class="cascading">
            <SfDropDownList Enabled="@EnableStateDropDown" Index="index" TValue="string" TItem="State" @bind-Value="@StateValue" Placeholder="Select a state" Query="@StateQuery" PopupHeight="auto" DataSource="@States">
                <DropDownListEvents TItem="State" TValue="string" ValueChange="ChangeState"></DropDownListEvents>
                <DropDownListFieldSettings Text="StateName" Value="StateId"></DropDownListFieldSettings>
            </SfDropDownList>
        </div>
        <div class="cascading">
            <SfDropDownList Enabled="@EnableCitytDropDown" Index="index1" TValue="string" TItem="city" @bind-Value="@CityValue" Placeholder="Select a city" Query="@CityQuery" PopupHeight="auto" DataSource="@cites">
                <DropDownListEvents TItem="city" TValue="string" ValueChange="ChangeCity"></DropDownListEvents>
                <DropDownListFieldSettings Text="CityName" Value="CityId"></DropDownListFieldSettings>
            </SfDropDownList>
        </div>
        <div class="cascading">
            <SfDropDownList Enabled="@EnableStreetDropDown" Index="index2" TValue="string" TItem="street" @bind-Value="@StreetValue" Placeholder="Select a Street" Query="@StreetQuery" PopupHeight="auto" DataSource="@streets">
                <DropDownListFieldSettings Text="StreetName" Value="StreetId"></DropDownListFieldSettings>
            </SfDropDownList>
        </div>
    </div>
</div>
<style>
    .control-wrapper {
        margin: 0 auto;
        width: 250px;
    }

    .control-section .cascading {
        padding-top: 35px
    }
</style>
@code {
    public bool EnableStreetDropDown = false;
    public bool EnableStateDropDown = false;
    public bool EnableCitytDropDown = false;
    public int index { get; set; }
    public int index1 { get; set; }
    public int index2 { get; set; }
    public Query StreetQuery { get; set; } = null;
    public string StreetValue { get; set; } = null;
    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 void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)
    {
        this.EnableStateDropDown = !string.IsNullOrEmpty(args.Value);
        this.EnableCitytDropDown = false;
        this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
        //this.StateValue = null;
        this.index = 0;
        this.CityValue = null;
    }
    public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, State> args)
    {
        this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value);
        this.CityQuery = new Query().Where(new WhereFilter() { Field = "StateId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
        //this.CityValue = null;
        this.index1 = 0;
    }
    public void ChangeCity(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, city> args)
    {
        this.EnableStreetDropDown = !string.IsNullOrEmpty(args.Value);
        this.StreetQuery = new Query().Where(new WhereFilter() { Field = "CityId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
        //this.StreetValue = null;
        this.index2 = 0;
    }
    public class State
    {
        public string StateName { get; set; }
        public string CountryId { get; set; }
        public string StateId { get; set; }
    }
    public class Countries
    {
        public string CountryName { get; set; }
        public string CountryId { get; set; }
    }
    public class street
    {
        public string StreetName { get; set; }
        public string CityId { get; set; }
    }
    public class city
    {
        public string CityName { get; set; }
        public string StateId { get; set; }
        public string CityId { get; set; }
    }
    public List<street> streets = new List<street>() {
        new street(){ StreetName= "Mc.Donalds1", CityId= "207" },
        new street(){ StreetName= "Park street1", CityId= "201"  },
        new street(){ StreetName= "Mc.Donalds2", CityId= "211" },
        new street(){ StreetName= "Park street2", CityId= "208"  },
        new street(){ StreetName= "Mc.Donalds3", CityId= "206" },
        new street(){ StreetName= "Park street3", CityId= "205"  },
        new street(){ StreetName= "Mc.Donalds4", CityId= "213" },
        new street(){ StreetName= "Park street4", CityId= "203"  },
        new street(){ StreetName= "Mc.Donalds5", CityId= "209" },
        new street(){ StreetName= "Park street5", CityId= "204"  }
    };
    public List<Countries> Country = new List<Countries>() {
        new Countries(){ CountryName= "Australia", CountryId= "2" },
        new Countries(){ CountryName= "United States", CountryId= "1" }
    };
    public List<State> States = new List<State>() {
        new State() { StateName= "New York", CountryId= "1", StateId= "101" },
        new State() { StateName= "Queensland", CountryId= "2", StateId= "104" },
        new State() { StateName= "Tasmania ", CountryId= "2", StateId= "105" },
        new State() { StateName= "Victoria", CountryId= "2", StateId= "106" },
        new State() { StateName= "Virginia", CountryId= "1", StateId= "102" },
        new State() { StateName= "Washington", CountryId= "1", StateId= "103" }
    };
    public List<city> cites = new List<city>()
{
         new city() { CityName = "Aberdeen", StateId= "103", CityId= "207" },
         new city() { CityName = "Albany", StateId= "101", CityId= "201" },
         new city() { CityName = "Brisbane ", StateId="104", CityId= "211" },
         new city() { CityName = "Colville ", StateId= "103", CityId= "208" },
         new city() { CityName ="Emporia", StateId= "102", CityId= "206" },
         new city() { CityName = "Hampton ", StateId= "102", CityId= "205" },
         new city() { CityName ="Hobart", StateId= "105", CityId= "213" },
         new city() { CityName ="Lockport", StateId= "101", CityId= "203" },
         new city() { CityName =  "Pasco", StateId= "103", CityId= "209" },
         new city() { CityName= "Alexandria", StateId= "102", CityId= "204" },
         new city() { CityName= "Beacon ", StateId= "101", CityId= "202" },
         new city() { CityName= "Cairns", StateId= "104", CityId= "212" },
         new city() { CityName= "Devonport", StateId= "105", CityId= "215" },
         new city() { CityName= "Geelong", StateId= "106", CityId= "218" },
         new city() { CityName= "Healesville ", StateId="106", CityId= "217" },
         new city() { CityName= "Launceston ", StateId= "105", CityId= "214" },
         new city() { CityName= "Melbourne", StateId= "106", CityId="216" },
         new city() { CityName= "Townsville", StateId= "104", CityId= "210" }
    };
}


Regards,
Vinitha


AR Artilizansa replied to Vinitha Jeyakumar February 10, 2022 01:41 PM UTC

Hello Team,

Thank you very much for your feedback. I already saw your example before I submit this request, but It doesn't fit to what I am seeking for.

The behavior I am expecting for is:

  • The User selects a Country (and this is the only User action needed)
  • The list of States is populated depending on the selected Country and the first item of this list is automatically (or programmatically if you want) selected.
  • Due to the fact that the first item of State has been selected, the list of Cities is populated and the first item of this list is automatically (or programmatically if you want) selected.
  • Due to the fact that the first item of City has been selected, the list of Streets is populated and the first item of this list is automatically (or programmatically if you want) selected.


Please let me know if my explanation is not really clear.

Regards,


PM Ponmani Murugaiyan Syncfusion Team February 14, 2022 02:32 AM UTC

Hi Artilizansa, 

Currently we are checking your reported query, will update further details in 2 business days (February 15, 2022). 

Regards, 
Ponmani M 


PM Ponmani Murugaiyan Syncfusion Team February 16, 2022 02:20 PM UTC

Hi Artilizansa, 

We are glad to hear that the issue has been resolved in your end. Please get back us if you need further assistance. 

Regards, 
Ponmani M 


AR Artilizansa replied to Ponmani Murugaiyan February 16, 2022 06:48 PM UTC

Hello Support Team,


After dozen of attempt, I finally found the solution. Basically, I do not use Index. Both TItem ans TValue as the class (Country, State, City, Street). I did not user Query but an internal filtering instead. Please find here below the complete code .. working fine.

Thank you again for your help.

Artilizansa.


@page "/"



@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data


<div class="col-lg-12 control-section">

    <div class="control-wrapper">

        <div class="cascading">

            <SfDropDownList TItem="Countries" TValue="Countries" @bind-Value="@CountryValue" Placeholder="Select a country" PopupHeight="auto" DataSource="@Country">

                <DropDownListEvents TItem="Countries" TValue="Countries" ValueChange="ChangeCountry"></DropDownListEvents>

                <DropDownListFieldSettings Text="CountryName" Value="CountryId"></DropDownListFieldSettings>

            </SfDropDownList>

        </div>

        <div class="cascading">

            <SfDropDownList TValue="State" TItem="State" @bind-Value="@StateValue" Placeholder="Select a state" PopupHeight="auto" DataSource="@FilteredStates">

                <DropDownListEvents TItem="State" TValue="State" ValueChange="ChangeState"></DropDownListEvents>

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

            </SfDropDownList>

        </div>

        <div class="cascading">

            <SfDropDownList TValue="city" TItem="city" @bind-Value="@CityValue" Placeholder="Select a city" PopupHeight="auto" DataSource="@FilteredCities">

                <DropDownListEvents TItem="city" TValue="city" ValueChange="ChangeCity"></DropDownListEvents>

                <DropDownListFieldSettings Text="CityName" Value="CityId"></DropDownListFieldSettings>

            </SfDropDownList>

        </div>

        <div class="cascading">

            <SfDropDownList TValue="street" TItem="street" @bind-Value="@StreetValue" Placeholder="Select a Street" PopupHeight="auto" DataSource="@FilteredStreets">

                <DropDownListFieldSettings Text="StreetName" Value="StreetId"></DropDownListFieldSettings>

            </SfDropDownList>

        </div>

    </div>

</div>

<style>

    .control-wrapper {

        margin: 0 auto;

        width: 250px;

    }


    .control-section .cascading {

        padding-top: 35px

    }

</style>


@code

{

public Countries CountryValue { get; set; } = null;


public street StreetValue { get; set; } = null;


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


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


List<State> FilteredStates { get; set; }

List<city> FilteredCities { get; set; }

List<street> FilteredStreets { get; set; }


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

{

FilteredStates = States.Where(s => s.CountryId == args.ItemData.CountryId).ToList();

if(FilteredStates.Count > 0)

this.StateValue = FilteredStates[0]; // This will provoque a call to ChangeState()

}


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

{

FilteredCities = cites.Where(c => c.StateId == args.ItemData.StateId).ToList();

if(FilteredCities.Count > 0)

this.CityValue = FilteredCities[0]; // This will provoque a call to ChangeCity()

}


public void ChangeCity(Syncfusion.Blazor.DropDowns.ChangeEventArgs<city, city> args)

{

FilteredStreets = streets.Where(s => s.CityId == args.ItemData.CityId).ToList();

if(FilteredStreets.Count > 0)

this.StreetValue = FilteredStreets[0];

}


public class State

{

public string StateName { get; set; }

public string CountryId { get; set; }

public string StateId { get; set; }

}


public class Countries

{

public string CountryName { get; set; }

public string CountryId { get; set; }

}


public class street

{

public string StreetName { get; set; }

public string CityId { get; set; }

}


public class city

{

public string CityName { get; set; }

public string StateId { get; set; }

public string CityId { get; set; }

}


public List<street> streets = new List<street>() {

new street(){ StreetName= "Mc.Donalds1", CityId= "207" },

new street(){ StreetName= "Park street1", CityId= "201" },

new street(){ StreetName= "Mc.Donalds2", CityId= "211" },

new street(){ StreetName= "Park street2", CityId= "208" },

new street(){ StreetName= "Mc.Donalds3", CityId= "206" },

new street(){ StreetName= "Park street3", CityId= "205" },

new street(){ StreetName= "Mc.Donalds4", CityId= "213" },

new street(){ StreetName= "Park street4", CityId= "203" },

new street(){ StreetName= "Mc.Donalds5", CityId= "209" },

new street(){ StreetName= "Park street5", CityId= "204" }

};


public List<Countries> Country = new List<Countries>() {

new Countries(){ CountryName= "Australia", CountryId= "2" },

new Countries(){ CountryName= "United States", CountryId= "1" }

};


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

new State() { StateName= "New York", CountryId= "1", StateId= "101" },

new State() { StateName= "Queensland", CountryId= "2", StateId= "104" },

new State() { StateName= "Tasmania ", CountryId= "2", StateId= "105" },

new State() { StateName= "Victoria", CountryId= "2", StateId= "106" },

new State() { StateName= "Virginia", CountryId= "1", StateId= "102" },

new State() { StateName= "Washington", CountryId= "1", StateId= "103" }

};


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

{

 new city() { CityName = "Aberdeen", StateId= "103", CityId= "207" },

 new city() { CityName = "Albany", StateId= "101", CityId= "201" },

 new city() { CityName = "Brisbane ", StateId="104", CityId= "211" },

 new city() { CityName = "Colville ", StateId= "103", CityId= "208" },

 new city() { CityName ="Emporia", StateId= "102", CityId= "206" },

 new city() { CityName = "Hampton ", StateId= "102", CityId= "205" },

 new city() { CityName ="Hobart", StateId= "105", CityId= "213" },

 new city() { CityName ="Lockport", StateId= "101", CityId= "203" },

 new city() { CityName = "Pasco", StateId= "103", CityId= "209" },

 new city() { CityName= "Alexandria", StateId= "102", CityId= "204" },

 new city() { CityName= "Beacon ", StateId= "101", CityId= "202" },

 new city() { CityName= "Cairns", StateId= "104", CityId= "212" },

 new city() { CityName= "Devonport", StateId= "105", CityId= "215" },

 new city() { CityName= "Geelong", StateId= "106", CityId= "218" },

 new city() { CityName= "Healesville ", StateId="106", CityId= "217" },

 new city() { CityName= "Launceston ", StateId= "105", CityId= "214" },

 new city() { CityName= "Melbourne", StateId= "106", CityId="216" },

 new city() { CityName= "Townsville", StateId= "104", CityId= "210" }

};

}



AR Artilizansa November 22, 2022 09:30 AM UTC

Hello again Team,


I migrated my VS Project to Package 20.3.0.50 .. and I got again a malfunction regarding the cascading refresh and default selection of DropDownList.

As reminder, the only needed User action is a selection of a Country .. And this must provoque a cascading update of the rest of the DropdownList + Default selection of the first item of each of them.

Please, find attached the code.


Thank you very much.

Artilizansa.


Attachment: DropDown_2ba6a8fb.zip

UD UdhayaKumar Duraisamy Syncfusion Team November 23, 2022 01:49 PM UTC

In the shared code snippet, you have assigned a default value to each component via the valuechange event of the drop-down components. The ValueChange event will be triggered only when the component's value is changed via interaction. It will not be triggered for a programmatic value change.


AR Artilizansa replied to UdhayaKumar Duraisamy November 24, 2022 01:52 PM UTC

Thank you for your reply.

In this case, my question is "How to trigger a ValueChange event programmatically?".

Or .. How to  achieve the behavior I need here?.


Best regards.


UD UdhayaKumar Duraisamy Syncfusion Team November 28, 2022 12:02 PM UTC

The reported issue " Change event does not trigger when we set value and data source dynamically" as a bug from our end, and the fix for the issue will be included in any one of our upcoming patch releases.


You can now track the status of the feedback through the below link,

https://www.syncfusion.com/feedback/39427


Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”


Marked as answer
AR Artilizansa December 15, 2022 10:19 AM UTC

Hello Support Team,

Thanks for your effort. I tested and the bug is now fixed.

Artilizansa.


Loader.
Up arrow icon