Cascading Drop Down

Radzen Studio Blazor Server
1

I am trying to use the cascading dropdown. I have a list of strings rather than a list of objects with properties like the the example. Using Template causes each item in the list to become one item , and the items will change when the list is altered(as expected). If I do not use Template the list is not jumbled together and displays properly but does not change when the list is altered. How can I create a cascading drop down from a list of strings without using the Template property?

Example of template grouping items but html dropdown working as expected and of list not refreshing items but html dropdown working as expected.

image
image.png1710×592 126 KB

2

Hi @bsuruncle,

You shouldn't use Template in this case.

does not change when the list is altered.

What does that mean? What doesn't change? How is the list altered?

3

When the dropdown "payroll job" has a value selected the items in the "phase" dropdown are updated(changed). In the picture on the left payroll job is Unapplied Labour while the phase dropdown contains labour and materials as options to select. The picture on the right shows that the payroll job has been changed to Dealer Support. The HTML select has its values changed/updated where the radzen dropdown does not change/update. I know template doesn't apply in this case but I just wanted to show that the list does in fact update when it is used. How do I get this to work without using template?

image
image.png975×167 4.36 KB

4

How are the items in "phase" changed? Without seeing some actual code we won't be able to reproduce the behavior that you are experiencing.

5

I have created an example.

@page "/"
<EditForm Model="timeLogs">
    <div class="row">
        <div class="col-md-4 align-items-center d-flex">
            <RadzenLabel Style="margin:0px" Text="Payroll Job Radzen Dropdown" />
        </div>
        <div class="col-md-6">
            <RadzenDropDown AllowFiltering="true" Placeholder="Select..." FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@payrollJob" @bind-Value="timeLog.PayrollJob"
                            Style="width:100%;font-size:small" Change="@(args => ChangeBound(args, "PayrollJob"))" />
        </div>
    </div>
    <div class="col-md-4 align-items-center d-flex">
        <RadzenLabel Style="margin:0px" Text="Phase Radzen Dropdown" />
    </div>
    <div class="col-md-6">
        <RadzenDropDown AllowFiltering="true" Placeholder="Select..." FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@phase" @bind-Value="timeLog.Phase"
                        Style="width:100%;font-size:small" Change="@(args => ChangeBound(args, "Phase"))" />
    </div>
    <div class="row">
        <div class="col-md-4 align-items-center d-flex">
            <RadzenLabel Style="margin:0px" Text="Phase HTML select" />
        </div>
        @if (phase != null)
        {
            <select class="drpdwn" id="phase">
                <option></option>
                @foreach (var p in phase)
                {
                    <option value="@p">@p</option>
                }
            </select>
        }
    </div>
</EditForm>

@code {
    public List<string> payrollJob = new List<string>() { "Example1", "Example2", "Example3" };
    public List<string> phase = new List<string>();
    List<TimeLog> timeLogs = new List<TimeLog>();
    TimeLog timeLog = new TimeLog();

    async Task ChangeBound(object value, string name)
    {
        phase.Clear();

        switch (name)
        {
            case "PayrollJob":
                if (value != null)
                {
                    timeLog.PayrollJob = value.ToString();
                    await GetPhase(timeLog.PayrollJob, timeLog.PayrollJob);
                }
                else
                {
                    timeLog.PayrollJob = null;
                }
                break;
        }
    }

    public async Task GetPhase(object value, string name)
    {
        switch (name)
        {
            case "Example1":
                if (value != null) phase.AddRange(new List<string> { "one", "two", "three" });

                break;
            case "Example2":
                if (value != null) phase.AddRange(new List<string> { "four", "five", "six" });

                break;
            case "Example3":
                if (value != null) phase.AddRange(new List<string> { "seven", "eight", "nine" });

                break;
        }

        StateHasChanged();
    }


    public class TimeLog
    {
        public string PayrollJob { get; set; }
        public string Phase { get; set; }
    }
}
6

Thank you, @bsuruncle,

We reproduced the issue - the DropDown caches data too aggressively at the moment. We will release a fix for that.

Meanwhile adding this line before StateHasChanged() will serve as a workaround:

phase = phase.ToList();
7

Wonderful! Thank you so much for all your assistance.