Getting Started with KendoReact Window

The KendoReact Window displays content in a non-modal HTML window which can be moved and resized.

The KendoReact Window component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dialogs package.

Basic Usage

The following example demonstrates the Window in action.

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 className="k-form-field">
                                        <span>First Name</span>
                                        <input className="k-textbox" placeholder="Your Name" />
                                    </label>
                                    <label className="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')
);

Functionality and Features

Events

The following example demonstrates basic Window events.

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,
            events: []
        };
    }

    toggleDialog = () => {
        if (this.state.visible) {
            let events = this.state.events;
            events.unshift('Close event');
            this.setState({
                visible: !this.state.visible,
                events: events
            });
        } else {
            this.setState({
                visible: !this.state.visible
            });
        }
    }
    handleMove = () =>{
        let events = this.state.events;
        events.unshift('Move event');
        this.setState({
            events: events
        });
    }
    handleResize = () =>{
        let events = this.state.events;
        events.unshift('Resize event');
        this.setState({
            events: events
        });
    }
    handleStageChange = () =>{
        let events = this.state.events;
        events.unshift('StageChange event');
        this.setState({
            events: events
        });
    }

    render() {
        return (
                <div>
                    <button className="k-button" onClick={this.toggleDialog}>Open Window</button>
                    {this.state.visible &&
                        <Window title={"Events"}
                            onClose={this.toggleDialog}
                            onMove={this.handleMove}
                            onResize={this.handleResize}
                            onStageChange={this.handleStageChange}/>}
                    <div className="example-config">
                        <h5>Event Log</h5>
                        <ul className="event-log">
                            {this.state.events.map(event => <li>{event}</li>)}
                        </ul>
                    </div>
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /