Title

The Window provides options for displaying a title and customizing its behavior.

To set a title to the Window, use its title 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
        };
        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={"Awesome title goes here"} onClose={this.toggleDialog}>
                    </Window>}
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

To customize the title, add а component.

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

class TitleComponent extends React.Component {
    render() {
        return (
            <div style={{ fontSize: 18, lineHeight: "1.3em" }}>
                <span className="k-icon k-i-print"></span> Print this page
            </div>
        );
    }
}

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={<TitleComponent/>} onClose={this.toggleDialog}>
                    </Window>}
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

If title is not specified, instead of a title, the Window will display a title bar with the default actions.

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 onClose={this.toggleDialog}>
                    </Window>}
                </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /