Add Multi-select Filter on Admin Grid
Here i am going explain how to add Multi-select Filter on Admin Grid by ui-Component.
I am going to add Multi-select filter on customer grid, you can even add it on your
custom Module’s grid as well.
1. Create file:
Webkul/MultiSelectFilter/view/adminhtml/ui_component/customer_listing.xml
Note:
1. Webkul is Package Name and MultiSelectFilter is Module Name.
2. ‘private_group’ is the column name for customer’s attribute.
3. The file “Webkul\MultiSelectFilter\Ui\Component\Listing\Column\Customer\Groups” is used to modify column value, you can remove it, if your column value is the same as you want.
<?xml version="1.0" encoding="UTF-8"?> <!-- /** * Webkul Software * * @category Webkul * @package Webkul_MultiSelectFilter * @author Webkul * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ --> <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="private_group" provider="${ $.parentName }" component="Magento_Ui/js/form/element/ui-select" template="ui/grid/filters/elements/ui-select"> <settings> <options class="Webkul\MultiSelectFilter\Model\PrivateGroup\GroupList"/> <caption translate="true">Select...</caption> <label translate="true">Private Groups</label> <dataScope>private_group</dataScope> <imports> <link name="visible">componentType = column, index = ${ $.index }:visible</link> </imports> </settings> </filterSelect> </filters> </listingToolbar> <columns name="customer_columns" class="Magento\Customer\Ui\Component\Listing\Columns"> <column name="private_group" class="Webkul\MultiSelectFilter\Ui\Component\Listing\Column\Customer\Groups" sortOrder="100"> <settings> <dataType>select</dataType> <sortable>false</sortable> <label translate="true">Private Groups</label> </settings> </column> </columns> </listing>
2. Lets create File: Webkul\MultiSelectFilter\Model\PrivateGroup\GroupList.php
<?php namespace Webkul\MultiSelectFilter\Model\PrivateGroup; /** * Webkul Software. * * @category Webkul * @package Webkul_MultiSelectFilter * @author Webkul * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com) * @license https://store.webkul.com/license.html */ class GroupList implements \Magento\Framework\Option\ArrayInterface { public function toOptionArray() { $options = []; $options[] = ['label' => 'VIP Group', 'value' => '1']; $options[] = ['label' => 'Premium Type', 'value' => '2']; return $options; } }
3. Finally flush the cache and load customer grid.
you will be able to see like below image:
Thats’s it. For further queries please comment below.
Webkul\MultiSelectFilter\Ui\Component\Listing\Column\Customer\Groups