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.