Skip to content

Commit a75b0f9

Browse files
kb(multiSelect): checkboxes
1 parent 9a152e1 commit a75b0f9

File tree

1 file changed

+70
-0
lines changed

1 file changed

+70
-0
lines changed
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Checkbox in MultiSelect
3+
description: How to add checkbox in the MultiSelect dropdown
4+
type: how-to
5+
page_title: Checkbox in MultiSelect
6+
slug: multiselect-kb-checkbox-in-dropdown
7+
position:
8+
tags:
9+
ticketid: 1453142
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>MultiSelect for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
26+
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.
27+
28+
Like https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx
29+
30+
31+
## Solution
32+
33+
We have the MultiSelect component for this in Blazor: https://demos.telerik.com/blazor-ui/multiselect/overview
34+
35+
There is already a feature request for enabling it to stay open so the user can select many things at once, so you may want to Vote for it and Follow it: https://feedback.telerik.com/blazor/1452680-allow-selection-of-multiple-items-from-multiselect-dropdown-at-once-autoclose-parameter.
36+
37+
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.
38+
39+
>caption Add checkboxes in the multiselect
40+
41+
````CSHTML
42+
@* Note: If you use complex models, the GetChecked() method will be more complex and
43+
you would need to implement another convention for the id attribute, and you would need to cast the context *@
44+
45+
<TelerikMultiSelect Data="@Roles" @bind-Value="@TheValues" Placeholder="Write the roles you need">
46+
<ItemTemplate>
47+
<input type="checkbox" id="@( "cb" + context.Replace(" ", "") )" class="k-checkbox" checked="@GetChecked(context)">
48+
<label class="k-checkbox-label" for="@( "cb" + context.Replace(" ", "") )">@context</label>
49+
</ItemTemplate>
50+
</TelerikMultiSelect>
51+
52+
@foreach (var item in TheValues)
53+
{
54+
<div>@item</div>
55+
}
56+
57+
@code{
58+
bool GetChecked(string text)
59+
{
60+
return TheValues.Contains(text);
61+
}
62+
63+
List<string> TheValues { get; set; } = new List<string>();
64+
65+
List<string> Roles { get; set; } = new List<string> {
66+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
67+
};
68+
}
69+
````
70+

0 commit comments

Comments
 (0)