Getting Started with the DropDownButton
This guide demonstrates how to get up and running with the Kendo UI for jQuery DropDownButton.
After the completion of this guide, you will be able to achieve the following end result:
<button id="dropdownbutton" type="button">Button</button>
<script>
$("#dropdownbutton").kendoDropDownButton({
items:[
{ id: "item1", text: "Item1", click: function(ev){alert("Item 1 clicked!");} },
{ id: "item2", text: "Item2", icon: "gear", attributes: { "data-context": "some arbitrary data" }, enabled:false },
{ id: "item3", text: "Item3", imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png" },
]
});
</script>
1. Create a Button Element
Create a <button> element on the page and use it as an initialization element for the DropDownButton.
<button id="dropdownbutton" type="button">Button</button>
2. Initialize the DropDownButton
In this step, you will initialize the DropDownButton from the <button> element. All settings of the DropDownButton will be provided in the script statement and you have to describe its layout and configuration in JavaScript.
<button id="dropdownbutton" type="button">Button</button>
<script>
$("#dropdownbutton").kendoDropDownButton();
</script>
3. Add Items for the DropDownButton
Next, you can configure the items in the popup by using the items option.
<button id="dropdownbutton" type="button">Button</button>
<script>
$("#dropdownbutton").kendoDropDownButton({
items:[
{ id: "item1", text: "Item1", click: function(ev){alert("Item 1 clicked!");} },
{ id: "item2", text: "Item2", icon: "gear", attributes: { "data-context": "some arbitrary data" }, enabled:false },
{ id: "item3", text: "Item3", imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png" },
]
});
</script>
Next Steps
- Referencing Existing Component Instances
- Demo Page for the DropDownButton
- Appearance of the DropDownButton