Create Serenity Toolbar Dropdown Button

Sometime we will need to create a dropdown button on serenity toolbar, this is how I implement it.

This plugin use bootstrap 3 dropdown so I will try to support some popular its features like header, divider, disable/active item, dropdown position, dropup…

The best way to explain how it works is learning from demo code

Demo

or

Code

ToolDropdownButton.ts

Put this file somewhere for example /Modules/Common/Helper

Site.less

Grid.ts

Helper Methods

Enable Dropdown Button

this.myToolDropdownButton.enableDropdown(false);

Remove Dropdown Item

this.myToolDropdownButton.removeDropdownItem("demo");

Enable Dropdown Item

this.myToolDropdownButton.enableDropdownItemByKey("powerpoint-key", true);

Add Dropdown Item

this.myToolDropdownButton.addDropdownItem({
	key: "manual-key",
	title: 'This item is added by manual',
	icon: "fa fa-grav",
	onClick: e => Q.alert("MANUAL KEY IS PRESSED"),
}, 2);

Bonus

If you want to create some buttons beside the dropdown button then try these methods:

Add SideButton Item

this.myToolDropdownButton.addSideButtonItem({
	key: "demox",
	title: 'First Side Button',
	icon: "fa fa-grav text-red",
	cssClass: "text-blue",
	onClick: e => Q.alert("Hello first sidebutton"),
	disabled: true
}, 0);

Enable SideButton

this.myToolDropdownButton.enableSideButtonByKey("demox", true);