How to Implement Multiselect Filter for Order Status in Magento 2 Order Grid

Hello Magento Folks ?,

How are you guys doing? The agenda of this article is How to Implement Multiselect Filter for Order Status in Magento 2 Order Grid. In the previous blog, I described Magento 2: How to Add Custom Validation To System Configuration Field. Let’s start on ?

Introduction:

In the Magento admin panel, there is an order grid that displays placed orders by customers. And there is a filter to view the orders as per their status. Magento default gives a single filter for order status.

But What if you want to look for the order status with multiple filters? Here is the code for multiselect order status in the order grid. Due to this, there will be ease in filtering the orders for more than one order status.

Steps to Implement Multiselect Filter for Order Status in Magento 2 Order Grid:

Step 1: Create a “sales_order_grid.xml” file in the following path:

app\code\Vendor\Extension\view\adminhtml\ ui_component

Now, add the below code:

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="status">
            <settings>
                <filter>multiselect</filter>
                <dataType>select</dataType>
                <label translate="true">Status</label>
            </settings>
        </column>
    </columns>
    <listingToolbar name="listing_top">
        <filters name="listing_filters">
            <filterSelect name="status" provider="${ $.parentName }" component="Magento_Ui/js/form/element/ui-select"
                          template="ui/grid/filters/elements/ui-select">
                <settings>
                    <options class="Magento\Sales\Model\Config\Source\Order\Status"/>
                    <caption translate="true">Select</caption>
                    <label translate="true">Status</label>
                    <dataScope>status</dataScope>
                    <imports>
                        <link name="visible">componentType = column, index = ${ $.index }:visible</link>
                    </imports>
                </settings>
            </filterSelect>
        </filters>
    </listingToolbar>
</listing>

That’s it.

Conclusion:

Hence, with the above piece of code, you can Implement Multiselect Filter for Order Status in Magento 2 Order Grid. You may also like to add the Multi-select Filter in Backend Admin Grid of Magento 2. Make sure to share it with your friends and colleagues. Mention your difficulties in the comment section below and I will solve it right away.

Happy Coding ?