Skip to main content

Configuration

DHTMLX Window provides a set of configuration options you can define in the constructor of the component before its initialization. It's possible to set a title into the header of a window, add a footer with controls, specify the sizes of a window and decide whether it should be resizable, movable or modal, set some HTML content and define other useful settings to adapt the component to your needs.

Closability​

There is the closable property that adds a Close button into the right top part of a window to allow a user to close a window on clicking it. This option is set to true by default.

const dhxWindow = new dhx.Window({
    closable:false
});

Related sample: Window. Closable, movable, resizable

Custom node​

To place a window into a custom node you need to specify the container for a window via the node property:

const dhxWindow = new dhx.Window({
    node:"customDiv"
});

Related sample: Window. Window container

note

If no HTML container is specified, the window will be placed in the body.

You can provide a window with a footer that will include some additional controls for manipulating the content.

const dhxWindow = new dhx.Window({
    footer:true
});

Related sample: Window. Window with footer

By default a footer is initialized with no controls. To add a control into the footer, you need to manipulate the footer object of the toolbar. Follow the instructions given in the Customization article.

Modality​

It is possible to make a window modal, if there's a necessity. Use the modal property to turn this functionality on:

const dhxWindow = new dhx.Window({
    modal:true
});

Related sample: Window. Modal Window

A modal window blocks the main window on its calling. It means that only the modal window remains active, while the main window becomes gray and unresponsive.

Movability​

To equip a window with the ability to be moved around the screen, you should set the movable property to true:

const dhxWindow = new dhx.Window({
    movable:true
});

Related sample: Window. Closable, movable, resizable

Overflowing browser window​

By default, a window can't cross the borders of a browser window. To enable such a possibility, make use of the viewportOverflow configuration property.

const dhxWindow = new dhx.Window({
    viewportOverflow:true
});

Related sample: Window. Viewport overflow

note

The property makes sense when set together with the movable property.

Resizing​

The default window has fixed sizes with no possibility to change them from UI. You can switch on the corresponding configuration option to make a window resizable.

const dhxWindow = new dhx.Window({
    resizable:true
});

Related sample: Window. Closable, movable, resizable

Then you will be able to regulate the sizes of a window by dragging resizers that appear on hovering sides of a window.

note

To define the resizing limits, set necessary values to the minWidth / minHeight properties.

Setting HTML content​

You can set some HTML content into a window via the html configuration option, as in:

const dhxWindow = new dhx.Window({
    html:"<h1>Header</h1><p>paragraph</p>"
});

Sizing​

You can adjust the size of a window via a set of options that define both the initial width and height of a window and the minimal dimensions of the component.

const dhxWindow = new dhx.Window({
    width:250,
    height:250,
    minWidth:170,
    minHeight:170
});

Related sample: Window. Closable, movable, resizable

Default values of the size-related properties are:

Title​

DHTMLX Window is initialized with an empty header. You can provide some text label for the header of the window via the title property.

const dhxWindow = new dhx.Window({
    title: "DHX Window"
});

The header can also contain some buttons. You can control them via the header object of the window. Check details in the Customization article.