Focus on Filter Text Box

5 posts, 0 answers
  1. Matt
    Matt avatar
    5 posts
    Member since:
    May 2019

    Posted 22 Jul 2020 Link to this post

    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.

     

     

     

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 23 Jul 2020 Link to this post

    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

  3. Matt
    Matt avatar
    5 posts
    Member since:
    May 2019

    Posted 27 Jul 2020 in reply to Stefan Link to this post

    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?

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 28 Jul 2020 Link to this post

    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

  5. Matt
    Matt avatar
    5 posts
    Member since:
    May 2019

    Posted 28 Jul 2020 Link to this post

    Thanks Stefan appreciate the help!
Back to Top