Magento 2 - Need a multi-select filter in place of dropdown in admin grid

Question

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/

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.

Answer 1

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>

Answer 2

Override in your module /view/adminhtml/ui_component/product/product_listing.xml

<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>
</listing>

The above code will convert all dropdowns in admin product grid to multiselect and the same can be applied to any grid in backend For example if its customer grid then use file /view/adminhtml/ui_component/customer_listing.xml and so on.

Answer 3

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>

Answer 4

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.

Answer 5

Thanks. Nitish.

A little improvement, a bit more generic...

I've changed the explode.

/**
 * @return void
 */
protected function prepareUpdateUrl()
{
    if (!isset($this->data['config']['filter_url_params'])) {
        return;
    }
    foreach ($this->data['config']['filter_url_params'] as $paramName => $paramValue) {
        if ('*' == $paramValue) {
            $paramValue = $this->request->getParam($paramName);
        }
        if ($paramValue) {
            $this->data['config']['update_url'] = sprintf(
                '%s%s/%s/',
                $this->data['config']['update_url'],
                $paramName,
                $paramValue
            );

            $paramValues = explode(',', $paramValue);

            if (count($paramValues) > 1) {
                $this->addFilter(
                    $this->filterBuilder->setField($paramName)->setValue($paramValues)->setConditionType('in')->create()
                );
            } else {
                $this->addFilter(
                    $this->filterBuilder->setField($paramName)->setValue($paramValue)->setConditionType('eq')->create()
                );
            }

        }
    }
}