Controlled Window

By default, the Window is in an uncontrolled state and can be resized or moved depending on its internal logic.

The Window provides options for:

  • Controlling its state by handling the onMove and onResize events.
  • Controlling its dimensions by using the width and height properties.
  • Controlling its position by using the left and top properties.

The following example demonstrates how to control the Window functionality.

import React from 'react';
import ReactDOM from 'react-dom';
import { Window } from '@progress/kendo-react-dialogs';

class App extends React.Component {

    state = {
        left: 300,
        top: 100,
        width: 200,
        height: 200
    }
    handleMove = (event) => {
        this.setState({
            left: event.left,
            top: event.top
        });
    }
    handleResize = (event) => {
        this.setState({
            left: event.left,
            top: event.top,
            width: event.width,
            height: event.height
        });
    }
    handleSetWidth200 = () => {
        this.setState({
            width: 200
        });
    }
    handleSetWidth500 = () => {
        this.setState({
            width: 300
        });
    }
    render() {
        return (
                <div>
                    <button className="k-button" onClick={this.handleSetWidth200}>Set width to 200</button>
                    &nbsp;
                    <button className="k-button" onClick={this.handleSetWidth500}>Set width to 500</button>
                    <Window title={"Status"}
                            left={this.state.left}
                            top={this.state.top}
                            width={this.state.width}
                            height={this.state.height}
                            onMove={this.handleMove}
                            onResize={this.handleResize}
                    >
                        Controlled mode
                    </Window>
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /