2

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.

3

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>
  • Works like charm!! Thank you so much. You made my day. – vibhu Jul 26 '17 at 13:30
  • @Nitish is possible to have ONLY the custom category filter as multiselect (ui-select)? – LucScu Apr 17 '18 at 14:43
0

Add the below line as below.

<item name="config" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
</item>

this should work.

  • Thanks for your response but it didn't work. it still comes as single select dropdown. – vibhu Jul 4 '17 at 18:06
  • not sure how u did, but this works, you can refer the core module also. with this you can select multiple options from drop down. – Mohammad Mujassam Jul 5 '17 at 4:22
  • Yes checking in core modules. for how i did - I have already mentioned a link above. This is the tutorial given here - chillydraji.wordpress.com/2016/11/29/… – vibhu Jul 5 '17 at 6:59
0

As the accepted answer makes all selects to multi-select it doesn't give the answer to the question asked: "Now I want to change my category filter to multiple-select box from a single select dropdown..."

To make a single dropdown a multi-select use the following instea:

<?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">
            <filterSelect name="category_id" provider="${ $.parentName }">
                <argument name="optionsProvider" xsi:type="configurableObject">
                    <argument name="class" xsi:type="string"><VENDOR><MODULE_NAME>\Model\Category\Categorylist</argument>
                </argument>
                <argument name="data" xsi:type="array">
                    <item name="config" 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 name="dataScope" xsi:type="string">category_id</item>
                        <item name="label" xsi:type="string" translate="true">Categories</item>
                    </item>
                </argument>
            </filterSelect>
        </filters>
    </listingToolbar>
    <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
        <column name="category_id" class="<VENDOR><MODULE_NAME>\Ui\Component\Listing\Column\Category">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object"></item>
                <item name="config" xsi:type="array">
                    <item name="add_field" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string" translate="true">Categories</item>
                    <item name="sortOrder" xsi:type="number">100</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.