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
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/.
Rank 1
Veteran
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();
};
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/.
Rank 1
Veteran
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
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/.
Rank 1
Veteran