Checkbox in MultiSelect
Environment
Product | MultiSelect for Blazor |
Description
I'd like a drop down list view/box control with check boxes and filtering. Let me know what I can use from the blazor controls.
Like https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx
Solution
We have the MultiSelect component for this in Blazor: https://demos.telerik.com/blazor-ui/multiselect/overview
The AutoClose feature allows the MultiSelect to stay open while the user selects the input.
The MultiSelect offers a highlighted state for the selected items already, yet if you want to add checkboxes, you can do that through the ItemTemplate (https://docs.telerik.com/blazor-ui/components/multiselect/templates) and you can get their checked
attribute by comparing the current item against the selected items.
Add checkboxes in the multiselect
@* Note: If you use complex models, the GetChecked() method will be more complex and
you would need to implement another convention for the id attribute, and you would need to cast the context *@
<TelerikMultiSelect Data="@Roles" @bind-Value="@TheValues" AutoClose="false" Placeholder="Write the roles you need">
<ItemTemplate>
<input type="checkbox" id="@( "cb" + context.Replace(" ", "") )" class="k-checkbox" checked="@GetChecked(context)">
<label class="k-checkbox-label" for="@( "cb" + context.Replace(" ", "") )">@context</label>
</ItemTemplate>
</TelerikMultiSelect>
@foreach (var item in TheValues)
{
<div>@item</div>
}
@code{
bool GetChecked(string text)
{
return TheValues.Contains(text);
}
List<string> TheValues { get; set; } = new List<string>();
List<string> Roles { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
}