Getting Started with the ChipList
This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC ChipList and highlights the major steps in the configuration of the component.
You will initialize a ChipList control, configure its icons, and handle its events.
After the completion of this guide, you will be able to achieve the following end result:
@using Kendo.Mvc.UI
@(Html.Kendo().ChipList()
.Name("chiplist")
.Items(item=>{
item.Add().Icon("plus").Label("Add");
item.Add().Icon("pencil").Label("Edit");
item.Add().Icon("trash").Label("Remove");
})
)
1. Prepare the CSHTML File
The first step is to add the required directives at the top of the .cshtml document:
- To use the Telerik UI for ASP.NET MVC HtmlHelpers:
@using Kendo.Mvc.UI
2. Initialize the ChipList
Describe the configuration and event handlers of the ChipList component in C#. Once the basic initialization is completed, you can start adding additional configurations to the ChipList.
@using Kendo.Mvc.UI
@(Html.Kendo().ChipList()
.Name("chiplist")
)
3. Add Items with Labels
You can add individual Chip items by passing objects to the Items array. for more information about the configurations of the different chips inside the chiplist, refer to the article on customizing the chiplist.
@using Kendo.Mvc.UI
@(Html.Kendo().ChipList()
.Name("chiplist")
.Items(item=>{
item.Add().Label("Add");
item.Add().Label("Edit");
item.Add().Label("Remove");
})
)
4. Add Icons to the Chips inside the ChipList
Now you can use the Items.Icon option which allows you to display a label on the Chips inside the ChipList.
@using Kendo.Mvc.UI
@(Html.Kendo().ChipList()
.Name("chiplist")
.Items(item=>{
item.Add().Icon("plus").Label("Add");
item.Add().Icon("pencil").Label("Edit");
item.Add().Icon("trash").Label("Remove");
})
)