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.

Source: