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 component.
<span id="chip"></span>
2. Initialize the Chip
When you initialize the component, all settings of the Chip will be provided in the script statement. Describe the configuration and event handlers of the component 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>