0

☐ 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

1 Answer 1

0

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

Sign up to request clarification or add additional context in comments.

1 Comment

I want nested multi select dropdown @RBee

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.