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");
})
)
@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>
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>
@addTagHelper *, Kendo.Mvc
<kendo-chiplist name="chiplist">
<items>
<item avatar-class="maria" label="Maria"></item>
<item avatar-class="thomas" label="Thomas"></item>
<item avatar-class="dan" label="Dan"></item>
</items>
</kendo-chiplist>
<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>