New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Create Checkbox Custom Item Templates in the MultiSelect

Environment

ProductTelerik UI for ASP.NET MVC MultiSelect
Product Version2024.3.806

Description

How can I create a Telerik UI for ASP.NET MVC MultiSelect with checkboxes for each of the constructed items within the items list?

Solution

  1. Use the ItemTemplate() API configuration to add an input field to each item in the MultiSelect.
  2. Subscribe to the Change() and DataBound() events to manage the functionality for the checkboxes.
  3. Include JavaScript code to control the toggle of the 'checked' property of the newly created checkboxes.
Razor
	@(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"
			}
		})
	)

For a runnable example based on the code above, refer to the REPL example on Create Checkbox Custom Item Templates in the MultiSelect.

More ASP.NET MVC MultiSelect Resources

See Also