This is a migrated thread and some comments may be shown as answers.

Grid Custom Filter cell set focus

6 Answers 122 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Veteran
Nick asked on 17 Nov 2020, 06:43 AM

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.

 

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 17 Nov 2020, 07:26 AM

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/.

0
Nick
Top achievements
Rank 1
Veteran
answered on 17 Nov 2020, 08:22 AM

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();
      };
0
Stefan
Telerik team
answered on 17 Nov 2020, 08:43 AM

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/.

0
Nick
Top achievements
Rank 1
Veteran
answered on 17 Nov 2020, 08:45 AM

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

0
Stefan
Telerik team
answered on 17 Nov 2020, 10:27 AM

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/.

0
Nick
Top achievements
Rank 1
Veteran
answered on 17 Nov 2020, 08:35 PM
Thanks Stefan, works well
Tags
General Discussions
Asked by
Nick
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Nick
Top achievements
Rank 1
Veteran
Share this question
or