Dropdowns in UI Grid

Using dropdowns in UI-Grid is two-fold. One, you define a filter that displays the labels of HTML’s SELECT values when the dropdown is not on focus or edit mode. The following Department labels are displayed using a filter.

16-1-2016 3-06-25 PM

Second, you need roughly the same value-label items to display when the dropdown is on focus or edit mode. The following screenshot shows just that.

6-1-2016 2-52-55 PM

Notice the “(from Filter)” and “(from editDropdownOptionsArray)” texts? They’ll give you an idea where each data comes from.

The Dropdown

To enable dopdown in the grid, include ‘ui.grid.edit’ as one of the dependencies to your module along with ‘ui.grid’ and optionally ‘ngTouch’:

Then, use editDropdownValueLabel and editDropdownOptionsArray.

editDropdownOptionsArray will contain the value-label for the dropdown. editDropDownValueLabel indicates which property to get the values for labels. In this case, it refers to the ‘text’ property.

editableCellTemplate is also needed. Set it to ‘ui-grid/dropdownEditor’.

The Filter

Use cellFilter to reference the filter (see codes in The Dropdown section). The filter is defined as follows: