Customization
The ChipList component provides options for customizing its look and feel.
When customizing the rendering of the chips inside the ChipList, you can:
Custom Attributes
To define a custom attributes for the Chip inside the ChipList, use the items.attributes property.
<div id="chiplist"></div>
<script>
$('#chiplist').kendoChipList({
items: [
{ text: "Home", icon: "home", attributes: { "data-val" : "custom data attribute" } },
{ text: "Info", icon: "info-circle" },
{ text: "Contact", icon: "envelope" }
]
});
</script>
Displaying Avatars
The ChipList component treats the avatar as an icon. To display an avatar, pass a CSS class to the items.avatarClass property.
<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>
<div id="chiplist"></div>
<script>
$('#chiplist').kendoChipList({
items: [
{ avatarClass: 'maria', label: 'Maria' },
{ avatarClass: 'thomas', label: 'Thomas' },
{ avatarClass: 'dan', label: 'Dan' },
]
});
</script>