Magento 2: Admin Grid Select Filter with Comma Separated Values

filtergridmagento2selectuicomponent

I have created a custom admin grid in my module. It contains a customer group column and it has a select filter. The column values are comma separated groupIds. When I filter the grid based on customer groups, it always show empty result for comma separated values. If the column has one value, then it is working fine.

Here is my code

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> 
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">attributerule_customergroup_listing.attributerule_customergroup_listing_data_source</item>
        <item name="deps" xsi:type="string">attributerule_customergroup_listing.attributerule_customergroup_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">attributerule_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 Item</item>
            <item name="class" xsi:type="string">primary</item>
            <item name="url" xsi:type="string">*/*/new</item>
        </item>
    </item>
</argument>
<dataSource name="attributerule_customergroup_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">RuleGridDataProvider</argument>
        <argument name="name" xsi:type="string">attributerule_customergroup_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">rule_id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                <item name="storageConfig" xsi:type="array">
                    <item name="indexField" xsi:type="string">rule_id</item>
                </item>
            </item>
        </argument>
    </argument>       
</dataSource>
<listingToolbar name="listing_top">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="sticky" xsi:type="boolean">true</item>
        </item>
    </argument>
    <bookmark name="bookmarks"/>
    <columnsControls name="columns_controls"/>
    <filterSearch name="fulltext"/>
     <filters name="listing_filters" />           

    <paging name="listing_paging"/>
</listingToolbar>
<columns name="attributerule_columns">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="storageConfig" xsi:type="array">
                <item name="indexField" xsi:type="string">rule_id</item>
                <item name="provider" xsi:type="string">attributerule_customergroup_listing.attributerule_customergroup_listing.listing_top.bookmarks</item>
                <item name="namespace" xsi:type="string">current</item>
            </item>
        </item>
            <item name="childDefaults" xsi:type="array">
                <item name="fieldAction" xsi:type="array">
                    <item name="provider" xsi:type="string">attributerule_customergroup_listing.attributerule_customergroup_listing.productqa_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">attributerule_customergroup_listing.attributerule_customergroup_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>
    </argument>
    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">rule_id</item>
            </item>
        </argument>
    </selectionsColumn>
    <column name="rule_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <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>

    <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>   
    <column name="customer_groups">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Company\Attributerule\Model\Source\Groups</item>
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">select</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                <item name="label" xsi:type="string" translate="true">Customer Groups</item>
            </item>
        </argument>
    </column> 
    <actionsColumn name="actions" class="Company\Attributerule\Ui\Component\Listing\Columns\RuleActions">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">rule_id</item>
            </item>
        </argument>
    </actionsColumn>
</columns>

Company\Attributerule\Model\Source\Groups.php

 class Groups implements \Magento\Framework\Option\ArrayInterface
{
    protected $customerGroupCollection;

    public function __construct(
        \Magento\Customer\Model\ResourceModel\Group\Collection $customerGroupCollection
    ) {
         $this->customerGroupCollection = $customerGroupCollection;

    }
    public function toOptionArray()
    {
        $options = $this->customerGroupCollection->toOptionArray();
        return $options;
    }
}

Here is the database table structure

Please help me to fix the issue.

Best Answer

Add below code in your Collection Class

public function addFieldToFilter($field, $condition = null)
{
    if ($field === 'customer_groups') {
        $conditionSec = ['like' => '%'.$condition['eq'].'%'];
        return parent::addFieldToFilter($field, $conditionSec);
    }
    return parent::addFieldToFilter($field, $condition);
}

Related Solutions

Magento 2 – How to Load Admin Grid with Pre-defined Filter Values

Here is what I found out so far.
This is not complete but it can take you on the right path.
I conducted my tests by modifying the cms page listing ui component.
I added this

<item name="filter_url_params" xsi:type="array">
    <item name="page_id" xsi:type="string">*</item>
</item>

in cms_page_listing.xml inside the dataSource node inside the data/config argument. So now it looks like this

<dataSource name="cms_page_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Cms\Ui\Component\DataProvider</argument>
        <argument name="name" xsi:type="string">cms_page_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">page_id</argument>
        <argument name="requestFieldName" xsi:type="string">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">page_id</item>
                </item>
                <item name="filter_url_params" xsi:type="array"><!-- my addition -->
                    <item name="page_id" xsi:type="string">*</item>
                </item>
            </item>
        </argument>
    </argument>
</dataSource>

This allows me to call the url ROOT/admin/cms/page/index/key/<form_key_here>/?page_id=2.
And I see only the page with id 2.
But it does not work for range filters and the filter value is not filled in. It still shows as blank.

Now here is why this is possible.

The dataProvider class for cms pages is Magento\Cms\Ui\Component\DataProvider.
This one extends Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider.
This last one contains a protected method called prepareUpdateUrl

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
            );
            $this->addFilter(
                $this->filterBuilder->setField($paramName)->setValue($paramValue)->setConditionType('eq')->create()
            );
        }
    }
}

What this does is to check in the ui component config if there is an element called filter_url_params. If there is, it takes all the values inside it and checks the request for values matching what's defined in filter_url_params.
But by default it works only with eq.

What you can try is to have a custom dataSource for your component where you rewrite the method prepareUpdateUrl and make it take into account all the request variables you need and maybe add paging to it and range filtering.

Side note: This is a very interesting question. I'm sure a lot of people will need this in the future.

Magento – Magento 2.1 Create a filter in the product grid by new attribute

No need to add any custom code. In magento2.x available default setting under the attribute

Go admin side Stores -> Attributes -> Product and open your created attribute

After click Advanced Attribute Properties tab under the Properties tab and set Yes below two fields

Use in Filter Options: Yes (Select "Yes" to add this attribute to the list of filter options in the product grid.)
Add to Column Options: Yes (Select "Yes" to add this attribute to the list of column options in the product grid. )

After saving attribute and check product grid.

Please see the attached screenshot.

Best Answer

Related Solutions

Magento 2 – How to Load Admin Grid with Pre-defined Filter Values

Magento – Magento 2.1 Create a filter in the product grid by new attribute

Related Topic