1. Home
  2. Forum
  3. Blazor
  4. Cascade Dropdown using Custom Adaptor

Cascade Dropdown using Custom Adaptor

I would like to cascade a value to another dropdown where both use the Adaptors.CustomAdaptor Adaptor. My Dropdowns which are in an Editor which is in a Grid look like this:
<GridEditSettings AllowEditing="false" AllowDeleting=" true" AllowAdding="true" Mode="EditMode.Dialog" ShowDeleteConfirmDialog="true">
<HeaderTemplate>
<span>Add Parent Dependent Map</span>
</HeaderTemplate>
<Template>
@{
var ParentDependentMap = (context as ParentDependentMap);
<SfDropDownList TValue="int"
@key="@("ParentsDropDown")"
@bind-Value="@ParentDependentMap.ParentId"
TItem="ParentModel"
ShowClearButton="false"
Placeholder="Select a Parent..."
AllowFiltering="true"
<SfDataManager Adaptor="Adaptors.CustomAdaptor">
<ParentsAdaptor ParentDependentMapId="ParentDependentMap.Id" />
</SfDataManager>
<DropDownListFieldSettings Text="ParentCode" Value="Id"></DropDownListFieldSettings>
<DropDownListTemplates TItem="ParentModel">
<ItemTemplate Context="context2">
@{
var dto2 = (context2 as ParentModel);
<div>
@($"{dto2.ParentCode} - {dto2.ParentName}")

</div>
}
</ItemTemplate>
<ValueTemplate Context="context2">
@{
var dto2 = (context2 as ParentModel);
<div style="padding:5px;">
@($"{dto2.ParentCode} - {dto2.ParentName}")

</div>
}
</ValueTemplate>
</DropDownListTemplates>
<DropDownListEvents TItem="ParentModel" TValue="int" ValueChange="@(args => OnSelectParentForDependentModel(args))"></DropDownListEvents>
</SfDropDownList>

<SfDropDownList TValue="int"
@key="@("DependentModelsDropDown")"
@bind-Value="@ParentDependentMap.DependentModelId"
TItem="DependentModel"
Placeholder="Select a Dependent..."
AllowFiltering="true"
CssClass="@(WorkInProgressDependentMapDependentModel.DependentModelId <= 0 ? "e-error e-error-dropdown form-dropdown" : "form-dropdown")">
<SfDataManager Adaptor="Adaptors.CustomAdaptor">
<DependentAdaptor ParentId="ParentDependentMap.ParentId" ParentDependentMapId="@ParentDependentMap.Id" />
</SfDataManager>
<DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
<DropDownListEvents TItem="DependentMapDependentModel" TValue="int" ValueChange="@(args => OnSelectDependentModel(args))"></DropDownListEvents>
</SfDropDownList>


</Template>

}
</GridEditSettings> 

Any help would be great! Thank you.

1 Reply 1 reply marked as answer
BC Berly Christopher Syncfusion Team February 2, 2021 02:17 PM UTC

Hi Gabriel, 
  
Greetings from Syncfusion support. 
  
Based on the details provided, we have prepared the cascading sample by using the DropDownList component with help of custom adaptor. Please find the code snippet and sample below. 
  
@using Syncfusion.Blazor.DropDowns 
@using Syncfusion.Blazor.Data 
@using Syncfusion.Blazor 
<div class="col-lg-12 control-section"> 
    <div class="control-wrapper"> 
        <div class="padding-top"> 
            <SfDropDownList TValue="int?" 
                            TItem="Countries" 
                            Placeholder="Select a value" 
                            Query="@fieldQuery" 
                            AllowFiltering="true"> 
 
                <SfDataManager AdaptorInstance="@typeof(CountryCustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager> 
                <DropDownListEvents TItem="Countries" TValue="int?" ValueChange="ChangeCountry"></DropDownListEvents> 
                <DropDownListFieldSettings Value="CountryId" Text="CountryName"></DropDownListFieldSettings> 
 
            </SfDropDownList> 
        </div> 
        <div class="padding-top"> 
            <SfDropDownList Enabled="@EnableStateDropDown" @bind-Value="@StateValue" 
                            TValue="int?" 
                            TItem="State" 
                            Placeholder="Select a value" 
                            Query="@StateQuery" 
                            AllowFiltering="true"> 
                <SfDataManager AdaptorInstance="@typeof(StateCustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager> 
                <DropDownListFieldSettings Value="StateId" Text="StateName"></DropDownListFieldSettings> 
 
            </SfDropDownList> 
        </div> 
    </div> 
</div> 
<style> 
    .control-wrapper { 
        margin: 0 auto; 
        width: 250px; 
    } 
 
    .control-section .padding-top { 
        padding-top: 35px 
    } 
</style> 
 
@code{ 
    public bool EnableStateDropDown = false; 
    public int? StateValue { get; set; } = null; 
     public Query StateQuery { get; set; } = null; 
    public Query fieldQuery = new Query(); 
 
    public int ValueList = new int { }; 
 
    public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Countries> 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; 
    } 
} 
namespace AutocompleteV18_1_46.Pages 
{ 
    public class State 
    { 
        public State() { } 
        public State(int StateId, string StateName) 
        { 
            this.StateId = StateId; 
            this.StateName = StateName; 
        } 
        public string StateName { get; set; } 
        public int CountryId { get; set; } 
        public int StateId { get; set; } 
 
        private static List<State> GetData() 
        { 
            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 } 
    }; 
            return States; 
        } 
        public static async Task<List<State>> GetAllRecords() 
        { 
 
            return await Task.Run(() => GetData()); 
        } 
 
    } 
 
    public class StateCustomAdaptor : DataAdaptor 
    { 
        public static 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 override async Task<object> ReadAsync(DataManagerRequest dm, string key = null) 
        { 
            IEnumerable<State> DataSource = await State.GetAllRecords(); 
            if (dm.Search != null && dm.Search.Count > 0) 
            { 
                DataSource = DataOperations.PerformSearching(DataSource, dm.Search);  //Search 
            } 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
            { 
                DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted); 
            } 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
            { 
                DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
            } 
            int count = DataSource.Cast<State>().Count(); 
            if (dm.Skip != 0) 
            { 
                DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);         //Paging 
            } 
            if (dm.Take != 0) 
            { 
                DataSource = DataOperations.PerformTake(DataSource, dm.Take); 
            } 
            return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; 
        } 
    } 
 
 
} 
 
  
  
Regards, 
Berly B.C 


Marked as answer
Loader.
Up arrow icon