How to Add Multi Select Filter in Magento 2 Admin Grid

Have you ever needed a Magento 2 admin grid that is filterable by more column’s values, i.e. something from multiselect drop-down?

For example, you want to export customers with 3 different groups and you have to select a group thrice and export the data for all the 3 one by one. However, if you want to filter all 3 of them together, you cannot perform a single action as the default Magento 2 allows applying only one filter at a time.

If the business requirement demands to apply a mass action on products satisfying more than one condition, the solution below can be helpful. Likewise implementing allows to filter orders based on multiple order status.

Implement the below code to add multi select filter in Magento 2 admin grid as shown in the figure below:

Steps to Add Multi-Select Filter in Magento 2 Admin Grid:

1. Add this code into ui_component’s grid xml file:

for example :

[Vendor][Module]\view\adminhtml\ui_component\my_first_grid.xml

<filters name="listing_filters">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="columnsProvider" xsi:type="string">
                imageclean_use_images_grid.imageclean_use_images_grid.images_columns
            </item>
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">
                    imageclean_use_images_grid.imageclean_use_images_grid.listing_top.bookmarks
                </item>
                <item name="namespace" xsi:type="string">current.filters</item>
            </item>
            <item name="templates" xsi:type="array">
                <item name="filters" xsi:type="array">
                    <item name="select" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                        <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                    </item>
                </item>
            </item>
            <item name="childDefaults" xsi:type="array">
                <item name="provider" xsi:type="string">
                    imageclean_use_images_grid.imageclean_use_images_grid.listing_top.listing_filters
                </item>
                <item name="imports" xsi:type="array">
                    <item name="visible" xsi:type="string">
                        imageclean_use_images_grid.imageclean_use_images_grid.images_columns.${ $.index }:visible
                    </item>
                </item>
            </item>
        </item>
    </argument>
</filters>

<column name="used">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">\[Vendor]\[Module]\Model\ProductImage\Status</item>
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="label" translate="true" xsi:type="string">Image Status</item>
            <item name="filter" xsi:type="string">select</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
        </item>
    </argument>
</column>

2. Create Status.php file at path

[Vendor]\[Module]\Model\ProductImage\Status.php

<?php
namespace [Vendor]\[Module]\Model\ProductImage;
class Status implements \Magento\Framework\Option\ArrayInterface
{
    public function toOptionArray()
    {
        $options = [];
        $options[] = ['label' => 'Unused image', 'value' => '0'];
        $options[] = ['label' => 'Used image', 'value' => '1'];
        return $options;
    }
}

That’s it.

Do share the solution with fellow developers via social media.