Positioning and Dragging

The Window enables you to set its position and move it by dragging.

Positioning

To specify the position of the Window, use its initialTop and initialLeft properties. If initialTop and initialLeft are not provided, the Window will be initially positioned at the center of the viewport.

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}
                            initialLeft={100}
                            initialTop={300}>
                    </Window>}
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Dragging

By default, the Window enables you to move it by dragging. To control this behavior, use the draggable property.

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,
            isDraggable: false
        };
    }

    render() {
        return (
                <div>
                    <input type="checkbox" id="resizeChkBox" class="k-checkbox" onChange={()=> this.setState({ isDraggable: !this.state.isDraggable })}/>
                    <label class="k-checkbox-label" for="resizeChkBox">Enable/Disable dragging</label>
                    {this.state.visible && <Window title={"Move me"} onClose={this.toggleDialog} draggable={this.state.isDraggable}>
                        {this.state.isResizable ?
                        "I can be moved!" :
                        "I cannot be moved!"}
                    </Window>}
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /