New to Kendo UI for jQuery? Download free 30-day trial

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" },
                { text: "Contact", icon: "email" }
            ]
        });
    </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>

See Also

In this article