Keyboard Navigation

The keyboard navigation of the Window is always available.

The Window supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up ArrowMoves the Window upwards.
Down ArrowMoves the Window downwards.
Left ArrowMoves the Window to the left.
Right ArrowMoves the Window to the right.
Ctrl+Up ArrowNarrows the Window in a vertical direction.
Ctrl+Down ArrowExpands the Window in a vertical direction.
Ctrl+Left ArrowNarrows the Window in a horizontal direction.
Ctrl+Right ArrowExpands the Window in a horizontal direction.
Alt+Down ArrowMinimizes and restores the Window.
Alt+Up ArrowMaximizes and restores the Window.
EscCloses the Window.
import React from 'react';
import ReactDOM from 'react-dom';
import { Window } from '@progress/kendo-react-dialogs';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: true
        };
        this.toggleDialog = this.toggleDialog.bind(this);
    }

    toggleDialog() {
        this.setState({
            visible: !this.state.visible
        });
    }

    render() {
        return (
                <div>
                    <button className="k-button" onClick={this.toggleDialog}>Open Window</button>
                    {this.state.visible &&
                        <Window title={"Status"} onClose={this.toggleDialog} initialHeight={350}>
                            <form className="k-form">
                                <fieldset>
                                    <legend>User Details</legend>

                                    <label class="k-form-field">
                                        <span>First Name</span>
                                        <input className="k-textbox" placeholder="Your Name" />
                                    </label>
                                    <label class="k-form-field">
                                        <span>Last Name</span>
                                        <input className="k-textbox" placeholder="Your Last Name" />
                                    </label>
                                </fieldset>

                                <div className="text-right">
                                    <button type="button" className="k-button" onClick={this.toggleDialog}>Cancel</button>
                                    <button type="button" className="k-button k-primary" onClick={this.toggleDialog}>Submit</button>
                                </div>
                            </form>
                    </Window>}
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /