Focus on Filter Text Box

[Matt]

Is there a way to Focus on a columns filter text box after selecting a filter option like "Contains" or "Starts with"?

The focus is on one of the records but should be on the filter text line so the user can enter filter criteria.

 

 

 

[Stefan]

Hello, Matt,

Currently, this can be done by using a custom filter cell. Then inside that custom cell, we can render custom operators dropdown and listen on its onChange event, and based on the value to focus the input element.

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells

Another option can be to listen on the onFilterChange event which will be fired when an operator is changed. Then loop over the filters to see if an operator is changed and for which field. Then programmatically focus the filter input.

The main reason why we are not doing this automatically is that there are many use cases in on some of them automatically focusing an input may not be the required one. This is why we have the option for custom cells to allow the developer to fully customize the Grid to cover all business requirements.

Regards,
Stefan
Progress Telerik

[Matt]

Thanks for the quick response.

If what I'm seeing in the example is true we would have to render all out of the box operators just to enable focus on the filtercell text input element. The second option looks to be a better choice of us. We are able to distinguish the exact column however it looks like the element for each filtercell text input is the same (class="k-textbox"). How can we distinguish with exact one to focus on?

[Stefan]

Hello, Matt,

Yes, indeed the first option will require re-creating all out of the box filtering only for that change, this is an option if the Grid is already using many custom filters.

As for distinguish the exact input, if we already know the column, then we can know the index of the column and based on that index to select the correct input. We are rendering the filter row with class name k-filter-row and we can select all the elements inside that row. Then based on the column index we will select the correct `th` element and then focus the input inside that filter cell.

This is an example showcasing how to focus a specific input if we know the column:

https://stackblitz.com/edit/react-eeko1s?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[Matt]

Thanks Stefan appreciate the help!