Create Custom Tool in the ToolBar Similar to the Grid ColumnMenu
Environment
Product | Progress® Kendo UI® ToolBar for jQuery |
Description
How can I create a custom ToolBar tool that has similar appearance to the Grid`s Column Menu?
Solution
The Kendo UI ColumnMenu can not be used as a standalone component. If you need to have a similar functionality to the ColumnMenu in the ToolBar you can try utilizing the rest of the Kendo components to achieve it.
- In the ToolBar
items.template
add an element from which you can initialize aKendo Popup
. - In the Popup component, you can add an
ExpansionPanels
. - Next, add the needed components such as CheckBox, CheckBoxGroup, DropDownList, Button, etc.
<div id="toolbar"></div>
<div id="popup">
<div id="expansionPanel">
<ul id="checkboxgroup"></ul>
<div>
<button id="first-btn">Button 1</button>
<button id="second-btn">Button 2</button>
</div>
</div>
<div id="expansionPanel2">
<label for="products">Products:</label>
<input id="products" />
</div>
</div>
<script>
$("#toolbar").kendoToolBar({
items: [
{ type: 'button', icon: 'menu', text: 'Custom Menu', click: onClick }
]
});
$("#popup").kendoPopup({
anchor: $(".k-button")
}).data("kendoPopup")
function onClick(){
$("#popup").data('kendoPopup').open()
}
$("#expansionPanel").kendoExpansionPanel({
title: 'CheckBoxGroup example',
expanded: true
});
$("#expansionPanel2").kendoExpansionPanel({
title: 'DropDownList example',
});
$("#checkboxgroup").kendoCheckBoxGroup({
items: [ "one", "two", "three" ],
value: ["two", "one"]
});
$("#products").kendoDropDownList({
filter: "startswith",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
}
});
$("#first-btn").kendoButton({
text: 'Button 1',
themeColor: "success"
});
$("#second-btn").kendoButton({
text: 'Button 2',
themeColor: "primary"
});
</script>