I want nested Multi select dropdown in Mudblazor

Question

☐ SaaS

☐ OnPrem Options

   ☐     Cloud 

   ☐     Hybrid 

☐ Other

My select dropdown contains parent options - SaaS ,On Prem and Other and My OnPrem contains 2 child options Cloud and Hybrid. On select On Prem both Cloud and Hybrid selected and on deselect On Prem both Cloud and Hybrid deselected. This is my requirement.

But issue I am facing is that I can do selectAll logic for On Prem or normal select dropdown with SaaS ,On Prem and Other, I wasn't able to combine both into one.

selectAll Logic link
https://try.mudblazor.com/snippet/wOGJOevvckifRlLC

normal select dropdown
https://try.mudblazor.com/snippet/waGzaIFFcbotVghb

Answer 1

You can use ToStringFunc property of MudSelect docs. This property can be used to define what part of the object should be displayed as the Text for the selected item.

<MudSelect Margin="Margin.Dense" T="IndicatorDefinition" MultiSelection="true"
            SelectAll="true" SelectAllText="On Prem"
        @bind-SelectedValues="_selectedIndicators"
        ToStringFunc="SelectionToString"
        Style="width: 100px;" Clearable="true">
    @foreach (var indicatorDefinition in IndicatorDefinitions)
    {
        <MudSelectItem Value="@indicatorDefinition" Style="margin-left: 40px !important ;">@indicatorDefinition.SubTitle</MudSelectItem>
    }
</MudSelect>


@code {
    public List<IndicatorDefinition> IndicatorDefinitions { get; set; } = new()
        {
        new () {SubTitle= "Cloud"}, 
        new () {SubTitle= "Hybrid"}
        };
    public IEnumerable<IndicatorDefinition> _selectedIndicators = new List<IndicatorDefinition>();

    public class IndicatorDefinition
    {
        public string SubTitle { get; set; }
        public double Value { get; set; }
    }

    string SelectionToString(IndicatorDefinition value){
        return value.SubTitle;
    }
}

ToStringFunc Snippet

---

And you can use MultiSelectionTextFunc + ToStringFunc, if you want to have different text based on the selected items list.

<MudSelect Margin="Margin.Dense" T="IndicatorDefinition" MultiSelection="true"
            SelectAll="true" SelectAllText="On Prem"
        @bind-SelectedValues="_selectedIndicators2"
        MultiSelectionTextFunc="GetMultiSelectionText"
        ToStringFunc="SelectionToString"
        Style="width: 100px;" Clearable="true">
    @foreach (var indicatorDefinition in IndicatorDefinitions)
    {
        <MudSelectItem Value="@indicatorDefinition" Style="margin-left: 40px !important ;">@indicatorDefinition.SubTitle</MudSelectItem>
    }
</MudSelect>

@code {
    public List<IndicatorDefinition> IndicatorDefinitions { get; set; } = new()
        {
        new () {SubTitle= "Cloud"}, 
        new () {SubTitle= "Hybrid"}
        };

    public IEnumerable<IndicatorDefinition> _selectedIndicators2 = new List<IndicatorDefinition>();

    public class IndicatorDefinition
    {
        public string SubTitle { get; set; }
        public double Value { get; set; }
    }

    string SelectionToString(IndicatorDefinition value){
        return value.SubTitle;
    }
    string GetMultiSelectionText(List<string> selectedValues){
        if(selectedValues.Count == IndicatorDefinitions.Count){
            return "All On Prem selected";
        }else{
            return string.Join(",",selectedValues);
        }
    }
}

MultiSelectionTextFunc Snippet