Hello Everyone,
In this blog, we will learn about how to Implement Multi Select Filter for Order Status in Order Grid in Magento 2.
Order grid is used to display order data like id, purchase date, total, subtotal etc.
There is a filter to view the order as per order status. By default this shows as just a select option.
With the below code we convert it into a multi select option.
Without wasting your time, let us guide you straight away. Follow the easy step given below to Implement Multi Select in Order Status Filter in Order Grid in Magento 2.
STEPS FOR IMPLEMENT MULTI SELECT IN ORDER STATUS FILTER IN ORDER GRID IN MAGENTO 2
Step 1: Create sales_order_grid.xml file
app/code/Vendor/Extension/view/adminhtml/ui_component/sales_order_grid.xml
<?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>
Step 2: Finally run the below commands
$ php bin/magento cache:clean
$ php bin/magento cache:flush
Step 3: Output:
Before:
After:
Final Thoughts:
So this was the easiest way which we have told you in this blog. This is how you can Implement Multi Select in Order Status Filter in Order Grid in Magento 2. Hope you liked the blog.
So quickly go to the comment box and tell me how you like this blog?
Stay tuned with us on our site to get new updates of Magento.
Thanks for reading and visiting our site.
