MultiSelect DropDown with checkboxes

[Artem]

Hi,

I need a MultiSelect DropDownList with checkboxes. I was not able to find this control on the demo page.

Thanks,

Artem

[Marin Bratanov]

Hi Artem,

This article shows how to do it: https://docs.telerik.com/blazor-ui/knowledge-base/multiselect-checkbox-in-dropdown

 

Regards,
Marin Bratanov
Progress Telerik

[Aartheeswaran]

Hi Artem,

I have implemented this but got error in "AutoClose" property doesn't exist. I have using 2.17.0 version of blazor.

[Marin Bratanov]

Hi Aartheeswaran,

That feature was added in 2.18.0, I recommend you upgrade to the latest to also get a ton of other new features and fixes.

 

Regards,
Marin Bratanov
Progress Telerik

[SaiSivaSankar]

Hi Team,

I added "TelerikMultiSelect" but got this error "The type arguments for method 'TypeInference.CreateTelerikMultiSelect_2".

 

Version: 2.18.0

[Marin Bratanov]

Hi,

An error starting like this indicates a mismatch between some of the types provided to the component. For example, the type of the Value collection is different than the type of the ValueField in the Data models. Or, data/Value is missing (see here). If this information and article don't help you fix this, please post the full error and a simple runnable snippet that shows how to reproduce it.

 

Regards,
Marin Bratanov
Progress Telerik

[SaiSivaSankar]

Thank you Marin Bratanov,

If i replace  List<string> TheValues { get; set; } to  IEnumerable<string> TheValues { get; set; }, am getting this error.

 <TelerikMultiSelect Data="@Options" @bind-Value="@TheValues"
                        TextField="StringRepresentation" ValueField="MyValueField" >
        <ItemTemplate>
            <input type="checkbox" id="@( (context as OptionsModel).MyValueField )" class="k-checkbox" >
            <label class="k-checkbox-label" for="@(  (context as OptionsModel).MyValueField)">@context.StringRepresentation</label>
        </ItemTemplate>
    </TelerikMultiSelect>

 

IEnumerable<string> TheValues { get; set; }

    List<OptionsModel> Options { get; set; } = new List<OptionsModel>
    {
        new OptionsModel { StringRepresentation = "first",  MyValueField = 1 },
        new OptionsModel { StringRepresentation = "second", MyValueField = 2 },
        new OptionsModel { StringRepresentation = "third",  MyValueField = 3 }
    };

    public class OptionsModel
    {
        public string StringRepresentation { get; set; }
        public int MyValueField { get; set; }  
    }

 

Thank you

 

 

[Ramesh]

I have implemented further based on my requirement

    <TelerikMultiSelect Data="@Options" @bind-Value="@TheValues"
          TextField="StringRepresentation" ValueField="MyValueField" 
          Context="OptionsModel">
        <ItemTemplate>
            <input type="checkbox" id="@( (context as 
                 OptionsModel).MyValueField )" class="k-checkbox k-checkbox-md"
                 checked="@GetChecked(context)" >
            <label class="k-checkbox-label" for="@((context as 
             OptionsModel).MyValueField)">@context.StringRepresentation</label>
        </ItemTemplate>
    </TelerikMultiSelect>



    List<string> TheValues { get; set; }

    List<OptionsModel> Options { get; set; } = new List<OptionsModel>
    {
        new OptionsModel { StringRepresentation = "first",  MyValueField = 1 },
        new OptionsModel { StringRepresentation = "second", MyValueField = 2 },
        new OptionsModel { StringRepresentation = "third",  MyValueField = 3 }
    };

    bool GetChecked(OptionsModel value)
    {
       if (TheValues.Any())
       {
          return TheValues!.Contains(value.StringRepresentation);
       }
       return false;
    }
    public class OptionsModel
    {
        public string StringRepresentation { get; set; }
        public int MyValueField { get; set; }  
    }

 

 

Thanks & Regards

Ramesh Vaduka

Sr. DotNet Developer,

Team Vertex

[Marin Bratanov]

Hello,

The Value must be a List<TValue> - it is specifically a List, not just IEnumerable. This is stated in the docs and is available in the intellisense (screenshots attached).

 

Regards,
Marin Bratanov
Progress Telerik

[Stefano]

Hello, 

I tried this solution but for my needs the result is too far from
a real checked combobox (like I can see in your ASP.NET library).

Did you add anything like that in the Blazor library?

 

Thank you.

 

 

[Dimo]

Hi Stefano - for the time being, we have a feature request for built-in checkboxes in the MultiSelect dropdown. I added one vote on your behalf to bump the popularity.