How to create Search "Textfield" filter in admin grid | Magento 2

Question

I am trying to create Grid search feature based on strings entered in text fields as:

This functionality is in some of the default admin grids and few have filter button like this:

I wanted to implement 1st pic functionality for Sales Order Grid. Any help will be appreciated! Thanks

Answer 1

The filters functionality shown in the first image can be achieved using either layout XML grid or grid using block.

If the grid is built using UI components, such type of filters cannot be achieved.

Please refer Newsletter module for the grid using block.

Please refer Sales Rule module for reference of the grid using layout XML.

Answer 2

Add :

<listingToolbar name="listing_top">
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="statefull" xsi:type="array">
                        <item name="applied" xsi:type="boolean">false</item>
                    </item>
                    <item name="params" xsi:type="array">
                        <item name="filters_modifier" xsi:type="array"/>
                    </item>
                </item>
            </argument>
        </filters>
    </listingToolbar>

After dataSource tag in your grid xml file.

Also add :

public function addFilter(\Magento\Framework\Api\Filter $filter)
    {
        $field = $filter->getField();

        if (in_array($field, ['id','name'])) {
            $filter->setField($field);
        }

        parent::addFilter($filter);
    }

in data provider file for this grid