Getting Started with the ChipList
This tutorial explains how to set up a basic Telerik UI for ASP.NET Core 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.
Finally, you can run the sample code in Telerik REPL and continue exploring the components.
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");
})
)
@addTagHelper *, Kendo.Mvc
<kendo-chiplist name="chiplist">
<items>
<item icon="plus" label="Add"></item>
<item icon="pencil" label="Edit"></item>
<item icon="trash" label="Remove"></item>
</items>
</kendo-chiplist>
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 Core HtmlHelpers:
@using Kendo.Mvc.UI -
To use the Telerik UI for ASP.NET Core TagHelpers:
@addTagHelper *, Kendo.Mvc
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")
)
@addTagHelper *, Kendo.Mvc
<kendo-chiplist name="chiplist">
</kendo-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");
})
)
@addTagHelper *, Kendo.Mvc
<kendo-chiplist name="chiplist">
<items>
<item label="Add"></item>
<item label="Edit"></item>
<item label="Remove"></item>
</items>
</kendo-chiplist>
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");
})
)
@addTagHelper *, Kendo.Mvc
<kendo-chiplist name="chiplist">
<items>
<item icon="plus" label="Add"></item>
<item icon="pencil" label="Edit"></item>
<item icon="trash" label="Remove"></item>
</items>
</kendo-chiplist>