Categories
CMS Magento Mastering Development

Magento 2: How to add multi select filter in admin grid

I am new to magento module development and am trying to achieve some thing like this image below which says input type for store owner but am not familiar with eav yet can anyone guide me how to achieve this am also sharing my code.

enter image description here

eecom_customcustomerattribute_index_listing

eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_data_source
eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_data_source

    <!-- add new button -->
    <item name="spinner" xsi:type="string">eecom_customcustomerattribute_index_listing_columns</item>
    <item name="buttons" xsi:type="array">
        <item name="add" xsi:type="array">
            <item name="name" xsi:type="string">add</item>
            <item name="label" xsi:type="string" translate="true">Add New Attribute</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>
<dataSource name="eecom_customcustomerattribute_index_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">EecomCustomCustomerAttributeGridDataProvider</argument>
        <argument name="name" xsi:type="string">eecom_customcustomerattribute_index_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">customcustomerattribute_id</argument>
        <argument name="requestFieldName" xsi:type="string">customcustomerattribute_id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">customcustomerattribute_id</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>
<container name="listing_top">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/toolbar</item>
            <item name="sticky" xsi:type="string">true</item>
        </item>
    </argument>
    <bookmark name="bookmarks">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="namespace" xsi:type="string">eecom_customcustomerattribute_index_listing</item>
                </item>
            </item>
        </argument>
    </bookmark>
    <component name="columns_controls">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="columnsData" xsi:type="array">
                    <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_columns</item>
                </item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                <item name="displayArea" xsi:type="string">dataGridActions</item>
            </item>
        </argument>
    </component>
    <exportButton name="export_button">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="selectProvider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_columns.ids</item>
            </item>
        </argument>
    </exportButton>
    <filterSearch name="fulltext">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_data_source</item>
                <item name="chipsProvider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.listing_top.listing_filters_chips</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.search</item>
                </item>
            </item>
        </argument>
    </filterSearch>
    <filters name="listing_filters">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="columnsProvider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_columns</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.filters</item>
                </item>
                <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 name="childDefaults" xsi:type="array">
                    <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.listing_top.listing_filters</item>
                    <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_columns.${ $.index }:visible</item>
                    </item>
                </item>
            </item>
        </argument>
    </filters>
    <massaction name="listing_massaction" component="Magento_Ui/js/grid/tree-massactions">
        <action name="delete">
            <settings>
                <confirm>
                    <message translate="true">Delete selected items?</message>
                    <title translate="true">Delete items</title>
                </confirm>
                <url path="eecom_customcustomerattribute/items/massDelete"/>
                <type>delete</type>
                <label translate="true">Delete</label>
            </settings>
        </action>
        <action name="status">
            <settings>
                <type>status</type>
                <label translate="true">Change status</label>
                <actions>
                    <action name="0">
                        <type>enable</type>
                        <label translate="true">Enable</label>
                        <url path="eecom_customcustomerattribute/items/massStatus">
                            <param name="status">1</param>
                        </url>
                    </action>
                    <action name="1">
                        <type>disable</type>
                        <label translate="true">Disable</label>
                        <url path="eecom_customcustomerattribute/items/massStatus">
                            <param name="status">0</param>
                        </url>
                    </action>
                </actions>
            </settings>
        </action>
    </massaction>
    <paging name="listing_paging">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <item name="selectProvider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_columns.ids</item>
            </item>
        </argument>
    </paging>
</container>
<columns name="eecom_customcustomerattribute_index_listing_columns">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current</item>
            </item>
            <item name="editorConfig" xsi:type="array">
                <item name="selectProvider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_columns.ids</item>
                <item name="enabled" xsi:type="boolean">true</item>
                <item name="indexField" xsi:type="string">customcustomerattribute_id</item>
                <item name="clientConfig" xsi:type="array">
                    <item name="saveUrl" xsi:type="url" path="eecom_customcustomerattribute/items/inlineEdit"/>
                    <item name="validateBeforeSave" xsi:type="boolean">false</item>
                </item>
            </item>
            <item name="childDefaults" xsi:type="array">
                <item name="fieldAction" xsi:type="array">
                    <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing_columns_editor</item>
                    <item name="target" xsi:type="string">startEdit</item>
                    <item name="params" xsi:type="array">
                        <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
                        <item name="1" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">eecom_customcustomerattribute_index_listing.eecom_customcustomerattribute_index_listing.listing_top.bookmarks</item>
                    <item name="root" xsi:type="string">columns.${ $.index }</item>
                    <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                </item>
            </item>
        </item>
    </argument>
    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">customcustomerattribute_id</item>
            </item>
        </argument>
    </selectionsColumn>

    <!-- id -->
    <column name="customcustomerattribute_id">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
            </item>
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">customcustomerattribute_id</item>
                <item name="filter" xsi:type="string">textRange</item>
                <item name="sorting" xsi:type="string">desc</item>
                <item name="label" xsi:type="string" translate="true">ID</item>
            </item>
        </argument>
    </column>

  <!--   for attribute code -->
    <column name="attribute_code">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Attribute Code</item>
            </item>
        </argument>
    </column>

   <!--  for attribute lable -->
    <column name="attribute_label">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Attribute Label</item>
            </item>
        </argument>
    </column>

    <!-- status enable disbale -->
    <column name="status">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Eecom\CustomCustomerAttribute\Model\Source\Status</item>
            <item name="config" xsi:type="array">
                <item name="editor" xsi:type="array">
                    <item name="editorType" xsi:type="string">select</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
                <item name="filter" xsi:type="string">select</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="label" xsi:type="string" translate="true">Status</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="sortOrder" xsi:type="number">30</item>
                <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            </item>
        </argument>
    </column>
    <actionsColumn name="actions" class="Eecom\CustomCustomerAttribute\Ui\Component\Listing\Column\CustomCustomerAttributeActions">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">customcustomerattribute_id</item>
                <item name="urlEntityParamName" xsi:type="string">id</item>
            </item>
        </argument>
    </actionsColumn>
</columns>

Leave a Reply

Your email address will not be published. Required fields are marked *