Skip to main content

Work with Window

Attaching content​

You can easily attach some HTML content to a window via the attachHTML() method. It takes as a parameter a string with HTML.

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

Related sample: Window. Attach HTML

Attaching DHTMLX components​

DHTMLX Window allows attaching other DHTMLX components inside it via the attach() method.

dhxWindow.attach("richtext", { mode: "document" });
dhxWindow.show();

Related sample: Window. Attach widget

note

The Message, Popup, Window components can't be attached to Window because these components can't have the parent container due to their architecture principles.

Repainting window​

In case you've changed some configuration settings of a window, you can repaint it on a page via the paint() method:

dhxWindow.paint();

Fullscreen mode​

DHTMLX Window can be displayed in the full screen mode. To activate the full screen mode, make use of the setFullScreen() method:

dhxWindow.setFullScreen();

Related sample: Window. Fullscreen mode

To disable the full screen mode, apply the unsetFullScreen() method:

dhxWindow.unsetFullScreen();

To check whether the full screen mode is activated or not, use the isFullScreen() method:

dhxWindow.setFullScreen();
dhxWindow.isFullScreen(); // -> true

Showing/hiding window​

You can hide a particular window or show it in a particular position on a page with the help of the hide() and show() methods. The show() method takes two optional parameters:

  • left - (number) the left margin of a window
  • top - (number) the top margin of a window

If called without parameters, the method shows a window in the default position on a page.

// shows a window in the specified position
dhxWindow.show(34, 54);

// hides a window
dhxWindow.hide();

Related sample: Window. Showing / hiding Window

Setting the active state​

While working with several windows, you may need to make a particular window active and bring it to the top. You can apply the setActive() method to the necessary window for this purpose.

In the example below two windows are created. Although the second window overlaps the first one upon initialization, calling setActive() on the first window programmatically brings it back to the front.

const windowConfig = {
    width: 300,
    height: 300,
    html: "<div style='padding: 20px'>Window content</div>"
};

const window1 = new dhx.Window({
    ...windowConfig,
    title: "Window 1",
});

const window2 = new dhx.Window({
    ...windowConfig,
    title: "Window 2",
});

// displaying both windows
window1.show();
window2.show(); // Window 2 is currently on top

// bringing Window 1 to the front without refreshing its content
window1.setActive();

Related sample: Window. Setting the active state

The key advantage of this method is that the activation occurs without re-rendering the content. This ensures that the DOM state, such as form input values, scroll positions, or media playback, remains completely intact.

Sizing window​

You can change the size of a window via the setSize() method. It takes two parameters:

  • width - (number) the width of a window
  • height - (number) the height of a window
dhxWindow.setSize(250, 250);

To get the current size of a window, use the getSize() method. It will return an object with width and height of a window:

const size = dhxWindow.getSize(); // -> {width: 960, height: 469}

Related sample: Window. Set/get Window size

Positioning window​

To set the position of a window on the fly, make use of the setPosition() method. You should pass two parameters to the method:

  • left - (number) the left coordinate of a window
  • top - (number) the top coordinate of a window
dhxWindow.setPosition(20, 20);
dhxWindow.show();

To get the current position of a window, use the getPosition() method. It will return an object with left and top coordinates of a window:

const position = dhxWindow.getPosition(); // -> { left: 480, top: 234 }

Related sample: Window. Get/set Window position

Checking visibility of window​

You can check whether a window is hidden or shown on a page using the isVisible() method of the Window API. The method returns true, if a window is visible, and false if it's hidden.

const visible = window.isVisible(); // -> true/false

Related sample: Window. Get Window visible status