Grid Custom Filter cell set focus

7 posts, 0 answers
  1. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 17 Nov 2020 Link to this post

    Hi All

    I am trying to set focus on a filter cell in a grid.

    I have followed and successfully created a custom filter cell as per the following link:

    https://www.telerik.com/kendo-react-ui/components/grid/filtering/

     

    I am not sure however, how I can set focus on this cell, any assistance would be great, thanks.

     

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 17 Nov 2020 Link to this post

    Hello, Nick,

    This can be programmatically focused when the component mounts using the native focus method.

    I made an example showcasing how this can be done:

    https://stackblitz.com/edit/react-betugg?file=app%2FrangeFilterCell.jsx (UnitPrice min filter)

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 17 Nov 2020 in reply to Stefan Link to this post

    Thanks Stefan

    I should have been clearer, I wanted to focus based on other events such as a button press etc

    I have this working in other parts of the app using hooks useRef. I managed to get it working with the below

    const inputEl = React.useRef(null);
        class ProdCodeFilterCell extends GridFilterCell {
            InputBox;

            onChange = (event) => {
                this.props.onChange({
                    value: event.value,
                    operator: 'contains',
                    syntheticEvent: event.syntheticEvent
                });
            }

            render() {
                const value = this.props.value || null;
                return (
                    <div>
                        <Input ref={inputEl} value={value} onChange={this.onChange} />
                    </div>
                );
            }
        };
        const onButtonClick = () => {
            // `current` points to the mounted text input element
            inputEl.current.focus();
          };
  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 17 Nov 2020 Link to this post

    Hello, Nick,

    Thank you for the clarification.

    Indeed if this has to be done on other events, we can use the component ref to programmatically focus the required input.

    If the button event has to access the ref of the input, then we can use the querySelector as well to access it.

    Please let me know if you need additional information on this matter.

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 17 Nov 2020 in reply to Stefan Link to this post

    Yes if you have more details or a basic example of this using querySelector that would be great. I am still very new to react.

     

    Thanks Stefan

  6. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 17 Nov 2020 Link to this post

    Hello, Nick,

    This querySelector is a built-in JavaScirpt method:

    https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

    I have updated the example to use it on a button click:

    https://stackblitz.com/edit/react-betugg?file=app%2Fmain.jsx

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  7. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2019

    Posted 17 Nov 2020 in reply to Stefan Link to this post

    Thanks Stefan, works well
Back to Top