Minimizing and Maximizing

The Window enables you to control its minimized, default, and maximized state through the title bar commands.

To place the Window in a controlled mode:

  1. Set the stage property.
  2. Utilize the onStageChange event.
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 = {
            windowStage: "MINIMIZED"
        };
    }

    setMinimize = () => {
        this.setState({
            windowStage: "MINIMIZED"
        });
    }
    setFullscreen = () => {
        this.setState({
            windowStage: "FULLSCREEN"
        });
    }
    setDefault = () => {
        this.setState({
            windowStage: "DEFAULT"
        });
    }
    handleStageChange = (e)=>{
        this.setState({
            windowStage: e.state
        });
    }

    render() {
        return (
                <div>
                    <button className="k-button" onClick={this.setMinimize}>Minimize</button>&nbsp;
                    <button className="k-button" onClick={this.setFullscreen}>Full screen</button>&nbsp;
                    <button className="k-button" onClick={this.setDefault}>Default</button>
                    <Window title={"Status"} stage={this.state.windowStage} onStageChange={this.handleStageChange}>
                        <button className="k-button" onClick={this.setMinimize}>Minimize</button>&nbsp;
                        <button className="k-button" onClick={this.setFullscreen}>Full screen</button>&nbsp;
                        <button className="k-button" onClick={this.setDefault}>Default</button>
                    </Window>
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /