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.
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).
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>