We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dropdown using two different data sources


I have a SF grid with some dropdowns in the form and they are working fine. However, in the screenshot below, I would like to use a different data source based on the Type selection value. 

For example, when Type = Function then source returns list x. When Type is something else, returns list y. 

Is this possible? 

Looking at the cascading dropdown example (https://blazor.syncfusion.com/documentation/dropdown-list/cascading ), the conditional dropdown is the same type but in my case the type will be different.



6 Replies 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team February 19, 2023 09:44 AM UTC

Yes, it is possible to dynamically change the data source of the dropdown component. By using component reference and value change event, you can achieve the desired requirement.

Please refer to the shared code snippet and sample for more information.

@page "/"


@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

<div style="margin:130px auto;width:300px">

    <label class="example-label">Dropdown 1</label>

    <SfDropDownList TItem="Type" TValue="string" Placeholder="Select" DataSource="@DataSource_1" ShowClearButton="true">

        <DropDownListEvents TItem="Type" TValue="string" ValueChange="ChangeFunction"></DropDownListEvents>

        <DropDownListFieldSettings Text="Name" Value="ID"></DropDownListFieldSettings>


    <hr />

    <label class="example-label">Dropdown 2</label>

    <SfDropDownList @ref="DDLObj" Enabled="@EnableStateDropDown" TItem="State" TValue="string" Placeholder="Select">

        <DropDownListFieldSettings Text="Function_Name" Value="Id"></DropDownListFieldSettings>




@code {

    SfDropDownList<string, State> DDLObj;

    public bool EnableStateDropDown = false;

    public async Task ChangeFunction(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Type> args)


        if (args.ItemData?.Name == "Function_1")


            DDLObj.DataSource = Function_1;

            EnableStateDropDown = true;


        else if (args.ItemData?.Name == "Function_2")


            DDLObj.DataSource = Function_2;

            EnableStateDropDown = true;




            DDLObj.DataSource = null;

            DDLObj.Value = null;

            EnableStateDropDown = false;


        await DDLObj.RefreshDataAsync();



    public class Type


        public string Name { get; set; }

        public string ID { get; set; }


    public class State


        public string Function_Name { get; set; }

        public string Id { get; set; }



    public List<Type> DataSource_1 = new List<Type>() {

        new Type(){ Name= "Function_1", ID= "1" },

        new Type(){ Name= "Function_2", ID= "2" }



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

        new State() { Function_Name= "StateName_1", Id= "1" },

        new State() { Function_Name= "StateName_2", Id= "2" },



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

        new State() { Function_Name= "StateName_3", Id= "3" },

        new State() { Function_Name= "StateName_4", Id= "4" },




ValueChange: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange

RefreshDataAsync: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_RefreshDataAsync

Sample: https://www.syncfusion.com/downloads/support/common/3932/ze/DynamicDataSourceDDL_b93b1ddb.zip

KN Kevin Newman February 21, 2023 09:18 AM UTC

Hi UdhayaKumar,

Thanks for getting back to me. I've reviewed the code and although I can see it changes the values based on the first dropdown selection, the same list (SfDropDownList<string, State> DDLObj) is being used.

Using your sample code, If Function_2 was this instead:

 public class Widget


        public string Widget _Name { get; set; }

        public string Id { get; set; }


 public List<County> Function_2 = new List<Widget>() {

        new Widget() { Widget _Name= " Widget Name_3", Id= "3" },

        new Widget() { Widget _Name= " Widget Name_4", Id= "4" },


How would you use this in the dropdown?

KN Kevin Newman February 28, 2023 02:42 PM UTC

Hi, are you able to assist me with my previous query please?

Thank you,


YS Yohapuja Selvakumaran Syncfusion Team March 1, 2023 04:04 PM UTC

Hi Kevin,

We have created sample as per your requirement that two data source with different type of data. Please find the sample in the attachment.

Please get back to us if you need any further assistance.


Yohapuja S

Attachment: BlazorApp1_a9872e99.zip

Marked as answer

KN Kevin Newman March 2, 2023 12:34 PM UTC

Thank you. Much appreciated!

UD UdhayaKumar Duraisamy Syncfusion Team March 3, 2023 04:38 AM UTC

We are glad that your requirement has been fulfilled on your end. We are always happy to assist you.

Live Chat Icon For mobile
Up arrow icon