How to Implement Multiselect Filter For Order Status in Magento 2 Order Grid
Magento 2 offers backend grid for easy data management and eventually easy administration of the store. These grids are well equipped with features like filter, sort, or edit the fields allowing the admin to swiftly play with the data.
However, the default Magento 2 backend grids sometimes fall short when the store structure is complex. For better data analysis, the admin may want to use conditional filtering. The below solution can be used to overcome this limitation.
The default select filter can be converted to multi-select filter to filter orders based on multiple order status conditions in the order grid in Magento 2.
Implement multiselect filter for order status in Magento 2 order grid as shown here:
Method to implement multiselect filter for order status in Magento 2 order grid:
Create app\code\Vendor\Extension\view\adminhtml\ui_component\sales_order_grid.xml
|
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 |
<?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 was all.
Enhance the functionality of the order grid in Magento 2 backend with the above solution.
Any doubts? If so, do mention them in the Comments section below.
I’d be happy to help.
Feel free to share the solution with Magento 2 admins via social media.
Thank you.
Prev
How To Add Custom CSS and JS in Magento 2
Visa & PayPal Urge Merchants to Migrate to Magento 2
Next