diff --git a/docs/calendar/configuring.md b/docs/calendar/configuring.md
index 6d6eae1d2..35a404202 100644
--- a/docs/calendar/configuring.md
+++ b/docs/calendar/configuring.md
@@ -16,7 +16,7 @@ There are several modes of displaying Calendar, which are set via the [](calenda
const calendar = new dhx.Calendar("calendar_container");
~~~
-
+
- **"month"** - only months of the current year are shown in the calendar
@@ -26,7 +26,7 @@ const calendar = new dhx.Calendar("calendar_container", {
});
~~~
-
+
- **"year"** - only years are shown, including the current one
@@ -36,7 +36,7 @@ const calendar = new dhx.Calendar("calendar_container", {
});
~~~
-
+
**Related sample**: [Calendar. Calendar modes](https://snippet.dhtmlx.com/n9q0tc0q)
@@ -57,7 +57,7 @@ const calendar = new dhx.Calendar("calendar_container", {
## Disabled dates
-
+
**Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga)
@@ -84,7 +84,7 @@ const calendar = new dhx.Calendar("calendar_container", {
## Displaying only current month
-
+
**Related sample**: [Calendar. The days of this month only](https://snippet.dhtmlx.com/4wi5hbtr)
@@ -98,7 +98,7 @@ const calendar = new dhx.Calendar("calendar_container", {
## Highlighted dates
-
+
**Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga)
@@ -190,7 +190,7 @@ Please note that the format of date in the Calendar is defined by the dateFormat
## Numbers of weeks
-
+
**Related sample**: [Calendar. Numbers of weeks](https://snippet.dhtmlx.com/9692gk6n)
@@ -204,7 +204,7 @@ const calendar = new dhx.Calendar("calendar_container", {
## Range mode
-
+
**Related sample**: [Calendar. Range](https://snippet.dhtmlx.com/2mrj53h0)
@@ -224,7 +224,7 @@ The **value** option should have the array type and contain a pair of values (ei
## Start of the week
-
+
**Related sample**: [Calendar. Week start](https://snippet.dhtmlx.com/kaxmurh9)
@@ -248,7 +248,7 @@ const calendar = new dhx.Calendar("calendar_container", {
});
~~~
-
+
**Related sample**: [Calendar. Timepicker In Calendar](https://snippet.dhtmlx.com/jkbfb202)
@@ -256,7 +256,7 @@ const calendar = new dhx.Calendar("calendar_container", {
## Width of calendar
-
+
**Related sample**: [Calendar. Calendar width](https://snippet.dhtmlx.com/azm0u5ns)
diff --git a/docs/calendar/customization.md b/docs/calendar/customization.md
index 1e10d1f56..e4e548084 100644
--- a/docs/calendar/customization.md
+++ b/docs/calendar/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Calendar in the documentation
There is a possibility to make changes in the look and feel of a calendar. For example, change its background color:
-
+
**Related sample**: [Calendar. Styling (custom CSS)](https://snippet.dhtmlx.com/2045cbe1)
@@ -56,7 +56,7 @@ For example:
## Styling selected dates
-
+
**Related sample**: [Calendar. Custom styles for selected date](https://snippet.dhtmlx.com/9u0ix3na)
diff --git a/docs/calendar/datepicker.md b/docs/calendar/datepicker.md
index f19adb367..54f0f8ee8 100644
--- a/docs/calendar/datepicker.md
+++ b/docs/calendar/datepicker.md
@@ -8,7 +8,7 @@ description: You can explore the DatePicker of Calendar in the documentation of
You can use DHTMLX Calendar as a date picker by putting it inside a popup.
-
+
First, you should create a popup and then attach a calendar into it. Follow the steps below:
diff --git a/docs/calendar/index.md b/docs/calendar/index.md
index d79794b71..83cd2a839 100644
--- a/docs/calendar/index.md
+++ b/docs/calendar/index.md
@@ -8,7 +8,7 @@ description: You can have an overview of Calendar in the documentation of the DH
DHTMLX Calendar is a component that allows users to view and select dates. You can create calendar in one of 4 modes: days, months, years, or as a timepicker. This component is a great date picker solution for your website or application. Check [online samples for DHTMLX Calendar](https://snippet.dhtmlx.com/jkbfb202?tag=calendar).
-
+
## Features
diff --git a/docs/calendar/localizing_calendar.md b/docs/calendar/localizing_calendar.md
index 711e9b109..6ebf4c7c4 100644
--- a/docs/calendar/localizing_calendar.md
+++ b/docs/calendar/localizing_calendar.md
@@ -8,7 +8,7 @@ description: You can explore the localization of Calendar in the documentation o
You can apply different languages to the interface of dhtmlxCalendar. You just need to translate the corresponding strings for Calendar labels and apply a ready locale to the component.
-
+
## Default locale
diff --git a/docs/calendar/operating_calendar.md b/docs/calendar/operating_calendar.md
index ee331bc62..8da5d7a44 100644
--- a/docs/calendar/operating_calendar.md
+++ b/docs/calendar/operating_calendar.md
@@ -97,7 +97,7 @@ const date = calendar.getValue(); // -> ["03/06/19", "19/06/19"]
You can create two calendars and link them to provide the ability of selecting a date range. The first calendar will be used for setting the start date of the range, while the end date of the range will be specified in the
second calendar.
-
+
Use the [](calendar/api/calendar_link_method.md) method and pass as a parameter the object of the second calendar to link the first calendar to. In the example below the [Change](calendar/api/calendar_change_event.md) event is intended to output the start and end dates of the selected range:
@@ -160,7 +160,7 @@ In case a date has been successfully added into the calendar, the method will re
You can add tooltips for dates and show them on the [](calendar/api/calendar_datemouseover_event.md) event. For example, you can add tooltips to mark some special days:
-
+
~~~js
const special_days = {
diff --git a/docs/chart/charts_overview.md b/docs/chart/charts_overview.md
index 658628b7f..2a9a0a948 100644
--- a/docs/chart/charts_overview.md
+++ b/docs/chart/charts_overview.md
@@ -34,7 +34,7 @@ how the number of staff has increased over several years. Choose this variant wh
### Line chart
-
+
**Related sample**: [Chart. Line chart initialization](https://snippet.dhtmlx.com/t881qcim)
@@ -42,7 +42,7 @@ how the number of staff has increased over several years. Choose this variant wh
### Spline chart
-
+
**Related sample**: [Chart. Spline chart initialization](https://snippet.dhtmlx.com/2wvmdm0y)
@@ -54,7 +54,7 @@ The same as Line chart it displays data for certain periods. It greatly suits yo
### Bar chart
-
+
**Related sample**: [Chart. Bar chart initialization](https://snippet.dhtmlx.com/id9nbujd)
@@ -62,7 +62,7 @@ The same as Line chart it displays data for certain periods. It greatly suits yo
### X-Bar chart
-
+
**Related sample**: [Chart. X-Bar chart initialization](https://snippet.dhtmlx.com/qz80yw84)
@@ -74,7 +74,7 @@ Area chart is based on the Line chart. The difference is that areas below lines
### Area chart
-
+
**Related sample**: [Chart. Area chart initialization](https://snippet.dhtmlx.com/nv6t6lvm)
@@ -82,7 +82,7 @@ Area chart is based on the Line chart. The difference is that areas below lines
### SplineArea chart
-
+
**Related sample**: [Chart. Spline Area chart initialization](https://snippet.dhtmlx.com/bo82km4n)
@@ -94,7 +94,7 @@ Pie chart and its variations are the best choice when you deal with proportions
### Pie and Pie 3D chart
-
+
**Related sample**: [Chart. Pie chart initialization](https://snippet.dhtmlx.com/jfbet749)
@@ -104,7 +104,7 @@ Pie chart and its variations are the best choice when you deal with proportions
### Donut chart
-
+
**Related sample**: [Chart. Donut chart initialization](https://snippet.dhtmlx.com/lobb80ig)
@@ -115,7 +115,7 @@ Pie chart and its variations are the best choice when you deal with proportions
This one is a two-dimensional chart that allows placing one or several series of values over multiple numerical variables. For example, Radar chart will help you to study how a number of parameters
relate to one item (the center point of a chart) and compare their values.
-
+
**Related sample**: [Chart. Radar chart initialization](https://snippet.dhtmlx.com/6otf4h0t)
@@ -125,7 +125,7 @@ relate to one item (the center point of a chart) and compare their values.
The peculiarity of Scatter Chart is that it allows exploring relations between two sets of data in order to find out possible dependencies or patterns.
-
+
**Related sample**: [Chart. Scatter chart initialization](https://snippet.dhtmlx.com/pkczfmpu)
@@ -135,7 +135,7 @@ The peculiarity of Scatter Chart is that it allows exploring relations between t
A treemap chart presents a hierarchical visualization of data as a set of rectangular tiles and makes it easy to spot patterns. Several tiles can be collected into a group. The sizes of tiles are proportional to the values of the data items they represent.
-
+
**Related sample**: [Chart. Treemap chart initialization](https://snippet.dhtmlx.com/p31wzm0b)
@@ -153,7 +153,7 @@ The calendar heatmap chart is a two dimensional calendar view that uses graduate
The chart helps to display and identify daily patterns or anomalies over the necessary period.
-
+
**Related samples:**
diff --git a/docs/chart/customization.md b/docs/chart/customization.md
index e9b1bcd0c..9f024b455 100644
--- a/docs/chart/customization.md
+++ b/docs/chart/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Chart in the documentation of
There is a possibility to make changes in the look and feel of a chart.
-
+
**Related sample**: [Chart. Styling (custom CSS)](https://snippet.dhtmlx.com/p82iew5s)
@@ -81,7 +81,7 @@ For example:
## Adding template to scale labels
-
+
**Related sample**: [Chart. Text template for scale labels](https://snippet.dhtmlx.com/nhm3438n)
@@ -112,7 +112,7 @@ const chart = new dhx.Chart("chart_container", {
## Adding color gradient for bars
-
+
**Related sample**: [Chart. Bar chart. Gradient](https://snippet.dhtmlx.com/j3duyn2q)
@@ -157,7 +157,7 @@ const chart = new dhx.Chart("chart_container", {
## Adding template to tooltips
-
+
**Related sample**: [Chart. Tooltip template](https://snippet.dhtmlx.com/mbz7dkku)
@@ -197,7 +197,7 @@ const chart = new dhx.Chart("chart_container", {
## Adding template to text values of data items in bars
-
+
**Related sample**: [Chart. Show text](https://snippet.dhtmlx.com/o7ke2f1s)
@@ -248,7 +248,7 @@ const chart = new dhx.Chart("chart_container", {
## Adding template to values of data items in Pie and Donut charts
-
+
**Related sample**: [Chart. Value template](https://snippet.dhtmlx.com/o7ke2f1s)
diff --git a/docs/chart/index.md b/docs/chart/index.md
index c016ab87a..88edc3f56 100644
--- a/docs/chart/index.md
+++ b/docs/chart/index.md
@@ -10,7 +10,7 @@ DHTMLX Chart is a great tool for creating powerful charts for web applications.
both 2D and 3D presentation, different variants of data loading, and a whole kit of configuration settings for all elements of a chart interface.
Check [online samples for DHTMLX Chart](https://snippet.dhtmlx.com/bo82km4n?tag=chart).
-
+
## Features
diff --git a/docs/colorpicker/configuration.md b/docs/colorpicker/configuration.md
index 7caa733b6..4a07a729c 100644
--- a/docs/colorpicker/configuration.md
+++ b/docs/colorpicker/configuration.md
@@ -25,7 +25,7 @@ const palette = [
];
~~~
-
+
**Related sample**: [Colorpicker. Initialization](https://snippet.dhtmlx.com/ezk8rk4m)
@@ -46,7 +46,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
});
~~~
-
+
**Related sample**: [Colorpicker. Custom palette and custom colors](https://snippet.dhtmlx.com/097jjhb8)
@@ -54,7 +54,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
The default configuration of the Colorpicker palette includes a section with gray shades, which is shown at the top of palette. There is a possibility to hide this section showing just main colors: default or custom.
-
+
**Related sample**: [Colorpicker. Palette without gray shades](https://snippet.dhtmlx.com/b44fp8q2)
@@ -68,7 +68,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
## List of custom colors
-
+
When Colorpicker is rendered on a page, its list of custom (user-defined) colors is empty. You can change this configuration and specify custom colors that should be shown in the related section on initialization of
the component via the [](colorpicker/api/colorpicker_customcolors_config.md) configuration option. Colors should be specified as an array of strings in the Hex format:
@@ -92,7 +92,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
In this mode the palette is not available and only the picker is displayed.
-
+
**Related sample**: [Colorpicker. Picker only](https://snippet.dhtmlx.com/5zlvvwpl)
@@ -104,7 +104,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
});
~~~
-
+
{{note Note that in the **paletteOnly** mode the palette is displayed without the panel with custom (user-defined) colors.}}
@@ -131,6 +131,6 @@ const colorpicker = new dhx.Colorpicker("colorpicker", {
});
~~~
-
+
**Related sample**: [Colorpicker. Disable color transparency](https://snippet.dhtmlx.com/ewgu0aps?tag=colorpicker)
\ No newline at end of file
diff --git a/docs/colorpicker/customization.md b/docs/colorpicker/customization.md
index 69906b284..3494203f5 100644
--- a/docs/colorpicker/customization.md
+++ b/docs/colorpicker/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Colorpicker in the documentati
There is a possibility to make changes in the look and feel of a colorpicker.
-
+
**Related sample**: [Colorpicker. Styling (custom CSS)](https://snippet.dhtmlx.com/mnwi3sp0)
diff --git a/docs/colorpicker/index.md b/docs/colorpicker/index.md
index 6ec5a89a4..d609477cb 100644
--- a/docs/colorpicker/index.md
+++ b/docs/colorpicker/index.md
@@ -11,7 +11,7 @@ It possesses easy-to-configure interface that can be simply localized and custom
Check [online samples for DHTMLX Colorpicker](https://snippet.dhtmlx.com/097jjhb8?tag=colorpicker).
-
+
## Features
diff --git a/docs/combobox/configuration.md b/docs/combobox/configuration.md
index 086aa97e1..315fef852 100644
--- a/docs/combobox/configuration.md
+++ b/docs/combobox/configuration.md
@@ -16,7 +16,7 @@ const combo = new dhx.Combobox("combo_container", {
});
~~~
-
+
**Related sample**: [Combobox. Disabled](https://snippet.dhtmlx.com/ductsm0f)
@@ -35,7 +35,7 @@ const combo = new dhx.Combobox("combo_container", {
## Height of list of options and its items
-
+
**Related sample**: [Combobox. List height](https://snippet.dhtmlx.com/vilg4l7w)
@@ -103,7 +103,7 @@ const combo = new dhx.Combobox("combo_container",{
});
~~~
-
+
or
@@ -115,13 +115,13 @@ const combo = new dhx.Combobox("combo_container",{
});
~~~
-
+
**Related sample**: [Combobox. Label position](https://snippet.dhtmlx.com/2936fray)
## Number of selected options
-
+
**Related sample**: [Combobox. Items count](https://snippet.dhtmlx.com/fw2u2bww)
@@ -156,7 +156,7 @@ const combo = new dhx.Combobox("combo_container", {
## Placeholder
-
+
**Related sample**: [Combobox. Placeholder](https://snippet.dhtmlx.com/759z23gh)
@@ -182,7 +182,7 @@ const combobox = new dhx.Combobox("combo_container", {
To add a new item into the list of options, the user needs to type a new value into the input field and either press "Enter" or click on the appeared *Create "newValue"* option in the drop-down list.
-
+
**Related sample**: [Combobox. Multiselection, add new options (free text), select all button](https://snippet.dhtmlx.com/ui7pi7ty)
@@ -199,7 +199,7 @@ You can provide a combobox with the ability to edit/delete items via the user in
## Readonly mode
-
+
**Related sample**: [Combobox. Readonly](https://snippet.dhtmlx.com/igjsuf7y)
@@ -239,7 +239,7 @@ const combo = new dhx.Combobox("combo_container", {
## Template for ComboBox options
-
+
**Related sample**: [Combobox. HTML template](https://snippet.dhtmlx.com/z7cpj76i)
diff --git a/docs/combobox/customization.md b/docs/combobox/customization.md
index 0c56f1708..2276cf876 100644
--- a/docs/combobox/customization.md
+++ b/docs/combobox/customization.md
@@ -8,7 +8,7 @@ description: You can explore the customization of Combo Box in the documentation
## Styling
-
+
**Related sample**: [Combobox. Styling (custom CSS)](https://snippet.dhtmlx.com/lldd739i)
@@ -58,7 +58,7 @@ For example:
## Custom filter for options
-
+
It is possible to set a custom filtering function for the options of ComboBox via the [](combobox/api/combobox_filter_config.md) option. A custom function takes two parameters:
diff --git a/docs/combobox/index.md b/docs/combobox/index.md
index 33702656c..9a1d85ec3 100644
--- a/docs/combobox/index.md
+++ b/docs/combobox/index.md
@@ -10,7 +10,7 @@ DHTMLX ComboBox is an advanced select box that provides the ability to show sugg
displaying options in the list. Among other nice features there are tuning of the list of options and Combo Box input, selection of multiple options and data loading on request.
Check [online samples for DHTMLX ComboBox](https://snippet.dhtmlx.com/ui7pi7ty?tag=combobox).
-
+
## Features
diff --git a/docs/common_features/accessibility_support.md b/docs/common_features/accessibility_support.md
index 0ee75fa98..ac6f4f51f 100644
--- a/docs/common_features/accessibility_support.md
+++ b/docs/common_features/accessibility_support.md
@@ -32,14 +32,18 @@ There are special attributes used in the markup of DHTMLX Suite widgets that mak
### Grid
-There are **roles** and **attributes** for elements of grid, sorting, filters, editable cells to enable screen readers to interpret and navigate the columns and rows of the grid (enabled by default). Custom content should be marked manually.
+There are **roles** and **attributes** for elements of grid, sorting, filters, editable cells to enable screen readers to interpret and navigate the columns and rows of the grid (enabled by default). The semantics are always present and there is no flag to disable them. Custom content should be marked manually.
You can find the following **roles** and **attributes** in the DOM:
-- role: *grid*, *rowgroup*, *row*, *columnheader*, *gridcell*, *button*
-- aria attributes: *label*, *rowcount*, *colcount*, *rowindex*, *colindex*, *aria-sort*.
+- role: *grid* (or *treegrid* in the `type: "tree"` mode), *rowgroup*, *row*, *columnheader*, *gridcell*, *button*
+- aria attributes: *label*, *rowcount*, *colcount*, *rowindex*, *colindex*, *aria-sort*, *aria-selected*, *aria-readonly*, *aria-multiselectable*, and — for tree rows — *aria-level* and *aria-expanded*.
-Role presentation and aria-hidden are used to hide redundant content from the accessibility tree.
+In-place editors and header/footer filters get an accessible name derived from the column header text. Role presentation and aria-hidden are used to hide redundant content (resizers, sort icons, drag ghosts, the selection overlay) from the accessibility tree.
+
+:::info
+For the complete picture — the ARIA model, the keyboard zones (header/body/footer), the focus model, and configuration recipes — see the dedicated [Grid accessibility](grid/accessibility.md) guide.
+:::
### Chart
@@ -72,10 +76,10 @@ Role presentation and aria-hidden are used to hide redundant markup from the acc
All DHTMLX Suite widgets are provided with a keyboard navigation support. It allows using a Suite-based app without a mouse pointer. Basic rules include:
-- the "tab" key is used to navigate between widgets and clickable areas of the widgets
-- the "esc" key closes windows and editors
-- the "enter" is used to open and hide drop-down lists of select controls
-- the arrow keys are used to move selection or change active elements within widgets
+- the Tab key is used to navigate between widgets and clickable areas of the widgets
+- the Esc key closes windows and editors
+- the Enter is used to open and hide drop-down lists of select controls
+- the Arrow keys are used to move selection or change active elements within widgets
:::info
For the full list of built-in hotkeys, refer to the **Keyboard Navigation** articles of the following widgets:
diff --git a/docs/common_features/custom_scroll.md b/docs/common_features/custom_scroll.md
index e9b79a084..ddcc0fa9c 100644
--- a/docs/common_features/custom_scroll.md
+++ b/docs/common_features/custom_scroll.md
@@ -48,7 +48,7 @@ For more details on the custom scroll configuration, read [this article](helpers
You may notice, that all DHTMLX demos built with Optimus have the custom scroll enabled.
-
+
**View the live demos to check the feature:**
diff --git a/docs/common_features/using_typescript.md b/docs/common_features/using_typescript.md
index 3a049276b..5f35679d9 100644
--- a/docs/common_features/using_typescript.md
+++ b/docs/common_features/using_typescript.md
@@ -8,7 +8,7 @@ description: You can learn about TypeScript support in the documentation of the
The dhtmlxSuite library of version 6.5 and higher lets you work with DHTMLX components faster and more effectively by using TypeScript definitions.
-
+
The library provides a built-in support of Typescript that should work out of the box.
diff --git a/docs/dataview/configuration.md b/docs/dataview/configuration.md
index f86c52526..22c7d0336 100644
--- a/docs/dataview/configuration.md
+++ b/docs/dataview/configuration.md
@@ -8,7 +8,7 @@ description: You can explore the configuration of DataView in the documentation
## Arrow keys navigation
-
+
**Related sample**: [Dataview. Arrow navigation](https://snippet.dhtmlx.com/u7mgoly9)
@@ -100,7 +100,7 @@ const target = new dhx.DataView("dataview-target", {dragMode: "target", dragCopy
## Editing items
-
+
**Related sample**: [Dataview. Inline editing](https://snippet.dhtmlx.com/m8fbqcza)
@@ -112,7 +112,7 @@ const dataview = new dhx.DataView("dataview_container", {editable:true});
## Height of an item
-
+
**Related sample**: [Dataview. Setup Dataview item height](https://snippet.dhtmlx.com/cth9mwrf)
@@ -138,7 +138,7 @@ const dataview = new dhx.DataView("dataview_container", {
## Height of the Dataview
-
+
**Related sample**: [Dataview. Setup Dataview height](https://snippet.dhtmlx.com/g1k2l4q0)
@@ -158,7 +158,7 @@ const dataview = new dhx.DataView("dataview_container", {height: "400px"});
## Margins around DataView items
-
+
**Related sample**: [Dataview. Configure gap size](https://snippet.dhtmlx.com/ozsuww1q)
@@ -171,7 +171,7 @@ const dataview = new dhx.DataView("dataview_container", {itemsInRow: 4, gap: 20}
## Multiple selection of items
-
+
By default, you can select only one item in a dataview, since selection of another item resets selection of the previous one. To enable the possbility to select several DataView items, make use of the [](dataview/api/dataview_multiselection_config.md) configuration option:
@@ -192,7 +192,7 @@ const dataview = new dhx.DataView("dataview_container", {
## Number of items in a row
-
+
**Related sample**: [Dataview. Amount items in a row](https://snippet.dhtmlx.com/de4r8km3)
@@ -204,7 +204,7 @@ const dataview = new dhx.DataView("dataview_container", {itemsInRow: 5});
## Selection of items
-
+
The default configuration of DataView provides you with the selection feature that allows highlighting a DataView item. To disable selection in a DataView you need to set the [](dataview/api/dataview_selection_config.md) configuration property to *false*:
@@ -216,7 +216,7 @@ const dataview = new dhx.DataView("dataview_container", {
## Template for DataView items
-
+
**Related sample**: [Dataview. With template](https://snippet.dhtmlx.com/d6l6grr7)
diff --git a/docs/dataview/customization.md b/docs/dataview/customization.md
index 382042f57..535078a8f 100644
--- a/docs/dataview/customization.md
+++ b/docs/dataview/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of DataView in the documentation
There is a possibility to make changes in the look and feel of a dataview.
-
+
**Related sample**: [Dataview. Styling (custom CSS)](https://snippet.dhtmlx.com/j1yv94o8)
@@ -87,7 +87,7 @@ You can style particular cells in the dataview. For example, apply some color to
The image below and the related sample demonstrate another example of customization of Dataview items:
-
+
**Related sample**: [Dataview. Styling (custom CSS for item)](https://snippet.dhtmlx.com/kpnzizbf)
@@ -110,6 +110,6 @@ additional custom classes.
~~~
-
+
**Related sample**: [Dataview. Custom selection styles](https://snippet.dhtmlx.com/n98tzmzp)
diff --git a/docs/dataview/index.md b/docs/dataview/index.md
index bfa89a28e..c9cfb992e 100644
--- a/docs/dataview/index.md
+++ b/docs/dataview/index.md
@@ -10,7 +10,7 @@ DHTMLX DataView allows rendering a collection of objects according to a specifie
This component is especially useful, if you're creating an online store or an image gallery, or just want to display a number of similar objects on a page.
Check [online samples for DHTMLX DataView](https://snippet.dhtmlx.com/j1yv94o8?tag=dataview).
-
+
## Features
diff --git a/docs/form/avatar.md b/docs/form/avatar.md
index 4348dad7a..5a5103c5c 100644
--- a/docs/form/avatar.md
+++ b/docs/form/avatar.md
@@ -8,7 +8,7 @@ description: You can explore the Avatar of Form in the documentation of the DHTM
A compact but useful control for swift uploading of an avatar into a form.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/button.md b/docs/form/button.md
index f6302f61a..344cbc1b0 100644
--- a/docs/form/button.md
+++ b/docs/form/button.md
@@ -8,7 +8,7 @@ description: You can explore the Button of Form in the documentation of the DHTM
A simple button that can have an icon. Button can be *twoState* and can have a badge with a number, which can be useful for displaying the number of new messages, etc.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/calendar.md b/docs/form/calendar.md
index 59618625f..7d542721b 100644
--- a/docs/form/calendar.md
+++ b/docs/form/calendar.md
@@ -8,7 +8,7 @@ description: You can explore the DatePicker of Form in the documentation of the
An input with a calendar attached to it for selecting a date.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/checkbox.md b/docs/form/checkbox.md
index 0e667fa29..06a5e660c 100644
--- a/docs/form/checkbox.md
+++ b/docs/form/checkbox.md
@@ -8,7 +8,7 @@ description: You can explore the Checkbox of Form in the documentation of the DH
A control that allows displaying the specified value or change it to the opposite one.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/checkboxgroup.md b/docs/form/checkboxgroup.md
index a3cddf4c1..e9703282d 100644
--- a/docs/form/checkboxgroup.md
+++ b/docs/form/checkboxgroup.md
@@ -8,7 +8,7 @@ description: You can explore the CheckboxGroup of Form in the documentation of t
A control intended for creating groups of checkboxes.
-
+
**Related sample**: [Form. Checkbox groups](https://snippet.dhtmlx.com/p89u4ovb?tag=checkbox_group)
diff --git a/docs/form/colorpicker.md b/docs/form/colorpicker.md
index 31b26f53e..bb5289961 100644
--- a/docs/form/colorpicker.md
+++ b/docs/form/colorpicker.md
@@ -8,7 +8,7 @@ description: You can explore the ColorPicker of Form in the documentation of the
An input with a color picker attached to it for selecting a color.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/combo.md b/docs/form/combo.md
index 5f803ce54..892bf494d 100644
--- a/docs/form/combo.md
+++ b/docs/form/combo.md
@@ -8,7 +8,7 @@ description: You can explore the Combo of Form in the documentation of the DHTML
An input that represents an advanced select box with a set of options. It is able to provide suggestions while a user is typing text.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/configuration.md b/docs/form/configuration.md
index f6e87a61a..4253330fb 100644
--- a/docs/form/configuration.md
+++ b/docs/form/configuration.md
@@ -139,7 +139,7 @@ const form = new dhx.Form("form_container", {
## Making Form disabled
-
+
**Related sample**: [Form. Disabled](https://snippet.dhtmlx.com/7qjwg2sw)
diff --git a/docs/form/customization.md b/docs/form/customization.md
index 232d08857..f667c31ee 100644
--- a/docs/form/customization.md
+++ b/docs/form/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Form in the documentation of t
There is a possibility to make changes in the look and feel of a form.
-
+
**Related sample**: [Form. Styling (custom CSS)](https://snippet.dhtmlx.com/wnscgb50)
@@ -74,7 +74,7 @@ For example:
## Styling Form controls
-
+
**Related sample**: [Form. Styling (custom CSS)](https://snippet.dhtmlx.com/wnscgb50)
diff --git a/docs/form/fieldset.md b/docs/form/fieldset.md
index de2c2670c..4aeda496e 100644
--- a/docs/form/fieldset.md
+++ b/docs/form/fieldset.md
@@ -8,7 +8,7 @@ description: You can explore the Fieldset of Form in the documentation of the DH
A control that allows arranging the elements of the form controls into groups.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/how_to_start.md b/docs/form/how_to_start.md
index 67a2f32e2..6c5555879 100644
--- a/docs/form/how_to_start.md
+++ b/docs/form/how_to_start.md
@@ -69,7 +69,7 @@ Thus, the structure of your form will look like this:
- an Agree checkbox
- a Send button
-
+
To add controls inside a form, you should put them into a layout, either a vertical one (the **rows** attribute), or a horizontal one (the **cols** attribute). In the example below controls are arranged vertically, one under
another:
diff --git a/docs/form/index.md b/docs/form/index.md
index e422d7c17..2f8625c7d 100644
--- a/docs/form/index.md
+++ b/docs/form/index.md
@@ -9,7 +9,7 @@ description: You can have an overview of Form in the documentation of the DHTMLX
DHTMLX Form is a typical form widget that can contain a number of adjustable and easy-to-use controls, supports data validation and localization of labels.
Check [online samples for DHTMLX Form](https://snippet.dhtmlx.com/ikyyekxq?tag=form).
-
+
## Features
diff --git a/docs/form/input.md b/docs/form/input.md
index d4175ad31..2b8f1c7dc 100644
--- a/docs/form/input.md
+++ b/docs/form/input.md
@@ -8,7 +8,7 @@ description: You can explore the Input of Form in the documentation of the DHTML
An input field for typing some text inside.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/radiogroup.md b/docs/form/radiogroup.md
index 2a09590fd..4287aa77c 100644
--- a/docs/form/radiogroup.md
+++ b/docs/form/radiogroup.md
@@ -8,7 +8,7 @@ description: You can explore the RadioGroup of Form in the documentation of the
A control intended for creating groups of Radio buttons.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/select.md b/docs/form/select.md
index 3f7596bc1..fabe81ebc 100644
--- a/docs/form/select.md
+++ b/docs/form/select.md
@@ -8,7 +8,7 @@ description: You can explore the Select of Form in the documentation of the DHTM
An advanced select box that provides a set of options to choose from.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/simplevault.md b/docs/form/simplevault.md
index 86de28f78..ec0c3e3c9 100644
--- a/docs/form/simplevault.md
+++ b/docs/form/simplevault.md
@@ -8,7 +8,7 @@ description: You can explore the Simple Vault of Form in the documentation of th
A handy control for quick and easy uploading of a file or a set of files.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/slider.md b/docs/form/slider.md
index 2641184ef..12fa11225 100644
--- a/docs/form/slider.md
+++ b/docs/form/slider.md
@@ -8,7 +8,7 @@ description: You can explore the Slider of Form in the documentation of the DHTM
A control that allows selecting a numeric value by moving a thumb along a line with a fixed set of options.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/text.md b/docs/form/text.md
index 5f6b7fc84..1347702cb 100644
--- a/docs/form/text.md
+++ b/docs/form/text.md
@@ -8,7 +8,7 @@ description: You can explore the Text of Form in the documentation of the DHTMLX
A control for adding some text.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/textarea.md b/docs/form/textarea.md
index 35fd62a70..248f05a4e 100644
--- a/docs/form/textarea.md
+++ b/docs/form/textarea.md
@@ -8,7 +8,7 @@ description: You can explore the Textarea of Form in the documentation of the DH
A control that allows a user to enter a simple multi-line text.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/timepicker.md b/docs/form/timepicker.md
index 6ec4c25a2..ba661651c 100644
--- a/docs/form/timepicker.md
+++ b/docs/form/timepicker.md
@@ -8,7 +8,7 @@ description: You can explore the TimePicker of Form in the documentation of the
A control that allows a user to select time value either by moving handles along track bars or by entering hour and minutes values directly into related inputs.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/toggle.md b/docs/form/toggle.md
index 3666cbb38..6ce9461d9 100644
--- a/docs/form/toggle.md
+++ b/docs/form/toggle.md
@@ -8,7 +8,7 @@ description: You can explore the Toggle of Form in the documentation of the DHTM
A special button control that changes its state from pressed to the unpressed one when clicked.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/togglegroup.md b/docs/form/togglegroup.md
index 2567dce4e..935821660 100644
--- a/docs/form/togglegroup.md
+++ b/docs/form/togglegroup.md
@@ -8,7 +8,7 @@ description: You can explore the ToggleGroup of Form in the documentation of the
A control intended for creating groups of toggle buttons.
-
+
**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq)
diff --git a/docs/form/work_with_form.md b/docs/form/work_with_form.md
index 4cda2a88d..b33648cea 100644
--- a/docs/form/work_with_form.md
+++ b/docs/form/work_with_form.md
@@ -355,7 +355,7 @@ You can easily specify that an input is obligatory to be treated by a user with
While you've set `required:true` for a field, it gets an asterisk next to its label:
-
+
**Related sample**: [Form. Required](https://snippet.dhtmlx.com/0pr3var0)
@@ -365,7 +365,7 @@ The attribute is applicable to the input fields with the input types: "number",
Starting with v7.0, it is possible to add validation for number values entered in the input field.
-
+
You just need to specify the minimum and/or maximum values allowed in the input via the `min` and/or `max` attributes.
@@ -387,7 +387,7 @@ The attributes are applicable to the input fields with the input type: "number".
Starting from v7.0, you can easily limit the number of characters entered in an input or textarea field.
-
+
For that, you need to use the `minlength` and (or) `maxlength` attributes that check the length of the given value. Validation is successful if the length is greater than or equal to the `minlength` value and (or) less than or equal to the `maxlength` value.
@@ -597,7 +597,7 @@ form.clear();
## Setting focus to a control
-
+
Starting from v7.0, you can set focus to a Form control via the [setFocus()](form/api/form_setfocus_method.md) method. It takes either the name of the control or its id (if the name attribute is not defined in the config of the control) as a parameter:
diff --git a/docs/grid/accessibility.md b/docs/grid/accessibility.md
new file mode 100644
index 000000000..afa742ac3
--- /dev/null
+++ b/docs/grid/accessibility.md
@@ -0,0 +1,254 @@
+---
+sidebar_label: Accessibility
+title: JavaScript Grid - Accessibility
+description: You can learn about accessibility and keyboard navigation in DHTMLX Grid in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# Accessibility in DHTMLX Grid
+
+DHTMLX Grid is built to be operated entirely from the keyboard and to expose its structure and state to assistive technology. WAI-ARIA semantics are part of the rendered markup, and a single, coherent focus model spans the header, body, and footer. The semantics are always present — there is **no** configuration flag to disable them.
+
+## Capabilities
+
+| Area | Support |
+| ---- | ------- |
+| Keyboard operation | Full: cell navigation, editing, sorting, range selection, tree expand/collapse, and clipboard all have keyboard equivalents |
+| WAI-ARIA semantics | Built-in (`grid` / `treegrid` model), enabled always — no opt-in flag |
+| Focus model | A single tab stop per zone; focus moves between header, body, and footer |
+| Selection model | Two modes: single-cell/row (`selection`) and spreadsheet-style range (`blockSelection`) |
+| High-contrast display | Light and dark high-contrast themes (`contrast-light` / `contrast-dark`) |
+
+## Covered areas
+
+This documentation covers the Grid widget:
+
+- the **data body** — cells and rows, including tree mode (`type: "tree"`)
+- the **column header** — sortable headers and in-header filters
+- the **footer** — summaries and footer filters
+- the **inline editors**
+- the keyboard model that connects these zones.
+
+As with any embeddable component, the accessibility of the final page also depends on the host application (see [Host-page responsibilities](#host-page-responsibilities)).
+
+## WAI-ARIA support
+
+WAI-ARIA roles and attributes are added to the component markup automatically and are **on by default** — there is no flag to turn them off. The Grid exposes itself to assistive technology as an interactive grid (or treegrid) of rows and cells, with a separate group for the header and footer. The semantics are applied per structural part of the widget, so each part is announced with the correct role and state.
+
+### Grid container
+
+The following table lists the container role and the grid-wide attributes applied to the root grid element, which describe the grid as a whole:
+
+| Selector | Role / attribute | Purpose |
+| -------- | ---------------- | ------- |
+| `.dhx_grid` | `role="grid"` | Standard grid |
+| `.dhx_grid` | `role="treegrid"` | TreeGrid (`type: "tree"`) |
+| `.dhx_grid` | `aria-rowcount` | Total number of data rows |
+| `.dhx_grid` | `aria-colcount` | Number of visible columns |
+| `.dhx_grid` | `aria-readonly` | `"true"` when the grid is not editable |
+| `.dhx_grid` | `aria-multiselectable` | `"true"` when multi-selection is enabled |
+
+### Rows and cells
+
+The following table lists the roles and the position and state attributes applied to data rows and cells, which let assistive technology announce where the user is:
+
+| Selector | Role / attribute | Purpose |
+| -------- | ---------------- | ------- |
+| Data row | `role="row"` | A row of the grid |
+| Data row | `aria-rowindex` | 1-based row position |
+| Data cell | `role="gridcell"` | A data cell |
+| Data cell | `aria-colindex` | 1-based column position |
+| Data cell | `aria-readonly` | `"true"` when the cell is not editable |
+| Data cell | `aria-selected` | Selection state of the cell |
+
+### Tree (TreeGrid) rows
+
+The following table lists the hierarchy attributes applied to tree rows and the role on the expand/collapse toggle in TreeGrid mode (`type: "tree"`), which convey the row's depth and open/closed state:
+
+| Selector | Role / attribute | Purpose |
+| -------- | ---------------- | ------- |
+| Tree row | `aria-level` | Depth of the row in the hierarchy |
+| Tree row | `aria-expanded` | Open/closed state of a branch with children |
+| Tree row | `aria-selected` | Selection state of the row |
+| Expand/collapse toggle | `role="button"` + `aria-label` | `"Expand group"` / `"Collapse group"` |
+
+### Header and footer
+
+The following table lists the roles and attributes applied to the header and footer groups, rows, and cells, which expose the column headers, sort state, and filter controls:
+
+| Selector | Role / attribute | Purpose |
+| -------- | ---------------- | ------- |
+| Header/footer group | `role="rowgroup"` + `aria-rowcount` | Groups the header or footer rows |
+| Header/footer row | `role="row"` + `aria-rowindex` | A header or footer row |
+| Header cell | `role="columnheader"` + `aria-sort` | Column header; `aria-sort` is `none` / `ascending` / `descending` |
+| Footer cell | `role="gridcell"` + `aria-colindex` | A footer (summary) cell |
+| Content (filter) cell | `role="gridcell"` | Header/footer cell hosting a filter control |
+| Sort affordance | `role="button"` + `aria-label="Sort by …"` | Keyboard- and pointer-activatable sort trigger |
+
+### Editors and filters
+
+In-place editor inputs and header/footer filters receive an accessible name derived from column header text, so screen-reader users hear which column they are editing or filtering. For example, a filter input is labeled `"Filter {column}"` and a date filter `"Filter by date: {column}"`.
+
+### Hidden and decorative elements
+
+Resizer grips, sort icons, sort-order counters, drag ghosts, drop indicators, and the selection overlay are removed from the accessibility tree with `aria-hidden="true"` / `role="presentation"`, so screen readers are not cluttered with redundant markup.
+
+## Selection modes
+
+The keyboard behavior of the body depends on which selection system is enabled. The two are independent and drive different ARIA output and shortcut semantics.
+
+### 1. Cell / row selection — selection
+
+A single active cell (or row) moves with the arrow keys. This populates `aria-selected` on the focused cell or row. Extending the selection with Shift is enabled only when `multiselection: true`; without it, Shift+arrow moves the active cell.
+
+~~~jsx
+// Single active cell, navigable with arrows / Tab / Home / End / Page Up·Down
+const grid = new dhx.Grid("grid_container", {
+ columns: [/* ... */],
+ data: dataset,
+ selection: "complex", // "cell" | "row" | "complex"
+ multiselection: true, // enables Shift+Arrow multi-select
+ keyNavigation: true // default
+});
+~~~
+
+| `selection` value | Meaning |
+| --- | --- |
+| `"cell"` | One active cell; Shift+arrow extends when `multiselection: true` |
+| `"row"` | One active row; arrows move the whole row, `aria-selected` is on the row |
+| `"complex"` | Cell- and row-style selection combined |
+| `true` | Equivalent to cell selection |
+| *falsy / unset* | Selection (and `aria-selected`) disabled |
+
+### 2. Range / block selection — blockSelection
+
+Spreadsheet-style rectangular ranges. The arrow keys move the range anchor; Shift+arrows grow or shrink the rectangle; Delete clears the range (when editing is enabled). This applies in **"range"** mode.
+
+~~~jsx
+// Google-Sheets-style range selection
+const grid = new dhx.Grid("grid_container", {
+ columns: [/* ... */],
+ data: dataset,
+ blockSelection: true, // range mode (Shift+Arrow grows the rectangle)
+ editable: true, // allows Delete to clear the range
+ keyNavigation: true
+});
+~~~
+
+| `blockSelection` value | Mode | Keyboard effect |
+| ---------------------- | ---- | --------------- |
+| `true` | range | Arrows move the range; Shift+arrows extend the rectangle; Delete clears it |
+
+Both systems coexist with the same navigation keys; the Grid responds to whichever selection system is active.
+
+## Keyboard navigation
+
+Keyboard navigation is on by default (`keyNavigation: true`); set `keyNavigation: false` to opt out. Focus enters the Grid through hidden focus sentinels placed before the header and after the footer, which direct it into the correct zone. Within each zone a single cell is the tab stop, and the arrow keys move between cells from there.
+
+Shortcuts are organized into **zones** — body, header, footer — and resolved by where focus currently is. The full reference is in the [Keyboard navigation](grid/configuration.md#keyboard-navigation) article; the tables below summarize it.
+
+### Grid body
+
+| Keys | Action | Selection mode |
+| ---- | ------ | -------------- |
+| ↑ / ↓ / ← / → | Move the selected cell one row/column (↑ from the first row enters the header; ↓ from the last row enters the footer when a footer exists) | both |
+| Ctrl + arrow | Jump the selection to the first/last cell in that direction | both |
+| Shift + arrow | Extend the selection by one cell | `selection` with `multiselection: true`, or `blockSelection` range |
+| Ctrl + Shift + arrow | Extend the selection to the edge | as above |
+| Home / End | Move to the first / last column of the current row | both |
+| Ctrl + Home / Ctrl + End | Move to the first / last cell of the grid | both |
+| Shift + Home / End, Ctrl + Shift + Home / End | Extend the selection to the row/grid extent | extend-capable modes |
+| Page Up / Page Down | Move the selected cell up / down by one page of visible rows | both |
+| Shift + Page Up / Page Down | Extend the selection by one page | extend-capable modes |
+| Enter | Open the editor (or toggle a boolean cell); when editing, commit and close | requires `editable` |
+| F2 | Open the editor of the selected cell (non-boolean) | requires `editable` |
+| Space | Toggle a boolean cell | requires `editable` |
+| Escape | Cancel editing without saving | requires `editable` |
+| Tab / Shift + Tab | Move to the next / previous cell, wrapping rows; exits to the footer / header at the ends | both |
+| Delete | Clear the selected range | `blockSelection` range mode + `editable` |
+| Ctrl + Z / Ctrl + Shift + Z | Undo / Redo | History module |
+| Ctrl + Enter | Expand / collapse the row (`type: "tree"`) | TreeGrid |
+| → / ← (tree column) | Expand / collapse a branch, or move to first child / parent | TreeGrid |
+
+### Header
+
+| Keys | Action |
+| ---- | ------ |
+| ← / → | Move between header cells (colspan-aware) |
+| ↑ / ↓ | Move between header rows (multi-row header); ↑ from the first row has no effect, ↓ from the last row moves into the body |
+| Enter / Space | Sort by the column; on a filter cell, Enter activates the filter control |
+| Shift + Enter | Toggle multi-sort for the column (requires `multiSort`) |
+| Tab / Shift + Tab | Move within the header with row wrapping; exits to the body / out of the grid at the ends |
+| Escape | Deactivate a filter control (restoring focus to its cell), or return focus to the body |
+
+### Footer
+
+| Keys | Action |
+| ---- | ------ |
+| ← / → | Move between footer cells (colspan-aware) |
+| ↑ / ↓ | Move between footer rows (multi-row footer); ↑ from the first row moves into the body, ↓ from the last row has no effect |
+| Enter | Activate a footer filter control |
+| Tab / Shift + Tab | Move within the footer with row wrapping; exits the grid / to the body at the ends |
+| Escape | Deactivate a filter control, or return focus to the body |
+
+:::note
+Navigation is **span-aware**: movement across merged (colspan/rowspan) header and footer cells stays predictable, and the logical navigation row is preserved. When focus reaches an off-screen (virtualized) column, the Grid scrolls it into view automatically.
+:::
+
+## Assistive technology
+
+What the Grid exposes to assistive technology is driven entirely by the ARIA markup above. Rows and cells carry their position (`aria-rowindex` / `aria-colindex`) against the grid totals (`aria-rowcount` / `aria-colcount`), so position is announced even when rows are virtualized. Selection is exposed through `aria-selected`, editability through `aria-readonly`, sort state through `aria-sort`, and — in tree mode (`type: "tree"`) — hierarchy through `aria-level` and `aria-expanded`.
+
+## High contrast and focus
+
+- **High-contrast themes.** Light and dark high-contrast themes ship with the library (`contrast-light` and `contrast-dark`), activated by setting `data-dhx-theme="contrast-light"` or `data-dhx-theme="contrast-dark"`. See the [Themes](/themes/) guide and the [Light High Contrast](themes/contrast_light_theme.md) / [Dark High Contrast](themes/contrast_dark_theme.md) pages for details.
+- **Visible focus.** Focus is tracked per zone by the roving-tabindex model, so the active cell is the single tab stop and moves predictably with the arrow keys.
+
+## Configuration recipes
+
+~~~jsx
+// A. Cell navigation (single active cell)
+new dhx.Grid("grid_container", {
+ columns, data,
+ selection: "complex",
+ multiselection: true, // Shift+Arrow multi-select
+ keyNavigation: true, // default
+ sortable: true // default — keyboard sort in headers
+});
+
+// B. Spreadsheet-style range selection
+new dhx.Grid("grid_container", {
+ columns, data,
+ blockSelection: true, // range mode: Shift+Arrow grows the rectangle, Delete clears
+ editable: true
+});
+
+// C. TreeGrid (adds role="treegrid", aria-level, aria-expanded,
+// and arrow-key expand/collapse)
+new dhx.Grid("grid_container", {
+ columns, data,
+ type: "tree",
+ selection: "complex"
+});
+
+// WAI-ARIA semantics are always emitted — there is no flag to toggle them.
+~~~
+
+Related articles:
+
+- [Keyboard navigation](grid/configuration.md#keyboard-navigation)
+- [keyNavigation](grid/api/grid_keynavigation_config.md)
+- [selection](grid/api/grid_selection_config.md)
+- [blockSelection](grid/api/grid_blockselection_config.md)
+- [TreeGrid mode](grid/treegrid_mode.md)
+
+## Host-page responsibilities
+
+A few accessibility requirements live at the page level, not inside the component. Make sure the host document:
+
+- sets a document language, e.g. ``;
+- provides a page `
` and wraps the grid in an appropriate landmark (e.g. ``);
+- gives the grid container an accessible name where multiple widgets share a page.
+
+## Reference
+
+- [WAI-ARIA Authoring Practices: Grid / Treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/)
diff --git a/docs/grid/api/grid_editable_config.md b/docs/grid/api/grid_editable_config.md
index 896a9f373..66536d144 100644
--- a/docs/grid/api/grid_editable_config.md
+++ b/docs/grid/api/grid_editable_config.md
@@ -25,6 +25,10 @@ const grid = new dhx.Grid("grid_container", {
**Related sample**: [Grid. Editing with different editors (combobox, select, multiselect, boolean, date)](https://snippet.dhtmlx.com/w2cdossn)
+**Related articles:**
+- [Keyboard navigation](grid/configuration.md#keyboard-navigation)
+- [Grid accessibility](grid/accessibility.md)
+
@changelog: added in v6.4
[comment]: # (@related:grid/initialization.md#initialize-grid grid/configuration.md#editing-grid-and-separate-columns)
diff --git a/docs/grid/api/grid_keynavigation_config.md b/docs/grid/api/grid_keynavigation_config.md
index 74e239cd5..30eca6530 100644
--- a/docs/grid/api/grid_keynavigation_config.md
+++ b/docs/grid/api/grid_keynavigation_config.md
@@ -27,8 +27,8 @@ const grid = new dhx.Grid("grid_container", {
**Related sample**: [Grid. Key navigation](https://snippet.dhtmlx.com/y9kdk0md)
-You need to set the [selection](grid/api/grid_selection_config.md) and [editable](grid/api/grid_editable_config.md) properties in the configuration object of Grid to enable all available shortcut keys. Read the details in the [Key Navigation](grid/configuration.md#keyboard-navigation) article.
+You need to set the [selection](grid/api/grid_selection_config.md) and [editable](grid/api/grid_editable_config.md) properties in the configuration object of Grid to enable all available shortcut keys. Read the details in the [Key Navigation](grid/configuration.md#keyboard-navigation) article and in the [Grid accessibility](grid/accessibility.md) guide.
-@changelog: added in v6.3
+@changelog: added in v6.3; the keyboard navigation model was extended in v9.3.5
[comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#keyboard-navigation)
diff --git a/docs/grid/api/grid_selection_config.md b/docs/grid/api/grid_selection_config.md
index 578da658f..d16749acb 100644
--- a/docs/grid/api/grid_selection_config.md
+++ b/docs/grid/api/grid_selection_config.md
@@ -27,6 +27,7 @@ When you set `selection:true`, the "complex" mode is applied.
**Related sample**: [Grid. Selection](https://snippet.dhtmlx.com/ad6roqsx)
-**Related articles:**
+**Related articles:**
- [Selection](grid/configuration.md#selection)
- [Work with Selection object](grid/usage_selection.md)
+- [Grid accessibility](grid/accessibility.md)
diff --git a/docs/grid/api/grid_type_config.md b/docs/grid/api/grid_type_config.md
index b92331273..79a25b486 100644
--- a/docs/grid/api/grid_type_config.md
+++ b/docs/grid/api/grid_type_config.md
@@ -24,4 +24,6 @@ const grid = new dhx.Grid("grid_container", {
-**Related article:** [TreeGrid mode](grid/treegrid_mode.md)
\ No newline at end of file
+**Related articles:**
+- [TreeGrid mode](grid/treegrid_mode.md)
+- [Grid accessibility](grid/accessibility.md)
diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md
index e7c859570..e4f9cc0aa 100644
--- a/docs/grid/configuration.md
+++ b/docs/grid/configuration.md
@@ -604,7 +604,7 @@ const grid = new dhx.Grid("grid_container", {
- setting HTML content for a particular column
-
+
If you want to add custom elements into cells of the specified column, you need to set the `htmlEnable:true` property in the [configuration of a column](grid/api/api_gridcolumn_properties.md):
@@ -1126,7 +1126,7 @@ const grid = new dhx.Grid("grid", {
In case a user enters a value that goes beyond the limits specified by the above settings, the entered value is highlighted in red:
-
+
If the user ignores the warning and still tries to enter an unallowable value, it will be replaced with the minimum/maximum value defined in the `editorConfig` object by the `min/max` values. Thus, in the above example the entered value `200` will be replaced with `100`, since it is the upper limit set in the editor configuration.
@@ -1163,11 +1163,11 @@ From v7.3, you may allow end users to add new options into the combobox editor (
The new option will be added into the combobox after the user types a new value into the input field and either presses "Enter" or clicks on the appeared *Create "newValue"* option in the drop-down list.
-
+
At the same time, the created option will also appear in the drop-down list of the header/footer filters ([content: "selectFilter" | "comboFilter"](#headerfooter-filters)) of the column:
-
+
> To localize the *Create* option, translate the corresponding string and apply a ready locale to the Combobox component:
@@ -1623,11 +1623,11 @@ You can define the logic of setting the position of the Grid footer as well as o
- `relative` - (default) the footer follows the content immediately. If the number of rows is small and doesn't fill the container, the footer moves up to stay attached with the last row.
-
+
- `bottom` - the footer and bottom-pinned (frozen) rows are strictly locked to the bottom edge of the container. They remain at the base of the component even if the content takes only a part of the available height.
-
+
Here is the example of positioning the footer and a frozen row at the bottom of the Grid, as presented in the above image:
@@ -2178,7 +2178,7 @@ The row expander functionality allows using nested content in Grid sub-rows. You
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-
+
### Adding sub-rows
@@ -2353,7 +2353,7 @@ const grid = new dhx.Grid("grid_container", {
});
~~~
-
+
In the above example the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) config set as a callback function defines that sub-rows with the height 250px will be created for rows that have some data. For rows without data the `height:0` setting is specified, so sub-rows won't be created for these rows.
@@ -2499,7 +2499,7 @@ const grid = new dhx.Grid("grid_container", {
It is possible to create as many levels of nested subgrids, as necessary.
-
+
To specify the structure of a multi-level Grid nesting, do the following:
@@ -2763,7 +2763,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac
The [`DragPanel`](grid/usage_dragpanel.md) module allows configuring the drag-n-drop functionality in Grid. It provides settings for adjusting the look and feel of the drag panel that appears when the drag-n-drop functionality is activated. Check the details below.
-
+
To initialize the `DragPanel` module, you should enable the [`dragPanel`](grid/api/grid_dragpanel_config.md) property in the Grid configuration together with the [row Drag-and-Drop](#drag-n-drop) functionality (e.g. via the `dragItem: "row"` or `dragItem: "both"` properties). For example:
@@ -3168,23 +3168,23 @@ The navigation shortcut keys and keys combinations that Grid enables by default
- | PageUp |
+ PageUp |
scrolls Grid up to the height of the visible content (without change of the selected cell) |
- | PageDown |
+ PageDown |
scrolls Grid down to the height of the visible content (without change of the selected cell) |
- | Home |
+ Home |
navigates to the beginning of the Grid content (without change of the selected cell) |
- | End |
+ End |
navigates to the end of the Grid content (without change of the selected cell) |
- | Ctrl+Enter |
+ Ctrl+Enter |
expands/collapses the parent item in the TreeGrid mode |
@@ -3226,43 +3226,43 @@ The list of the shortcut keys and their combinations used for moving selection b
- | ArrowUp |
+ ArrowUp |
moves selection to the previous vertical cell |
- | ArrowDown |
+ ArrowDown |
moves selection to the next vertical cell |
- | ArrowLeft |
+ ArrowLeft |
moves selection to the previous horizontal cell |
- | ArrowRight |
+ ArrowRight |
moves selection to the next horizontal cell |
- | Ctrl+ArrowUp |
+ Ctrl+ArrowUp |
moves selection to the first vertical cell |
- | Ctrl+ArrowDown |
+ Ctrl+ArrowDown |
moves selection to the last vertical cell |
- | Ctrl+ArrowLeft |
+ Ctrl+ArrowLeft |
moves selection to the first horizontal cell |
- | Ctrl+ArrowRight |
+ Ctrl+ArrowRight |
moves selection to the last horizontal cell |
- | Tab |
+ Tab |
moves selection to the next horizontal cell or the first cell of the next row |
- | Shit+Tab |
+ Shift+Tab |
moves selection to the previous horizontal cell or to the first cell of the previous row |
@@ -3273,35 +3273,35 @@ The combinations of the shortcut keys listed below do not work when the `selecti
- | Shift+ArrowUp |
+ Shift+ArrowUp |
moves selection to the previous vertical cell with the change of the selected cells |
- | Shift+ArrowDown |
+ Shift+ArrowDown |
moves selection to the next vertical cell with the change of the selected cells |
- | Shift+ArrowLeft |
+ Shift+ArrowLeft |
moves selection to the previous horizontal cell with the change of the selected cells |
- | Shift+ArrowRight |
+ Shift+ArrowRight |
moves selection to the next horizontal cell with the change of the selected cells |
- | Ctrl+Shift+ArrowUp |
+ Ctrl+Shift+ArrowUp |
moves selection to the first vertical cell with the change of the selected cells |
- | Ctrl+Shift+ArrowDown |
+ Ctrl+Shift+ArrowDown |
moves selection to the last vertical cell with the change of the selected cells |
- | Ctrl+Shift+ArrowLeft |
+ Ctrl+Shift+ArrowLeft |
moves selection to the first horizontal cell with the change of the selected cells |
- | Ctrl+Shift+ArrowRight |
+ Ctrl+Shift+ArrowRight |
moves selection to the last horizontal cell with the change of the selected cells |
@@ -3330,15 +3330,15 @@ The list of the shortcut keys for editing is given below:
- | Enter |
+ Enter |
opens the editor in the selected cell. If the editor is currently opened - closes the editor and saves changes |
- | Escape |
+ Escape |
closes the editor of the selected cell without saving |
- | Delete |
+ Delete |
clears data in the selected cells. Works only with the `BlockSelection` module in the "range" mode |
@@ -3357,67 +3357,67 @@ The module supports keyboard navigation for selecting and managing ranges, simil
- | ArrowUp |
+ ArrowUp |
resets the selected range and moves the focus to the previous vertical cell, setting the initially selected cell if no selection is active |
- | ArrowDown |
+ ArrowDown |
resets the selected range and moves the focus to the next vertical cell, setting the initially selected cell if no selection is active |
- | ArrowLeft |
+ ArrowLeft |
resets the selected range and moves the focus to the previous horizontal cell, setting the initially selected cell if no selection is active |
- | ArrowRight |
+ ArrowRight |
resets the selected range and moves the focus to the next horizontal cell, setting the initially selected cell if no selection is active |
- | Shift+ArrowUp |
+ Shift+ArrowUp |
extends the selected range from the current initial cell to the previous vertical cell |
- | Shift+ArrowDown |
+ Shift+ArrowDown |
extends the selected range from the current initial cell to the next vertical cell |
- | Shift+ArrowLeft |
+ Shift+ArrowLeft |
extends the selected range from the current initial cell to the previous horizontal cell |
- | Shift+ArrowRight |
+ Shift+ArrowRight |
extends the selected range from the current initial cell to the next horizontal cell |
- | Ctrl+ArrowUp |
+ Ctrl+ArrowUp |
resets the selected range and moves the focus to the first vertical cell |
- | Ctrl+ArrowDown |
+ Ctrl+ArrowDown |
resets the selected range and moves the focus to the last vertical cell |
- | Ctrl+ArrowLeft |
+ Ctrl+ArrowLeft |
resets the selected range and moves the focus to the first horizontal cell |
- | Ctrl+ArrowRight |
+ Ctrl+ArrowRight |
resets the selected range and moves the focus to the last horizontal cell |
- | Ctrl+Shift+ArrowUp |
+ Ctrl+Shift+ArrowUp |
extends the selected range to the first vertical cell |
- | Ctrl+Shift+ArrowDown |
+ Ctrl+Shift+ArrowDown |
extends the selected range to the last vertical cell |
- | Ctrl+Shift+ArrowLeft |
+ Ctrl+Shift+ArrowLeft |
extends the selected range to the first horizontal cell |
- | Ctrl+Shift+ArrowRight |
+ Ctrl+Shift+ArrowRight |
extends the selected range to the last horizontal cell |
@@ -3428,7 +3428,7 @@ The following shortcut key and mouse combination is available:
- | Shift + click |
+ Shift + click |
sets the end cell of the range, extending the selection from the current initial cell |
@@ -3439,8 +3439,8 @@ The following shortcut key is available when the [`editable` mode](grid/api/grid
- | Delete |
+ Delete |
allows clearing the selected cells |
-
\ No newline at end of file
+
diff --git a/docs/grid/customization.md b/docs/grid/customization.md
index fd7ed8500..063eb3ae6 100644
--- a/docs/grid/customization.md
+++ b/docs/grid/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Grid in the documentation of t
There is a possibility to make changes in the look and feel of a grid.
-
+
**Related sample**: [Grid. Styling (custom CSS)](https://snippet.dhtmlx.com/c5tr3s5r)
@@ -69,7 +69,7 @@ For example:
## Styling selection
-
+
**Related sample**: [Grid. Styling selection (custom CSS)](https://snippet.dhtmlx.com/xs7bixmg)
@@ -101,7 +101,7 @@ Here is an example of how you can style selection in Grid:
## Styling header cells
-
+
You can easily set some styling to the text of header cells by applying some inline style or a CSS class to the **text** property of the header of a column:
@@ -175,7 +175,7 @@ You can easily set some styling to the text of footer cells by applying some inl
## Styling rows
-
+
It is possible to change the appearance of grid rows by applying custom CSS styles to them. There are two ways to do it:
@@ -235,7 +235,7 @@ where:
## Styling cells
-
+
It is easy to style necessary cells using the **addCellCss()** method. It takes three parameters:
@@ -282,7 +282,7 @@ It is easy to style necessary cells using the **addCellCss()** method. It takes
## Adding custom marks to cells
-
+
You can mark particular cells in a grid using the **mark** property of a column configuration. You need to set its value as a function that takes the following parameters:
@@ -390,13 +390,13 @@ It is also possible to highlight cells with minimum and (or) maximum values in a
~~~
-
+
**Related sample**: [Grid. Mark cells](https://snippet.dhtmlx.com/buirf16n)
## Adding template to cells
-
+
It is possible to customize the content of cells of Grid via the **template** property of a [column configuration](grid/api/api_gridcolumn_properties.md). The template option is a function that takes three parameters:
@@ -469,7 +469,7 @@ const grid = new dhx.Grid("grid_container", {
## Adding template to tooltip
-
+
Starting with v7.1, you can customize the content of the tooltip of a column via the [tooltipTemplate](grid/api/api_gridcolumn_properties.md) configuration option of the [column](grid/configuration.md#columns). The **tooltipTemplate** function takes three parameters:
diff --git a/docs/grid/index.md b/docs/grid/index.md
index 6da190f0a..f2d156ae7 100644
--- a/docs/grid/index.md
+++ b/docs/grid/index.md
@@ -10,7 +10,7 @@ DHTMLX Grid is a flexible, smart, and easy-to-use JavaScript component which all
Check [online samples for DHTMLX Grid](https://snippet.dhtmlx.com/1mxmshax?tag=grid).
-
+
## Features
diff --git a/docs/grid/treegrid_mode.md b/docs/grid/treegrid_mode.md
index e2ce1e879..e11df0b4a 100644
--- a/docs/grid/treegrid_mode.md
+++ b/docs/grid/treegrid_mode.md
@@ -12,7 +12,7 @@ The TreeGrid mode of the Grid component is available in the **PRO** version only
TreeGrid mode of the Grid component allows showing the nested tabular data.
-
+
## Initialization
@@ -217,7 +217,7 @@ The images below show drag-n-drop behaviour of items within a Grid in the TreeGr
| Dragging an item | Result |
|-----------------------------------------------------------|-----------------------------------------------------------|
-| |  |
+| |  |
- "sibling" - a dragged item becomes a sibling of the item it is dragged to
@@ -225,7 +225,7 @@ The images below show the drag-n-drop behaviour of items within a Grid in the Tr
| Dragging an item | Result |
|----------------------------------------------------------- |----------------------------------------------------------- |
-| |  |
+| |  |
- "complex" - a dragged item can become both a child or a sibling of a target item, depending on the position specified by highlighting
diff --git a/docs/grid/usage.md b/docs/grid/usage.md
index 74c99588a..a4596ec6a 100644
--- a/docs/grid/usage.md
+++ b/docs/grid/usage.md
@@ -349,7 +349,7 @@ The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX S
You can sort Grid by multiple columns simultaneously.
-
+
**Related sample**: [Grid. Sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/4ej0i3qi)
@@ -373,7 +373,7 @@ grid.data.sort({ by: "task_status", dir: "asc" });
grid.data.sort({ by: "animal_type", dir: "asc" });
~~~
-
+
**Related sample**: [Grid. Grouping with sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/786zr190)
diff --git a/docs/grid/usage_blockselection.md b/docs/grid/usage_blockselection.md
index 1c8eae3db..2450a139c 100644
--- a/docs/grid/usage_blockselection.md
+++ b/docs/grid/usage_blockselection.md
@@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac
You can manage block selection within a grid via the API of the [`BlockSelection`](grid/configuration.md#managing-block-selection-in-grid) module. It allows selecting ranges of cells using the mouse pointer, touch input, or keyboard navigation, visualizing the selection, and controlling behavior through various modes and handlers. It also supports an [event system](grid/api/api_overview.md#blockselection-events) to track user actions, including keyboard and mouse combinations.
-
+
## Initializing the BlockSelection module
diff --git a/docs/grid/usage_dragpanel.md b/docs/grid/usage_dragpanel.md
index 3f536a3c3..70bd4b755 100644
--- a/docs/grid/usage_dragpanel.md
+++ b/docs/grid/usage_dragpanel.md
@@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac
The `DragPanel` module provides auxiliary functionality for moving rows in the **dhx.Grid** component.
-
+
The module is automatically activated when the [Drag-and-Drop functionality](grid/configuration.md#drag-n-drop) for rows is enabled and conflicting configurations, such as the [`BlockSelection`](grid/usage_blockselection.md) or [`Clipboard`](grid/usage_clipboard.md) modules, are used.
diff --git a/docs/grid/usage_selection.md b/docs/grid/usage_selection.md
index 329b2d40b..c0026a3f9 100644
--- a/docs/grid/usage_selection.md
+++ b/docs/grid/usage_selection.md
@@ -49,7 +49,7 @@ You can set selection to one or more rows or cells using the [`setCell()`](grid/
### Setting selection to a cell
-
+
The example below shows how to highlight the first cell in the "Yearly Change" column:
@@ -78,7 +78,7 @@ The `multiselection` property is disabled.
You can highlight the desired cells when the [`multiselection:true`](grid/api/grid_multiselection_config.md) and the [`selection:"cell"`](grid/api/grid_selection_config.md) properties are set:
-
+
~~~jsx {5,6}
const grid = new dhx.Grid("grid_container", {
@@ -99,7 +99,7 @@ grid.selection.setCell(grid.data.getId(3),"netChange", true, false);
It is also possible to select a range of cells at once:
-
+
For that, manipulate the `ctrlUp` and `shiftUp` parameters accordingly:
diff --git a/docs/integration/suite_and_backend.md b/docs/integration/suite_and_backend.md
index 1afbfeb7a..4d6065c72 100644
--- a/docs/integration/suite_and_backend.md
+++ b/docs/integration/suite_and_backend.md
@@ -6,7 +6,7 @@ description: You can explore how to connect DHTMLX Suite to a backend. Browse de
# How to connect DHTMLX Suite to a backend
-
+
DHTMLX Suite 9 or DHTMLX components don't have any special requirements for the backend. They can be easily connected with any backend platform which supports the REST API (RESTful API). Besides, the DHTMLX library allows providing a [multi-user backend](#multiuser-real-time-updated-backend-save-method-getting-editing-deleting-and-sending-data) for any Suite component.
@@ -34,7 +34,7 @@ In the examples pack, you will find:
### Form. Sending data
-
+
A nice Form to collect data. Easy to use and modify.
@@ -42,7 +42,7 @@ The following request method is used in this example: `POST`.
### Simple Vault. Sending data
-
+
Ready to use. The Simple Vault for files and folders.
@@ -50,7 +50,7 @@ The following request method is used in this example: `POST`.
### DataView. Getting data
-
+
One of the best ways to organize and display objects with similar information.
@@ -58,7 +58,7 @@ The following request method is used in this example: `GET`.
### List. Getting data
-
+
A List is another convenient way to organize information.
@@ -66,7 +66,7 @@ The following request method is used in this example: `GET`.
### Chart. Getting data
-
+
The Chart can help you visualize your data. It is interactive and useful for comparing the data you need.
@@ -74,7 +74,7 @@ The following request method is used in this example: `GET`.
### Grid. Getting data, inline editing, and sending data
-
+
Sorting and searching options are shown in the Grid example. You can also check how selection of rows and cells works.
@@ -82,7 +82,7 @@ The following request methods are used in this example: `GET`, `PUT`.
### Tree. Getting data, inline editing, and sending data
-
+
The sample of a Tree widget shows you the way to organize the information in a tree-like structure. You can drag-and-drop the items, rename them, and change the current example's structure.
@@ -90,9 +90,9 @@ The following request methods are used in this example: `GET`, `PUT`.
### DataView with Form and Window. Getting, editing, deleting, and sending data
-
+
-
+
This example of DataView shows you more opportunities to manipulate the widget. Click the card to edit or delete it. Add a new card with the help of the corresponding button.
@@ -100,9 +100,9 @@ The following request methods are used in this example: `GET`, `PUT`, `POST`, `D
### List with Form and Window. Getting, editing, deleting, and sending data
-
+
-
+
The example of an interactive List shows you the opportunities to delete and edit cards, add a new card.
@@ -110,9 +110,9 @@ The following request methods are used in this example: `GET`, `PUT`, `POST`, `D
### Grid with Form and Window. Getting, editing, deleting, and sending data
-
+
-
+
The interactive Grid example helps you understand how simple you can manipulate the widget. You can also easily use this example in your own project.
@@ -120,7 +120,7 @@ The following request methods are used in this example: `GET`, `PUT`, `POST`, `D
### Save method. Getting, editing, deleting, and sending data
-
+
The example is created to show you how to save the changes made in data to the backend via the `save()` method of DataCollection.
diff --git a/docs/layout/cell_configuration.md b/docs/layout/cell_configuration.md
index a39201930..bf890d15a 100644
--- a/docs/layout/cell_configuration.md
+++ b/docs/layout/cell_configuration.md
@@ -259,4 +259,4 @@ The available values of the option are "line", "wide", "space", "none".
| type:"line" | type:"wide" | type:"space" | type:"none" |
| ----------------------------------- | ----------------------------------- | ------------------------------------ | ----------------------------------------- |
-|  |  |  |  |
+|  |  |  |  |
diff --git a/docs/layout/customization.md b/docs/layout/customization.md
index 55b75dc6a..3169dc655 100644
--- a/docs/layout/customization.md
+++ b/docs/layout/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Layout in the documentation of
There is a possibility to make changes in the look and feel of a layout by styling its cells.
-
+
**Related sample**: [Layout. Styling (custom CSS)](https://snippet.dhtmlx.com/pwxmf0lx)
diff --git a/docs/layout/index.md b/docs/layout/index.md
index 740ae6c4e..d1067608c 100644
--- a/docs/layout/index.md
+++ b/docs/layout/index.md
@@ -9,7 +9,7 @@ description: You can have an overview of Layout in the documentation of the DHTM
DHTMLX Layout component lets you specify the main scheme of your application or web page, as it defines the arrangement of blocks with content. Layout helps blend diverse types of data representation on one page.
Check [online samples for DHTMLX Layout](https://snippet.dhtmlx.com/f1f49n35?tag=layout).
-
+
## Features
diff --git a/docs/layout/layout_patterns.md b/docs/layout/layout_patterns.md
index 5dfd2de05..e086102b5 100644
--- a/docs/layout/layout_patterns.md
+++ b/docs/layout/layout_patterns.md
@@ -10,36 +10,36 @@ DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/
**Click on the desired pattern to see its example in Snippet Tool.**
-[](https://snippet.dhtmlx.com/mzlodj28)
-[](https://snippet.dhtmlx.com/1oqx20ve)
-[](https://snippet.dhtmlx.com/yr9mapji)
+[](https://snippet.dhtmlx.com/mzlodj28)
+[](https://snippet.dhtmlx.com/1oqx20ve)
+[](https://snippet.dhtmlx.com/yr9mapji)
-[](https://snippet.dhtmlx.com/v0w2p60c)
-[](https://snippet.dhtmlx.com/ag01de2d)
-[](https://snippet.dhtmlx.com/p0fllgaa)
-[](https://snippet.dhtmlx.com/bozlxz69)
-[](https://snippet.dhtmlx.com/jnq5cnc7)
-[](https://snippet.dhtmlx.com/678w7hgb)
+[](https://snippet.dhtmlx.com/v0w2p60c)
+[](https://snippet.dhtmlx.com/ag01de2d)
+[](https://snippet.dhtmlx.com/p0fllgaa)
+[](https://snippet.dhtmlx.com/bozlxz69)
+[](https://snippet.dhtmlx.com/jnq5cnc7)
+[](https://snippet.dhtmlx.com/678w7hgb)
-[](https://snippet.dhtmlx.com/m6nlb0bf)
-[](https://snippet.dhtmlx.com/uwb6hql7)
-[](https://snippet.dhtmlx.com/4v52yj8w)
-[](https://snippet.dhtmlx.com/2s9pdfhv)
-[](https://snippet.dhtmlx.com/5ekykk2n)
-[](https://snippet.dhtmlx.com/1c9yzjeu)
-[](https://snippet.dhtmlx.com/gjr6j6ud)
-[](https://snippet.dhtmlx.com/1nqgjnqy)
-[](https://snippet.dhtmlx.com/8km3g1k2)
-[](https://snippet.dhtmlx.com/l4q0cth9)
-[](https://snippet.dhtmlx.com/mwrfozsu)
-[](https://snippet.dhtmlx.com/ww1qk9u7)
+[](https://snippet.dhtmlx.com/m6nlb0bf)
+[](https://snippet.dhtmlx.com/uwb6hql7)
+[](https://snippet.dhtmlx.com/4v52yj8w)
+[](https://snippet.dhtmlx.com/2s9pdfhv)
+[](https://snippet.dhtmlx.com/5ekykk2n)
+[](https://snippet.dhtmlx.com/1c9yzjeu)
+[](https://snippet.dhtmlx.com/gjr6j6ud)
+[](https://snippet.dhtmlx.com/1nqgjnqy)
+[](https://snippet.dhtmlx.com/8km3g1k2)
+[](https://snippet.dhtmlx.com/l4q0cth9)
+[](https://snippet.dhtmlx.com/mwrfozsu)
+[](https://snippet.dhtmlx.com/ww1qk9u7)
-[](https://snippet.dhtmlx.com/wnn4xfu4)
-[](https://snippet.dhtmlx.com/jo5z28kr)
-[](https://snippet.dhtmlx.com/khbg58k4)
-[](https://snippet.dhtmlx.com/xr6jv9kk)
-[](https://snippet.dhtmlx.com/873bxvak)
-[](https://snippet.dhtmlx.com/v81rvnep)
-[](https://snippet.dhtmlx.com/udo1jwmw)
-[](https://snippet.dhtmlx.com/v8zw7jzr)
-[](https://snippet.dhtmlx.com/rkpj3k4h)
+[](https://snippet.dhtmlx.com/wnn4xfu4)
+[](https://snippet.dhtmlx.com/jo5z28kr)
+[](https://snippet.dhtmlx.com/khbg58k4)
+[](https://snippet.dhtmlx.com/xr6jv9kk)
+[](https://snippet.dhtmlx.com/873bxvak)
+[](https://snippet.dhtmlx.com/v81rvnep)
+[](https://snippet.dhtmlx.com/udo1jwmw)
+[](https://snippet.dhtmlx.com/v8zw7jzr)
+[](https://snippet.dhtmlx.com/rkpj3k4h)
diff --git a/docs/list/configuration.md b/docs/list/configuration.md
index 764a6df0e..d9c5a08c5 100644
--- a/docs/list/configuration.md
+++ b/docs/list/configuration.md
@@ -87,7 +87,7 @@ const list = new dhx.List("list_container", {
## Editing items
-
+
**Related sample**: [List. Inline editing](https://snippet.dhtmlx.com/f26lfcai)
@@ -99,7 +99,7 @@ const list = new dhx.List("list_container", {editable:true});
## Height of an item
-
+
**Related sample**: [List. Setup list item height](https://snippet.dhtmlx.com/89buovn2)
@@ -127,7 +127,7 @@ When the [virtual](list/api/list_virtual_config.md) property is set to *true*, t
## Height of the List
-
+
**Related sample**: [List. Setup list height](https://snippet.dhtmlx.com/k2mj2sz7)
@@ -147,7 +147,7 @@ const list = new dhx.List("list_container", {height: "700px"});
## Multiple selection of items
-
+
**Related sample**: [List. Multiselection](https://snippet.dhtmlx.com/0sorkczm)
@@ -169,7 +169,7 @@ const list = new dhx.List("list_container", {
## Selection of items
-
+
**Related sample**: [List. Disable selection](https://snippet.dhtmlx.com/dk4czs1z)
@@ -181,7 +181,7 @@ const list = new dhx.List("list_container", {selection: false});
## Template for List items
-
+
**Related sample**: [List. HTML template for item](https://snippet.dhtmlx.com/gtzdwpj4)
diff --git a/docs/list/customization.md b/docs/list/customization.md
index ce7248612..fe80389dc 100644
--- a/docs/list/customization.md
+++ b/docs/list/customization.md
@@ -8,7 +8,7 @@ description: You can explore the customization of List in the documentation of t
## Styling
-
+
**Related sample**: [List. Styling (custom CSS)](https://snippet.dhtmlx.com/s461f09w)
@@ -61,7 +61,7 @@ For example:
You can style particular cells in the list.
-
+
**Related sample**: [List. Styling (custom CSS for item)](https://snippet.dhtmlx.com/ipu9yshl)
@@ -90,7 +90,7 @@ For example, apply some color to each even item, as in:
It is also possible to customize selection of an item.
-
+
**Related sample**: [List. Styling selection with CSS](https://snippet.dhtmlx.com/6hss19d3)
diff --git a/docs/list/index.md b/docs/list/index.md
index 198b9df7f..a099a2ba4 100644
--- a/docs/list/index.md
+++ b/docs/list/index.md
@@ -9,7 +9,7 @@ description: You can have an overview of List in the documentation of the DHTMLX
DHTMLX List is a client-side JavaScript component that displays a collection of objects in a list according to a user-defined template.
It allows you to arrange multiple objects with similar properties within a single container and make your data organized. Check [online samples for DHTMLX List](https://snippet.dhtmlx.com/0sorkczm?tag=list).
-
+
## Features
diff --git a/docs/menu/configuring_menu_items.md b/docs/menu/configuring_menu_items.md
index 80052a5b2..dd30313f1 100644
--- a/docs/menu/configuring_menu_items.md
+++ b/docs/menu/configuring_menu_items.md
@@ -14,7 +14,7 @@ To operate Menu controls, you can use Menu API and [Tree Collection API](/tree_c
MenuItem is a drop-down list of options.
-
+
### Adding menuItem
@@ -41,7 +41,7 @@ See [the full list of properties](menu/api/api_menuitem_properties.md) that you
This is an item that contains any custom HTML content (for example, an image, icon or other element).
-
+
### Adding Custom HTML
@@ -67,7 +67,7 @@ See [the full list of properties](menu/api/api_customhtml_properties.md) that yo
This is a horizontal (between menu options) or vertical (between menu items) line separating items/groups of items from each other.
-
+
### Adding Separator
@@ -89,7 +89,7 @@ See [the full list of properties](menu/api/api_separator_properties.md) that you
This item takes space on the toolbar and is used for aligning controls.
-
+
### Adding Spacer
diff --git a/docs/menu/creating_context_menu.md b/docs/menu/creating_context_menu.md
index 3db94f181..facc56d9d 100644
--- a/docs/menu/creating_context_menu.md
+++ b/docs/menu/creating_context_menu.md
@@ -8,7 +8,7 @@ description: You can explore the Context Menu in the documentation of the DHTMLX
dhtmlxContextMenu is a component that provides an easy way to add a contextual menu to projects. It will be of great help for frequently used actions in web sites, help systems, etc.
-
+
**Related sample**: [Menu. Context menu initialization with config.data](https://snippet.dhtmlx.com/mgya9p1l)
diff --git a/docs/menu/customization.md b/docs/menu/customization.md
index 70554d8e4..a5e50a05e 100644
--- a/docs/menu/customization.md
+++ b/docs/menu/customization.md
@@ -40,7 +40,7 @@ const dataset = [
];
~~~
-
+
**Related sample**: [Menu. Custom icons](https://snippet.dhtmlx.com/nkmz6ilv)
@@ -50,7 +50,7 @@ const dataset = [
There is a possibility to make changes in the look and feel of a menu.
-
+
**Related sample**: [Menu. Styling (custom CSS)](https://snippet.dhtmlx.com/kfy2th5n)
diff --git a/docs/menu/index.md b/docs/menu/index.md
index 464b8c2b8..a2bf1b48d 100644
--- a/docs/menu/index.md
+++ b/docs/menu/index.md
@@ -8,7 +8,7 @@ description: You can have an overview of Menu in the documentation of the DHTMLX
DHTMLX Menu is a component that provides an easy way to add a drop down menu to user's projects. This component is highly customizable and supports a wide range of features. DHTMLX Menu component can be a good navigation aid to web sites, help systems, etc. Check [online samples for DHTMLX Menu](https://snippet.dhtmlx.com/nk65jfmx?tag=menu).
-
+
## Features
diff --git a/docs/message/configuration.md b/docs/message/configuration.md
index 619d0d37e..fde489344 100644
--- a/docs/message/configuration.md
+++ b/docs/message/configuration.md
@@ -10,7 +10,7 @@ In this article you will find the detailed list of properties that you can use i
## Message box
-
+
**Related sample**: [Message. Show Message](https://snippet.dhtmlx.com/rsxdlicg)
@@ -54,7 +54,7 @@ From v8.0, you can close a message box via the [close()](message/api/message_clo
## Alert box
-
+
**Related sample**: [Message. Show Alert](https://snippet.dhtmlx.com/m4xka888)
@@ -74,7 +74,7 @@ dhx.alert({
## Confirm box
-
+
**Related sample**: [Message. Show Confirm](https://snippet.dhtmlx.com/iss7twe6)
@@ -114,7 +114,7 @@ dhx.confirm({
## Tooltip
-
+
**Related sample**: [Message. Show Tooltip](https://snippet.dhtmlx.com/c6jm8if6)
@@ -141,7 +141,7 @@ dhx.tooltip("Tooltip From Right", {
In the image below the target is adjacent to the right side of screen. Its tooltip that has the *position:"right"* attribute in the config object appears from the left side of the target.
-
+
### Tooltip API
diff --git a/docs/message/customization.md b/docs/message/customization.md
index 30ef5b811..1cf0f1c30 100644
--- a/docs/message/customization.md
+++ b/docs/message/customization.md
@@ -10,7 +10,7 @@ There is a possibility to make changes in the look and feel of a message box or
## Using new CSS classes
-
+
To use a new CSS class you need to take the following steps:
diff --git a/docs/message/index.md b/docs/message/index.md
index d92ab7779..52ffec695 100644
--- a/docs/message/index.md
+++ b/docs/message/index.md
@@ -10,7 +10,7 @@ DHTMLX Message is a tiny but useful component that helps you to interact with a
Check [online samples for DHTMLX Message](https://snippet.dhtmlx.com/tfiqt79l?tag=message).
-
+
## Features
diff --git a/docs/message/overview.md b/docs/message/overview.md
index 13bf9e7cd..7a48d3033 100644
--- a/docs/message/overview.md
+++ b/docs/message/overview.md
@@ -11,24 +11,24 @@ interaction with the users of your app or web-site.
## Message
-
+
A simple message box to inform a user about processes occurring in the application in this or that moment.
## Alert
-
+
This type of message box allows warning a user against taking some steps that may lead to unexpected or undesirable result.
## Confirm
-
+
This type of message box is useful when you need to ask a user to confirm some action to proceed to next steps.
## Tooltip
-
+
Tooltip is a great helper for giving information about an element a user is hovering over.
diff --git a/docs/migration.md b/docs/migration.md
index 809bb96b0..f161d0505 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -584,7 +584,7 @@ form.getItem("button_id").setValue("button_value");
### Confirm message box
-10) Before v7.0, the *Space* and *Enter* key were used to confirm the Reject button. Starting with v7.0, the keys confirm the Apply button. The *Esc* key confirms the Reject button.
+10) Before v7.0, the Space and Enter key were used to confirm the Reject button. Starting with v7.0, the keys confirm the Apply button. The Esc key confirms the Reject button.
Also note, that before v7.0, the confirm buttons were displayed in the following order: "Apply" and "Reject". In the version 7.0, the order has been changed to "Reject" and "Apply".
diff --git a/docs/optimus_guides/dashboard_demo.md b/docs/optimus_guides/dashboard_demo.md
index cfbc991bf..20fa680a0 100644
--- a/docs/optimus_guides/dashboard_demo.md
+++ b/docs/optimus_guides/dashboard_demo.md
@@ -8,7 +8,7 @@ description: You can explore how to work with UI Dashboard Demo using Optimus Fr
[comment]: # (todo добавить ссылку на демку на картинку и под картинкой)
-
+
This demo application shows how to create a dashboard for a ticketing system based on DHTMLX Suite widgets: Layout, Grid, DataView, Toolbar, Chart, Window, and Form.
diff --git a/docs/optimus_guides/exam_demo.md b/docs/optimus_guides/exam_demo.md
index e5c838f0a..6968710a3 100644
--- a/docs/optimus_guides/exam_demo.md
+++ b/docs/optimus_guides/exam_demo.md
@@ -8,7 +8,7 @@ description: You can explore how to work with Online Exam Demo using Optimus Fra
[comment]: # (todo добавить ссылку на демку на картинку и под картинкой)
-
+
This demo application shows how to create an online examination system for an educational project with subjects, exams, and students' results. It is developed using DHTMLX Suite widgets: Grid in the TreeGrid mode, Form, Sidebar, and Toolbar.
diff --git a/docs/optimus_guides/filemanager_demo.md b/docs/optimus_guides/filemanager_demo.md
index c1b9daf63..6b1d85eee 100644
--- a/docs/optimus_guides/filemanager_demo.md
+++ b/docs/optimus_guides/filemanager_demo.md
@@ -8,7 +8,7 @@ description: You can explore how to work with File Manager Demo using Optimus Fr
[comment]: # (todo добавить ссылку на демку на картинку и под картинкой)
-
+
This demo application shows how to create a Material-style file manager app based on DHTMLX Suite widgets: Grid, Tree, Layout, DataView, Toolbar, Sidebar, Menu, Form, and Tabbar.
diff --git a/docs/optimus_guides/geotracking_demo.md b/docs/optimus_guides/geotracking_demo.md
index ebecf4237..8bf11bf5a 100644
--- a/docs/optimus_guides/geotracking_demo.md
+++ b/docs/optimus_guides/geotracking_demo.md
@@ -8,7 +8,7 @@ description: You can explore how to work with Geo Tracking Demo using Optimus Fr
[comment]: # (todo добавить ссылку на демку на картинку и под картинкой)
-
+
This demo shows how to create a geo tracking application for delivery management. It is developed using DHTMLX Suite widgets: Layout, Sidebar, Tabbar, Form, and Dataview.
diff --git a/docs/optimus_guides/hospital_demo.md b/docs/optimus_guides/hospital_demo.md
index 78aee57e4..1d08ef020 100644
--- a/docs/optimus_guides/hospital_demo.md
+++ b/docs/optimus_guides/hospital_demo.md
@@ -8,7 +8,7 @@ description: You can explore how to work with Hospital Management Demo using Opt
[comment]: # (todo добавить ссылку на демку на картинку и под картинкой)
-
+
This demo application shows how to create a hospital management system with a clear and accurate UI based on DHTMLX Diagram and DHTMLX Suite widgets: Sidebar, Grid in the TreeGrid mode, Tabbar, Dataview, Window, Toolbar, and Form.
diff --git a/docs/optimus_guides/hotel_demo.md b/docs/optimus_guides/hotel_demo.md
index d79bd01e1..22a845443 100644
--- a/docs/optimus_guides/hotel_demo.md
+++ b/docs/optimus_guides/hotel_demo.md
@@ -8,7 +8,7 @@ description: description
[comment]: # (todo добавить ссылку на демку на картинку и под картинкой)
-
+
This demo shows how to create a hotel management system based on DHTMLX Suite widgets: Layout, Grid, List, Toolbar, Sidebar, and Calendar.
diff --git a/docs/optimus_guides/how_to_start_optimus.md b/docs/optimus_guides/how_to_start_optimus.md
index cdcbed5c6..af9e5bab9 100644
--- a/docs/optimus_guides/how_to_start_optimus.md
+++ b/docs/optimus_guides/how_to_start_optimus.md
@@ -67,7 +67,7 @@ Step 1. Initialize an application
After running the project on the local server and opening `http://localhost:8080/` in your browser, you will see the following result:
-
+
Let's consider how we've initialized our starter application:
@@ -330,11 +330,11 @@ Now, we'll follow the changes in the global event bus. Each time the user clicks
Let's take a look at the result:
-
+
After clicking on the "Second" button you should see the view, as in:
-
+
You can also learn more details about how to:
@@ -475,7 +475,7 @@ The above code sample shows that we won't render the default view in the "conten
Let's run the application now. You will see that the first view is active by default:
-
+
It means, that the id of the button that should be active by default is passed to the state manager on initialization of the application.
@@ -698,15 +698,15 @@ As a result, when the active state is changed, the related component will be ren
Once you are done with it, run the application now. You will see the DataView widget on the first page:
-
+
the Chart widget on the second page:
-
+
and the Grid widget on the third page:
-
+
Step 5. Provide editing data
--------------
@@ -948,15 +948,15 @@ export const emptyItem = {
That's all. Open *http://localhost:8080/* and you'll see the dataview like the one shown here:
-
+
Click the second button to see the chart view, as in:
-
+
To see the grid view, click the third button. You can try to edit a cell in the grid by double-click on the cell.
-
+
You could also note, that changing data in one of the widgets will change the data in the other widgets.
diff --git a/docs/optimus_guides/index.md b/docs/optimus_guides/index.md
index e85678bb8..1c8dac6a1 100644
--- a/docs/optimus_guides/index.md
+++ b/docs/optimus_guides/index.md
@@ -71,7 +71,7 @@ DHTMLX Optimus requires the files of the DHTMLX Suite library as dependencies. T
After running the project on the local server and opening `http://localhost:8080/` in your browser, you will see the following result:
-
+
Let's consider how we've created our demo application:
diff --git a/docs/optimus_guides/kpi_demo.md b/docs/optimus_guides/kpi_demo.md
index 7d23ab000..f4d55bdfd 100644
--- a/docs/optimus_guides/kpi_demo.md
+++ b/docs/optimus_guides/kpi_demo.md
@@ -8,7 +8,7 @@ description: You can explore how to work with Sales KPI Tracking Demo using Opti
[comment]: # (todo добавить ссылку на демку на картинку и под картинкой)
-
+
This demo application shows how to create a Sales KPI tracking system based on the DHTMLX Suite widgets: Layout, List, Toolbar, and Charts.
diff --git a/docs/pagination/configuration.md b/docs/pagination/configuration.md
index 608f01058..db8c51e1a 100644
--- a/docs/pagination/configuration.md
+++ b/docs/pagination/configuration.md
@@ -8,7 +8,7 @@ description: You can explore the configuration of Pagination in the documentatio
## Input width
-
+
By default, the input of a pagination takes the auto-width that fits its maximum content. You can change the input width and set any other value via the [inputWidth](pagination/api/pagination_inputwidth_config.md) property, for example:
@@ -36,7 +36,7 @@ The default value of the attribute is 0.
## Number of items per page
-
+
You can define the number of items that should be displayed per page of the related widget with the help of the [pageSize](pagination/api/pagination_pagesize_config.md) configuration property. The default value is 10. This is how you can change the default settings:
diff --git a/docs/pagination/customization.md b/docs/pagination/customization.md
index cf9d82028..39dbf7223 100644
--- a/docs/pagination/customization.md
+++ b/docs/pagination/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Pagination in the documentatio
There is a possibility to make changes in the look and feel of a pagination.
-
+
**Related sample**: [Pagination. Styling (custom CSS)](https://snippet.dhtmlx.com/e7bujtsu)
diff --git a/docs/pagination/index.md b/docs/pagination/index.md
index 30e0d93e5..a71876d22 100644
--- a/docs/pagination/index.md
+++ b/docs/pagination/index.md
@@ -13,7 +13,7 @@ The Pagination component is available in the **PRO** version only.
DHTMLX Pagination helps to divide large amount of data into groups and display them on discrete pages.
The component is easy-to-use and provides handy navigation that allows you to quickly jump to a desired page. DHTMLX Pagination is available in combination with data components like DataView, List, Grid, Tree, Grid in the TreeGrid mode. Check [online samples for DHTMLX Pagination](https://snippet.dhtmlx.com/05r4s63b?tag=pagination).
-
+
## Features
diff --git a/docs/popup/customization.md b/docs/popup/customization.md
index 0384fc9d8..e26ce9f64 100644
--- a/docs/popup/customization.md
+++ b/docs/popup/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Popup in the documentation of
There is a possibility to make changes in the look and feel of a popup.
-
+
**Related sample**: [Popup. Styling (custom CSS)](https://snippet.dhtmlx.com/rd8zfw5h)
diff --git a/docs/popup/index.md b/docs/popup/index.md
index 3bde9ee66..51b30e19a 100644
--- a/docs/popup/index.md
+++ b/docs/popup/index.md
@@ -10,7 +10,7 @@ DHTMLX Popup is a pop-up window that can contain various content. It allows atta
Mainly, the component is applied for showing a pop-up content on some action, such as a button click. Check [online samples for DHTMLX Popup](https://snippet.dhtmlx.com/bz1ekc71?tag=popup).
-
+
## Features
diff --git a/docs/ribbon/block.md b/docs/ribbon/block.md
index c78feed18..5856bc640 100644
--- a/docs/ribbon/block.md
+++ b/docs/ribbon/block.md
@@ -8,7 +8,7 @@ description: You can explore the Block of Ribbon in the documentation of the DHT
The Block control is used for grouping related controls.
-
+
## Creating a Block
diff --git a/docs/ribbon/button.md b/docs/ribbon/button.md
index c2aac8a4d..5819bbe93 100644
--- a/docs/ribbon/button.md
+++ b/docs/ribbon/button.md
@@ -8,7 +8,7 @@ description: You can explore the Button of Ribbon in the documentation of the DH
This is a simple button that can have an icon. Button can be *twoState* and can have a badge with a number, which can be useful for displaying the number of new messages, etc.
-
+
**Related sample**: [Ribbon. Group buttons](https://snippet.dhtmlx.com/nlviu82g)
diff --git a/docs/ribbon/customhtmlbutton.md b/docs/ribbon/customhtmlbutton.md
index c74a33dad..1328d74e3 100644
--- a/docs/ribbon/customhtmlbutton.md
+++ b/docs/ribbon/customhtmlbutton.md
@@ -8,7 +8,7 @@ description: You can explore the custom HTML button of Ribbon in the documentati
This is an item that contains any custom HTML content (for example, an image, icon or other element).
-
+
**Related sample**: [Ribbon. Custom HTML](https://snippet.dhtmlx.com/c0i0q3cu)
diff --git a/docs/ribbon/customization.md b/docs/ribbon/customization.md
index fdc4d1ec1..3d0f7321c 100644
--- a/docs/ribbon/customization.md
+++ b/docs/ribbon/customization.md
@@ -24,7 +24,7 @@ after the source files of DHTMLX Ribbon as follows:
Then you can use the name of the icon as the value of the **icon** property in the [object with the control parameters](ribbon/data_loading.md#json-format-templates) for ribbon:
-
+
~~~js
const data = [
@@ -70,7 +70,7 @@ const data = [
There is a possibility to make changes in the look and feel of a ribbon.
-
+
**Related sample**: [Ribbon. Styling (custom CSS)](https://snippet.dhtmlx.com/9ckg47ro)
diff --git a/docs/ribbon/image_button.md b/docs/ribbon/image_button.md
index 3f40942ce..e3a364472 100644
--- a/docs/ribbon/image_button.md
+++ b/docs/ribbon/image_button.md
@@ -8,7 +8,7 @@ description: You can explore the ImageButton of Ribbon in the documentation of t
This is a button with an image. Unlike a [button](ribbon/button.md), it does not have a text label, but can also have a badge with a number and can be *twoState*.
-
+
## Adding ImageButton
diff --git a/docs/ribbon/index.md b/docs/ribbon/index.md
index 36f9b134b..8e0d0e2c9 100644
--- a/docs/ribbon/index.md
+++ b/docs/ribbon/index.md
@@ -8,7 +8,7 @@ description: You can have an overview of Ribbon in the documentation of the DHTM
DHTMLX Ribbon is an advanced version of DHTMLX Toolbar. It aggregates commands and tools used in an application or in a website into logical blocks thus providing a handy navigation bar. Check [online samples for DHTMLX Ribbon](https://snippet.dhtmlx.com/3djaib6o?tag=ribbon).
-
+
## Features
diff --git a/docs/ribbon/input.md b/docs/ribbon/input.md
index 54eb7cc24..0e77576f4 100644
--- a/docs/ribbon/input.md
+++ b/docs/ribbon/input.md
@@ -8,7 +8,7 @@ description: You can explore the Input of Ribbon in the documentation of the DHT
A text input field with an icon.
-
+
## Adding Input
diff --git a/docs/ribbon/navitem.md b/docs/ribbon/navitem.md
index 694435076..44fe7f79a 100644
--- a/docs/ribbon/navitem.md
+++ b/docs/ribbon/navitem.md
@@ -8,7 +8,7 @@ description: You can explore the NavItem of Ribbon in the documentation of the D
This is a default control for navigation-related components, can contain any other controls as nested items.
-
+
## Adding NavItem
diff --git a/docs/ribbon/selectbutton.md b/docs/ribbon/selectbutton.md
index 6a4d5f292..d96bcd2ce 100644
--- a/docs/ribbon/selectbutton.md
+++ b/docs/ribbon/selectbutton.md
@@ -8,7 +8,7 @@ description: You can explore the SelectButton of Ribbon in the documentation of
This is a button that contains a drop-down list of options.
-
+
## Adding SelectButton
diff --git a/docs/ribbon/separator.md b/docs/ribbon/separator.md
index 8f261da3c..0e3c25165 100644
--- a/docs/ribbon/separator.md
+++ b/docs/ribbon/separator.md
@@ -8,7 +8,7 @@ description: You can explore the Separator of Ribbon in the documentation of the
This is a control that adds a line separating items/groups of items from each other.
-
+
## Adding Separator
diff --git a/docs/ribbon/spacer.md b/docs/ribbon/spacer.md
index 39f0a2d6d..e7cba46c5 100644
--- a/docs/ribbon/spacer.md
+++ b/docs/ribbon/spacer.md
@@ -8,7 +8,7 @@ description: You can explore the Spacer of Ribbon in the documentation of the DH
This item takes space on the ribbon and is used for aligning controls.
-
+
## Adding Spacer
diff --git a/docs/sidebar/customhtmlbutton.md b/docs/sidebar/customhtmlbutton.md
index 3b91e0313..b73f935f3 100644
--- a/docs/sidebar/customhtmlbutton.md
+++ b/docs/sidebar/customhtmlbutton.md
@@ -8,7 +8,7 @@ description: You can explore the custom HTML button of Sidebar in the documentat
This is an item that contains any custom HTML content (for example, an image, icon or other element).
-
+
**Related sample**: [Sidebar. Custom HTML](https://snippet.dhtmlx.com/26ds0gxp)
diff --git a/docs/sidebar/customization.md b/docs/sidebar/customization.md
index 94988edfc..f0ca2638f 100644
--- a/docs/sidebar/customization.md
+++ b/docs/sidebar/customization.md
@@ -49,7 +49,7 @@ const sidebarData = [
];
~~~
-
+
{{note You can use the [Material Design](https://pictogrammers.com/library/mdi/?welcome) icon pack by including [link to its CDN](https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.5.94/css/materialdesignicons.css) in the same way.}}
@@ -57,7 +57,7 @@ const sidebarData = [
There is a possibility to make changes in the look and feel of a sidebar.
-
+
**Related sample**: [Sidebar. Styling (custom CSS)](https://snippet.dhtmlx.com/3mhhvvcr)
diff --git a/docs/sidebar/index.md b/docs/sidebar/index.md
index 69353a47a..621682de8 100644
--- a/docs/sidebar/index.md
+++ b/docs/sidebar/index.md
@@ -9,7 +9,7 @@ description: You can have an overview of Sidebar in the documentation of the DHT
DHTMLX Sidebar is a component that provides means for comfy vertical navigation. Sidebar can contain any Toolbar controls that can be controlled via a handy API.
Check [online samples for DHTMLX Sidebar](https://snippet.dhtmlx.com/3mhhvvcr?tag=sidebar).
-
+
## Features
diff --git a/docs/sidebar/menuitem.md b/docs/sidebar/menuitem.md
index 2949e074c..0c16ceeda 100644
--- a/docs/sidebar/menuitem.md
+++ b/docs/sidebar/menuitem.md
@@ -8,7 +8,7 @@ description: You can explore the MenuItem of Sidebar in the documentation of the
MenuItem is a drop-down list of options, can contain its own sub-menu.
-
+
## Adding MenuItem
diff --git a/docs/sidebar/navitem.md b/docs/sidebar/navitem.md
index e3e9ea9a9..231fbe8cd 100644
--- a/docs/sidebar/navitem.md
+++ b/docs/sidebar/navitem.md
@@ -8,7 +8,7 @@ description: You can explore the NavItem of Sidebar in the documentation of the
This is a default control for navigation-related components, can contain any other controls as nested items.
-
+
## Adding NavItem
diff --git a/docs/sidebar/separator.md b/docs/sidebar/separator.md
index 62688c93c..450baba7a 100644
--- a/docs/sidebar/separator.md
+++ b/docs/sidebar/separator.md
@@ -8,7 +8,7 @@ description: You can explore the Separator of Sidebar in the documentation of th
This is a line separating items/groups of items from each other.
-
+
## Adding Separator
diff --git a/docs/sidebar/spacer.md b/docs/sidebar/spacer.md
index 585313bb7..cc6c0bc3a 100644
--- a/docs/sidebar/spacer.md
+++ b/docs/sidebar/spacer.md
@@ -8,7 +8,7 @@ description: You can explore the Spacer of Sidebar in the documentation of the D
This item takes space on the sidebar and is used for aligning controls.
-
+
## Adding Spacer
diff --git a/docs/sidebar/title.md b/docs/sidebar/title.md
index b67575bbf..8097b6cd6 100644
--- a/docs/sidebar/title.md
+++ b/docs/sidebar/title.md
@@ -8,7 +8,7 @@ description: You can explore the Title of Sidebar in the documentation of the DH
This is an item that contains some text.
-
+
## Adding Title control
diff --git a/docs/slider/configuring_slider.md b/docs/slider/configuring_slider.md
index d1b897cc5..a1c2b5b19 100644
--- a/docs/slider/configuring_slider.md
+++ b/docs/slider/configuring_slider.md
@@ -20,7 +20,7 @@ const slider = new dhx.Slider("slider_container", {
You can adjust the configuration of Slider so that its scale would render values in the reverse order, i.e. from the maximal value to the minimal one.
-
+
To launch this mode, make use of the [](slider/api/slider_inverse_config.md) property set to *true*:
@@ -74,7 +74,7 @@ You can configure the look and feel of the Slider scale via the corresponding pr
- [](slider/api/slider_majortick_config.md) - (number) sets interval of rendering numeric values on the slider scale
- [](slider/api/slider_ticktemplate_config.md) - (function) sets a template for rendering values on the slider scale
-
+
~~~js
const slider = new dhx.Slider("slider_container", {
@@ -97,7 +97,7 @@ In case you want to mark just the minimal and maximal values with ticks, you nee
- set the value of the [](slider/api/slider_tick_config.md) property equal to the value of the [](slider/api/slider_max_config.md) property
- set the [](slider/api/slider_majortick_config.md) property to 1
-
+
~~~js
const slider = new dhx.Slider("slider_container", {
@@ -109,7 +109,7 @@ const slider = new dhx.Slider("slider_container", {
There is a possibility to show a label next to the slider.
-
+
There are two properties that allow manipulating the label of the slider:
@@ -140,7 +140,7 @@ const slider = new dhx.Slider("slider_container", {
You can specify a tooltip that will display changeable values of the slider when the user moves the slider's thumb.
-
+
There is the [](slider/api/slider_tooltip_config.md) property that enables rendering the slider value over the thumb:
diff --git a/docs/slider/customization.md b/docs/slider/customization.md
index fc8475b21..de111af81 100644
--- a/docs/slider/customization.md
+++ b/docs/slider/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Slider in the documentation of
There is a possibility to make changes in the look and feel of a slider.
-
+
**Related sample**: [Slider. Styling (custom CSS)](https://snippet.dhtmlx.com/ewizud5e)
diff --git a/docs/slider/index.md b/docs/slider/index.md
index b2a5d73c1..9cbbccac0 100644
--- a/docs/slider/index.md
+++ b/docs/slider/index.md
@@ -10,7 +10,7 @@ DHTMLX Slider allows adding handy slider bars into web pages and applications. T
Check [online samples for DHTMLX Slider](https://snippet.dhtmlx.com/jsfxnplp?tag=slider).
-
+
## Features
diff --git a/docs/slider/range_slider.md b/docs/slider/range_slider.md
index 96ec4f62c..632e1dc24 100644
--- a/docs/slider/range_slider.md
+++ b/docs/slider/range_slider.md
@@ -8,7 +8,7 @@ description: You can explore the range mode of Slider in the documentation of th
The range mode of slider presupposes the usage of two thumbs for selecting the starting and ending values of a range.
-
+
To enable the range mode, you need to set the [](slider/api/slider_range_config.md) property to *true* and specify an array of two values - min and max values of the range:
diff --git a/docs/tabbar/configuring_tabbar.md b/docs/tabbar/configuring_tabbar.md
index fccb8054c..d9a12d4f8 100644
--- a/docs/tabbar/configuring_tabbar.md
+++ b/docs/tabbar/configuring_tabbar.md
@@ -8,7 +8,7 @@ description: You can explore the configuration of Tabbar in the documentation of
## Close buttons for tabs
-
+
**Related sample**: [Tabbar. Close button](https://snippet.dhtmlx.com/cysre4v8)
@@ -31,7 +31,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", {
## Disabled tabs
-
+
By default, all tabs in Tabbar are enabled. It is possible to make one or several tabs disabled using the [](tabbar/api/tabbar_disabled_config.md) configuration property:
@@ -51,7 +51,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", {
## Position of tabbar
-
+
**Related sample**: [Tabbar. Mode: top, left, right, bottom](https://snippet.dhtmlx.com/xq6k0tts)
@@ -130,7 +130,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", {
## Tabs without content
-
+
It is possible to render a tabbar without any content. Use the [noContent](tabbar/api/tabbar_nocontent_config.md) option for this purpose:
@@ -144,7 +144,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", {
## Alignment
-
+
Starting from v7.0, there is the ability to set alignment for tabs via the [tabAlign](tabbar/api/tabbar_tabalign_config.md) configuration option of Tabbar:
diff --git a/docs/tabbar/customization.md b/docs/tabbar/customization.md
index d0e1e1cd1..6f8d41fd0 100644
--- a/docs/tabbar/customization.md
+++ b/docs/tabbar/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Tabbar in the documentation of
There is a possibility to make changes in the look and feel of a tabbar.
-
+
**Related sample**: [Tabbar. Styling (custom CSS)](https://snippet.dhtmlx.com/47en9f0a)
diff --git a/docs/tabbar/index.md b/docs/tabbar/index.md
index c16a7d9e4..c62a5e330 100644
--- a/docs/tabbar/index.md
+++ b/docs/tabbar/index.md
@@ -10,7 +10,7 @@ DHTMLX Tabbar component allows a user to keep several groups of content together
Being highly configurable, the component can be easily adjusted to your requirements and will provide quick switching between parts of your app.
Check [online samples for DHTMLX Tabbar](https://snippet.dhtmlx.com/xq6k0tts?tag=tabbar).
-
+
## Features
diff --git a/docs/themes/contrast_dark_theme.md b/docs/themes/contrast_dark_theme.md
index 710e1681a..77aeab959 100644
--- a/docs/themes/contrast_dark_theme.md
+++ b/docs/themes/contrast_dark_theme.md
@@ -6,7 +6,7 @@ description: You can explore the dark high contrast theme of DHTMLX Suite in the
# Dark high contrast theme
-
+
The ["contrast-dark"](/themes/#suite-themes) theme is configured both on the base of the [root CSS variables](themes/default_theme.md) and variables which are listed below:
diff --git a/docs/themes/contrast_light_theme.md b/docs/themes/contrast_light_theme.md
index bcc8e2acc..62e2638e0 100644
--- a/docs/themes/contrast_light_theme.md
+++ b/docs/themes/contrast_light_theme.md
@@ -6,7 +6,7 @@ description: You can explore the light high contrast theme of DHTMLX Suite in th
# Light high contrast theme
-
+
The ["contrast-light"](/themes/#suite-themes) theme is configured both on the base of the [root CSS variables](themes/default_theme.md) and variables which are listed below:
diff --git a/docs/themes/dark_theme.md b/docs/themes/dark_theme.md
index a9de98e67..1b5ef1f4c 100644
--- a/docs/themes/dark_theme.md
+++ b/docs/themes/dark_theme.md
@@ -6,7 +6,7 @@ description: You can explore the dark theme of DHTMLX Suite in the documentation
# Dark theme
-
+
The ["dark"](/themes/#suite-themes) theme is configured both on the base of the [root CSS variables](themes/default_theme.md) and variables which are listed below:
diff --git a/docs/themes/default_theme.md b/docs/themes/default_theme.md
index 495d2b832..2882175f2 100644
--- a/docs/themes/default_theme.md
+++ b/docs/themes/default_theme.md
@@ -6,7 +6,7 @@ description: You can explore the default theme of DHTMLX Suite in the documentat
# Default theme
-
+
The [default ("light")](/themes/#suite-themes) theme is configured on the base of the CSS variables which are listed below:
diff --git a/docs/timepicker/configuration.md b/docs/timepicker/configuration.md
index ded79a8b5..576fd036a 100644
--- a/docs/timepicker/configuration.md
+++ b/docs/timepicker/configuration.md
@@ -11,7 +11,7 @@ description: You can explore the configuration of Timepicker in the documentatio
The default TimePicker doesn't have any buttons. However, you can add two buttons that will allow you to close the timepicker after selecting necessary time or save the values selected for hour and minutes.
These controls are helpful if you attach TimePicker to an input or a calendar, for example.
-
+
There's the [](timepicker/api/timepicker_controls_config.md) property in the timepicker configuration that while set to *true* enables rendering of the Save button and the Close icon button in the top right corner of the component.
@@ -31,7 +31,7 @@ In this mode the clock inside the timepicker will be shown together with the AM/
- 24-hour clock:
-
+
~~~js
const timepicker = new dhx.Timepicker("timepicker_container");
@@ -39,7 +39,7 @@ const timepicker = new dhx.Timepicker("timepicker_container");
- 12-hour clock:
-
+
~~~js {2}
const timepicker = new dhx.Timepicker("timepicker_container",{
diff --git a/docs/timepicker/customization.md b/docs/timepicker/customization.md
index 5b9f3702a..a59370991 100644
--- a/docs/timepicker/customization.md
+++ b/docs/timepicker/customization.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Timepicker in the documentatio
There is a possibility to make changes in the look and feel of a timepicker.
-
+
**Related sample**: [Timepicker. Styling (custom CSS)](https://snippet.dhtmlx.com/n4xfu4e9)
diff --git a/docs/timepicker/index.md b/docs/timepicker/index.md
index 490025085..eb80ccd9f 100644
--- a/docs/timepicker/index.md
+++ b/docs/timepicker/index.md
@@ -9,7 +9,7 @@ description: You can have an overview of Timepicker in the documentation of the
DHTMLX TimePicker is a useful component for selecting time in both 12-hour and 24-hour clock format. Based on Layout and Slider components, it will work smoothly as a part of any DHTMLX-based application.
Check [online samples for DHTMLX TimePicker](https://snippet.dhtmlx.com/u9ge1a4z?tag=timepicker).
-
+
## Features
diff --git a/docs/toolbar/button.md b/docs/toolbar/button.md
index a089924a9..ca1c8f1c0 100644
--- a/docs/toolbar/button.md
+++ b/docs/toolbar/button.md
@@ -8,7 +8,7 @@ description: You can explore the Button of Toolbar in the documentation of the D
This is a simple button that can have an icon. Button can have two states and a badge with a number, which can be useful for displaying the number of new messages, etc.
-
+
**Related sample**: [Toolbar. Button](https://snippet.dhtmlx.com/7aysw3gb)
diff --git a/docs/toolbar/customhtmlbutton.md b/docs/toolbar/customhtmlbutton.md
index 1b9fbbbe1..6283f6c7a 100644
--- a/docs/toolbar/customhtmlbutton.md
+++ b/docs/toolbar/customhtmlbutton.md
@@ -8,7 +8,7 @@ description: You can explore the Custom HTML of Toolbar in the documentation of
This is an item that contains any custom HTML content (for example, an image, icon or other element).
-
+
**Related sample**: [Toolbar. Custom HTML](https://snippet.dhtmlx.com/rv3gq5qe)
diff --git a/docs/toolbar/customization.md b/docs/toolbar/customization.md
index db656fc2f..cb3949603 100644
--- a/docs/toolbar/customization.md
+++ b/docs/toolbar/customization.md
@@ -33,7 +33,7 @@ const toolbarData = [
];
~~~
-
+
**Related sample**: [Toolbar. Custom icons](https://snippet.dhtmlx.com/4aiwvow7)
@@ -43,7 +43,7 @@ const toolbarData = [
There is a possibility to make changes in the look and feel of a toolbar.
-
+
**Related sample**: [Toolbar. Styling (custom CSS)](https://snippet.dhtmlx.com/uekgjwsi)
diff --git a/docs/toolbar/image_button.md b/docs/toolbar/image_button.md
index 3cfd3f536..887be7bf8 100644
--- a/docs/toolbar/image_button.md
+++ b/docs/toolbar/image_button.md
@@ -8,7 +8,7 @@ description: You can explore the ImageButton of Toolbar in the documentation of
This is a button with an image. Unlike a [button](toolbar/button.md), it does not have a text label, but can also have a badge with a number and can be two state.
-
+
**Related sample**: [Toolbar. ImageButton](https://snippet.dhtmlx.com/vdiha09g)
diff --git a/docs/toolbar/index.md b/docs/toolbar/index.md
index c0bd7ca79..510cc3c98 100644
--- a/docs/toolbar/index.md
+++ b/docs/toolbar/index.md
@@ -9,7 +9,7 @@ description: You can have an overview of Toolbar in the documentation of the DHT
DHTMLX Toolbar is a JavaScript component that allows you to keep all main commands and tools of the app in one place and define their look and feel.
Being a great tool for fast and handy navigation, it will make work with your app or website clear and easy. Check [online samples for DHTMLX Toolbar](https://snippet.dhtmlx.com/nie9tuks?tag=toolbar).
-
+
## Features
diff --git a/docs/toolbar/input.md b/docs/toolbar/input.md
index 533dcae9f..9bec0ded3 100644
--- a/docs/toolbar/input.md
+++ b/docs/toolbar/input.md
@@ -8,7 +8,7 @@ description: You can explore the Input of Toolbar in the documentation of the DH
This is an input field for entering some text.
-
+
**Related sample**: [Toolbar. Input](https://snippet.dhtmlx.com/ykd0uii1)
diff --git a/docs/toolbar/menuitem.md b/docs/toolbar/menuitem.md
index ffe71767d..52bf51e63 100644
--- a/docs/toolbar/menuitem.md
+++ b/docs/toolbar/menuitem.md
@@ -8,7 +8,7 @@ description: You can explore the MenuItem of Toolbar in the documentation of the
MenuItem is a drop-down list of options, can contain its own sub-menu.
-
+
## Adding MenuItem
diff --git a/docs/toolbar/navitem.md b/docs/toolbar/navitem.md
index 6d8b89598..ff75274a7 100644
--- a/docs/toolbar/navitem.md
+++ b/docs/toolbar/navitem.md
@@ -8,7 +8,7 @@ description: You can explore the NavItem of Toolbar in the documentation of the
This is a default control for navigation-related components, can contain any other controls as nested items.
-
+
**Related sample**: [Toolbar. NavItem](https://snippet.dhtmlx.com/os48cj6x)
diff --git a/docs/toolbar/selectbutton.md b/docs/toolbar/selectbutton.md
index 24ccb9cfb..a8016be52 100644
--- a/docs/toolbar/selectbutton.md
+++ b/docs/toolbar/selectbutton.md
@@ -8,7 +8,7 @@ description: You can explore the SelectButton of Toolbar in the documentation of
This is a button that contains a drop-down list of options.
-
+
**Related sample**: [Toolbar. SelectButton](https://snippet.dhtmlx.com/nqq5ej8w)
diff --git a/docs/toolbar/separator.md b/docs/toolbar/separator.md
index 5b7c5439c..7d0a54952 100644
--- a/docs/toolbar/separator.md
+++ b/docs/toolbar/separator.md
@@ -8,7 +8,7 @@ description: You can explore the Separator of Toolbar in the documentation of th
This is a horizontal (between menu options) or vertical (between toolbar controls) line separating items/groups of items from each other.
-
+
**Related sample**: [Toolbar. Separator](https://snippet.dhtmlx.com/sguwr3m9)
diff --git a/docs/toolbar/spacer.md b/docs/toolbar/spacer.md
index 00946c07f..12ebcd8a9 100644
--- a/docs/toolbar/spacer.md
+++ b/docs/toolbar/spacer.md
@@ -8,7 +8,7 @@ description: You can explore the Spacer of Toolbar in the documentation of the D
This item takes space on the toolbar and is used for aligning controls.
-
+
**Related sample**: [Toolbar. Spacer](https://snippet.dhtmlx.com/0wt6z7sc)
diff --git a/docs/toolbar/title.md b/docs/toolbar/title.md
index 3db4744ff..f83b0a0e7 100644
--- a/docs/toolbar/title.md
+++ b/docs/toolbar/title.md
@@ -8,7 +8,7 @@ description: You can explore the Title of Toolbar in the documentation of the DH
This is an item that contains some text.
-
+
**Related sample**: [Toolbar. Title](https://snippet.dhtmlx.com/dwynhb7o)
diff --git a/docs/tree/api/tree_dropbehaviour_config.md b/docs/tree/api/tree_dropbehaviour_config.md
index 853d5a8b3..c342214bc 100644
--- a/docs/tree/api/tree_dropbehaviour_config.md
+++ b/docs/tree/api/tree_dropbehaviour_config.md
@@ -26,11 +26,11 @@ There are three modes of behaviour of a dragged tree item, depending on the valu
- "child" - a dragged item becomes a child of the item it is dragged to
-
+
- "sibling" - a dragged item becomes a sibling of the item it is dragged to
-
+
- "complex" - a dragged item can become both a child or a sibling of a target item, depending on the position specified by highlighting (check the above images)
diff --git a/docs/tree/configuration.md b/docs/tree/configuration.md
index 55ed93309..a567ecb46 100644
--- a/docs/tree/configuration.md
+++ b/docs/tree/configuration.md
@@ -8,7 +8,7 @@ description: You can explore the configuration of Tree in the documentation of t
## Checkboxes for items
-
+
DHTMLX Tree provides enhanced system of checkbox manipulations. In addition to standard two-state checkboxes that allow check/uncheck tree items, it also uses three-state checkboxes that include an intermediate state,
when just some children of a parent item are checked.
@@ -35,7 +35,7 @@ const tree = new dhx.Tree("tree_container", {
## Editing of items
-
+
It is possible to enable editing of the text of Tree items before initialization of the component using the [`editable`](tree/api/tree_editable_config.md) configuration property:
@@ -80,7 +80,7 @@ After that you need to select any item and then apply the Arrow keys:
## Selection of items
-
+
**Related sample**: [Tree. Disable selection](https://snippet.dhtmlx.com/2x9htpke)
diff --git a/docs/tree/drag_and_drop_handling.md b/docs/tree/drag_and_drop_handling.md
index e1be516f8..ec6d99fed 100644
--- a/docs/tree/drag_and_drop_handling.md
+++ b/docs/tree/drag_and_drop_handling.md
@@ -43,11 +43,11 @@ There are three modes of behaviour of a dragged tree item:
- "child" - a dragged item becomes a child of the item it is dragged to
-
+
- "sibling" - a dragged item becomes a sibling of the item it is dragged to
-
+
- "complex" - a dragged item can become both a child and a sibling of a target item, depending on the position specified by highlighting (check the above images)
diff --git a/docs/tree/index.md b/docs/tree/index.md
index 0571ceade..945cee00c 100644
--- a/docs/tree/index.md
+++ b/docs/tree/index.md
@@ -10,7 +10,7 @@ DHTMLX Tree is a nice JavaScript tree component intended for making intuitive hi
The component provides smart drag-and-drop, dynamic rendering of items, handy key navigation, customizable appearance, and other useful features.
Check [online samples for DHTMLX Tree](https://snippet.dhtmlx.com/hg3f50td?tag=tree).
-
+
## Features
diff --git a/docs/tree/setting_tree_appearance.md b/docs/tree/setting_tree_appearance.md
index 803e879c5..77d8c7e66 100644
--- a/docs/tree/setting_tree_appearance.md
+++ b/docs/tree/setting_tree_appearance.md
@@ -10,7 +10,7 @@ description: You can explore the customization of Tree in the documentation of t
There is a possibility to make changes in the look and feel of a tree.
-
+
**Related sample**: [Tree. Styling (custom CSS)](https://snippet.dhtmlx.com/ocv4p7zg)
@@ -62,7 +62,7 @@ For example:
## Changing icons
-
+
**Related sample**: [Tree. Custom icons](https://snippet.dhtmlx.com/lpsgn3j7)
diff --git a/docs/tutorial/basic_application/index.md b/docs/tutorial/basic_application/index.md
index 71a4a0133..4c9d94df3 100644
--- a/docs/tutorial/basic_application/index.md
+++ b/docs/tutorial/basic_application/index.md
@@ -2,6 +2,9 @@
sidebar_label: Basic application
title: Basic Application
---
+
+import styles from '@site/src/css/tutorial.module.scss';
+
This tutorial describes how to create a basic application and helps to understand the main principles of working with DHTMLX components.
It covers a number of issues related to adding components on a page, displaying data on a page, interaction of components with each other.
@@ -20,7 +23,11 @@ After you finish this tutorial, you'll have a simple app consisting of:
Download the demo app [here](https://dhtmlx.com/x/download/docs/basic_application.zip).
:::
-
+
+
+
+
+
diff --git a/docs/tutorial/basic_application/step1.md b/docs/tutorial/basic_application/step1.md
index 28dc65b5a..81115c9db 100644
--- a/docs/tutorial/basic_application/step1.md
+++ b/docs/tutorial/basic_application/step1.md
@@ -3,13 +3,19 @@ sidebar_label: Step 1. Include DHTMLX files
title: Step 1. Include DHTMLX Files
---
+import styles from '@site/src/css/tutorial.module.scss';
+
Let's start our tutorial with preparing a file for our future app:
1\. Create a folder with the name
"contact_manager" in the root directory of your local web server.
2\. Create the
"index.html" file in the "contact_manager" folder.
-

+
+
+
+
+
Now we need to include ".js" and ".css" files of the DHTMLX Suite library to the main file of our future app.
You can use CDN links to do this.
diff --git a/docs/tutorial/basic_application/step2.md b/docs/tutorial/basic_application/step2.md
index 1bc86f4c1..037043bcd 100644
--- a/docs/tutorial/basic_application/step2.md
+++ b/docs/tutorial/basic_application/step2.md
@@ -3,13 +3,19 @@ sidebar_label: Step 2. Specify the Layout
title: Step 2. Specify the Layout
---
+import styles from '@site/src/css/tutorial.module.scss';
+
Our application will have the following structure:
- Toolbar
- Grid with a list of users
- Chart
-

+
+
+
+
+
To set the main scheme of our app we should start by initializing the Layout. Later we will attach the rest of the components to it.
diff --git a/docs/tutorial/basic_application/step3.md b/docs/tutorial/basic_application/step3.md
index a9cb482a6..33625a4c8 100644
--- a/docs/tutorial/basic_application/step3.md
+++ b/docs/tutorial/basic_application/step3.md
@@ -3,6 +3,8 @@ sidebar_label: Step 3. Add a Toolbar
title: Step 3. Add a Toolbar
---
+import styles from '@site/src/css/tutorial.module.scss';
+
To present Toolbar on the page we should take 3 simple steps:
1\. To add a toolbar on the page we need to use the constructor, like this:
@@ -45,7 +47,11 @@ You can add other buttons in a similar manner.
layout.cell("toolbar-cell").attach(toolbar);
~~~
-

+
+
+
+
+
diff --git a/docs/tutorial/basic_application/step4.md b/docs/tutorial/basic_application/step4.md
index 4e41cee07..32d9d70dd 100644
--- a/docs/tutorial/basic_application/step4.md
+++ b/docs/tutorial/basic_application/step4.md
@@ -3,6 +3,8 @@ sidebar_label: Step 4. Add a Grid
title: Step 4. Add a Grid
---
+import styles from '@site/src/css/tutorial.module.scss';
+
``` todo страница не нужна
Now let’s consider how start to work with such DHTMLX component as Grid.
@@ -47,7 +49,11 @@ You can read more about Grid properties in the [API](grid/api/refs/grid.md) and
layout.cell("grid-cell").attach(grid);
~~~
-

+
+
+
+
+
3\. Also we need to prepare a data set that will be loaded into the Grid later. An example of a Grid data set is given below:
diff --git a/docs/tutorial/basic_application/step5.md b/docs/tutorial/basic_application/step5.md
index dd8170efe..d69944597 100644
--- a/docs/tutorial/basic_application/step5.md
+++ b/docs/tutorial/basic_application/step5.md
@@ -3,6 +3,8 @@ sidebar_label: Step 5. Bind Toolbar to Grid
title: Step 5. Bind Toolbar to Grid
---
+import styles from '@site/src/css/tutorial.module.scss';
+
At this step we will discuss how to fill and clear the Grid with the help of Toolbar buttons. For this purpose we will use the
Click event of the Toolbar:
~~~js
@@ -25,7 +27,11 @@ toolbar.events.on("Click", function(id,e){
If you click on the "Clear" icon, all items will be deleted from the grid through the removeAll() method.
-

+
+
+
+
+
For more information about working with the Toolbar events, see the [](toolbar/handling_events.md) article. The methods used to work with data are described in data_collection/api/refs/datacollection.md.
diff --git a/docs/tutorial/basic_application/step7.md b/docs/tutorial/basic_application/step7.md
index 9f422a5f3..35abb19ba 100644
--- a/docs/tutorial/basic_application/step7.md
+++ b/docs/tutorial/basic_application/step7.md
@@ -3,6 +3,8 @@ sidebar_label: Step 7. Display Data in the Chart
title: Step 7. Display Data in the Chart
---
+import styles from '@site/src/css/tutorial.module.scss';
+
Before displaying data in the chart we need to process grid data.
## Process grid data
@@ -87,7 +89,11 @@ grid.data.events.on("Change", function(id,status,updatedItem){
After finishing all the steps described in the tutorial, you get a mini app that looks like this:
-

+
+
+
+
+
diff --git a/docs/tutorial/binding_components/index.md b/docs/tutorial/binding_components/index.md
index d7dbf3460..8cd84f84e 100644
--- a/docs/tutorial/binding_components/index.md
+++ b/docs/tutorial/binding_components/index.md
@@ -3,13 +3,19 @@ sidebar_label: Binding components
title: Binding Components
---
+import styles from '@site/src/css/tutorial.module.scss';
+
In the [previous tutorial](/tutorial/basic_application/) we've considered how to add a Layout, a Grid, a Toolbar and a Chart on the page.
We've also shown you how to load the data into the Grid and the Chart and remove it.
We suggest that you won't stop at the basic lesson and will learn more about the work of individual components, such as a Window, a Form, a Context menu.
Besides, this tutorial will help you to learn how to edit data in the Grid, add or delete them.
-

+
+
+
+
+
If you are ready to move on, [download the demo app](https://dhtmlx.com/x/download/docs/binding_components.zip) of the "binding_components" tutorial and continue exploring the possibilities of the DHTMLX Suite library with us.
diff --git a/docs/tutorial/binding_components/step1.md b/docs/tutorial/binding_components/step1.md
index c0117288b..360c888d2 100644
--- a/docs/tutorial/binding_components/step1.md
+++ b/docs/tutorial/binding_components/step1.md
@@ -3,6 +3,8 @@ sidebar_label: Step 1. Add a Window
title: Step 1. Add a Window
---
+import styles from '@site/src/css/tutorial.module.scss';
+
Let’s see how to add a window on the page in two steps:
1\. At first, we need to initialize a Window with the dhx.Window object constructor:
@@ -40,7 +42,11 @@ We pass two parameters to the method:
- the first is an array of item objects,
- the second is the index of the position starting from which new items will be added
-

+
+
+
+
+
You can find out more about Window properties in the [Configuration](window/configuration.md) article. The possibilities of adjusting the look and feel of the Window header and footer are described in the
[Customization](window/customization.md) article.
diff --git a/docs/tutorial/binding_components/step3.md b/docs/tutorial/binding_components/step3.md
index e26aa69e6..c191b3cd2 100644
--- a/docs/tutorial/binding_components/step3.md
+++ b/docs/tutorial/binding_components/step3.md
@@ -4,6 +4,8 @@ title: Step 3. Add Form into Window
description: description
---
+import styles from '@site/src/css/tutorial.module.scss';
+
``` todo страница не нужна
In this step we describe how to add a form on the page. The form will contain fields displaying the content of the selected grid row and will allow you to edit the data in the grid.
@@ -104,7 +106,11 @@ Finally, we use the
attach() method of a window to attach a form to the w
dhxWindow.attach(form);
~~~~
-

+
+
+
+
+
diff --git a/docs/tutorial/binding_components/step4.md b/docs/tutorial/binding_components/step4.md
index 832cecb40..f5da19678 100644
--- a/docs/tutorial/binding_components/step4.md
+++ b/docs/tutorial/binding_components/step4.md
@@ -2,6 +2,9 @@
sidebar_label: Step 4. Add a ContextMenu
title: Step 4. Add a ContextMenu
---
+
+import styles from '@site/src/css/tutorial.module.scss';
+
In this step we consider how to add and display a context menu on the page.
##Adding ContextMenu on the page
@@ -78,7 +81,11 @@ grid.events.on("CellRightClick", function(row,column,e){
After that a right-click on a grid cell will call a context menu we have specified.
-

+
+
+
+
+
diff --git a/docs/tutorial/binding_components/step5.md b/docs/tutorial/binding_components/step5.md
index 27efc9c23..20f0e5d17 100644
--- a/docs/tutorial/binding_components/step5.md
+++ b/docs/tutorial/binding_components/step5.md
@@ -3,6 +3,8 @@ sidebar_label: Step 5. Add buttons to Toolbar
title: Step 5. Add buttons to Toolbar
---
+import styles from '@site/src/css/tutorial.module.scss';
+
We've already placed the "Load" and "Clear" buttons into Toolbar in the [previous tutorial](tutorial/basic_application/step3.md).
Now we need to add other buttons to Toolbar in order to edit, add or delete rows in the grid. This is how we add them:
@@ -28,7 +30,11 @@ toolbar.data.parse([
]);
~~~
-

+
+
+
+
+
diff --git a/docs/tutorial/binding_components/step6.md b/docs/tutorial/binding_components/step6.md
index 605b899ac..ac1472fff 100644
--- a/docs/tutorial/binding_components/step6.md
+++ b/docs/tutorial/binding_components/step6.md
@@ -3,6 +3,8 @@ sidebar_label: Step 6. Edit data in the Grid
title: Step 6. Edit data in the Grid
---
+import styles from '@site/src/css/tutorial.module.scss';
+
We've already studied how to add and display components on the page.
The last part of this tutorial will teach you how to bind Grid to Toolbar, Window and ContextMenu to make it possible to edit data of the grid.
@@ -29,7 +31,11 @@ function openAddWindow(){
};
~~~
-

+
+
+
+
+
### openEditWindow() function
@@ -41,7 +47,11 @@ In our app we consider several ways to open the editing window. They are:
In all these cases we'll call the **openEditWindow** function to display the edit window on the page.
-

+
+
+
+
+
All fields of the form inside the window will be filled with data from a selected grid row. If no row is selected in the grid, all data for the window will be selected from the 1st row of the grid.
@@ -156,7 +166,11 @@ Getting the result
When you complete the steps described in this tutorial, you'll get an advanced demo application that allows editing data in the grid in several ways. This is how the ready app looks like:
-

+
+
+
+
+
diff --git a/docs/whatsnew.md b/docs/whatsnew.md
index 0a991234d..4d2437701 100644
--- a/docs/whatsnew.md
+++ b/docs/whatsnew.md
@@ -8,6 +8,31 @@ description: You can explore what's new in DHTMLX Suite and its release history
Before updating DHTMLX to the latest version, please check the [Migration to Newer Versions](migration.md) guide to avoid possible breakdowns.
+## Version 9.3.5
+
+Released on July 1, 2026
+
+### Updates
+
+- Grid. Full WAI-ARIA accessibility support: implemented proper ARIA roles, states (selection, expansion), and accessible labels for editors and filters to support screen readers (WCAG 2.2 compliance)
+- Grid. Advanced Keyboard Navigation:
+ - Added navigation for Headers, Footers, and Grouping panel
+ - Added support for sorting via keyboard (Enter/Space)
+ - Added support for PageUp/PageDown, Home/End, and Ctrl+Home/End for cell focus movement
+ - Added F2 shortcut to enter edit mode
+- Grid. Added standard keyboard patterns: ArrowRight/ArrowLeft for expanding and collapsing rows
+- Grid. Improved performance of rendering and selection state tracking in large datasets
+
+For additional information, refer to [Grid accessibility](grid/accessibility.md) and [Keyboard navigation](grid/configuration.md#keyboard-navigation) guides.
+
+### Fixes
+
+- Grid. Fixed clipboard operations (copy/paste) for frozen columns (`leftSplit`/`rightSplit`)
+- Grid. Fixed focus restoration to the cell after closing an editor
+- Grid. Fixed row highlighting and dropdown behavior in the `bottomSplit` area.
+- Tree. Fixed an error when removing items in autoload mode
+- Window. Fixed drag/resize positioning issues on scrolled pages
+
## Version 9.3.3
Released on June 2, 2026
diff --git a/docs/window/configuration.md b/docs/window/configuration.md
index debff3334..b23d4e043 100644
--- a/docs/window/configuration.md
+++ b/docs/window/configuration.md
@@ -11,7 +11,7 @@ specify the sizes of a window and decide whether it should be resizable, movable
## Closability
-
+
There is the [](window/api/window_closable_config.md) property that adds a Close button into the right top part of a window to allow a user to close a window on clicking it. This option is set to *true* by default.
@@ -39,7 +39,7 @@ const dhxWindow = new dhx.Window({
## Footer
-
+
You can provide a window with a footer that will include some additional controls for manipulating the content.
@@ -55,7 +55,7 @@ By default a footer is initialized with no controls. To add a control into the f
## Modality
-
+
It is possible to make a window modal, if there's a necessity. Use the [](window/api/window_modal_config.md) property to turn this functionality on:
@@ -71,7 +71,7 @@ A modal window blocks the main window on its calling. It means that only the mod
## Movability
-
+
To equip a window with the ability to be moved around the screen, you should set the [](window/api/window_movable_config.md) property to *true*:
@@ -99,7 +99,7 @@ const dhxWindow = new dhx.Window({
## Resizing
-
+
The default window has fixed sizes with no possibility to change them from UI. You can switch on the corresponding configuration option to make a window resizable.
diff --git a/docs/window/customization.md b/docs/window/customization.md
index 0c9a6ee61..27c35563d 100644
--- a/docs/window/customization.md
+++ b/docs/window/customization.md
@@ -37,7 +37,7 @@ You can work with controls in the header/footer of a window in the same way as w
Besides initial controls, you can add other controls into the header/footer on the fly.
-
+
For this, you should apply the [](data_collection/api/datacollection_add_method.md) method of Data Collection. It takes the parameters below:
@@ -96,7 +96,7 @@ dhxWindow.footer.data.remove("accept");
There is a possibility to make changes in the look and feel of a window.
-
+
**Related sample**: [Window. Styling (custom CSS)](https://snippet.dhtmlx.com/t5mvhwx8)
diff --git a/docs/window/index.md b/docs/window/index.md
index 73eb7ff71..73f1bd033 100644
--- a/docs/window/index.md
+++ b/docs/window/index.md
@@ -10,7 +10,7 @@ DHTMLX Window allows working with several windows and their content at the same
such as moving/resizing a window, sending a window to the foreground/background, making a window modal, changing position and size of a window, setting content inside a window, etc.
Check [online samples for DHTMLX Window](https://snippet.dhtmlx.com/nthbfzfr?tag=window).
-
+
## Features
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8c9cd8a28..128bc7094 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -284,7 +284,7 @@ module.exports = {
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
- editUrl: 'https://github.com/DHTMLX/docs-suite/edit/master/',
+ //editUrl: 'https://github.com/DHTMLX/docs-suite/edit/master/',
routeBasePath: '/'
},
theme: {
diff --git a/sidebars.js b/sidebars.js
index c16901370..8c31662ab 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -2988,6 +2988,7 @@ module.exports = {
"grid/usage_dragpanel",
"grid/usage_history",
"grid/customization",
+ "grid/accessibility",
"grid/events"
],
},
diff --git a/src/css/tutorial.module.scss b/src/css/tutorial.module.scss
new file mode 100644
index 000000000..7033236de
--- /dev/null
+++ b/src/css/tutorial.module.scss
@@ -0,0 +1,7 @@
+.image {
+ margin: 12px 0;
+
+ img {
+ display: block;
+ }
+}
diff --git a/docs/assets/api/toc/accordion.png b/static/img/api/toc/accordion.png
similarity index 100%
rename from docs/assets/api/toc/accordion.png
rename to static/img/api/toc/accordion.png
diff --git a/docs/assets/api/toc/ajax.png b/static/img/api/toc/ajax.png
similarity index 100%
rename from docs/assets/api/toc/ajax.png
rename to static/img/api/toc/ajax.png
diff --git a/docs/assets/api/toc/calendar.png b/static/img/api/toc/calendar.png
similarity index 100%
rename from docs/assets/api/toc/calendar.png
rename to static/img/api/toc/calendar.png
diff --git a/docs/assets/api/toc/carousel.png b/static/img/api/toc/carousel.png
similarity index 100%
rename from docs/assets/api/toc/carousel.png
rename to static/img/api/toc/carousel.png
diff --git a/docs/assets/api/toc/chart.png b/static/img/api/toc/chart.png
similarity index 100%
rename from docs/assets/api/toc/chart.png
rename to static/img/api/toc/chart.png
diff --git a/docs/assets/api/toc/colorpicker.png b/static/img/api/toc/colorpicker.png
similarity index 100%
rename from docs/assets/api/toc/colorpicker.png
rename to static/img/api/toc/colorpicker.png
diff --git a/docs/assets/api/toc/combo.png b/static/img/api/toc/combo.png
similarity index 100%
rename from docs/assets/api/toc/combo.png
rename to static/img/api/toc/combo.png
diff --git a/docs/assets/api/toc/dataprocessor.png b/static/img/api/toc/dataprocessor.png
similarity index 100%
rename from docs/assets/api/toc/dataprocessor.png
rename to static/img/api/toc/dataprocessor.png
diff --git a/docs/assets/api/toc/dataselector.png b/static/img/api/toc/dataselector.png
similarity index 100%
rename from docs/assets/api/toc/dataselector.png
rename to static/img/api/toc/dataselector.png
diff --git a/docs/assets/api/toc/datastore.png b/static/img/api/toc/datastore.png
similarity index 100%
rename from docs/assets/api/toc/datastore.png
rename to static/img/api/toc/datastore.png
diff --git a/docs/assets/api/toc/dataview.png b/static/img/api/toc/dataview.png
similarity index 100%
rename from docs/assets/api/toc/dataview.png
rename to static/img/api/toc/dataview.png
diff --git a/docs/assets/api/toc/designer.png b/static/img/api/toc/designer.png
similarity index 100%
rename from docs/assets/api/toc/designer.png
rename to static/img/api/toc/designer.png
diff --git a/docs/assets/api/toc/editor.png b/static/img/api/toc/editor.png
similarity index 100%
rename from docs/assets/api/toc/editor.png
rename to static/img/api/toc/editor.png
diff --git a/docs/assets/api/toc/fileselector.png b/static/img/api/toc/fileselector.png
similarity index 100%
rename from docs/assets/api/toc/fileselector.png
rename to static/img/api/toc/fileselector.png
diff --git a/docs/assets/api/toc/form.png b/static/img/api/toc/form.png
similarity index 100%
rename from docs/assets/api/toc/form.png
rename to static/img/api/toc/form.png
diff --git a/docs/assets/api/toc/gantt.png b/static/img/api/toc/gantt.png
similarity index 100%
rename from docs/assets/api/toc/gantt.png
rename to static/img/api/toc/gantt.png
diff --git a/docs/assets/api/toc/grid.png b/static/img/api/toc/grid.png
similarity index 100%
rename from docs/assets/api/toc/grid.png
rename to static/img/api/toc/grid.png
diff --git a/docs/assets/api/toc/layout.png b/static/img/api/toc/layout.png
similarity index 100%
rename from docs/assets/api/toc/layout.png
rename to static/img/api/toc/layout.png
diff --git a/docs/assets/api/toc/list.png b/static/img/api/toc/list.png
similarity index 100%
rename from docs/assets/api/toc/list.png
rename to static/img/api/toc/list.png
diff --git a/docs/assets/api/toc/menu.png b/static/img/api/toc/menu.png
similarity index 100%
rename from docs/assets/api/toc/menu.png
rename to static/img/api/toc/menu.png
diff --git a/docs/assets/api/toc/popup.png b/static/img/api/toc/popup.png
similarity index 100%
rename from docs/assets/api/toc/popup.png
rename to static/img/api/toc/popup.png
diff --git a/docs/assets/api/toc/ribbon.png b/static/img/api/toc/ribbon.png
similarity index 100%
rename from docs/assets/api/toc/ribbon.png
rename to static/img/api/toc/ribbon.png
diff --git a/docs/assets/api/toc/scheduler.png b/static/img/api/toc/scheduler.png
similarity index 100%
rename from docs/assets/api/toc/scheduler.png
rename to static/img/api/toc/scheduler.png
diff --git a/docs/assets/api/toc/sidebar.png b/static/img/api/toc/sidebar.png
similarity index 100%
rename from docs/assets/api/toc/sidebar.png
rename to static/img/api/toc/sidebar.png
diff --git a/docs/assets/api/toc/skinbuilder.png b/static/img/api/toc/skinbuilder.png
similarity index 100%
rename from docs/assets/api/toc/skinbuilder.png
rename to static/img/api/toc/skinbuilder.png
diff --git a/docs/assets/api/toc/slider.png b/static/img/api/toc/slider.png
similarity index 100%
rename from docs/assets/api/toc/slider.png
rename to static/img/api/toc/slider.png
diff --git a/docs/assets/api/toc/spreadsheet.png b/static/img/api/toc/spreadsheet.png
similarity index 100%
rename from docs/assets/api/toc/spreadsheet.png
rename to static/img/api/toc/spreadsheet.png
diff --git a/docs/assets/api/toc/tabbar.png b/static/img/api/toc/tabbar.png
similarity index 100%
rename from docs/assets/api/toc/tabbar.png
rename to static/img/api/toc/tabbar.png
diff --git a/docs/assets/api/toc/toolbar.png b/static/img/api/toc/toolbar.png
similarity index 100%
rename from docs/assets/api/toc/toolbar.png
rename to static/img/api/toc/toolbar.png
diff --git a/docs/assets/api/toc/tree.png b/static/img/api/toc/tree.png
similarity index 100%
rename from docs/assets/api/toc/tree.png
rename to static/img/api/toc/tree.png
diff --git a/docs/assets/api/toc/treegrid.png b/static/img/api/toc/treegrid.png
similarity index 100%
rename from docs/assets/api/toc/treegrid.png
rename to static/img/api/toc/treegrid.png
diff --git a/docs/assets/api/toc/vault.png b/static/img/api/toc/vault.png
similarity index 100%
rename from docs/assets/api/toc/vault.png
rename to static/img/api/toc/vault.png
diff --git a/docs/assets/api/toc/windows.png b/static/img/api/toc/windows.png
similarity index 100%
rename from docs/assets/api/toc/windows.png
rename to static/img/api/toc/windows.png
diff --git a/docs/assets/base_icons/dxi_icons.png b/static/img/base_icons/dxi_icons.png
similarity index 100%
rename from docs/assets/base_icons/dxi_icons.png
rename to static/img/base_icons/dxi_icons.png
diff --git a/docs/assets/calendar/blocked_dates.png b/static/img/calendar/blocked_dates.png
similarity index 100%
rename from docs/assets/calendar/blocked_dates.png
rename to static/img/calendar/blocked_dates.png
diff --git a/docs/assets/calendar/calendar_blocked_days.png b/static/img/calendar/calendar_blocked_days.png
similarity index 100%
rename from docs/assets/calendar/calendar_blocked_days.png
rename to static/img/calendar/calendar_blocked_days.png
diff --git a/docs/assets/calendar/calendar_calendar_mode.png b/static/img/calendar/calendar_calendar_mode.png
similarity index 100%
rename from docs/assets/calendar/calendar_calendar_mode.png
rename to static/img/calendar/calendar_calendar_mode.png
diff --git a/docs/assets/calendar/calendar_front.png b/static/img/calendar/calendar_front.png
similarity index 100%
rename from docs/assets/calendar/calendar_front.png
rename to static/img/calendar/calendar_front.png
diff --git a/docs/assets/calendar/calendar_in_div.png b/static/img/calendar/calendar_in_div.png
similarity index 100%
rename from docs/assets/calendar/calendar_in_div.png
rename to static/img/calendar/calendar_in_div.png
diff --git a/docs/assets/calendar/calendar_locale_rus.png b/static/img/calendar/calendar_locale_rus.png
similarity index 100%
rename from docs/assets/calendar/calendar_locale_rus.png
rename to static/img/calendar/calendar_locale_rus.png
diff --git a/docs/assets/calendar/calendar_marked.png b/static/img/calendar/calendar_marked.png
similarity index 100%
rename from docs/assets/calendar/calendar_marked.png
rename to static/img/calendar/calendar_marked.png
diff --git a/docs/assets/calendar/calendar_material.png b/static/img/calendar/calendar_material.png
similarity index 100%
rename from docs/assets/calendar/calendar_material.png
rename to static/img/calendar/calendar_material.png
diff --git a/docs/assets/calendar/calendar_mode.png b/static/img/calendar/calendar_mode.png
similarity index 100%
rename from docs/assets/calendar/calendar_mode.png
rename to static/img/calendar/calendar_mode.png
diff --git a/docs/assets/calendar/calendar_month_mode.png b/static/img/calendar/calendar_month_mode.png
similarity index 100%
rename from docs/assets/calendar/calendar_month_mode.png
rename to static/img/calendar/calendar_month_mode.png
diff --git a/docs/assets/calendar/calendar_range_styling.png b/static/img/calendar/calendar_range_styling.png
similarity index 100%
rename from docs/assets/calendar/calendar_range_styling.png
rename to static/img/calendar/calendar_range_styling.png
diff --git a/docs/assets/calendar/calendar_start_sunday.png b/static/img/calendar/calendar_start_sunday.png
similarity index 100%
rename from docs/assets/calendar/calendar_start_sunday.png
rename to static/img/calendar/calendar_start_sunday.png
diff --git a/docs/assets/calendar/calendar_width.png b/static/img/calendar/calendar_width.png
similarity index 100%
rename from docs/assets/calendar/calendar_width.png
rename to static/img/calendar/calendar_width.png
diff --git a/docs/assets/calendar/calendar_year_mode.png b/static/img/calendar/calendar_year_mode.png
similarity index 100%
rename from docs/assets/calendar/calendar_year_mode.png
rename to static/img/calendar/calendar_year_mode.png
diff --git a/docs/assets/calendar/date_picker.png b/static/img/calendar/date_picker.png
similarity index 100%
rename from docs/assets/calendar/date_picker.png
rename to static/img/calendar/date_picker.png
diff --git a/docs/assets/calendar/date_range.png b/static/img/calendar/date_range.png
similarity index 100%
rename from docs/assets/calendar/date_range.png
rename to static/img/calendar/date_range.png
diff --git a/docs/assets/calendar/locale.png b/static/img/calendar/locale.png
similarity index 100%
rename from docs/assets/calendar/locale.png
rename to static/img/calendar/locale.png
diff --git a/docs/assets/calendar/marked_dates.png b/static/img/calendar/marked_dates.png
similarity index 100%
rename from docs/assets/calendar/marked_dates.png
rename to static/img/calendar/marked_dates.png
diff --git a/docs/assets/calendar/month_mode.png b/static/img/calendar/month_mode.png
similarity index 100%
rename from docs/assets/calendar/month_mode.png
rename to static/img/calendar/month_mode.png
diff --git a/docs/assets/calendar/range_mode.png b/static/img/calendar/range_mode.png
similarity index 100%
rename from docs/assets/calendar/range_mode.png
rename to static/img/calendar/range_mode.png
diff --git a/docs/assets/calendar/styled_calendar.png b/static/img/calendar/styled_calendar.png
similarity index 100%
rename from docs/assets/calendar/styled_calendar.png
rename to static/img/calendar/styled_calendar.png
diff --git a/docs/assets/calendar/this_month_only.png b/static/img/calendar/this_month_only.png
similarity index 100%
rename from docs/assets/calendar/this_month_only.png
rename to static/img/calendar/this_month_only.png
diff --git a/docs/assets/calendar/timepicker_format.png b/static/img/calendar/timepicker_format.png
similarity index 100%
rename from docs/assets/calendar/timepicker_format.png
rename to static/img/calendar/timepicker_format.png
diff --git a/docs/assets/calendar/tooltips.png b/static/img/calendar/tooltips.png
similarity index 100%
rename from docs/assets/calendar/tooltips.png
rename to static/img/calendar/tooltips.png
diff --git a/docs/assets/calendar/week_number_column.png b/static/img/calendar/week_number_column.png
similarity index 100%
rename from docs/assets/calendar/week_number_column.png
rename to static/img/calendar/week_number_column.png
diff --git a/docs/assets/calendar/week_numbers.png b/static/img/calendar/week_numbers.png
similarity index 100%
rename from docs/assets/calendar/week_numbers.png
rename to static/img/calendar/week_numbers.png
diff --git a/docs/assets/calendar/weekstart_monday.png b/static/img/calendar/weekstart_monday.png
similarity index 100%
rename from docs/assets/calendar/weekstart_monday.png
rename to static/img/calendar/weekstart_monday.png
diff --git a/docs/assets/calendar/year_mode.png b/static/img/calendar/year_mode.png
similarity index 100%
rename from docs/assets/calendar/year_mode.png
rename to static/img/calendar/year_mode.png
diff --git a/docs/assets/chart/area_overview.png b/static/img/chart/area_overview.png
similarity index 100%
rename from docs/assets/chart/area_overview.png
rename to static/img/chart/area_overview.png
diff --git a/docs/assets/chart/bar_gradient.png b/static/img/chart/bar_gradient.png
similarity index 100%
rename from docs/assets/chart/bar_gradient.png
rename to static/img/chart/bar_gradient.png
diff --git a/docs/assets/chart/bar_overview.png b/static/img/chart/bar_overview.png
similarity index 100%
rename from docs/assets/chart/bar_overview.png
rename to static/img/chart/bar_overview.png
diff --git a/docs/assets/chart/custom_style.png b/static/img/chart/custom_style.png
similarity index 100%
rename from docs/assets/chart/custom_style.png
rename to static/img/chart/custom_style.png
diff --git a/docs/assets/chart/donut_overview.png b/static/img/chart/donut_overview.png
similarity index 100%
rename from docs/assets/chart/donut_overview.png
rename to static/img/chart/donut_overview.png
diff --git a/docs/assets/chart/heatmap_overview.png b/static/img/chart/heatmap_overview.png
similarity index 100%
rename from docs/assets/chart/heatmap_overview.png
rename to static/img/chart/heatmap_overview.png
diff --git a/docs/assets/chart/line_overview.png b/static/img/chart/line_overview.png
similarity index 100%
rename from docs/assets/chart/line_overview.png
rename to static/img/chart/line_overview.png
diff --git a/docs/assets/chart/pie_overview.png b/static/img/chart/pie_overview.png
similarity index 100%
rename from docs/assets/chart/pie_overview.png
rename to static/img/chart/pie_overview.png
diff --git a/docs/assets/chart/radar_overview.png b/static/img/chart/radar_overview.png
similarity index 100%
rename from docs/assets/chart/radar_overview.png
rename to static/img/chart/radar_overview.png
diff --git a/docs/assets/chart/scatter_overview.png b/static/img/chart/scatter_overview.png
similarity index 100%
rename from docs/assets/chart/scatter_overview.png
rename to static/img/chart/scatter_overview.png
diff --git a/docs/assets/chart/show_percent_values.png b/static/img/chart/show_percent_values.png
similarity index 100%
rename from docs/assets/chart/show_percent_values.png
rename to static/img/chart/show_percent_values.png
diff --git a/docs/assets/chart/show_text.png b/static/img/chart/show_text.png
similarity index 100%
rename from docs/assets/chart/show_text.png
rename to static/img/chart/show_text.png
diff --git a/docs/assets/chart/show_tooltip.png b/static/img/chart/show_tooltip.png
similarity index 100%
rename from docs/assets/chart/show_tooltip.png
rename to static/img/chart/show_tooltip.png
diff --git a/docs/assets/chart/spline_overview.png b/static/img/chart/spline_overview.png
similarity index 100%
rename from docs/assets/chart/spline_overview.png
rename to static/img/chart/spline_overview.png
diff --git a/docs/assets/chart/splinearea_overview.png b/static/img/chart/splinearea_overview.png
similarity index 100%
rename from docs/assets/chart/splinearea_overview.png
rename to static/img/chart/splinearea_overview.png
diff --git a/docs/assets/chart/text_template.png b/static/img/chart/text_template.png
similarity index 100%
rename from docs/assets/chart/text_template.png
rename to static/img/chart/text_template.png
diff --git a/docs/assets/chart/treemap.png b/static/img/chart/treemap.png
similarity index 100%
rename from docs/assets/chart/treemap.png
rename to static/img/chart/treemap.png
diff --git a/docs/assets/chart/xbar_overview.png b/static/img/chart/xbar_overview.png
similarity index 100%
rename from docs/assets/chart/xbar_overview.png
rename to static/img/chart/xbar_overview.png
diff --git a/docs/assets/colorpicker/colorpicker_css.png b/static/img/colorpicker/colorpicker_css.png
similarity index 100%
rename from docs/assets/colorpicker/colorpicker_css.png
rename to static/img/colorpicker/colorpicker_css.png
diff --git a/docs/assets/colorpicker/colorpicker_front.png b/static/img/colorpicker/colorpicker_front.png
similarity index 100%
rename from docs/assets/colorpicker/colorpicker_front.png
rename to static/img/colorpicker/colorpicker_front.png
diff --git a/docs/assets/colorpicker/colorpicker_transparency.png b/static/img/colorpicker/colorpicker_transparency.png
similarity index 100%
rename from docs/assets/colorpicker/colorpicker_transparency.png
rename to static/img/colorpicker/colorpicker_transparency.png
diff --git a/docs/assets/colorpicker/custom_colors.png b/static/img/colorpicker/custom_colors.png
similarity index 100%
rename from docs/assets/colorpicker/custom_colors.png
rename to static/img/colorpicker/custom_colors.png
diff --git a/docs/assets/colorpicker/custom_palette.png b/static/img/colorpicker/custom_palette.png
similarity index 100%
rename from docs/assets/colorpicker/custom_palette.png
rename to static/img/colorpicker/custom_palette.png
diff --git a/docs/assets/colorpicker/default_palette.png b/static/img/colorpicker/default_palette.png
similarity index 100%
rename from docs/assets/colorpicker/default_palette.png
rename to static/img/colorpicker/default_palette.png
diff --git a/docs/assets/colorpicker/no_shades_palette.png b/static/img/colorpicker/no_shades_palette.png
similarity index 100%
rename from docs/assets/colorpicker/no_shades_palette.png
rename to static/img/colorpicker/no_shades_palette.png
diff --git a/docs/assets/colorpicker/palette_only.png b/static/img/colorpicker/palette_only.png
similarity index 100%
rename from docs/assets/colorpicker/palette_only.png
rename to static/img/colorpicker/palette_only.png
diff --git a/docs/assets/colorpicker/picker_only.png b/static/img/colorpicker/picker_only.png
similarity index 100%
rename from docs/assets/colorpicker/picker_only.png
rename to static/img/colorpicker/picker_only.png
diff --git a/docs/assets/combo/combo_front.png b/static/img/combo/combo_front.png
similarity index 100%
rename from docs/assets/combo/combo_front.png
rename to static/img/combo/combo_front.png
diff --git a/docs/assets/combo/combo_template.png b/static/img/combo/combo_template.png
similarity index 100%
rename from docs/assets/combo/combo_template.png
rename to static/img/combo/combo_template.png
diff --git a/docs/assets/combo/custom_css.png b/static/img/combo/custom_css.png
similarity index 100%
rename from docs/assets/combo/custom_css.png
rename to static/img/combo/custom_css.png
diff --git a/docs/assets/combo/custom_filter.png b/static/img/combo/custom_filter.png
similarity index 100%
rename from docs/assets/combo/custom_filter.png
rename to static/img/combo/custom_filter.png
diff --git a/docs/assets/combo/disabled.png b/static/img/combo/disabled.png
similarity index 100%
rename from docs/assets/combo/disabled.png
rename to static/img/combo/disabled.png
diff --git a/docs/assets/combo/height.png b/static/img/combo/height.png
similarity index 100%
rename from docs/assets/combo/height.png
rename to static/img/combo/height.png
diff --git a/docs/assets/combo/label_left.png b/static/img/combo/label_left.png
similarity index 100%
rename from docs/assets/combo/label_left.png
rename to static/img/combo/label_left.png
diff --git a/docs/assets/combo/label_top.png b/static/img/combo/label_top.png
similarity index 100%
rename from docs/assets/combo/label_top.png
rename to static/img/combo/label_top.png
diff --git a/docs/assets/combo/new_value.png b/static/img/combo/new_value.png
similarity index 100%
rename from docs/assets/combo/new_value.png
rename to static/img/combo/new_value.png
diff --git a/docs/assets/combo/options_group.png b/static/img/combo/options_group.png
similarity index 100%
rename from docs/assets/combo/options_group.png
rename to static/img/combo/options_group.png
diff --git a/docs/assets/combo/placeholder.png b/static/img/combo/placeholder.png
similarity index 100%
rename from docs/assets/combo/placeholder.png
rename to static/img/combo/placeholder.png
diff --git a/docs/assets/combo/readonly.png b/static/img/combo/readonly.png
similarity index 100%
rename from docs/assets/combo/readonly.png
rename to static/img/combo/readonly.png
diff --git a/docs/assets/combo/selected_item.png b/static/img/combo/selected_item.png
similarity index 100%
rename from docs/assets/combo/selected_item.png
rename to static/img/combo/selected_item.png
diff --git a/docs/assets/dataview/arrow_navigation.png b/static/img/dataview/arrow_navigation.png
similarity index 100%
rename from docs/assets/dataview/arrow_navigation.png
rename to static/img/dataview/arrow_navigation.png
diff --git a/docs/assets/dataview/custom_items_styles.png b/static/img/dataview/custom_items_styles.png
similarity index 100%
rename from docs/assets/dataview/custom_items_styles.png
rename to static/img/dataview/custom_items_styles.png
diff --git a/docs/assets/dataview/custom_selection_styles.png b/static/img/dataview/custom_selection_styles.png
similarity index 100%
rename from docs/assets/dataview/custom_selection_styles.png
rename to static/img/dataview/custom_selection_styles.png
diff --git a/docs/assets/dataview/custom_widget_styles.png b/static/img/dataview/custom_widget_styles.png
similarity index 100%
rename from docs/assets/dataview/custom_widget_styles.png
rename to static/img/dataview/custom_widget_styles.png
diff --git a/docs/assets/dataview/dataview_front.png b/static/img/dataview/dataview_front.png
similarity index 100%
rename from docs/assets/dataview/dataview_front.png
rename to static/img/dataview/dataview_front.png
diff --git a/docs/assets/dataview/dataview_height.png b/static/img/dataview/dataview_height.png
similarity index 100%
rename from docs/assets/dataview/dataview_height.png
rename to static/img/dataview/dataview_height.png
diff --git a/docs/assets/dataview/disable_selection.png b/static/img/dataview/disable_selection.png
similarity index 100%
rename from docs/assets/dataview/disable_selection.png
rename to static/img/dataview/disable_selection.png
diff --git a/docs/assets/dataview/editable.png b/static/img/dataview/editable.png
similarity index 100%
rename from docs/assets/dataview/editable.png
rename to static/img/dataview/editable.png
diff --git a/docs/assets/dataview/gap.png b/static/img/dataview/gap.png
similarity index 100%
rename from docs/assets/dataview/gap.png
rename to static/img/dataview/gap.png
diff --git a/docs/assets/dataview/item_height.png b/static/img/dataview/item_height.png
similarity index 100%
rename from docs/assets/dataview/item_height.png
rename to static/img/dataview/item_height.png
diff --git a/docs/assets/dataview/items_in_row.png b/static/img/dataview/items_in_row.png
similarity index 100%
rename from docs/assets/dataview/items_in_row.png
rename to static/img/dataview/items_in_row.png
diff --git a/docs/assets/dataview/multiselection.png b/static/img/dataview/multiselection.png
similarity index 100%
rename from docs/assets/dataview/multiselection.png
rename to static/img/dataview/multiselection.png
diff --git a/docs/assets/dataview/template.png b/static/img/dataview/template.png
similarity index 100%
rename from docs/assets/dataview/template.png
rename to static/img/dataview/template.png
diff --git a/docs/assets/form/alignment_around.png b/static/img/form/alignment_around.png
similarity index 100%
rename from docs/assets/form/alignment_around.png
rename to static/img/form/alignment_around.png
diff --git a/docs/assets/form/alignment_between.png b/static/img/form/alignment_between.png
similarity index 100%
rename from docs/assets/form/alignment_between.png
rename to static/img/form/alignment_between.png
diff --git a/docs/assets/form/alignment_center.png b/static/img/form/alignment_center.png
similarity index 100%
rename from docs/assets/form/alignment_center.png
rename to static/img/form/alignment_center.png
diff --git a/docs/assets/form/alignment_end.png b/static/img/form/alignment_end.png
similarity index 100%
rename from docs/assets/form/alignment_end.png
rename to static/img/form/alignment_end.png
diff --git a/docs/assets/form/alignment_evenly.png b/static/img/form/alignment_evenly.png
similarity index 100%
rename from docs/assets/form/alignment_evenly.png
rename to static/img/form/alignment_evenly.png
diff --git a/docs/assets/form/alignment_start.png b/static/img/form/alignment_start.png
similarity index 100%
rename from docs/assets/form/alignment_start.png
rename to static/img/form/alignment_start.png
diff --git a/docs/assets/form/blocks.png b/static/img/form/blocks.png
similarity index 100%
rename from docs/assets/form/blocks.png
rename to static/img/form/blocks.png
diff --git a/docs/assets/form/custom_style.png b/static/img/form/custom_style.png
similarity index 100%
rename from docs/assets/form/custom_style.png
rename to static/img/form/custom_style.png
diff --git a/docs/assets/form/custom_styles.png b/static/img/form/custom_styles.png
similarity index 100%
rename from docs/assets/form/custom_styles.png
rename to static/img/form/custom_styles.png
diff --git a/docs/assets/form/disabled.png b/static/img/form/disabled.png
similarity index 100%
rename from docs/assets/form/disabled.png
rename to static/img/form/disabled.png
diff --git a/docs/assets/form/form_avatar.png b/static/img/form/form_avatar.png
similarity index 100%
rename from docs/assets/form/form_avatar.png
rename to static/img/form/form_avatar.png
diff --git a/docs/assets/form/form_block.png b/static/img/form/form_block.png
similarity index 100%
rename from docs/assets/form/form_block.png
rename to static/img/form/form_block.png
diff --git a/docs/assets/form/form_button.png b/static/img/form/form_button.png
similarity index 100%
rename from docs/assets/form/form_button.png
rename to static/img/form/form_button.png
diff --git a/docs/assets/form/form_checkbox.png b/static/img/form/form_checkbox.png
similarity index 100%
rename from docs/assets/form/form_checkbox.png
rename to static/img/form/form_checkbox.png
diff --git a/docs/assets/form/form_checkboxgroup.png b/static/img/form/form_checkboxgroup.png
similarity index 100%
rename from docs/assets/form/form_checkboxgroup.png
rename to static/img/form/form_checkboxgroup.png
diff --git a/docs/assets/form/form_colorpicker.png b/static/img/form/form_colorpicker.png
similarity index 100%
rename from docs/assets/form/form_colorpicker.png
rename to static/img/form/form_colorpicker.png
diff --git a/docs/assets/form/form_combo.png b/static/img/form/form_combo.png
similarity index 100%
rename from docs/assets/form/form_combo.png
rename to static/img/form/form_combo.png
diff --git a/docs/assets/form/form_datepicker.png b/static/img/form/form_datepicker.png
similarity index 100%
rename from docs/assets/form/form_datepicker.png
rename to static/img/form/form_datepicker.png
diff --git a/docs/assets/form/form_fieldset.png b/static/img/form/form_fieldset.png
similarity index 100%
rename from docs/assets/form/form_fieldset.png
rename to static/img/form/form_fieldset.png
diff --git a/docs/assets/form/form_front.png b/static/img/form/form_front.png
similarity index 100%
rename from docs/assets/form/form_front.png
rename to static/img/form/form_front.png
diff --git a/docs/assets/form/form_init.png b/static/img/form/form_init.png
similarity index 100%
rename from docs/assets/form/form_init.png
rename to static/img/form/form_init.png
diff --git a/docs/assets/form/form_input.png b/static/img/form/form_input.png
similarity index 100%
rename from docs/assets/form/form_input.png
rename to static/img/form/form_input.png
diff --git a/docs/assets/form/form_radio.png b/static/img/form/form_radio.png
similarity index 100%
rename from docs/assets/form/form_radio.png
rename to static/img/form/form_radio.png
diff --git a/docs/assets/form/form_select.png b/static/img/form/form_select.png
similarity index 100%
rename from docs/assets/form/form_select.png
rename to static/img/form/form_select.png
diff --git a/docs/assets/form/form_simplevault.png b/static/img/form/form_simplevault.png
similarity index 100%
rename from docs/assets/form/form_simplevault.png
rename to static/img/form/form_simplevault.png
diff --git a/docs/assets/form/form_slider.png b/static/img/form/form_slider.png
similarity index 100%
rename from docs/assets/form/form_slider.png
rename to static/img/form/form_slider.png
diff --git a/docs/assets/form/form_text.png b/static/img/form/form_text.png
similarity index 100%
rename from docs/assets/form/form_text.png
rename to static/img/form/form_text.png
diff --git a/docs/assets/form/form_textarea.png b/static/img/form/form_textarea.png
similarity index 100%
rename from docs/assets/form/form_textarea.png
rename to static/img/form/form_textarea.png
diff --git a/docs/assets/form/form_timepicker.png b/static/img/form/form_timepicker.png
similarity index 100%
rename from docs/assets/form/form_timepicker.png
rename to static/img/form/form_timepicker.png
diff --git a/docs/assets/form/form_toggle.png b/static/img/form/form_toggle.png
similarity index 100%
rename from docs/assets/form/form_toggle.png
rename to static/img/form/form_toggle.png
diff --git a/docs/assets/form/form_togglegroup.png b/static/img/form/form_togglegroup.png
similarity index 100%
rename from docs/assets/form/form_togglegroup.png
rename to static/img/form/form_togglegroup.png
diff --git a/docs/assets/form/length_validate.png b/static/img/form/length_validate.png
similarity index 100%
rename from docs/assets/form/length_validate.png
rename to static/img/form/length_validate.png
diff --git a/docs/assets/form/required_fields.png b/static/img/form/required_fields.png
similarity index 100%
rename from docs/assets/form/required_fields.png
rename to static/img/form/required_fields.png
diff --git a/docs/assets/form/set_focus.png b/static/img/form/set_focus.png
similarity index 100%
rename from docs/assets/form/set_focus.png
rename to static/img/form/set_focus.png
diff --git a/docs/assets/form/value_validate.png b/static/img/form/value_validate.png
similarity index 100%
rename from docs/assets/form/value_validate.png
rename to static/img/form/value_validate.png
diff --git a/docs/assets/grid/blockselection_module.png b/static/img/grid/blockselection_module.png
similarity index 100%
rename from docs/assets/grid/blockselection_module.png
rename to static/img/grid/blockselection_module.png
diff --git a/docs/assets/grid/cell_templates.png b/static/img/grid/cell_templates.png
similarity index 100%
rename from docs/assets/grid/cell_templates.png
rename to static/img/grid/cell_templates.png
diff --git a/docs/assets/grid/cellcss.png b/static/img/grid/cellcss.png
similarity index 100%
rename from docs/assets/grid/cellcss.png
rename to static/img/grid/cellcss.png
diff --git a/docs/assets/grid/col_number_validation.png b/static/img/grid/col_number_validation.png
similarity index 100%
rename from docs/assets/grid/col_number_validation.png
rename to static/img/grid/col_number_validation.png
diff --git a/docs/assets/grid/combobox_editor.png b/static/img/grid/combobox_editor.png
similarity index 100%
rename from docs/assets/grid/combobox_editor.png
rename to static/img/grid/combobox_editor.png
diff --git a/docs/assets/grid/desired_setcell.png b/static/img/grid/desired_setcell.png
similarity index 100%
rename from docs/assets/grid/desired_setcell.png
rename to static/img/grid/desired_setcell.png
diff --git a/docs/assets/grid/dragpanel_module.png b/static/img/grid/dragpanel_module.png
similarity index 100%
rename from docs/assets/grid/dragpanel_module.png
rename to static/img/grid/dragpanel_module.png
diff --git a/docs/assets/grid/footer_bottom_position.png b/static/img/grid/footer_bottom_position.png
similarity index 100%
rename from docs/assets/grid/footer_bottom_position.png
rename to static/img/grid/footer_bottom_position.png
diff --git a/docs/assets/grid/footer_relative_position.png b/static/img/grid/footer_relative_position.png
similarity index 100%
rename from docs/assets/grid/footer_relative_position.png
rename to static/img/grid/footer_relative_position.png
diff --git a/docs/assets/grid/grid_front.png b/static/img/grid/grid_front.png
similarity index 100%
rename from docs/assets/grid/grid_front.png
rename to static/img/grid/grid_front.png
diff --git a/docs/assets/grid/html_content.png b/static/img/grid/html_content.png
similarity index 100%
rename from docs/assets/grid/html_content.png
rename to static/img/grid/html_content.png
diff --git a/docs/assets/grid/mark_cell.png b/static/img/grid/mark_cell.png
similarity index 100%
rename from docs/assets/grid/mark_cell.png
rename to static/img/grid/mark_cell.png
diff --git a/docs/assets/grid/markcells.png b/static/img/grid/markcells.png
similarity index 100%
rename from docs/assets/grid/markcells.png
rename to static/img/grid/markcells.png
diff --git a/docs/assets/grid/multi_level_nesting.png b/static/img/grid/multi_level_nesting.png
similarity index 100%
rename from docs/assets/grid/multi_level_nesting.png
rename to static/img/grid/multi_level_nesting.png
diff --git a/docs/assets/grid/multisort_grouped_data.png b/static/img/grid/multisort_grouped_data.png
similarity index 100%
rename from docs/assets/grid/multisort_grouped_data.png
rename to static/img/grid/multisort_grouped_data.png
diff --git a/docs/assets/grid/multisorting_data.png b/static/img/grid/multisorting_data.png
similarity index 100%
rename from docs/assets/grid/multisorting_data.png
rename to static/img/grid/multisorting_data.png
diff --git a/docs/assets/grid/new_combobox_option.png b/static/img/grid/new_combobox_option.png
similarity index 100%
rename from docs/assets/grid/new_combobox_option.png
rename to static/img/grid/new_combobox_option.png
diff --git a/docs/assets/grid/range_setcell.png b/static/img/grid/range_setcell.png
similarity index 100%
rename from docs/assets/grid/range_setcell.png
rename to static/img/grid/range_setcell.png
diff --git a/docs/assets/grid/row_expander.png b/static/img/grid/row_expander.png
similarity index 100%
rename from docs/assets/grid/row_expander.png
rename to static/img/grid/row_expander.png
diff --git a/docs/assets/grid/rowcss.png b/static/img/grid/rowcss.png
similarity index 100%
rename from docs/assets/grid/rowcss.png
rename to static/img/grid/rowcss.png
diff --git a/docs/assets/grid/set_cell.png b/static/img/grid/set_cell.png
similarity index 100%
rename from docs/assets/grid/set_cell.png
rename to static/img/grid/set_cell.png
diff --git a/docs/assets/grid/styling_grid.png b/static/img/grid/styling_grid.png
similarity index 100%
rename from docs/assets/grid/styling_grid.png
rename to static/img/grid/styling_grid.png
diff --git a/docs/assets/grid/styling_header.png b/static/img/grid/styling_header.png
similarity index 100%
rename from docs/assets/grid/styling_header.png
rename to static/img/grid/styling_header.png
diff --git a/docs/assets/grid/styling_selection.png b/static/img/grid/styling_selection.png
similarity index 100%
rename from docs/assets/grid/styling_selection.png
rename to static/img/grid/styling_selection.png
diff --git a/docs/assets/grid/subgrid_specific_rows.png b/static/img/grid/subgrid_specific_rows.png
similarity index 100%
rename from docs/assets/grid/subgrid_specific_rows.png
rename to static/img/grid/subgrid_specific_rows.png
diff --git a/docs/assets/grid/tooltip_template.png b/static/img/grid/tooltip_template.png
similarity index 100%
rename from docs/assets/grid/tooltip_template.png
rename to static/img/grid/tooltip_template.png
diff --git a/docs/assets/guides/dhx_typescript.png b/static/img/guides/dhx_typescript.png
similarity index 100%
rename from docs/assets/guides/dhx_typescript.png
rename to static/img/guides/dhx_typescript.png
diff --git a/docs/assets/guides/typescript.png b/static/img/guides/typescript.png
similarity index 100%
rename from docs/assets/guides/typescript.png
rename to static/img/guides/typescript.png
diff --git a/docs/assets/guides/typescript1.png b/static/img/guides/typescript1.png
similarity index 100%
rename from docs/assets/guides/typescript1.png
rename to static/img/guides/typescript1.png
diff --git a/docs/assets/icons/calendar.svg b/static/img/icons/calendar.svg
similarity index 100%
rename from docs/assets/icons/calendar.svg
rename to static/img/icons/calendar.svg
diff --git a/docs/assets/icons/chart.svg b/static/img/icons/chart.svg
similarity index 100%
rename from docs/assets/icons/chart.svg
rename to static/img/icons/chart.svg
diff --git a/docs/assets/icons/colorpicker.svg b/static/img/icons/colorpicker.svg
similarity index 100%
rename from docs/assets/icons/colorpicker.svg
rename to static/img/icons/colorpicker.svg
diff --git a/docs/assets/icons/combo.svg b/static/img/icons/combo.svg
similarity index 100%
rename from docs/assets/icons/combo.svg
rename to static/img/icons/combo.svg
diff --git a/docs/assets/icons/contextmenu.svg b/static/img/icons/contextmenu.svg
similarity index 100%
rename from docs/assets/icons/contextmenu.svg
rename to static/img/icons/contextmenu.svg
diff --git a/docs/assets/icons/dataview.svg b/static/img/icons/dataview.svg
similarity index 100%
rename from docs/assets/icons/dataview.svg
rename to static/img/icons/dataview.svg
diff --git a/docs/assets/icons/diagram.svg b/static/img/icons/diagram.svg
similarity index 100%
rename from docs/assets/icons/diagram.svg
rename to static/img/icons/diagram.svg
diff --git a/docs/assets/icons/editor.svg b/static/img/icons/editor.svg
similarity index 100%
rename from docs/assets/icons/editor.svg
rename to static/img/icons/editor.svg
diff --git a/docs/assets/icons/form.svg b/static/img/icons/form.svg
similarity index 100%
rename from docs/assets/icons/form.svg
rename to static/img/icons/form.svg
diff --git a/docs/assets/icons/gantt.svg b/static/img/icons/gantt.svg
similarity index 100%
rename from docs/assets/icons/gantt.svg
rename to static/img/icons/gantt.svg
diff --git a/docs/assets/icons/grid.svg b/static/img/icons/grid.svg
similarity index 100%
rename from docs/assets/icons/grid.svg
rename to static/img/icons/grid.svg
diff --git a/docs/assets/icons/layout.svg b/static/img/icons/layout.svg
similarity index 100%
rename from docs/assets/icons/layout.svg
rename to static/img/icons/layout.svg
diff --git a/docs/assets/icons/list.svg b/static/img/icons/list.svg
similarity index 100%
rename from docs/assets/icons/list.svg
rename to static/img/icons/list.svg
diff --git a/docs/assets/icons/menu.svg b/static/img/icons/menu.svg
similarity index 100%
rename from docs/assets/icons/menu.svg
rename to static/img/icons/menu.svg
diff --git a/docs/assets/icons/message.svg b/static/img/icons/message.svg
similarity index 100%
rename from docs/assets/icons/message.svg
rename to static/img/icons/message.svg
diff --git a/docs/assets/icons/pivot.svg b/static/img/icons/pivot.svg
similarity index 100%
rename from docs/assets/icons/pivot.svg
rename to static/img/icons/pivot.svg
diff --git a/docs/assets/icons/popup.svg b/static/img/icons/popup.svg
similarity index 100%
rename from docs/assets/icons/popup.svg
rename to static/img/icons/popup.svg
diff --git a/docs/assets/icons/ribbon.svg b/static/img/icons/ribbon.svg
similarity index 100%
rename from docs/assets/icons/ribbon.svg
rename to static/img/icons/ribbon.svg
diff --git a/docs/assets/icons/scheduler.svg b/static/img/icons/scheduler.svg
similarity index 100%
rename from docs/assets/icons/scheduler.svg
rename to static/img/icons/scheduler.svg
diff --git a/docs/assets/icons/sidebar.svg b/static/img/icons/sidebar.svg
similarity index 100%
rename from docs/assets/icons/sidebar.svg
rename to static/img/icons/sidebar.svg
diff --git a/docs/assets/icons/slider.svg b/static/img/icons/slider.svg
similarity index 100%
rename from docs/assets/icons/slider.svg
rename to static/img/icons/slider.svg
diff --git a/docs/assets/icons/spreadsheet.svg b/static/img/icons/spreadsheet.svg
similarity index 100%
rename from docs/assets/icons/spreadsheet.svg
rename to static/img/icons/spreadsheet.svg
diff --git a/docs/assets/icons/tabbar.svg b/static/img/icons/tabbar.svg
similarity index 100%
rename from docs/assets/icons/tabbar.svg
rename to static/img/icons/tabbar.svg
diff --git a/docs/assets/icons/timepicker.svg b/static/img/icons/timepicker.svg
similarity index 100%
rename from docs/assets/icons/timepicker.svg
rename to static/img/icons/timepicker.svg
diff --git a/docs/assets/icons/toolbar.svg b/static/img/icons/toolbar.svg
similarity index 100%
rename from docs/assets/icons/toolbar.svg
rename to static/img/icons/toolbar.svg
diff --git a/docs/assets/icons/tooltip.svg b/static/img/icons/tooltip.svg
similarity index 100%
rename from docs/assets/icons/tooltip.svg
rename to static/img/icons/tooltip.svg
diff --git a/docs/assets/icons/tree.svg b/static/img/icons/tree.svg
similarity index 100%
rename from docs/assets/icons/tree.svg
rename to static/img/icons/tree.svg
diff --git a/docs/assets/icons/vault.svg b/static/img/icons/vault.svg
similarity index 100%
rename from docs/assets/icons/vault.svg
rename to static/img/icons/vault.svg
diff --git a/docs/assets/icons/window.svg b/static/img/icons/window.svg
similarity index 100%
rename from docs/assets/icons/window.svg
rename to static/img/icons/window.svg
diff --git a/docs/assets/integration/custom_scroll_optimus.png b/static/img/integration/custom_scroll_optimus.png
similarity index 100%
rename from docs/assets/integration/custom_scroll_optimus.png
rename to static/img/integration/custom_scroll_optimus.png
diff --git a/docs/assets/integration/work_with_backend.png b/static/img/integration/work_with_backend.png
similarity index 100%
rename from docs/assets/integration/work_with_backend.png
rename to static/img/integration/work_with_backend.png
diff --git a/docs/assets/integration/work_with_backend_chart.png b/static/img/integration/work_with_backend_chart.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_chart.png
rename to static/img/integration/work_with_backend_chart.png
diff --git a/docs/assets/integration/work_with_backend_dataview.png b/static/img/integration/work_with_backend_dataview.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_dataview.png
rename to static/img/integration/work_with_backend_dataview.png
diff --git a/docs/assets/integration/work_with_backend_dataview_and_form.png b/static/img/integration/work_with_backend_dataview_and_form.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_dataview_and_form.png
rename to static/img/integration/work_with_backend_dataview_and_form.png
diff --git a/docs/assets/integration/work_with_backend_dataview_card.png b/static/img/integration/work_with_backend_dataview_card.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_dataview_card.png
rename to static/img/integration/work_with_backend_dataview_card.png
diff --git a/docs/assets/integration/work_with_backend_form.png b/static/img/integration/work_with_backend_form.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_form.png
rename to static/img/integration/work_with_backend_form.png
diff --git a/docs/assets/integration/work_with_backend_grid.png b/static/img/integration/work_with_backend_grid.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_grid.png
rename to static/img/integration/work_with_backend_grid.png
diff --git a/docs/assets/integration/work_with_backend_grid_and_form.png b/static/img/integration/work_with_backend_grid_and_form.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_grid_and_form.png
rename to static/img/integration/work_with_backend_grid_and_form.png
diff --git a/docs/assets/integration/work_with_backend_grid_card.png b/static/img/integration/work_with_backend_grid_card.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_grid_card.png
rename to static/img/integration/work_with_backend_grid_card.png
diff --git a/docs/assets/integration/work_with_backend_list.png b/static/img/integration/work_with_backend_list.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_list.png
rename to static/img/integration/work_with_backend_list.png
diff --git a/docs/assets/integration/work_with_backend_list_and_form.png b/static/img/integration/work_with_backend_list_and_form.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_list_and_form.png
rename to static/img/integration/work_with_backend_list_and_form.png
diff --git a/docs/assets/integration/work_with_backend_list_card.png b/static/img/integration/work_with_backend_list_card.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_list_card.png
rename to static/img/integration/work_with_backend_list_card.png
diff --git a/docs/assets/integration/work_with_backend_save.png b/static/img/integration/work_with_backend_save.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_save.png
rename to static/img/integration/work_with_backend_save.png
diff --git a/docs/assets/integration/work_with_backend_simplevault.png b/static/img/integration/work_with_backend_simplevault.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_simplevault.png
rename to static/img/integration/work_with_backend_simplevault.png
diff --git a/docs/assets/integration/work_with_backend_tree.png b/static/img/integration/work_with_backend_tree.png
similarity index 100%
rename from docs/assets/integration/work_with_backend_tree.png
rename to static/img/integration/work_with_backend_tree.png
diff --git a/docs/assets/integration/work_with_frameworks.png b/static/img/integration/work_with_frameworks.png
similarity index 100%
rename from docs/assets/integration/work_with_frameworks.png
rename to static/img/integration/work_with_frameworks.png
diff --git a/docs/assets/layout/1c.png b/static/img/layout/1c.png
similarity index 100%
rename from docs/assets/layout/1c.png
rename to static/img/layout/1c.png
diff --git a/docs/assets/layout/2e.png b/static/img/layout/2e.png
similarity index 100%
rename from docs/assets/layout/2e.png
rename to static/img/layout/2e.png
diff --git a/docs/assets/layout/2u.png b/static/img/layout/2u.png
similarity index 100%
rename from docs/assets/layout/2u.png
rename to static/img/layout/2u.png
diff --git a/docs/assets/layout/3e.png b/static/img/layout/3e.png
similarity index 100%
rename from docs/assets/layout/3e.png
rename to static/img/layout/3e.png
diff --git a/docs/assets/layout/3j.png b/static/img/layout/3j.png
similarity index 100%
rename from docs/assets/layout/3j.png
rename to static/img/layout/3j.png
diff --git a/docs/assets/layout/3l.png b/static/img/layout/3l.png
similarity index 100%
rename from docs/assets/layout/3l.png
rename to static/img/layout/3l.png
diff --git a/docs/assets/layout/3t.png b/static/img/layout/3t.png
similarity index 100%
rename from docs/assets/layout/3t.png
rename to static/img/layout/3t.png
diff --git a/docs/assets/layout/3u.png b/static/img/layout/3u.png
similarity index 100%
rename from docs/assets/layout/3u.png
rename to static/img/layout/3u.png
diff --git a/docs/assets/layout/3w.png b/static/img/layout/3w.png
similarity index 100%
rename from docs/assets/layout/3w.png
rename to static/img/layout/3w.png
diff --git a/docs/assets/layout/4a.png b/static/img/layout/4a.png
similarity index 100%
rename from docs/assets/layout/4a.png
rename to static/img/layout/4a.png
diff --git a/docs/assets/layout/4c.png b/static/img/layout/4c.png
similarity index 100%
rename from docs/assets/layout/4c.png
rename to static/img/layout/4c.png
diff --git a/docs/assets/layout/4e.png b/static/img/layout/4e.png
similarity index 100%
rename from docs/assets/layout/4e.png
rename to static/img/layout/4e.png
diff --git a/docs/assets/layout/4f.png b/static/img/layout/4f.png
similarity index 100%
rename from docs/assets/layout/4f.png
rename to static/img/layout/4f.png
diff --git a/docs/assets/layout/4g.png b/static/img/layout/4g.png
similarity index 100%
rename from docs/assets/layout/4g.png
rename to static/img/layout/4g.png
diff --git a/docs/assets/layout/4h.png b/static/img/layout/4h.png
similarity index 100%
rename from docs/assets/layout/4h.png
rename to static/img/layout/4h.png
diff --git a/docs/assets/layout/4i.png b/static/img/layout/4i.png
similarity index 100%
rename from docs/assets/layout/4i.png
rename to static/img/layout/4i.png
diff --git a/docs/assets/layout/4j.png b/static/img/layout/4j.png
similarity index 100%
rename from docs/assets/layout/4j.png
rename to static/img/layout/4j.png
diff --git a/docs/assets/layout/4l.png b/static/img/layout/4l.png
similarity index 100%
rename from docs/assets/layout/4l.png
rename to static/img/layout/4l.png
diff --git a/docs/assets/layout/4t.png b/static/img/layout/4t.png
similarity index 100%
rename from docs/assets/layout/4t.png
rename to static/img/layout/4t.png
diff --git a/docs/assets/layout/4u.png b/static/img/layout/4u.png
similarity index 100%
rename from docs/assets/layout/4u.png
rename to static/img/layout/4u.png
diff --git a/docs/assets/layout/4w.png b/static/img/layout/4w.png
similarity index 100%
rename from docs/assets/layout/4w.png
rename to static/img/layout/4w.png
diff --git a/docs/assets/layout/5c.png b/static/img/layout/5c.png
similarity index 100%
rename from docs/assets/layout/5c.png
rename to static/img/layout/5c.png
diff --git a/docs/assets/layout/5e.png b/static/img/layout/5e.png
similarity index 100%
rename from docs/assets/layout/5e.png
rename to static/img/layout/5e.png
diff --git a/docs/assets/layout/5g.png b/static/img/layout/5g.png
similarity index 100%
rename from docs/assets/layout/5g.png
rename to static/img/layout/5g.png
diff --git a/docs/assets/layout/5h.png b/static/img/layout/5h.png
similarity index 100%
rename from docs/assets/layout/5h.png
rename to static/img/layout/5h.png
diff --git a/docs/assets/layout/5i.png b/static/img/layout/5i.png
similarity index 100%
rename from docs/assets/layout/5i.png
rename to static/img/layout/5i.png
diff --git a/docs/assets/layout/5k.png b/static/img/layout/5k.png
similarity index 100%
rename from docs/assets/layout/5k.png
rename to static/img/layout/5k.png
diff --git a/docs/assets/layout/5s.png b/static/img/layout/5s.png
similarity index 100%
rename from docs/assets/layout/5s.png
rename to static/img/layout/5s.png
diff --git a/docs/assets/layout/5u.png b/static/img/layout/5u.png
similarity index 100%
rename from docs/assets/layout/5u.png
rename to static/img/layout/5u.png
diff --git a/docs/assets/layout/5w.png b/static/img/layout/5w.png
similarity index 100%
rename from docs/assets/layout/5w.png
rename to static/img/layout/5w.png
diff --git a/docs/assets/layout/6a.png b/static/img/layout/6a.png
similarity index 100%
rename from docs/assets/layout/6a.png
rename to static/img/layout/6a.png
diff --git a/docs/assets/layout/6c.png b/static/img/layout/6c.png
similarity index 100%
rename from docs/assets/layout/6c.png
rename to static/img/layout/6c.png
diff --git a/docs/assets/layout/6e.png b/static/img/layout/6e.png
similarity index 100%
rename from docs/assets/layout/6e.png
rename to static/img/layout/6e.png
diff --git a/docs/assets/layout/6h.png b/static/img/layout/6h.png
similarity index 100%
rename from docs/assets/layout/6h.png
rename to static/img/layout/6h.png
diff --git a/docs/assets/layout/6i.png b/static/img/layout/6i.png
similarity index 100%
rename from docs/assets/layout/6i.png
rename to static/img/layout/6i.png
diff --git a/docs/assets/layout/6j.png b/static/img/layout/6j.png
similarity index 100%
rename from docs/assets/layout/6j.png
rename to static/img/layout/6j.png
diff --git a/docs/assets/layout/6w.png b/static/img/layout/6w.png
similarity index 100%
rename from docs/assets/layout/6w.png
rename to static/img/layout/6w.png
diff --git a/docs/assets/layout/7h.png b/static/img/layout/7h.png
similarity index 100%
rename from docs/assets/layout/7h.png
rename to static/img/layout/7h.png
diff --git a/docs/assets/layout/7i.png b/static/img/layout/7i.png
similarity index 100%
rename from docs/assets/layout/7i.png
rename to static/img/layout/7i.png
diff --git a/docs/assets/layout/custom_css.png b/static/img/layout/custom_css.png
similarity index 100%
rename from docs/assets/layout/custom_css.png
rename to static/img/layout/custom_css.png
diff --git a/docs/assets/layout/layout.png b/static/img/layout/layout.png
similarity index 100%
rename from docs/assets/layout/layout.png
rename to static/img/layout/layout.png
diff --git a/docs/assets/layout/layout_front.png b/static/img/layout/layout_front.png
similarity index 100%
rename from docs/assets/layout/layout_front.png
rename to static/img/layout/layout_front.png
diff --git a/docs/assets/layout/line_type.png b/static/img/layout/line_type.png
similarity index 100%
rename from docs/assets/layout/line_type.png
rename to static/img/layout/line_type.png
diff --git a/docs/assets/layout/mixed_types.png b/static/img/layout/mixed_types.png
similarity index 100%
rename from docs/assets/layout/mixed_types.png
rename to static/img/layout/mixed_types.png
diff --git a/docs/assets/layout/space_type.png b/static/img/layout/space_type.png
similarity index 100%
rename from docs/assets/layout/space_type.png
rename to static/img/layout/space_type.png
diff --git a/docs/assets/layout/wide_type.png b/static/img/layout/wide_type.png
similarity index 100%
rename from docs/assets/layout/wide_type.png
rename to static/img/layout/wide_type.png
diff --git a/docs/assets/layout/without_borders.png b/static/img/layout/without_borders.png
similarity index 100%
rename from docs/assets/layout/without_borders.png
rename to static/img/layout/without_borders.png
diff --git a/docs/assets/list/custom_css.png b/static/img/list/custom_css.png
similarity index 100%
rename from docs/assets/list/custom_css.png
rename to static/img/list/custom_css.png
diff --git a/docs/assets/list/custom_selection.png b/static/img/list/custom_selection.png
similarity index 100%
rename from docs/assets/list/custom_selection.png
rename to static/img/list/custom_selection.png
diff --git a/docs/assets/list/custom_style.png b/static/img/list/custom_style.png
similarity index 100%
rename from docs/assets/list/custom_style.png
rename to static/img/list/custom_style.png
diff --git a/docs/assets/list/disable_selection.png b/static/img/list/disable_selection.png
similarity index 100%
rename from docs/assets/list/disable_selection.png
rename to static/img/list/disable_selection.png
diff --git a/docs/assets/list/editable.png b/static/img/list/editable.png
similarity index 100%
rename from docs/assets/list/editable.png
rename to static/img/list/editable.png
diff --git a/docs/assets/list/item_height.png b/static/img/list/item_height.png
similarity index 100%
rename from docs/assets/list/item_height.png
rename to static/img/list/item_height.png
diff --git a/docs/assets/list/list_front.png b/static/img/list/list_front.png
similarity index 100%
rename from docs/assets/list/list_front.png
rename to static/img/list/list_front.png
diff --git a/docs/assets/list/list_height.png b/static/img/list/list_height.png
similarity index 100%
rename from docs/assets/list/list_height.png
rename to static/img/list/list_height.png
diff --git a/docs/assets/list/list_template.png b/static/img/list/list_template.png
similarity index 100%
rename from docs/assets/list/list_template.png
rename to static/img/list/list_template.png
diff --git a/docs/assets/list/multiselection.png b/static/img/list/multiselection.png
similarity index 100%
rename from docs/assets/list/multiselection.png
rename to static/img/list/multiselection.png
diff --git a/docs/assets/menu/bottom.png b/static/img/menu/bottom.png
similarity index 100%
rename from docs/assets/menu/bottom.png
rename to static/img/menu/bottom.png
diff --git a/docs/assets/menu/context.png b/static/img/menu/context.png
similarity index 100%
rename from docs/assets/menu/context.png
rename to static/img/menu/context.png
diff --git a/docs/assets/menu/context_menu.png b/static/img/menu/context_menu.png
similarity index 100%
rename from docs/assets/menu/context_menu.png
rename to static/img/menu/context_menu.png
diff --git a/docs/assets/menu/context_right.png b/static/img/menu/context_right.png
similarity index 100%
rename from docs/assets/menu/context_right.png
rename to static/img/menu/context_right.png
diff --git a/docs/assets/menu/custom_icons.png b/static/img/menu/custom_icons.png
similarity index 100%
rename from docs/assets/menu/custom_icons.png
rename to static/img/menu/custom_icons.png
diff --git a/docs/assets/menu/custom_menu.png b/static/img/menu/custom_menu.png
similarity index 100%
rename from docs/assets/menu/custom_menu.png
rename to static/img/menu/custom_menu.png
diff --git a/docs/assets/menu/hotkeys.png b/static/img/menu/hotkeys.png
similarity index 100%
rename from docs/assets/menu/hotkeys.png
rename to static/img/menu/hotkeys.png
diff --git a/docs/assets/menu/htmlcontent.png b/static/img/menu/htmlcontent.png
similarity index 100%
rename from docs/assets/menu/htmlcontent.png
rename to static/img/menu/htmlcontent.png
diff --git a/docs/assets/menu/menu.png b/static/img/menu/menu.png
similarity index 100%
rename from docs/assets/menu/menu.png
rename to static/img/menu/menu.png
diff --git a/docs/assets/menu/menu_front.png b/static/img/menu/menu_front.png
similarity index 100%
rename from docs/assets/menu/menu_front.png
rename to static/img/menu/menu_front.png
diff --git a/docs/assets/menu/menu_item.png b/static/img/menu/menu_item.png
similarity index 100%
rename from docs/assets/menu/menu_item.png
rename to static/img/menu/menu_item.png
diff --git a/docs/assets/menu/separator.png b/static/img/menu/separator.png
similarity index 100%
rename from docs/assets/menu/separator.png
rename to static/img/menu/separator.png
diff --git a/docs/assets/menu/separators.png b/static/img/menu/separators.png
similarity index 100%
rename from docs/assets/menu/separators.png
rename to static/img/menu/separators.png
diff --git a/docs/assets/menu/spacer.png b/static/img/menu/spacer.png
similarity index 100%
rename from docs/assets/menu/spacer.png
rename to static/img/menu/spacer.png
diff --git a/docs/assets/message/custom_style.png b/static/img/message/custom_style.png
similarity index 100%
rename from docs/assets/message/custom_style.png
rename to static/img/message/custom_style.png
diff --git a/docs/assets/message/dhx_alert.png b/static/img/message/dhx_alert.png
similarity index 100%
rename from docs/assets/message/dhx_alert.png
rename to static/img/message/dhx_alert.png
diff --git a/docs/assets/message/dhx_confirm.png b/static/img/message/dhx_confirm.png
similarity index 100%
rename from docs/assets/message/dhx_confirm.png
rename to static/img/message/dhx_confirm.png
diff --git a/docs/assets/message/dhx_message.png b/static/img/message/dhx_message.png
similarity index 100%
rename from docs/assets/message/dhx_message.png
rename to static/img/message/dhx_message.png
diff --git a/docs/assets/message/dhx_tooltip.png b/static/img/message/dhx_tooltip.png
similarity index 100%
rename from docs/assets/message/dhx_tooltip.png
rename to static/img/message/dhx_tooltip.png
diff --git a/docs/assets/message/message.png b/static/img/message/message.png
similarity index 100%
rename from docs/assets/message/message.png
rename to static/img/message/message.png
diff --git a/docs/assets/message/show_alert.png b/static/img/message/show_alert.png
similarity index 100%
rename from docs/assets/message/show_alert.png
rename to static/img/message/show_alert.png
diff --git a/docs/assets/message/show_confirm.png b/static/img/message/show_confirm.png
similarity index 100%
rename from docs/assets/message/show_confirm.png
rename to static/img/message/show_confirm.png
diff --git a/docs/assets/message/show_message.png b/static/img/message/show_message.png
similarity index 100%
rename from docs/assets/message/show_message.png
rename to static/img/message/show_message.png
diff --git a/docs/assets/message/show_tooltip.png b/static/img/message/show_tooltip.png
similarity index 100%
rename from docs/assets/message/show_tooltip.png
rename to static/img/message/show_tooltip.png
diff --git a/docs/assets/message/smart_tooltip.png b/static/img/message/smart_tooltip.png
similarity index 100%
rename from docs/assets/message/smart_tooltip.png
rename to static/img/message/smart_tooltip.png
diff --git a/docs/assets/message/temp_dhxtooltip_image.png b/static/img/message/temp_dhxtooltip_image.png
similarity index 100%
rename from docs/assets/message/temp_dhxtooltip_image.png
rename to static/img/message/temp_dhxtooltip_image.png
diff --git a/docs/assets/optimus/active_view.png b/static/img/optimus/active_view.png
similarity index 100%
rename from docs/assets/optimus/active_view.png
rename to static/img/optimus/active_view.png
diff --git a/docs/assets/optimus/chart.png b/static/img/optimus/chart.png
similarity index 100%
rename from docs/assets/optimus/chart.png
rename to static/img/optimus/chart.png
diff --git a/docs/assets/optimus/dataview.png b/static/img/optimus/dataview.png
similarity index 100%
rename from docs/assets/optimus/dataview.png
rename to static/img/optimus/dataview.png
diff --git a/docs/assets/optimus/demo/dashboard_demo.png b/static/img/optimus/demo/dashboard_demo.png
similarity index 100%
rename from docs/assets/optimus/demo/dashboard_demo.png
rename to static/img/optimus/demo/dashboard_demo.png
diff --git a/docs/assets/optimus/demo/examsystem_demo.png b/static/img/optimus/demo/examsystem_demo.png
similarity index 100%
rename from docs/assets/optimus/demo/examsystem_demo.png
rename to static/img/optimus/demo/examsystem_demo.png
diff --git a/docs/assets/optimus/demo/filemanager_demo.png b/static/img/optimus/demo/filemanager_demo.png
similarity index 100%
rename from docs/assets/optimus/demo/filemanager_demo.png
rename to static/img/optimus/demo/filemanager_demo.png
diff --git a/docs/assets/optimus/demo/geotracking_demo.png b/static/img/optimus/demo/geotracking_demo.png
similarity index 100%
rename from docs/assets/optimus/demo/geotracking_demo.png
rename to static/img/optimus/demo/geotracking_demo.png
diff --git a/docs/assets/optimus/demo/hospital_demo.png b/static/img/optimus/demo/hospital_demo.png
similarity index 100%
rename from docs/assets/optimus/demo/hospital_demo.png
rename to static/img/optimus/demo/hospital_demo.png
diff --git a/docs/assets/optimus/demo/hotel_demo.png b/static/img/optimus/demo/hotel_demo.png
similarity index 100%
rename from docs/assets/optimus/demo/hotel_demo.png
rename to static/img/optimus/demo/hotel_demo.png
diff --git a/docs/assets/optimus/demo/kpi_demo.png b/static/img/optimus/demo/kpi_demo.png
similarity index 100%
rename from docs/assets/optimus/demo/kpi_demo.png
rename to static/img/optimus/demo/kpi_demo.png
diff --git a/docs/assets/optimus/edit_chart.png b/static/img/optimus/edit_chart.png
similarity index 100%
rename from docs/assets/optimus/edit_chart.png
rename to static/img/optimus/edit_chart.png
diff --git a/docs/assets/optimus/edit_dataview.png b/static/img/optimus/edit_dataview.png
similarity index 100%
rename from docs/assets/optimus/edit_dataview.png
rename to static/img/optimus/edit_dataview.png
diff --git a/docs/assets/optimus/edit_grid.png b/static/img/optimus/edit_grid.png
similarity index 100%
rename from docs/assets/optimus/edit_grid.png
rename to static/img/optimus/edit_grid.png
diff --git a/docs/assets/optimus/empty_view.png b/static/img/optimus/empty_view.png
similarity index 100%
rename from docs/assets/optimus/empty_view.png
rename to static/img/optimus/empty_view.png
diff --git a/docs/assets/optimus/first_view.png b/static/img/optimus/first_view.png
similarity index 100%
rename from docs/assets/optimus/first_view.png
rename to static/img/optimus/first_view.png
diff --git a/docs/assets/optimus/grid.png b/static/img/optimus/grid.png
similarity index 100%
rename from docs/assets/optimus/grid.png
rename to static/img/optimus/grid.png
diff --git a/docs/assets/optimus/second_view.png b/static/img/optimus/second_view.png
similarity index 100%
rename from docs/assets/optimus/second_view.png
rename to static/img/optimus/second_view.png
diff --git a/docs/assets/optimus/start_optimus.png b/static/img/optimus/start_optimus.png
similarity index 100%
rename from docs/assets/optimus/start_optimus.png
rename to static/img/optimus/start_optimus.png
diff --git a/docs/assets/pager/center_align.png b/static/img/pager/center_align.png
similarity index 100%
rename from docs/assets/pager/center_align.png
rename to static/img/pager/center_align.png
diff --git a/docs/assets/pager/combo_width.png b/static/img/pager/combo_width.png
similarity index 100%
rename from docs/assets/pager/combo_width.png
rename to static/img/pager/combo_width.png
diff --git a/docs/assets/pager/init.png b/static/img/pager/init.png
similarity index 100%
rename from docs/assets/pager/init.png
rename to static/img/pager/init.png
diff --git a/docs/assets/pager/page_size.png b/static/img/pager/page_size.png
similarity index 100%
rename from docs/assets/pager/page_size.png
rename to static/img/pager/page_size.png
diff --git a/docs/assets/pager/styling.png b/static/img/pager/styling.png
similarity index 100%
rename from docs/assets/pager/styling.png
rename to static/img/pager/styling.png
diff --git a/docs/assets/pagination/center_align.png b/static/img/pagination/center_align.png
similarity index 100%
rename from docs/assets/pagination/center_align.png
rename to static/img/pagination/center_align.png
diff --git a/docs/assets/pagination/combo_width.png b/static/img/pagination/combo_width.png
similarity index 100%
rename from docs/assets/pagination/combo_width.png
rename to static/img/pagination/combo_width.png
diff --git a/docs/assets/pagination/init.png b/static/img/pagination/init.png
similarity index 100%
rename from docs/assets/pagination/init.png
rename to static/img/pagination/init.png
diff --git a/docs/assets/pagination/page_size.png b/static/img/pagination/page_size.png
similarity index 100%
rename from docs/assets/pagination/page_size.png
rename to static/img/pagination/page_size.png
diff --git a/docs/assets/pagination/styling.png b/static/img/pagination/styling.png
similarity index 100%
rename from docs/assets/pagination/styling.png
rename to static/img/pagination/styling.png
diff --git a/docs/assets/popup/custom_css.png b/static/img/popup/custom_css.png
similarity index 100%
rename from docs/assets/popup/custom_css.png
rename to static/img/popup/custom_css.png
diff --git a/docs/assets/popup/popup_front.png b/static/img/popup/popup_front.png
similarity index 100%
rename from docs/assets/popup/popup_front.png
rename to static/img/popup/popup_front.png
diff --git a/docs/assets/ribbon/block.png b/static/img/ribbon/block.png
similarity index 100%
rename from docs/assets/ribbon/block.png
rename to static/img/ribbon/block.png
diff --git a/docs/assets/ribbon/button.png b/static/img/ribbon/button.png
similarity index 100%
rename from docs/assets/ribbon/button.png
rename to static/img/ribbon/button.png
diff --git a/docs/assets/ribbon/button_ribbon.png b/static/img/ribbon/button_ribbon.png
similarity index 100%
rename from docs/assets/ribbon/button_ribbon.png
rename to static/img/ribbon/button_ribbon.png
diff --git a/docs/assets/ribbon/custom_html.png b/static/img/ribbon/custom_html.png
similarity index 100%
rename from docs/assets/ribbon/custom_html.png
rename to static/img/ribbon/custom_html.png
diff --git a/docs/assets/ribbon/custom_html_button.png b/static/img/ribbon/custom_html_button.png
similarity index 100%
rename from docs/assets/ribbon/custom_html_button.png
rename to static/img/ribbon/custom_html_button.png
diff --git a/docs/assets/ribbon/custom_style.png b/static/img/ribbon/custom_style.png
similarity index 100%
rename from docs/assets/ribbon/custom_style.png
rename to static/img/ribbon/custom_style.png
diff --git a/docs/assets/ribbon/fa_icons.png b/static/img/ribbon/fa_icons.png
similarity index 100%
rename from docs/assets/ribbon/fa_icons.png
rename to static/img/ribbon/fa_icons.png
diff --git a/docs/assets/ribbon/front_ribbon.png b/static/img/ribbon/front_ribbon.png
similarity index 100%
rename from docs/assets/ribbon/front_ribbon.png
rename to static/img/ribbon/front_ribbon.png
diff --git a/docs/assets/ribbon/icon_button.png b/static/img/ribbon/icon_button.png
similarity index 100%
rename from docs/assets/ribbon/icon_button.png
rename to static/img/ribbon/icon_button.png
diff --git a/docs/assets/ribbon/image_button.png b/static/img/ribbon/image_button.png
similarity index 100%
rename from docs/assets/ribbon/image_button.png
rename to static/img/ribbon/image_button.png
diff --git a/docs/assets/ribbon/image_button_text.png b/static/img/ribbon/image_button_text.png
similarity index 100%
rename from docs/assets/ribbon/image_button_text.png
rename to static/img/ribbon/image_button_text.png
diff --git a/docs/assets/ribbon/input.png b/static/img/ribbon/input.png
similarity index 100%
rename from docs/assets/ribbon/input.png
rename to static/img/ribbon/input.png
diff --git a/docs/assets/ribbon/navitem.png b/static/img/ribbon/navitem.png
similarity index 100%
rename from docs/assets/ribbon/navitem.png
rename to static/img/ribbon/navitem.png
diff --git a/docs/assets/ribbon/regular_button.png b/static/img/ribbon/regular_button.png
similarity index 100%
rename from docs/assets/ribbon/regular_button.png
rename to static/img/ribbon/regular_button.png
diff --git a/docs/assets/ribbon/ribbon_block.png b/static/img/ribbon/ribbon_block.png
similarity index 100%
rename from docs/assets/ribbon/ribbon_block.png
rename to static/img/ribbon/ribbon_block.png
diff --git a/docs/assets/ribbon/ribbon_button.png b/static/img/ribbon/ribbon_button.png
similarity index 100%
rename from docs/assets/ribbon/ribbon_button.png
rename to static/img/ribbon/ribbon_button.png
diff --git a/docs/assets/ribbon/ribbon_front.png b/static/img/ribbon/ribbon_front.png
similarity index 100%
rename from docs/assets/ribbon/ribbon_front.png
rename to static/img/ribbon/ribbon_front.png
diff --git a/docs/assets/ribbon/select_button.png b/static/img/ribbon/select_button.png
similarity index 100%
rename from docs/assets/ribbon/select_button.png
rename to static/img/ribbon/select_button.png
diff --git a/docs/assets/ribbon/separator.png b/static/img/ribbon/separator.png
similarity index 100%
rename from docs/assets/ribbon/separator.png
rename to static/img/ribbon/separator.png
diff --git a/docs/assets/ribbon/spacer.png b/static/img/ribbon/spacer.png
similarity index 100%
rename from docs/assets/ribbon/spacer.png
rename to static/img/ribbon/spacer.png
diff --git a/docs/assets/ribbon/title.png b/static/img/ribbon/title.png
similarity index 100%
rename from docs/assets/ribbon/title.png
rename to static/img/ribbon/title.png
diff --git a/docs/assets/sidebar/collapsed_sidebar.png b/static/img/sidebar/collapsed_sidebar.png
similarity index 100%
rename from docs/assets/sidebar/collapsed_sidebar.png
rename to static/img/sidebar/collapsed_sidebar.png
diff --git a/docs/assets/sidebar/custom_style.png b/static/img/sidebar/custom_style.png
similarity index 100%
rename from docs/assets/sidebar/custom_style.png
rename to static/img/sidebar/custom_style.png
diff --git a/docs/assets/sidebar/fa_icons.png b/static/img/sidebar/fa_icons.png
similarity index 100%
rename from docs/assets/sidebar/fa_icons.png
rename to static/img/sidebar/fa_icons.png
diff --git a/docs/assets/sidebar/htmlcontent.png b/static/img/sidebar/htmlcontent.png
similarity index 100%
rename from docs/assets/sidebar/htmlcontent.png
rename to static/img/sidebar/htmlcontent.png
diff --git a/docs/assets/sidebar/menuitem.png b/static/img/sidebar/menuitem.png
similarity index 100%
rename from docs/assets/sidebar/menuitem.png
rename to static/img/sidebar/menuitem.png
diff --git a/docs/assets/sidebar/navitem.png b/static/img/sidebar/navitem.png
similarity index 100%
rename from docs/assets/sidebar/navitem.png
rename to static/img/sidebar/navitem.png
diff --git a/docs/assets/sidebar/separator.png b/static/img/sidebar/separator.png
similarity index 100%
rename from docs/assets/sidebar/separator.png
rename to static/img/sidebar/separator.png
diff --git a/docs/assets/sidebar/sidebar_front.png b/static/img/sidebar/sidebar_front.png
similarity index 100%
rename from docs/assets/sidebar/sidebar_front.png
rename to static/img/sidebar/sidebar_front.png
diff --git a/docs/assets/sidebar/spacer.png b/static/img/sidebar/spacer.png
similarity index 100%
rename from docs/assets/sidebar/spacer.png
rename to static/img/sidebar/spacer.png
diff --git a/docs/assets/sidebar/title.png b/static/img/sidebar/title.png
similarity index 100%
rename from docs/assets/sidebar/title.png
rename to static/img/sidebar/title.png
diff --git a/docs/assets/slider/custom_style.png b/static/img/slider/custom_style.png
similarity index 100%
rename from docs/assets/slider/custom_style.png
rename to static/img/slider/custom_style.png
diff --git a/docs/assets/slider/inverse_mode.png b/static/img/slider/inverse_mode.png
similarity index 100%
rename from docs/assets/slider/inverse_mode.png
rename to static/img/slider/inverse_mode.png
diff --git a/docs/assets/slider/min_max_ticks_only.png b/static/img/slider/min_max_ticks_only.png
similarity index 100%
rename from docs/assets/slider/min_max_ticks_only.png
rename to static/img/slider/min_max_ticks_only.png
diff --git a/docs/assets/slider/range_mode.png b/static/img/slider/range_mode.png
similarity index 100%
rename from docs/assets/slider/range_mode.png
rename to static/img/slider/range_mode.png
diff --git a/docs/assets/slider/scale.png b/static/img/slider/scale.png
similarity index 100%
rename from docs/assets/slider/scale.png
rename to static/img/slider/scale.png
diff --git a/docs/assets/slider/slider_front.png b/static/img/slider/slider_front.png
similarity index 100%
rename from docs/assets/slider/slider_front.png
rename to static/img/slider/slider_front.png
diff --git a/docs/assets/slider/slider_label.png b/static/img/slider/slider_label.png
similarity index 100%
rename from docs/assets/slider/slider_label.png
rename to static/img/slider/slider_label.png
diff --git a/docs/assets/slider/tooltip.png b/static/img/slider/tooltip.png
similarity index 100%
rename from docs/assets/slider/tooltip.png
rename to static/img/slider/tooltip.png
diff --git a/docs/assets/tabbar/active_tab.png b/static/img/tabbar/active_tab.png
similarity index 100%
rename from docs/assets/tabbar/active_tab.png
rename to static/img/tabbar/active_tab.png
diff --git a/docs/assets/tabbar/close_button.png b/static/img/tabbar/close_button.png
similarity index 100%
rename from docs/assets/tabbar/close_button.png
rename to static/img/tabbar/close_button.png
diff --git a/docs/assets/tabbar/custom_style.png b/static/img/tabbar/custom_style.png
similarity index 100%
rename from docs/assets/tabbar/custom_style.png
rename to static/img/tabbar/custom_style.png
diff --git a/docs/assets/tabbar/disabled_tab.png b/static/img/tabbar/disabled_tab.png
similarity index 100%
rename from docs/assets/tabbar/disabled_tab.png
rename to static/img/tabbar/disabled_tab.png
diff --git a/docs/assets/tabbar/mode.png b/static/img/tabbar/mode.png
similarity index 100%
rename from docs/assets/tabbar/mode.png
rename to static/img/tabbar/mode.png
diff --git a/docs/assets/tabbar/no_content.png b/static/img/tabbar/no_content.png
similarity index 100%
rename from docs/assets/tabbar/no_content.png
rename to static/img/tabbar/no_content.png
diff --git a/docs/assets/tabbar/tabbar_align.png b/static/img/tabbar/tabbar_align.png
similarity index 100%
rename from docs/assets/tabbar/tabbar_align.png
rename to static/img/tabbar/tabbar_align.png
diff --git a/docs/assets/tabbar/tabbar_front.png b/static/img/tabbar/tabbar_front.png
similarity index 100%
rename from docs/assets/tabbar/tabbar_front.png
rename to static/img/tabbar/tabbar_front.png
diff --git a/docs/assets/tabbar/tabs_tooltips.png b/static/img/tabbar/tabs_tooltips.png
similarity index 100%
rename from docs/assets/tabbar/tabs_tooltips.png
rename to static/img/tabbar/tabs_tooltips.png
diff --git a/docs/assets/themes/contrastdark_theme.png b/static/img/themes/contrastdark_theme.png
similarity index 100%
rename from docs/assets/themes/contrastdark_theme.png
rename to static/img/themes/contrastdark_theme.png
diff --git a/docs/assets/themes/contrastlight_theme.png b/static/img/themes/contrastlight_theme.png
similarity index 100%
rename from docs/assets/themes/contrastlight_theme.png
rename to static/img/themes/contrastlight_theme.png
diff --git a/docs/assets/themes/dark_theme.png b/static/img/themes/dark_theme.png
similarity index 100%
rename from docs/assets/themes/dark_theme.png
rename to static/img/themes/dark_theme.png
diff --git a/docs/assets/themes/light_theme.png b/static/img/themes/light_theme.png
similarity index 100%
rename from docs/assets/themes/light_theme.png
rename to static/img/themes/light_theme.png
diff --git a/docs/assets/timepicker/amdm_false.png b/static/img/timepicker/amdm_false.png
similarity index 100%
rename from docs/assets/timepicker/amdm_false.png
rename to static/img/timepicker/amdm_false.png
diff --git a/docs/assets/timepicker/amdm_true.png b/static/img/timepicker/amdm_true.png
similarity index 100%
rename from docs/assets/timepicker/amdm_true.png
rename to static/img/timepicker/amdm_true.png
diff --git a/docs/assets/timepicker/custom_style.png b/static/img/timepicker/custom_style.png
similarity index 100%
rename from docs/assets/timepicker/custom_style.png
rename to static/img/timepicker/custom_style.png
diff --git a/docs/assets/timepicker/dhx_timepicker.png b/static/img/timepicker/dhx_timepicker.png
similarity index 100%
rename from docs/assets/timepicker/dhx_timepicker.png
rename to static/img/timepicker/dhx_timepicker.png
diff --git a/docs/assets/toolbar/button.png b/static/img/toolbar/button.png
similarity index 100%
rename from docs/assets/toolbar/button.png
rename to static/img/toolbar/button.png
diff --git a/docs/assets/toolbar/buttons.png b/static/img/toolbar/buttons.png
similarity index 100%
rename from docs/assets/toolbar/buttons.png
rename to static/img/toolbar/buttons.png
diff --git a/docs/assets/toolbar/custom_style.png b/static/img/toolbar/custom_style.png
similarity index 100%
rename from docs/assets/toolbar/custom_style.png
rename to static/img/toolbar/custom_style.png
diff --git a/docs/assets/toolbar/disabled.png b/static/img/toolbar/disabled.png
similarity index 100%
rename from docs/assets/toolbar/disabled.png
rename to static/img/toolbar/disabled.png
diff --git a/docs/assets/toolbar/fa_icons.png b/static/img/toolbar/fa_icons.png
similarity index 100%
rename from docs/assets/toolbar/fa_icons.png
rename to static/img/toolbar/fa_icons.png
diff --git a/docs/assets/toolbar/front_toolbar.png b/static/img/toolbar/front_toolbar.png
similarity index 100%
rename from docs/assets/toolbar/front_toolbar.png
rename to static/img/toolbar/front_toolbar.png
diff --git a/docs/assets/toolbar/html_button.png b/static/img/toolbar/html_button.png
similarity index 100%
rename from docs/assets/toolbar/html_button.png
rename to static/img/toolbar/html_button.png
diff --git a/docs/assets/toolbar/htmlcontent.png b/static/img/toolbar/htmlcontent.png
similarity index 100%
rename from docs/assets/toolbar/htmlcontent.png
rename to static/img/toolbar/htmlcontent.png
diff --git a/docs/assets/toolbar/icon_button.png b/static/img/toolbar/icon_button.png
similarity index 100%
rename from docs/assets/toolbar/icon_button.png
rename to static/img/toolbar/icon_button.png
diff --git a/docs/assets/toolbar/image_button.png b/static/img/toolbar/image_button.png
similarity index 100%
rename from docs/assets/toolbar/image_button.png
rename to static/img/toolbar/image_button.png
diff --git a/docs/assets/toolbar/image_button_text.png b/static/img/toolbar/image_button_text.png
similarity index 100%
rename from docs/assets/toolbar/image_button_text.png
rename to static/img/toolbar/image_button_text.png
diff --git a/docs/assets/toolbar/input.png b/static/img/toolbar/input.png
similarity index 100%
rename from docs/assets/toolbar/input.png
rename to static/img/toolbar/input.png
diff --git a/docs/assets/toolbar/input_item.png b/static/img/toolbar/input_item.png
similarity index 100%
rename from docs/assets/toolbar/input_item.png
rename to static/img/toolbar/input_item.png
diff --git a/docs/assets/toolbar/menuitem.png b/static/img/toolbar/menuitem.png
similarity index 100%
rename from docs/assets/toolbar/menuitem.png
rename to static/img/toolbar/menuitem.png
diff --git a/docs/assets/toolbar/navitem.png b/static/img/toolbar/navitem.png
similarity index 100%
rename from docs/assets/toolbar/navitem.png
rename to static/img/toolbar/navitem.png
diff --git a/docs/assets/toolbar/regular_button.png b/static/img/toolbar/regular_button.png
similarity index 100%
rename from docs/assets/toolbar/regular_button.png
rename to static/img/toolbar/regular_button.png
diff --git a/docs/assets/toolbar/select_button.png b/static/img/toolbar/select_button.png
similarity index 100%
rename from docs/assets/toolbar/select_button.png
rename to static/img/toolbar/select_button.png
diff --git a/docs/assets/toolbar/selectbutton.png b/static/img/toolbar/selectbutton.png
similarity index 100%
rename from docs/assets/toolbar/selectbutton.png
rename to static/img/toolbar/selectbutton.png
diff --git a/docs/assets/toolbar/separator.png b/static/img/toolbar/separator.png
similarity index 100%
rename from docs/assets/toolbar/separator.png
rename to static/img/toolbar/separator.png
diff --git a/docs/assets/toolbar/spacer.png b/static/img/toolbar/spacer.png
similarity index 100%
rename from docs/assets/toolbar/spacer.png
rename to static/img/toolbar/spacer.png
diff --git a/docs/assets/toolbar/text_item.png b/static/img/toolbar/text_item.png
similarity index 100%
rename from docs/assets/toolbar/text_item.png
rename to static/img/toolbar/text_item.png
diff --git a/docs/assets/toolbar/title.png b/static/img/toolbar/title.png
similarity index 100%
rename from docs/assets/toolbar/title.png
rename to static/img/toolbar/title.png
diff --git a/docs/assets/toolbar/toolbar_front.png b/static/img/toolbar/toolbar_front.png
similarity index 100%
rename from docs/assets/toolbar/toolbar_front.png
rename to static/img/toolbar/toolbar_front.png
diff --git a/docs/assets/toolbar/tooltip.png b/static/img/toolbar/tooltip.png
similarity index 100%
rename from docs/assets/toolbar/tooltip.png
rename to static/img/toolbar/tooltip.png
diff --git a/docs/assets/toolbar/two_state_button.png b/static/img/toolbar/two_state_button.png
similarity index 100%
rename from docs/assets/toolbar/two_state_button.png
rename to static/img/toolbar/two_state_button.png
diff --git a/docs/assets/tree/checkbox.png b/static/img/tree/checkbox.png
similarity index 100%
rename from docs/assets/tree/checkbox.png
rename to static/img/tree/checkbox.png
diff --git a/docs/assets/tree/custom_icons.png b/static/img/tree/custom_icons.png
similarity index 100%
rename from docs/assets/tree/custom_icons.png
rename to static/img/tree/custom_icons.png
diff --git a/docs/assets/tree/custom_style.png b/static/img/tree/custom_style.png
similarity index 100%
rename from docs/assets/tree/custom_style.png
rename to static/img/tree/custom_style.png
diff --git a/docs/assets/tree/disable_selection.png b/static/img/tree/disable_selection.png
similarity index 100%
rename from docs/assets/tree/disable_selection.png
rename to static/img/tree/disable_selection.png
diff --git a/docs/assets/tree/drag_behaviour_child.png b/static/img/tree/drag_behaviour_child.png
similarity index 100%
rename from docs/assets/tree/drag_behaviour_child.png
rename to static/img/tree/drag_behaviour_child.png
diff --git a/docs/assets/tree/drag_behaviour_sibling.png b/static/img/tree/drag_behaviour_sibling.png
similarity index 100%
rename from docs/assets/tree/drag_behaviour_sibling.png
rename to static/img/tree/drag_behaviour_sibling.png
diff --git a/docs/assets/tree/editable.png b/static/img/tree/editable.png
similarity index 100%
rename from docs/assets/tree/editable.png
rename to static/img/tree/editable.png
diff --git a/docs/assets/tree/tree_front.png b/static/img/tree/tree_front.png
similarity index 100%
rename from docs/assets/tree/tree_front.png
rename to static/img/tree/tree_front.png
diff --git a/docs/assets/treegrid/cell_css.png b/static/img/treegrid/cell_css.png
similarity index 100%
rename from docs/assets/treegrid/cell_css.png
rename to static/img/treegrid/cell_css.png
diff --git a/docs/assets/treegrid/cell_templates.png b/static/img/treegrid/cell_templates.png
similarity index 100%
rename from docs/assets/treegrid/cell_templates.png
rename to static/img/treegrid/cell_templates.png
diff --git a/docs/assets/treegrid/combobox_editor.png b/static/img/treegrid/combobox_editor.png
similarity index 100%
rename from docs/assets/treegrid/combobox_editor.png
rename to static/img/treegrid/combobox_editor.png
diff --git a/docs/assets/treegrid/custom_style.png b/static/img/treegrid/custom_style.png
similarity index 100%
rename from docs/assets/treegrid/custom_style.png
rename to static/img/treegrid/custom_style.png
diff --git a/docs/assets/treegrid/dropbehaviour_child.png b/static/img/treegrid/dropbehaviour_child.png
similarity index 100%
rename from docs/assets/treegrid/dropbehaviour_child.png
rename to static/img/treegrid/dropbehaviour_child.png
diff --git a/docs/assets/treegrid/dropbehaviour_child_result.png b/static/img/treegrid/dropbehaviour_child_result.png
similarity index 100%
rename from docs/assets/treegrid/dropbehaviour_child_result.png
rename to static/img/treegrid/dropbehaviour_child_result.png
diff --git a/docs/assets/treegrid/dropbehaviour_sibling.png b/static/img/treegrid/dropbehaviour_sibling.png
similarity index 100%
rename from docs/assets/treegrid/dropbehaviour_sibling.png
rename to static/img/treegrid/dropbehaviour_sibling.png
diff --git a/docs/assets/treegrid/dropbehaviour_sibling_result.png b/static/img/treegrid/dropbehaviour_sibling_result.png
similarity index 100%
rename from docs/assets/treegrid/dropbehaviour_sibling_result.png
rename to static/img/treegrid/dropbehaviour_sibling_result.png
diff --git a/docs/assets/treegrid/html_content.png b/static/img/treegrid/html_content.png
similarity index 100%
rename from docs/assets/treegrid/html_content.png
rename to static/img/treegrid/html_content.png
diff --git a/docs/assets/treegrid/mark_cell.png b/static/img/treegrid/mark_cell.png
similarity index 100%
rename from docs/assets/treegrid/mark_cell.png
rename to static/img/treegrid/mark_cell.png
diff --git a/docs/assets/treegrid/min_max_mark.png b/static/img/treegrid/min_max_mark.png
similarity index 100%
rename from docs/assets/treegrid/min_max_mark.png
rename to static/img/treegrid/min_max_mark.png
diff --git a/docs/assets/treegrid/new_combobox_option.png b/static/img/treegrid/new_combobox_option.png
similarity index 100%
rename from docs/assets/treegrid/new_combobox_option.png
rename to static/img/treegrid/new_combobox_option.png
diff --git a/docs/assets/treegrid/row_css.png b/static/img/treegrid/row_css.png
similarity index 100%
rename from docs/assets/treegrid/row_css.png
rename to static/img/treegrid/row_css.png
diff --git a/docs/assets/treegrid/styling_footer.png b/static/img/treegrid/styling_footer.png
similarity index 100%
rename from docs/assets/treegrid/styling_footer.png
rename to static/img/treegrid/styling_footer.png
diff --git a/docs/assets/treegrid/styling_header.png b/static/img/treegrid/styling_header.png
similarity index 100%
rename from docs/assets/treegrid/styling_header.png
rename to static/img/treegrid/styling_header.png
diff --git a/docs/assets/treegrid/styling_selection.png b/static/img/treegrid/styling_selection.png
similarity index 100%
rename from docs/assets/treegrid/styling_selection.png
rename to static/img/treegrid/styling_selection.png
diff --git a/docs/assets/treegrid/tooltip_template.png b/static/img/treegrid/tooltip_template.png
similarity index 100%
rename from docs/assets/treegrid/tooltip_template.png
rename to static/img/treegrid/tooltip_template.png
diff --git a/docs/assets/treegrid/treegrid_front.png b/static/img/treegrid/treegrid_front.png
similarity index 100%
rename from docs/assets/treegrid/treegrid_front.png
rename to static/img/treegrid/treegrid_front.png
diff --git a/docs/assets/tutorial/basic_application/basic_initialization.png b/static/img/tutorial/basic_application/basic_initialization.png
similarity index 100%
rename from docs/assets/tutorial/basic_application/basic_initialization.png
rename to static/img/tutorial/basic_application/basic_initialization.png
diff --git a/docs/assets/tutorial/basic_application/bind_toolbar_grid.png b/static/img/tutorial/basic_application/bind_toolbar_grid.png
similarity index 100%
rename from docs/assets/tutorial/basic_application/bind_toolbar_grid.png
rename to static/img/tutorial/basic_application/bind_toolbar_grid.png
diff --git a/docs/assets/tutorial/basic_application/chart.png b/static/img/tutorial/basic_application/chart.png
similarity index 100%
rename from docs/assets/tutorial/basic_application/chart.png
rename to static/img/tutorial/basic_application/chart.png
diff --git a/docs/assets/tutorial/basic_application/file.png b/static/img/tutorial/basic_application/file.png
similarity index 100%
rename from docs/assets/tutorial/basic_application/file.png
rename to static/img/tutorial/basic_application/file.png
diff --git a/docs/assets/tutorial/basic_application/grid_003.png b/static/img/tutorial/basic_application/grid_003.png
similarity index 100%
rename from docs/assets/tutorial/basic_application/grid_003.png
rename to static/img/tutorial/basic_application/grid_003.png
diff --git a/docs/assets/tutorial/basic_application/layout_002.png b/static/img/tutorial/basic_application/layout_002.png
similarity index 100%
rename from docs/assets/tutorial/basic_application/layout_002.png
rename to static/img/tutorial/basic_application/layout_002.png
diff --git a/docs/assets/tutorial/basic_application/toolbar_003.png b/static/img/tutorial/basic_application/toolbar_003.png
similarity index 100%
rename from docs/assets/tutorial/basic_application/toolbar_003.png
rename to static/img/tutorial/basic_application/toolbar_003.png
diff --git a/docs/assets/tutorial/binding_components/add_window.png b/static/img/tutorial/binding_components/add_window.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/add_window.png
rename to static/img/tutorial/binding_components/add_window.png
diff --git a/docs/assets/tutorial/binding_components/adding_item.png b/static/img/tutorial/binding_components/adding_item.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/adding_item.png
rename to static/img/tutorial/binding_components/adding_item.png
diff --git a/docs/assets/tutorial/binding_components/binding_components.png b/static/img/tutorial/binding_components/binding_components.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/binding_components.png
rename to static/img/tutorial/binding_components/binding_components.png
diff --git a/docs/assets/tutorial/binding_components/context_menu.png b/static/img/tutorial/binding_components/context_menu.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/context_menu.png
rename to static/img/tutorial/binding_components/context_menu.png
diff --git a/docs/assets/tutorial/binding_components/editing_item.png b/static/img/tutorial/binding_components/editing_item.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/editing_item.png
rename to static/img/tutorial/binding_components/editing_item.png
diff --git a/docs/assets/tutorial/binding_components/form.png b/static/img/tutorial/binding_components/form.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/form.png
rename to static/img/tutorial/binding_components/form.png
diff --git a/docs/assets/tutorial/binding_components/toolbar.png b/static/img/tutorial/binding_components/toolbar.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/toolbar.png
rename to static/img/tutorial/binding_components/toolbar.png
diff --git a/docs/assets/tutorial/binding_components/window.png b/static/img/tutorial/binding_components/window.png
similarity index 100%
rename from docs/assets/tutorial/binding_components/window.png
rename to static/img/tutorial/binding_components/window.png
diff --git a/docs/assets/window/closable.png b/static/img/window/closable.png
similarity index 100%
rename from docs/assets/window/closable.png
rename to static/img/window/closable.png
diff --git a/docs/assets/window/custom_buttons.png b/static/img/window/custom_buttons.png
similarity index 100%
rename from docs/assets/window/custom_buttons.png
rename to static/img/window/custom_buttons.png
diff --git a/docs/assets/window/custom_style.png b/static/img/window/custom_style.png
similarity index 100%
rename from docs/assets/window/custom_style.png
rename to static/img/window/custom_style.png
diff --git a/docs/assets/window/modal_window.png b/static/img/window/modal_window.png
similarity index 100%
rename from docs/assets/window/modal_window.png
rename to static/img/window/modal_window.png
diff --git a/docs/assets/window/movable.png b/static/img/window/movable.png
similarity index 100%
rename from docs/assets/window/movable.png
rename to static/img/window/movable.png
diff --git a/docs/assets/window/resizable.png b/static/img/window/resizable.png
similarity index 100%
rename from docs/assets/window/resizable.png
rename to static/img/window/resizable.png
diff --git a/docs/assets/window/window_front.png b/static/img/window/window_front.png
similarity index 100%
rename from docs/assets/window/window_front.png
rename to static/img/window/window_front.png
diff --git a/docs/assets/window/with_footer.png b/static/img/window/with_footer.png
similarity index 100%
rename from docs/assets/window/with_footer.png
rename to static/img/window/with_footer.png