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

Getting Started with the ChipList

This guide demonstrates how to get up and running with the Kendo UI for jQuery ChipList.

After the completion of this guide, you will be able to achieve the following end result:

    <span id="chiplist"></span>

    <script>    
        $("#chiplist").kendoChip({
        items: [
                    { icon: 'plus', label: 'Add' },
                    { icon: 'pencil', label: 'Edit' },
                    { icon: 'trash', label: 'Remove' },
                ]
        });
    </script>

1. Create a Select Element

First, create a <span> element on the page where you will initialize the ChipList.

<span id="chiplist"></span>

2. Initialize the ChipList

When you initialize the widget, all settings of the ChipList will be provided in the script statement. Describe the configuration and event handlers of the widget in JavaScript.

<span id="chiplist"></span>

<script>
    // Target the span element by using jQuery and then call the kendoChipList() method.
    $("#chiplist").kendoChipList();
</script>

Once the basic initialization is completed, you can start adding additional configurations to the 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 the Customizing the ChipList.

    <span id="chiplist"></span>

    <script>    
        $("#chiplist").kendoChipList({
            items: [
                { label: 'Add' },
                { label: 'Edit' },
                { label: 'Remove' },
            ]
        });
    </script>

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.

    <div id="chiplist"></div>
    <script>
        $('#chiplist').kendoChipList({
            items: [
                { icon: 'plus', label: 'Add' },
                { icon: 'pencil', label: 'Edit' },
                { icon: 'trash', label: 'Remove' },
            ]
        });
    </script>

Next Steps

See Also

In this article