Grid Custom Filter cell set focus

[Nick]

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.

 

[Stefan]

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

[Nick]

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();
      };


[Stefan]

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

[Nick]

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

[Stefan]

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

[Nick]

Thanks Stefan, works well