Dropdown using two different data sources

[Kevin Newman]

Hi,

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.

Regards,

Kevin

[UdhayaKumar Duraisamy]

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>

    </SfDropDownList>

    <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>

    </SfDropDownList>

</div>

 

@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;

        }

        else

        {

            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

[Kevin Newman]

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?

[Kevin Newman]

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

Thank you,

Kevin

[Yohapuja Selvakumaran]

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.

Regards,

Yohapuja S

Attachment: BlazorApp1_a9872e99.zip

[Kevin Newman]

Thank you. Much appreciated!

[UdhayaKumar Duraisamy]

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