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.

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>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

   <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; } }

   1 2 3 4 5 6 7 8 9 10 11 12

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

Any doubts on the topic will be entertained in the Comments section below. I’d be happy to solve it.

Do share the solution with fellow developers via social media.