Customization of the ChipList
The ChipList component provides options for customizing its look and feel.
When customizing the rendering of the chips inside the ChipList, you can:
Displaying Icons
The ChipList allows you to integrate Kendo UI Font Icons out-of-the-box.
@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");
})
)
Rendering Avatars
The ChipList component treats the avatar as an icon. To display an avatar, pass a CSS class to the Items.AvatarClass property.
@using Kendo.Mvc.UI
@(Html.Kendo().ChipList()
.Name("chiplist")
.Items(item=>{
item.Add().AvatarClass("maria").Label("Maria");
item.Add().AvatarClass("thomas").Label("Thomas");
item.Add().AvatarClass("dan").Label("Dan");
})
)
<style>
.dan {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg");
}
.thomas {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg");
}
.maria {
background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
}
</style>