Button Dropdown Widget
Adds the dropdown functionality to multiple elements inside a parent container. You can add new HTML options to each dropdown instance manually or dynamically through the Admin/Libs/button_dropdown library.
Optionally, the widget has also the ability to store the last clicked option and display it as the default action the next time the page is loaded. This is very useful whenever there are many options inside the dropdown list.
Parent Container Options
Configuration Keys | data-button_dropdown-config_keys
| String | Optional
Provide a unique key which will be used to store the latest user selection. Prefer to prefix your config key in order to avoid collisions with other instances of the widget.
User ID | data-button_dropdown-user_id
| Number | Optional
Give the current user database ID that will be used to associate his latest selection with the corresponding button dropdown widget.
Widget Instance Options
Use Button Dropdown | data-use-button_dropdown
| Boolean | Required
This option-flag will mark the elements inside the parent container, that will be converted into button-dropdown widgets.
Configuration Key | data-config_key
| String | Required
Provide the configuration key for the single button-dropdown instance.
Configuration Value | data-config_key
| String | Optional
Provide directly the configuration value in order to avoid extra AJAX requests.
Custom Caret Button Class | data-custom_caret_btn_class
| String | Optional
Attach additional classes to the caret button element (the one with the arrow). Use this option if you want to add a class that the primary button already has so that both share the same style (e.g. btn-primary).
Change buttons disable attribute value by adding option data-button_dropdown-disabled_state
on parent element
Example
<!-- This element represents the parent container. -->
<div
data-gx-widget="button_dropdown"
data-button_dropdown-config_keys="order-single order-multi"
data-button_dropdown-user_id="2">
<!-- This element represents the button dropdown widget. -->
<div
data-use-button_dropdown="true"
data-config_key="order-single"
data-custom_caret_btn_class="class1">
<button>Primary Button</button>
<ul>
<li><span>Change status</span></li>
<li><span>Delete</span></li>
</ul>
</div>
</div>
Notice: This widget was built for usage in compatibility mode. The new admin pages use the Bootstrap button dropdown markup which already functions like this module. Do not use it on new admin pages.