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