Window Overview

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

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 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')
);

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')
);

In this article