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

Getting Started with the Chip

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

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

    <span id="chip"></span>

    <script>    
        $("#chip").kendoChip({
            icon: "save",
            label: "Save"
        });
    </script>

1. Create a Select Element

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

<span id="chip"></span>

2. Initialize the Chip

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

<span id="chip"></span>

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

Once the basic initialization is completed, you can start adding additional configurations to the Chip.

3. Add an Icon

You can display an icon in the Chip by configuring the icon. For more information about the variety of the icons supported by the Chip, refer to the article on the Customization of the Chip.

    <span id="chip"></span>

    <script>    
        $("#chip").kendoChip({
            icon: "save",
        });
    </script>

4. Add a Label to the Chip

Now you can use the label option which allows you to display a label on the Chip.

    <span id="chip"></span>

    <script>    
        $("#chip").kendoChip({
            icon: "save",
            label: "Save"
        });
    </script>

Next Steps

See Also

In this article