ComboBox
Item Template
This sample shows how to use ItemTemplateId to specify custom content in ComboBox.
Features
Description
This sample shows how to use ItemTemplateId to specify custom content in ComboBox.
1 2 3 4 5 6 7 8 9 10 11 12 13 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class ComboBoxController : Controller { public ActionResult ItemTemplate() { var list = GetSystemColors(); return View(list); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @model IEnumerable<NamedColor> @section Styles{ <style> .palette { display: inline-block; border: 1px solid black; width: 20px; height: 10px; } .palette-label { margin-left: 5px; } </style> } <div> <label>@Html.Raw(ComboBoxRes.ItemTemplate_Colors)</label> <c1-combo-box display-member-path="Name" selected-value-path="Value"> <c1-input-item-template> <span> <span class="palette" style="background-color: {{Name}}"></span> <span class="palette-label">{{Name}}</span> </span> </c1-input-item-template> <c1-items-source source-collection="@Model"></c1-items-source> </c1-combo-box> </div> @section Description{ <p>@Html.Raw(ComboBoxRes.ItemTemplate_Text0)</p> } |