Features
This page contains structured information that will help you to start working with DHTMLX Layout and go into deep dive on its functionality.
How to start with DHTMLX Layout
In this section you can find out how to initialize Layout, how to attach the necessary components to its cells, and how to integrate a Layout into your applications.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize a Layout (Example) |
| Attaching widgets | Learn how to attach a DHTMLX component to a Layout cell or detach it (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 Layout with React (Demo) |
| Angular integration | Learn how to use DHTMLX Layout with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Layout with Vue.js (Demo) |
How to configure Layout
In this section you will know how to build a horizontal, vertical, or mixed layout, and how to add borders or space between cells.
| Topic | Description |
|---|---|
| Defining Layout structure | Learn how to create a Layout of the necessary structure |
| Adding borders to cells | Learn how to configure the borders or add space between cells in Layout (Example 1, Example 2) |
How to configure Layout cells
In this section you can find out how to configure the size and visibility of cells, how to add a cell header and configure its height, and more.
| Topic | Description |
|---|---|
| Making a cell resizable | Learn how to configure the ability to change the size of a cell by dragging its borders (Example) |
| Making cells hidden | Learn how to render a layout with some hidden cells |
| Adding the header to a cell | Learn how to add a header for a cell (Example) |
| Configuring content alignment | Learn how to set the alignment of content inside a cell (Example) |
| Configuring paddings | Learn how to configure the distance between a cell and the Layout border (Example) |
| Initializing a collapsed cell | Learn how to initialize a collapsed cell and provide the ability to expand it (Example 1, Example 2) |
| Showing a progress bar by default | Learn how to render the progress bar in a cell in the absence of the component/HTML content in the cell |
How to configure sizes of Layout cells
In this section you will learn how to configure sizes of Layout cells and their headers.
| Topic | Description |
|---|---|
| Width and height of a cell | Learn how to configure the width and height of a cell (Example) |
| Size of a cell within a row | Learn how to define the "weight" of a cell in relation to other cells placed in the same row and within one parent (Example) |
| Height of the cell's header | Learn how to configure the height of the header of a cell |
How to customize Layout and its cells
In this section you can learn how to configure the style of Layout and its cells.
| Topic | Description |
|---|---|
| Rendering HTML content | Learn how to render HTML content in a cell on Layout initialization (Example) |
| Attaching HTML content | Learn how to attach HTML content into a cell dynamically or detach it |
| Styling (custom CSS) | Learn how to apply custom styles to a Layout cell (Example) |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with Layout cells
In this section you will learn how to get a cell object, how to add or remove, hide or show, expand or collapse a cell, etc.
| Topic | Description |
|---|---|
| Removing a cell | Learn how to remove a cell from Layout (Example) |
| Iterating over all cells | Learn how to iterate over Layout cells (Example) |
| Getting a cell object | Learn how to get a configuration object of a particular cell |
| Showing/hiding a cell | Learn how to hide/show a cell (Example 1, Example) |
| Checking visibility of a cell | Learn how to check whether a Layout cell is visible |
| Expanding/collapsing a cell | Learn how to collapse/expand a cell (Example 1, Example 2) |
| Showing/hiding a progress bar | Learn how to show/hide the progress bar in a Layout container or in a cell (Example) |
Layout patterns
How to work with Layout events
This section explains how to work with Layout 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 Layout events (Example) |
API reference
In this section you can find out corresponding references of Layout and Layout cells API.
Layout API
| Topic | Description |
|---|---|
| Layout methods | Check the list of Layout methods |
| Layout events | Check the list of Layout events |
| Layout properties | Check the list of Layout properties |
Layout cell API
| Topic | Description |
|---|---|
| Layout cell methods | Check the list of methods of a Layout cell |
| Layout cell properties | Check the list of properties of a Layout cell |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with Layout.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| Custom scroll | Learn how to enable custom scroll in Layout cells |
| 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!