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
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize a Window (Example) |
| Two Windows | The example shows how to initialize two windows with different content on a page |
| Initialization of a modal window | Learn how to initialize a modal window and use it for editing data in another widget (Example 1, Example 2) |
| Attaching widgets | Learn how to attach a DHTMLX component to a window (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Window with React (Demo) |
| Angular integration | Learn how to use DHTMLX Window with Angular (Demo) |
| Vue integration | Learn 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.
| Topic | Description |
|---|---|
| Setting the initial content | Learn how to specify the initial HTML content for Window |
| Adding a footer to Window | Learn how to add a footer to Window (Example) |
| Adding a header to Window | Learn how to add a header to Window |
| Adding a title to Window | Learn how to add a title to the header of Window |
| Adding a Close button to Window | Learn how to add a Close button into the right top part of a window (Example) |
| Making a window resizable | Learn how to let users to resize the window (Example) |
| Making a window movable | Learn how to let users to move the window around the screen (Example) |
| Showing Window in a custom container | Learn how to place a window into a custom container (Example) |
| Overflowing browser window | Learn 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.
| Topic | Description |
|---|---|
| Sizes of a window | Learn how to configure the sizes of a window (the width, height, and the minimal dimensions of the window) |
| Attaching HTML content | Learn how to add some HTML content to a window dynamically (Example) |
| Adding custom buttons | Learn how to add custom buttons to the header and footer of Window (Example) |
| Applying custom icons | Learn 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 classes | A 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.
| Topic | Description |
|---|---|
| Showing / hiding Window | Learn how to show or hide a window on the page (Example) |
| Checking visibility of a window | Learn how to check whether a window is visible on the page or not (Example) |
| Switching Window to the full screen mode | Learn how to display a window in the full screen mode (Example) |
| Setting / getting Window position | Learn how to set/get the position of a window on the fly (Example) |
| Setting / getting Window size | Learn how to change and get the size of a window dynamically (Example) |
| Getting the container of Window | Learn how to get the HTML element of the window |
How to work with Window events
This section explains how to work with Window events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Window events (Example) |
API reference
In this section you can find out corresponding references of Window API.
| Topic | Description |
|---|---|
| Window methods | Check the list of Window methods |
| Window events | Check the list of Window events |
| Window properties | Check 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.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support (Example) |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!