Magento 2 – Multi-Select Filter for Admin Grid

filtermagento-2.1magento2multiselectproduct-grid

I have added a new category filter to product grid following a nice tutorial is given here – https://chillydraji.wordpress.com/2016/11/29/add-category-filter-to-product-grid-in-magento2/

enter image description here

Now I want to change my category filter to multiple-select box from a single select dropdown so that I can apply multiple category filters at once. Can anyone please help me to suggest what should I change here to get the multi-select box for category filter.

Best Answer

By default Magento2 not include js for dropdown.So override and use product_listing.xml in your module. Path - /view/adminhtml/ui_component/product/product_listing.xml

and use 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">
  <listingToolbar name="listing_top">

    <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <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>
            </argument>
    </filters>
</listingToolbar>
    <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
        <column name="category_ids" class="<VENDOR><MODULE_NAME>\Ui\Component\Listing\Column\Category">
            <argument name="data" xsi:type="array">
               <item name="options" xsi:type="object"><VENDOR><MODULE_NAME>\Model\Category\Categorylist</item>
                <item name="config" xsi:type="array">
                   <item name="filter" xsi:type="string">select</item>
                    <item name="add_field" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Categories</item>
                    <item name="sortOrder" xsi:type="number">100</item>
                </item>
            </argument>
        </column>
     </columns>
</listing>
Related Topic