Grid edit navigatable option

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Planned

Last Updated: 27 Apr 2021 10:30 by ADMIN

Ruslan

Created on: 05 Feb 2020 16:36

Category: KendoReact

Type: Feature Request

Grid edit navigatable option

I would like to request a new Kendo React Grid column editing option so that users can navigate editable columns using the keyboard. This feature should be similar to "navigatable" option from Kendo jQuery grid example - https://demos.telerik.com/kendo-ui/grid/editing

Thanks.

3 comments

ADMIN

Stefan

Posted on: 10 Feb 2020 06:28

Hello, Ruslan,

We will keep an eye on the interest in this feature.

We listen for the community feedback and we will monitor if this will become a highly requested feature.

As for the onBlur, indeed it is not added as in the in-cell editing example it covers a rare use case, and we decided to remove it, so we can focus the demo on the tab logic.

Still, I can agree that it that can we should have removed the onFocus as well.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

Ruslan

Posted on: 07 Feb 2020 14:53

Hello Stefan,

thanks for quick response. I still strongly believe that you should add navigatable option to React Grids.

BTW, I think you missing onBlur handler code in your In-Line Editing with Tab example .

This is your current code without onBlur handler:

  rowRender = (trElement) => {
        const trProps = {
            ...trElement.props,
            onMouseDown: () => {
                this.preventExit = true;
                clearTimeout(this.preventExitTimeout);
                this.preventExitTimeout = setTimeout(() => { this.preventExit = undefined; });
            },
            onFocus: () => { clearTimeout(this.blurTimeout); }
        };
        return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
}

Code with onBlur handler:

 rowRender = (trElement) => {
        const trProps = {
            ...trElement.props,
            onMouseDown: () => {
                this.preventExit = true;
                clearTimeout(this.preventExitTimeout);
                this.preventExitTimeout = setTimeout(() => { this.preventExit = undefined; });
            },
            onBlur: () => {
                
                clearTimeout(this.blurTimeout);
                if (!this.preventExit) {
                    this.blurTimeout = setTimeout(() => { this.exitEdit(); });
                }
            },
            onFocus: () => { clearTimeout(this.blurTimeout); }
        };
        return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
    }

ADMIN

Stefan

Posted on: 06 Feb 2020 06:04

Hello, Ruslan,

Please check the following article that showcases how to add keyboard navigation for the most common editing scenarios:

https://www.telerik.com/kendo-react-ui/components/grid/accessibility/#toc-common-keyboard-navigation-scenarios

I hope this will help in achieving the desired result.

Regards,
Stefan
Progress Telerik