Skip to main content

Features

This page contains structured information that will help you to start working with DHTMLX Window and go into deep dive on its functionality.

How to start with DHTMLX Window

In this section you can find out the ways of Window initialization, learn how to attach the necessary components to the Window, and how to integrate Window into your applications.

Initialization

TopicDescription
Basic initializationLearn how to initialize a Window (Example)
Two WindowsThe example shows how to initialize two windows with different content on a page
Initialization of a modal windowLearn how to initialize a modal window and use it for editing data in another widget (Example 1, Example 2)
Attaching widgetsLearn how to attach a DHTMLX component to a window (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Window with React (Demo)
Angular integrationLearn how to use DHTMLX Window with Angular (Demo)
Vue integrationLearn how to use DHTMLX Window with Vue.js (Demo)

How to configure Window

In this section you can find out how to set the initial HTML content for Window, how to add a footer, header, title, close button into the component, and more.

TopicDescription
Setting the initial contentLearn how to specify the initial HTML content for Window
Adding a footer to WindowLearn how to add a footer to Window (Example)
Adding a header to WindowLearn how to add a header to Window
Adding a title to WindowLearn how to add a title to the header of Window
Adding a Close button to WindowLearn how to add a Close button into the right top part of a window (Example)
Making a window resizableLearn how to let users to resize the window (Example)
Making a window movableLearn how to let users to move the window around the screen (Example)
Showing Window in a custom containerLearn how to place a window into a custom container (Example)
Overflowing browser windowLearn how to allow a window to cross the borders of a browser window (Example)

How to customize Window and change its size

In this section you can learn how to customize a Window and configure its sizes.

TopicDescription
Sizes of a windowLearn how to configure the sizes of a window (the width, height, and the minimal dimensions of the window)
Attaching HTML contentLearn how to add some HTML content to a window dynamically (Example)
Adding custom buttonsLearn how to add custom buttons to the header and footer of Window (Example)
Applying custom iconsLearn how to apply custom icons to the window (Example)
Styling Window (custom CSS)Learn how to change the appearance of a Window (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Window

In this section you can learn how to show and hide the window, how to switch it to the full screen mode, how to set and get position and size of the window, and more.

TopicDescription
Showing / hiding WindowLearn how to show or hide a window on the page (Example)
Checking visibility of a windowLearn how to check whether a window is visible on the page or not (Example)
Switching Window to the full screen modeLearn how to display a window in the full screen mode (Example)
Setting / getting Window positionLearn how to set/get the position of a window on the fly (Example)
Setting / getting Window sizeLearn how to change and get the size of a window dynamically (Example)
Getting the container of WindowLearn how to get the HTML element of the window

How to work with Window events

This section explains how to work with Window events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Window events (Example)

API reference

In this section you can find out corresponding references of Window API.

TopicDescription
Window methodsCheck the list of Window methods
Window eventsCheck the list of Window events
Window propertiesCheck the list of Window properties

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Window.

TopicDescription
Touch supportLearn how to work with touch support (Example)
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


info

Do you need more functionality? Feel free to share your suggestions in the comments below!