{"id":5868,"date":"2019-10-08T10:24:00","date_gmt":"2019-10-08T10:24:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=5868"},"modified":"2025-05-22T15:41:48","modified_gmt":"2025-05-22T10:11:48","slug":"how-to-add-multi-select-filter-in-magento-2-admin-grid","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-multi-select-filter-in-magento-2-admin-grid\/","title":{"rendered":"How to Add Multi Select Filter in Magento 2 Admin Grid"},"content":{"rendered":"\n

Have you ever needed a Magento 2 admin grid that is filterable by more column\u2019s values, i.e. something from multiselect drop-down?<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/a><\/p>\n\n\n\n

Implement the below code to add multi select filter in Magento 2 admin grid<\/strong> as shown in the figure below:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Steps to Add Multi-Select Filter in Magento 2 Admin Grid:<\/h2>\n\n\n\n

1. Add this code into ui_component\u2019s grid xml file:<\/p>\n\n\n\n

for example : <\/p>\n\n\n\n

[Vendor][Module]\\view\\adminhtml\\ui_component\\my_first_grid.xml<\/strong><\/p>\n\n\n\n

<filters name=\"listing_filters\">\n    <argument name=\"data\" xsi:type=\"array\">\n        <item name=\"config\" xsi:type=\"array\">\n            <item name=\"columnsProvider\" xsi:type=\"string\">\n                imageclean_use_images_grid.imageclean_use_images_grid.images_columns\n            <\/item>\n            <item name=\"storageConfig\" xsi:type=\"array\">\n                <item name=\"provider\" xsi:type=\"string\">\n                    imageclean_use_images_grid.imageclean_use_images_grid.listing_top.bookmarks\n                <\/item>\n                <item name=\"namespace\" xsi:type=\"string\">current.filters<\/item>\n            <\/item>\n            <item name=\"templates\" xsi:type=\"array\">\n                <item name=\"filters\" xsi:type=\"array\">\n                    <item name=\"select\" xsi:type=\"array\">\n                        <item name=\"component\" xsi:type=\"string\">Magento_Ui\/js\/form\/element\/ui-select<\/item>\n                        <item name=\"template\" xsi:type=\"string\">ui\/grid\/filters\/elements\/ui-select<\/item>\n                    <\/item>\n                <\/item>\n            <\/item>\n            <item name=\"childDefaults\" xsi:type=\"array\">\n                <item name=\"provider\" xsi:type=\"string\">\n                    imageclean_use_images_grid.imageclean_use_images_grid.listing_top.listing_filters\n                <\/item>\n                <item name=\"imports\" xsi:type=\"array\">\n                    <item name=\"visible\" xsi:type=\"string\">\n                        imageclean_use_images_grid.imageclean_use_images_grid.images_columns.${ $.index }:visible\n                    <\/item>\n                <\/item>\n            <\/item>\n        <\/item>\n    <\/argument>\n<\/filters>\n\n<column name=\"used\">\n    <argument name=\"data\" xsi:type=\"array\">\n        <item name=\"options\" xsi:type=\"object\">\\[Vendor]\\[Module]\\Model\\ProductImage\\Status<\/item>\n        <item name=\"config\" xsi:type=\"array\">\n            <item name=\"sortOrder\" xsi:type=\"number\">10<\/item>\n            <item name=\"label\" translate=\"true\" xsi:type=\"string\">Image Status<\/item>\n            <item name=\"filter\" xsi:type=\"string\">select<\/item>\n            <item name=\"dataType\" xsi:type=\"string\">select<\/item>\n            <item name=\"bodyTmpl\" xsi:type=\"string\">ui\/grid\/cells\/html<\/item>\n        <\/item>\n    <\/argument>\n<\/column><\/pre>\n\n\n\n
2. Create Status.php<\/strong><\/em> file at path <\/p>\n\n\n\n
[Vendor]\\[Module]\\Model\\ProductImage\\Status.php<\/strong><\/p>\n\n\n\n
<?php\nnamespace [Vendor]\\[Module]\\Model\\ProductImage;\nclass Status implements \\Magento\\Framework\\Option\\ArrayInterface\n{\n    public function toOptionArray()\n    {\n        $options = [];\n        $options[] = ['label' => 'Unused image', 'value' => '0'];\n        $options[] = ['label' => 'Used image', 'value' => '1'];\n        return $options;\n    }\n}<\/pre>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
Do share the solution with fellow developers via social media.<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever needed a Magento 2 admin grid that is filterable by more column\u2019s values, i.e. something from multiselect drop-down? For example, you want…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-5868","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=5868"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5868\/revisions"}],"predecessor-version":[{"id":15240,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/5868\/revisions\/15240"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=5868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=5868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=5868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}