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.

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

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