How to add Text Input Filter to custom module (hidden column)

Question

I am trying to add a custom filter to a custom module in admin grid, however I do not want that column to be shown therefore I have tried both ways by adding a column and making visible field to false and adding <filterInput to filters field but I do not see the filter in the filter grid.

What I want is a text filter which searches LIKE data and if matches the result then shows those certain records.

Filter field:

 <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="params" xsi:type="array">
                        <item name="filters_modifier" xsi:type="array"/>
                    </item>
                    <item name="observers" xsi:type="array"/>
                </item>
            </argument>
            <settings>
                <statefull>
                    <property name="applied" xsi:type="boolean">false</property>
                </statefull>
            </settings>
            <filterInput name="column_name" sortOrder="100" provider="${ $.parentName }">
                <settings>
                    <label translate="true">Text</label>
                    <dataScope>column_name</dataScope>
                </settings>
            </filterInput>
        </filters>

Column field:

<column name="column_name" component="Magento_Ui/js/grid/columns/select" sortOrder="35">
            <settings>
                <filter>text</filter>
                <dataType>text</dataType>
                <bodyTmpl>ui/grid/cells/text</bodyTmpl>
                <label translate="true">NAME</label>
                <visible>false</visible>
            </settings>
        </column>

I have also tried to remove visible field but nothing shows.

What happens when you make the column visible? Is filter is getting displayed? If yes than you can simply disable it to be shown in grid from backend. — Rahul Barot
– Rahul Barot, Commented Jul 7, 2021 at 7:59
@RahulBarot neither the column visible nor the filter, if i change visible to true — nix
– nix, Commented Jul 7, 2021 at 9:05

ZealousWeb · Accepted Answer · 2021-07-07 09:51:43Z

If you don't want to display column in grid then no need to write code there. Please comment it or just remove code from it.

In below code i have shown "product_name" column only in filter and not showing in grid.

Please update code like below.

<?xml version="1.0" encoding="UTF-8"?>

 
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">custom_record_custom_list.custom_record_custom_list_data_source</item>
            <item name="deps" xsi:type="string">custom_record_custom_list.custom_record_custom_list_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">zealousweb_custom_custom_columns</item>
    </argument>
    <dataSource name="custom_record_custom_list_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <!-- here we pass dataprovider name which i will define in di.xml file of module in next step -->
            <argument name="name" xsi:type="string">custom_record_custom_list_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">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>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
            </item>
        </argument>
    </dataSource>
    <container name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
                <item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
            </item>
        </argument>
        <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">custom_record_custom_list.custom_record_custom_list.zealousweb_custom_custom_columns</item>
                    </item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                    <item name="displayArea" xsi:type="string">dataCustomActions</item>
                </item>
            </argument>
        </component>
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">custom_record_custom_list.custom_record_custom_list.zealousweb_custom_custom_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">custom_record_custom_list.custom_record_custom_list.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">custom_record_custom_list.custom_record_custom_list.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">custom_record_custom_list.custom_record_custom_list.zealousweb_custom_custom_columns.${ $.index }:visible</item>
                        </item>
                    </item>
                </item>
                <item name="observers" xsi:type="array">
                    <item name="column" xsi:type="string">column</item>
                </item>
            </argument>
            <filterSelect name="store_id" provider="${ $.parentName }">
                <settings>
                    <captionValue>0</captionValue>
                    <options class="Magento\Cms\Ui\Component\Listing\Column\Cms\Options"/>
                    <label translate="true">Store View</label>
                    <dataScope>store_id</dataScope>
                    <imports>
                        <link name="visible">componentType = column, index = ${ $.index }:visible</link>
                    </imports>
                </settings>
            </filterSelect>
            <filterInput name="product_name" sortOrder="100" provider="${ $.parentName }">
                <settings>
                    <label translate="true">Product Name</label>
                    <dataScope>product_name</dataScope>
                </settings>
            </filterInput>
        </filters>
        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">custom_record_custom_list.custom_record_custom_list.zealousweb_custom_custom_columns.ids</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
            <!-- Mass actions which you want to add in your custom-->
            <action name="delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">delete</item>
                        <item name="label" xsi:type="string" translate="true">Delete</item>
                        <item name="url" xsi:type="url" path="custom/custom/massdelete"/>
                        <item name="confirm" xsi:type="array">
                            <item name="title" xsi:type="string" translate="true">Delete</item>
                            <item name="message" xsi:type="string" translate="true">Do you want to delete selected row record?</item>
                        </item>
                    </item>
                </argument>
            </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">custom_record_custom_list.custom_record_custom_list.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">custom_record_custom_list.custom_record_custom_list.zealousweb_custom_custom_columns.ids</item>
                </item>
            </argument>
        </paging>
    </container>
    <!-- from here we'll add columns of custom list -->
    <columns name="zealousweb_custom_custom_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">custom_record_custom_list.custom_record_custom_list.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">custom_record_custom_list.custom_record_custom_list.zealousweb_custom_custom_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">zealousweb_custom_columnscustom_record_custom_list.custom_record_custom_list.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">id</item>
                    <item name="sorting" xsi:type="string">desc</item>
                    <item name="sortOrder" xsi:type="number">0</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                </item>
            </argument>
        </column>
        <!-- <column name="product_name" class="Zealousweb\Custom\Ui\Component\Listing\Custom\Column\ProductActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Product Name</item>
                </item>
            </argument>
        </column> -->
        <column name="product_sku">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Product Sku</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Stack Exchange Network

How to add Text Input Filter to custom module (hidden column)

1 Answer 1

Your Answer

Hot Network Questions

How to add Text Input Filter to custom module (hidden column)

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions