Create Checkbox Custom Item Templates in the MultiSelect
Environment
| Product | Telerik UI for ASP.NET Core MultiSelect |
| Product Version | 2024.3.806 |
Description
How can I create a Telerik UI for ASP.NET Core MultiSelect with checkboxes for each of the constructed items within the items list?
Solution
- Use the
ItemTemplate()API configuration to add an input field to each item in the MultiSelect. - Subscribe to the
Change()andDataBound()events to manage the functionality for the checkboxes. - Include JavaScript code to control the toggle of the
'checked'property of the newly created checkboxes.
@(Html.Kendo().MultiSelect()
.Name("movies")
.ItemTemplate("<input class='k-checkbox k-checkbox-md k-rounded-md' type='checkbox' /><span>#: data.Text #</span>")
.DataTextField("Text")
.DataValueField("Value")
.AutoClose(false)
.DownArrow()
.Placeholder("Select movie...")
.Events(e => e.Change("onChange").DataBound("onDataBound"))
.Value("1")
.BindTo(new List<SelectListItem>()
{
new SelectListItem() {
Text = "12 Angry Men", Value ="1"
},
new SelectListItem() {
Text = "Il buono, il brutto, il cattivo.", Value ="2"
},
new SelectListItem() {
Text = "Inception", Value ="3"
},
new SelectListItem() {
Text = "One Flew Over the Cuckoo's Nest", Value ="4"
},
new SelectListItem() {
Text = "Pulp Fiction", Value ="5"
},
new SelectListItem() {
Text = "Schindler's List", Value ="6"
},
new SelectListItem() {
Text = "The Dark Knight", Value ="7"
},
new SelectListItem() {
Text = "The Godfather", Value ="8"
},
new SelectListItem() {
Text = "The Godfather: Part II", Value ="9"
},
new SelectListItem() {
Text = "The Shawshank Redemption", Value ="10"
},
new SelectListItem() {
Text = "The Shawshank Redemption 2", Value ="11"
}
})
)
@addTagHelper *, Kendo.Mvc
@{
var movies = new List<SelectListItem>()
{
new SelectListItem() {
Text = "12 Angry Men", Value ="1"
},
new SelectListItem() {
Text = "Il buono, il brutto, il cattivo.", Value ="2"
},
new SelectListItem() {
Text = "Inception", Value ="3"
},
new SelectListItem() {
Text = "One Flew Over the Cuckoo's Nest", Value ="4"
},
new SelectListItem() {
Text = "Pulp Fiction", Value ="5"
},
new SelectListItem() {
Text = "Schindler's List", Value ="6"
},
new SelectListItem() {
Text = "The Dark Knight", Value ="7"
},
new SelectListItem() {
Text = "The Godfather", Value ="8"
},
new SelectListItem() {
Text = "The Godfather: Part II", Value ="9"
},
new SelectListItem() {
Text = "The Shawshank Redemption", Value ="10"
},
new SelectListItem() {
Text = "The Shawshank Redemption 2", Value ="10"
}
};
}
<kendo-multiselect name="movies"
on-data-bound="onDataBound"
on-change="onChange"
datatextfield="Text"
datavaluefield="Value"
auto-close="false"
placeholder="Select movie..."
value='new string[] { "1" }'
bind-to="movies"
item-template="<input class='k-checkbox k-checkbox-md k-rounded-md' type='checkbox' /><span>#: data.Text #</span>">
</kendo-multiselect>
<script>
function checkInputs(elements) { // Toggle 'checked' property, based on the selected items.
elements.each(function() {
var element = $(this);
var input = element.find("input");
input.prop("checked", element.hasClass("k-selected"));
});
};
function onDataBound(e){ // Triggers the checked action for pre defined selections.
var items = this.ul.find("li");
setTimeout(function() {
checkInputs(items);
});
}
function onChange(e) { // Listens for changes over the component.
var items = this.ul.find("li");
checkInputs(items);
}
</script>
For a runnable example based on the code above, refer to the following REPL samples:
- Create Checkbox Custom Item Templates in the MultiSelect HtmlHelper
- Create Checkbox Custom Item Templates in the MultiSelect TagHelper