diff --git a/docs/ajax/index.md b/docs/ajax/index.md
index 21ae8811..c2841d2c 100644
--- a/docs/ajax/index.md
+++ b/docs/ajax/index.md
@@ -14,8 +14,8 @@ To make AJAX request to a server you can use the following methods of the `dhx.a
| Name | Description |
| ----------------------------- | -------------------------------------- |
-| [](api/ajax_delete_method.md) | @getshort(api/ajax_delete_method.md) |
-| [](api/ajax_get_method.md) | @getshort(api/ajax_get_method.md) |
-| [](api/ajax_post_method.md) | @getshort(api/api/ajax_post_method.md) |
-| [](api/ajax_put_method.md) | @getshort(api/ajax_put_method.md) |
+| [](ajax/api/ajax_delete_method.md) | @getshort(api/ajax_delete_method.md) |
+| [](ajax/api/ajax_get_method.md) | @getshort(api/ajax_get_method.md) |
+| [](ajax/api/ajax_post_method.md) | @getshort(api/api/ajax_post_method.md) |
+| [](ajax/api/ajax_put_method.md) | @getshort(api/ajax_put_method.md) |
diff --git a/docs/calendar/api/calendar_css_config.md b/docs/calendar/api/calendar_css_config.md
index 344fc60c..5ed827da 100644
--- a/docs/calendar/api/calendar_css_config.md
+++ b/docs/calendar/api/calendar_css_config.md
@@ -39,4 +39,4 @@ const calendar = new dhx.Calendar("calendar_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/calendar/configuring.md b/docs/calendar/configuring.md
index 74d40e7c..6d6eae1d 100644
--- a/docs/calendar/configuring.md
+++ b/docs/calendar/configuring.md
@@ -45,7 +45,7 @@ You can also show the calendar in one of the modes using the [](calendar/api/cal
## Date format
There is a possibility to specify the format of dates in the calendar via the [](calendar/api/calendar_dateformat_config.md) property. The default format is "%d/%m/%y".
-The full list of available characters used to make formats is provided in the [API reference](/calendar/api/calendar_dateformat_config).
+The full list of available characters used to make formats is provided in the [API reference](calendar/api/calendar_dateformat_config.md).
~~~js
const calendar = new dhx.Calendar("calendar_container", {
@@ -208,7 +208,7 @@ const calendar = new dhx.Calendar("calendar_container", {
**Related sample**: [Calendar. Range](https://snippet.dhtmlx.com/2mrj53h0)
-You have a possibility to create a calendar in the range mode that allows you to select a range of dates in the calendar. To do this, you need to use the [range:true](/calendar/api/calendar_range_config) option in the calendar configuration object and define an array with the start and end dates of the range.
+You have a possibility to create a calendar in the range mode that allows you to select a range of dates in the calendar. To do this, you need to use the [range:true](calendar/api/calendar_range_config.md) option in the calendar configuration object and define an array with the start and end dates of the range.
~~~js
const calendar = new dhx.Calendar("calendar_container", {
diff --git a/docs/calendar/datepicker.md b/docs/calendar/datepicker.md
index 66735428..f19adb36 100644
--- a/docs/calendar/datepicker.md
+++ b/docs/calendar/datepicker.md
@@ -25,13 +25,13 @@ const calendar = new dhx.Calendar(null, {dateFormat: "%d/%m/%y"});
const popup = new dhx.Popup();
~~~
-3\. Attach the calendar to the popup using the [](../popup/api/popup_attach_method.md) method of Popup:
+3\. Attach the calendar to the popup using the [](popup/api/popup_attach_method.md) method of Popup:
~~~js
popup.attach(calendar);
~~~
-4\. Use the [](../popup/api/popup_show_method.md) method of Popup inside a click handler to define that a popup with calendar will open on click in the "date-input" input:
+4\. Use the [](popup/api/popup_show_method.md) method of Popup inside a click handler to define that a popup with calendar will open on click in the "date-input" input:
~~~js
const dateInput = document.getElementById("date-input");
@@ -40,7 +40,7 @@ dateInput.addEventListener("click", function() {
});
~~~
-5\. Define the logic of closing the popup with calendar using the [](../popup/api/popup_hide_method.md) method of Popup. For example, on selecting a new date in the calendar:
+5\. Define the logic of closing the popup with calendar using the [](popup/api/popup_hide_method.md) method of Popup. For example, on selecting a new date in the calendar:
~~~js
calendar.events.on("change", function() {
diff --git a/docs/calendar/features.md b/docs/calendar/features.md
index c51e1d59..70741159 100644
--- a/docs/calendar/features.md
+++ b/docs/calendar/features.md
@@ -16,9 +16,9 @@ In this section you can find out the ways of Calendar initialization and localiz
| Topic | Description |
| :-------------------------------------- | :-------------------------------------------------------------------------------------------- |
-| [Initialization](../how_to_start/) | Learn how to initialize a Calendar ([Example](https://snippet.dhtmlx.com/xcw19e52)) |
-| [Date picker](../datepicker/) | Learn how to use a Calendar as a date picker ([Example](https://snippet.dhtmlx.com/mj7jr6ro)) |
-| [Localization](../localizing_calendar/) | Learn how to localize a Calendar ([Example](https://snippet.dhtmlx.com/tn40a0w8)) |
+| [Initialization](calendar/how_to_start.md) | Learn how to initialize a Calendar ([Example](https://snippet.dhtmlx.com/xcw19e52)) |
+| [Date picker](calendar/datepicker.md) | Learn how to use a Calendar as a date picker ([Example](https://snippet.dhtmlx.com/mj7jr6ro)) |
+| [Localization](calendar/localizing_calendar.md) | Learn how to localize a Calendar ([Example](https://snippet.dhtmlx.com/tn40a0w8)) |
### Integration
@@ -26,7 +26,7 @@ In this section you can find out the ways of Calendar initialization and localiz
| Topic | Description |
| :------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Calendar with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Calendar with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Calendar with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -37,37 +37,37 @@ In this section you can discover how to configure Calendar.
| Topic | Description |
| :----------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Calendar modes](../configuring/#calendar-modes) | Learn how initialize Calendar in different modes (calendar, month, year) ([Example](https://snippet.dhtmlx.com/n9q0tc0q)) |
-| [Showing tooltips](../operating_calendar/#showing-tooltips) | Learn how to show tooltips in Calendar ([Example 1](https://snippet.dhtmlx.com/t4jy4wrr), [Example 2](https://snippet.dhtmlx.com/jwx0barf)) |
-| [Start of the week](../configuring/#start-of-the-week) | Learn how to change the starting day of the week ([Example](https://snippet.dhtmlx.com/kaxmurh9)) |
-| [Timepicker in Calendar](../configuring/#timepicker) | Learn how to add a timepicker into Calendar ([Example](https://snippet.dhtmlx.com/jkbfb202)) |
-| [Showing the week numbers](../configuring/#numbers-of-weeks) | Learn how to show the numbers of weeks ([Example](https://snippet.dhtmlx.com/9692gk6n)) |
-| [Displaying only current month](../configuring/#displaying-only-current-month) | Learn how to display the current month only ([Example](https://snippet.dhtmlx.com/4wi5hbtr)) |
+| [Calendar modes](calendar/configuring.md#calendar-modes) | Learn how initialize Calendar in different modes (calendar, month, year) ([Example](https://snippet.dhtmlx.com/n9q0tc0q)) |
+| [Showing tooltips](calendar/operating_calendar.md#showing-tooltips) | Learn how to show tooltips in Calendar ([Example 1](https://snippet.dhtmlx.com/t4jy4wrr), [Example 2](https://snippet.dhtmlx.com/jwx0barf)) |
+| [Start of the week](calendar/configuring.md#start-of-the-week) | Learn how to change the starting day of the week ([Example](https://snippet.dhtmlx.com/kaxmurh9)) |
+| [Timepicker in Calendar](calendar/configuring.md#timepicker) | Learn how to add a timepicker into Calendar ([Example](https://snippet.dhtmlx.com/jkbfb202)) |
+| [Showing the week numbers](calendar/configuring.md#numbers-of-weeks) | Learn how to show the numbers of weeks ([Example](https://snippet.dhtmlx.com/9692gk6n)) |
+| [Displaying only current month](calendar/configuring.md#displaying-only-current-month) | Learn how to display the current month only ([Example](https://snippet.dhtmlx.com/4wi5hbtr)) |
## How to work with dates
| Topic | Description |
| :------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- |
-| [Initial calendar date](../configuring/#initial-calendar-date) | Learn how to specify the initial date of Calendar ([Example](https://snippet.dhtmlx.com/fyg6l65t)) |
-| [Highlighted dates](../configuring/#highlighted-dates) | Learn how to highlight certain dates in Calendar ([Example](https://snippet.dhtmlx.com/ic5oeiga)) |
-| [Disabled dates](../configuring/#disabled-dates) | Learn how to disable certain dates ([Example](https://snippet.dhtmlx.com/ic5oeiga)) |
-| [Date format](../configuring/#date-format) | Learn how to specify the necessary format of dates ([Example](https://snippet.dhtmlx.com/2co9z3bi)) |
+| [Initial calendar date](calendar/configuring.md#initial-calendar-date) | Learn how to specify the initial date of Calendar ([Example](https://snippet.dhtmlx.com/fyg6l65t)) |
+| [Highlighted dates](calendar/configuring.md#highlighted-dates) | Learn how to highlight certain dates in Calendar ([Example](https://snippet.dhtmlx.com/ic5oeiga)) |
+| [Disabled dates](calendar/configuring.md#disabled-dates) | Learn how to disable certain dates ([Example](https://snippet.dhtmlx.com/ic5oeiga)) |
+| [Date format](calendar/configuring.md#date-format) | Learn how to specify the necessary format of dates ([Example](https://snippet.dhtmlx.com/2co9z3bi)) |
## How to work with selected dates
| Topic | Description |
| :-------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
-| [Initially selected date](../configuring/#initially-selected-date) | Learn how to create a calendar with an initially selected date ([Example](https://snippet.dhtmlx.com/epjjww3l)) |
-| [Selecting date](../operating_calendar/#selecting-date) | Learn how to select a date in Calendar ([Example](https://snippet.dhtmlx.com/vmg11002)) |
-| [Getting selected date](../operating_calendar/#getting-selected-date) | Learn how to get the selected date ([Example](https://snippet.dhtmlx.com/k2vrfqj0)) |
+| [Initially selected date](calendar/configuring.md#initially-selected-date) | Learn how to create a calendar with an initially selected date ([Example](https://snippet.dhtmlx.com/epjjww3l)) |
+| [Selecting date](calendar/operating_calendar.md#selecting-date) | Learn how to select a date in Calendar ([Example](https://snippet.dhtmlx.com/vmg11002)) |
+| [Getting selected date](calendar/operating_calendar.md#getting-selected-date) | Learn how to get the selected date ([Example](https://snippet.dhtmlx.com/k2vrfqj0)) |
## How to work with date ranges
| Topic | Description |
| :--------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------- |
-| [Date ranges in one calendar](../configuring/#range-mode) | Learn how to create a calendar in the range mode ([Example](https://snippet.dhtmlx.com/2mrj53h0)) |
-| [Date ranges in two calendars](../operating_calendar/#linking-two-calendars) | Learn how to link two calendars for selecting a date range ([Example](https://snippet.dhtmlx.com/dxo54017)) |
+| [Date ranges in one calendar](calendar/configuring.md#range-mode) | Learn how to create a calendar in the range mode ([Example](https://snippet.dhtmlx.com/2mrj53h0)) |
+| [Date ranges in two calendars](calendar/operating_calendar.md#linking-two-calendars) | Learn how to link two calendars for selecting a date range ([Example](https://snippet.dhtmlx.com/dxo54017)) |
## How to customize Calendar and change its size
@@ -75,10 +75,10 @@ In this section you can learn how to change the Calendar width and style.
| Topic | Description |
| :----------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- |
-| [Width of Calendar](../configuring/#width-of-calendar) | Learn how to set the necessary width of Calendar ([Example](https://snippet.dhtmlx.com/azm0u5ns)) |
-| [Styling (custom CSS)](../customization/#styling-calendar) | Learn how to change the look and feel of Calendar ([Example](https://snippet.dhtmlx.com/2045cbe1)) |
-| [Styling selected dates](../customization/#styling-selected-dates) | Learn how to apply custom styling to selected dates ([Example](https://snippet.dhtmlx.com/9u0ix3na)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Width of Calendar](calendar/configuring.md#width-of-calendar) | Learn how to set the necessary width of Calendar ([Example](https://snippet.dhtmlx.com/azm0u5ns)) |
+| [Styling (custom CSS)](calendar/customization.md#styling-calendar) | Learn how to change the look and feel of Calendar ([Example](https://snippet.dhtmlx.com/2045cbe1)) |
+| [Styling selected dates](calendar/customization.md#styling-selected-dates) | Learn how to apply custom styling to selected dates ([Example](https://snippet.dhtmlx.com/9u0ix3na)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Calendar events
@@ -87,7 +87,7 @@ This section explains how to work with Calendar events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Calendar events ([Example](https://snippet.dhtmlx.com/7kj7fiek)) |
+| [Event handling](calendar/handling_events.md) | Learn how to attach, detach, or call the Calendar events ([Example](https://snippet.dhtmlx.com/7kj7fiek)) |
## API reference
@@ -95,9 +95,9 @@ In this section you can find out corresponding references of Calendar API.
| Topic | Description |
| :--------------------------------------------------------- | :----------------------------------- |
-| [Calendar methods](../../category/calendar-methods/) | Learn how to use Calendar methods |
-| [Calendar events](../../category/calendar-events/) | Learn how to use Calendar events |
-| [Calendar properties](../../category/calendar-properties/) | Learn how to use Calendar properties |
+| [Calendar methods](/category/calendar-methods/) | Learn how to use Calendar methods |
+| [Calendar events](/category/calendar-events/) | Learn how to use Calendar events |
+| [Calendar properties](/category/calendar-properties/) | Learn how to use Calendar properties |
## Common functionality
@@ -105,9 +105,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| :------------------------------------------------------------ | :------------------------------------------------------------ |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/calendar/index.md b/docs/calendar/index.md
index a5dda43e..d79794b7 100644
--- a/docs/calendar/index.md
+++ b/docs/calendar/index.md
@@ -18,7 +18,7 @@ You can check the following page to learn how to build a full-featured DHTMLX Ca
## API reference
-- [](api/api_overview.md)
+- [](calendar/api/api_overview.md)
## Related resources
@@ -30,14 +30,14 @@ You can check the following page to learn how to build a full-featured DHTMLX Ca
You can read the following articles to find out how to add Calendar on the page and work with it.
-- [](how_to_start.md)
-- [](configuring.md)
-- [](localizing_calendar.md)
-- [](operating_calendar.md)
-- [](datepicker.md)
-- [](customization.md)
-- [](handling_events.md)
+- [](calendar/how_to_start.md)
+- [](calendar/configuring.md)
+- [](calendar/localizing_calendar.md)
+- [](calendar/operating_calendar.md)
+- [](calendar/datepicker.md)
+- [](calendar/customization.md)
+- [](calendar/handling_events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/chart/api/api_overview.md b/docs/chart/api/api_overview.md
index 6bd59b0a..130ff433 100644
--- a/docs/chart/api/api_overview.md
+++ b/docs/chart/api/api_overview.md
@@ -17,7 +17,7 @@ description: You can explore the API of Chart in the documentation of the DHTMLX
| [](chart/api/chart_setconfig_method.md) | @getshort(chart/api/chart_setconfig_method.md) |
:::info important
-Use [DataCollection methods](data_collection.md) to work with data.
+Use [DataCollection methods](/data_collection/) to work with data.
:::
## Events
@@ -29,7 +29,7 @@ Use [DataCollection methods](data_collection.md) to work with data.
| [](chart/api/chart_toggleseries_event.md) | @getshort(chart/api/chart_toggleseries_event.md) |
:::info important
-Use [DataCollection events](data_collection.md#events) to work with data.
+Use [DataCollection events](/data_collection/#events) to work with data.
:::
## Properties
diff --git a/docs/chart/api/chart_css_config.md b/docs/chart/api/chart_css_config.md
index deb0509a..a7f4e8da 100644
--- a/docs/chart/api/chart_css_config.md
+++ b/docs/chart/api/chart_css_config.md
@@ -64,4 +64,4 @@ const chart = new dhx.Chart("chart_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/chart/api/chart_exportstyles_config.md b/docs/chart/api/chart_exportstyles_config.md
index 5081f29b..3004808f 100644
--- a/docs/chart/api/chart_exportstyles_config.md
+++ b/docs/chart/api/chart_exportstyles_config.md
@@ -70,7 +70,7 @@ You must use only absolute paths not relative ones.
:::
:::info
-You need to enable the property if you want to export Chart with a [custom or overridden theme](themes.md).
+You need to enable the property if you want to export Chart with a [custom or overridden theme](/themes/).
:::
@descr:
diff --git a/docs/chart/customization.md b/docs/chart/customization.md
index 04a7b796..e9b1bcd0 100644
--- a/docs/chart/customization.md
+++ b/docs/chart/customization.md
@@ -252,7 +252,7 @@ const chart = new dhx.Chart("chart_container", {
**Related sample**: [Chart. Value template](https://snippet.dhtmlx.com/o7ke2f1s)
-When you need to show values for data items on the Pie, Pie3D and Donut charts, you can use the **valueTemplate** option of [series](chart/configuration_properties.md/#pie-pie-3d-and-donut-chart) to specify the necessary template function. For example:
+When you need to show values for data items on the Pie, Pie3D and Donut charts, you can use the **valueTemplate** option of [series](chart/configuration_properties.md#pie-pie-3d-and-donut-chart) to specify the necessary template function. For example:
~~~jsx {6-8}
const chart = new dhx.Chart("chart_container", {
diff --git a/docs/chart/data_loading.md b/docs/chart/data_loading.md
index 7f46dfa4..7a80ed51 100644
--- a/docs/chart/data_loading.md
+++ b/docs/chart/data_loading.md
@@ -210,7 +210,7 @@ There are two ways to load data into Chart after its initialization:
### External data loading
-To load data from an external file, make use of the [load()](data_collection/api/datacollection_load_method.md) method of [DataCollection](data_collection.md). It takes the URL of the file with data as a parameter:
+To load data from an external file, make use of the [load()](data_collection/api/datacollection_load_method.md) method of [DataCollection](/data_collection/). It takes the URL of the file with data as a parameter:
~~~js
const chart = new dhx.Chart("chart_container", {
@@ -242,7 +242,7 @@ chart.data.load("/some/data").then(function(){
### Loading from local source
-To load data from a local data source, use the [parse()](data_collection/api/datacollection_parse_method.md) method of [DataCollection](data_collection.md). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
+To load data from a local data source, use the [parse()](data_collection/api/datacollection_parse_method.md) method of [DataCollection](/data_collection/). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
~~~js
const chart = new dhx.Chart("chart_container", {
@@ -264,7 +264,7 @@ chart.data.parse(dataset);
## Saving and restoring state
-To save the current state of a chart, use the **serialize()** method of [DataCollection](data_collection.md). It converts the data of a chart into an array of JSON objects.
+To save the current state of a chart, use the **serialize()** method of [DataCollection](/data_collection/). It converts the data of a chart into an array of JSON objects.
Each JSON object contains a set of *key:value* pairs for data titles and values.
~~~js
diff --git a/docs/chart/features.md b/docs/chart/features.md
index 45e3a2ee..903eff3d 100644
--- a/docs/chart/features.md
+++ b/docs/chart/features.md
@@ -16,26 +16,26 @@ In this section you can find out how to initialize different types of Charts, an
| Topic | Description |
| ------------------------------------------ | ----------------------------- |
-| [Basic initialization](../initialization/) | Learn how to initialize Chart |
+| [Basic initialization](chart/initialization.md) | Learn how to initialize Chart |
### Types of Charts
| Topic | Description |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Specifying the Chart type](../api/chart_type_config/) | Check the list of available Chart types and learn how to specify the necessary one |
-| [Spline area chart](../charts_overview/#area-and-splinearea-chart) | Learn how to initialize Spline area chart ([Example](https://snippet.dhtmlx.com/bo82km4n)) |
-| [Spline chart](../charts_overview/#line-and-spline-chart) | Learn how to initialize Spline chart ([Example](https://snippet.dhtmlx.com/2wvmdm0y)) |
-| [Area chart](../charts_overview/#area-and-splinearea-chart) | Learn how to initialize Area chart ([Example](https://snippet.dhtmlx.com/nv6t6lvm)) |
-| [Line chart](../charts_overview/#line-and-spline-chart) | Learn how to initialize Line chart ([Example](https://snippet.dhtmlx.com/t881qcim)) |
-| [Bar chart](../charts_overview/#bar-and-x-bar-chart) | Learn how to initialize Bar chart ([Example](https://snippet.dhtmlx.com/id9nbujd)) |
-| [X-Bar chart](../charts_overview/#bar-and-x-bar-chart) | Learn how to initialize X-Bar chart ([Example](https://snippet.dhtmlx.com/qz80yw84)) |
-| [Scatter chart](../charts_overview/#scatter-chart) | Learn how to initialize Scatter chart ([Example](https://snippet.dhtmlx.com/pkczfmpu)) |
-| [Donut chart](../charts_overview/#pie-pie-3d-and-donut-chart) | Learn how to initialize Donut chart ([Example](https://snippet.dhtmlx.com/lobb80ig)) |
-| [Pie chart](../charts_overview/#pie-pie-3d-and-donut-chart) | Learn how to initialize Pie chart ([Example](https://snippet.dhtmlx.com/jfbet749)) |
-| [Pie 3D chart](../charts_overview/#pie-pie-3d-and-donut-chart) | Learn how to initialize Pie 3D chart ([Example](https://snippet.dhtmlx.com/xfce9pys)) |
-| [Radar chart](../charts_overview/#radar-chart) | Learn how to initialize Radar chart ([Example](https://snippet.dhtmlx.com/6otf4h0t)) |
-| [Treemap chart](../charts_overview/#treemap-chart) | Learn how to initialize Treemap chart ([Example 1](https://snippet.dhtmlx.com/p31wzm0b), [Example 2](https://snippet.dhtmlx.com/fmgnlue4)) |
-| [Calendar heatmap chart](../charts_overview/#calendar-heatmap-chart) | Learn how to initialize Calendar heatmap chart |
+| [Specifying the Chart type](chart/api/chart_type_config.md) | Check the list of available Chart types and learn how to specify the necessary one |
+| [Spline area chart](chart/charts_overview.md#area-and-splinearea-chart) | Learn how to initialize Spline area chart ([Example](https://snippet.dhtmlx.com/bo82km4n)) |
+| [Spline chart](chart/charts_overview.md#line-and-spline-chart) | Learn how to initialize Spline chart ([Example](https://snippet.dhtmlx.com/2wvmdm0y)) |
+| [Area chart](chart/charts_overview.md#area-and-splinearea-chart) | Learn how to initialize Area chart ([Example](https://snippet.dhtmlx.com/nv6t6lvm)) |
+| [Line chart](chart/charts_overview.md#line-and-spline-chart) | Learn how to initialize Line chart ([Example](https://snippet.dhtmlx.com/t881qcim)) |
+| [Bar chart](chart/charts_overview.md#bar-and-x-bar-chart) | Learn how to initialize Bar chart ([Example](https://snippet.dhtmlx.com/id9nbujd)) |
+| [X-Bar chart](chart/charts_overview.md#bar-and-x-bar-chart) | Learn how to initialize X-Bar chart ([Example](https://snippet.dhtmlx.com/qz80yw84)) |
+| [Scatter chart](chart/charts_overview.md#scatter-chart) | Learn how to initialize Scatter chart ([Example](https://snippet.dhtmlx.com/pkczfmpu)) |
+| [Donut chart](chart/charts_overview.md#pie-pie-3d-and-donut-chart) | Learn how to initialize Donut chart ([Example](https://snippet.dhtmlx.com/lobb80ig)) |
+| [Pie chart](chart/charts_overview.md#pie-pie-3d-and-donut-chart) | Learn how to initialize Pie chart ([Example](https://snippet.dhtmlx.com/jfbet749)) |
+| [Pie 3D chart](chart/charts_overview.md#pie-pie-3d-and-donut-chart) | Learn how to initialize Pie 3D chart ([Example](https://snippet.dhtmlx.com/xfce9pys)) |
+| [Radar chart](chart/charts_overview.md#radar-chart) | Learn how to initialize Radar chart ([Example](https://snippet.dhtmlx.com/6otf4h0t)) |
+| [Treemap chart](chart/charts_overview.md#treemap-chart) | Learn how to initialize Treemap chart ([Example 1](https://snippet.dhtmlx.com/p31wzm0b), [Example 2](https://snippet.dhtmlx.com/fmgnlue4)) |
+| [Calendar heatmap chart](chart/charts_overview.md#calendar-heatmap-chart) | Learn how to initialize Calendar heatmap chart |
| [Grid and Chart](https://snippet.dhtmlx.com/gdeqtev4) | Learn how to bind Chart to Grid |
### Loading data into Chart
@@ -44,14 +44,14 @@ In this section you can discover the ways of loading data into Chart.
| Topic | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| [Loading chart data](../data_loading/) | Learn how to load the initial data into Chart ([Example](https://snippet.dhtmlx.com/qah8exx2)) |
+| [Loading chart data](chart/data_loading.md) | Learn how to load the initial data into Chart ([Example](https://snippet.dhtmlx.com/qah8exx2)) |
### Integration
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Chart with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Chart with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Chart with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -62,17 +62,17 @@ In this section you can discover how to configure a Chart legend, scales, and se
| Topic | Description |
| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring a legend](../api/chart_legend_config/#the-list-of-config-options-for-legend-for-charts-with-scales) | Learn how to configure a legend for Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, Scatter charts ([Example](https://snippet.dhtmlx.com/00ei3q23)) |
-| [Configuring X,Y scales](../api/chart_scales_config/#the-list-of-config-options-for-scales) | Learn how to configure X,Y scales for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter charts ([Example 1](https://snippet.dhtmlx.com/iw00fgl5), [Example 2](https://snippet.dhtmlx.com/5ir00fer), [Example 3](https://snippet.dhtmlx.com/28y4x1zd)) |
-| [Configuring radial scales](../api/chart_scales_config/#the-list-of-config-options-for-radial-scales) | Learn how to configure radial scales for Radar chart ([Example](https://snippet.dhtmlx.com/yksfvhhl)) |
-| [Configuring series](../api/chart_series_config/#the-list-of-config-options-for-series-for-charts-with-scales) | Learn how to configure series for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter, Radar charts |
-| [Configuring a legend](../api/chart_legend_config/#the-list-of-config-options-for-legend-for-charts-without-scales-pie-pie3d-donut) | Learn how to configure a legend for Pie, Pie3D, Donut charts ([Example](https://snippet.dhtmlx.com/n8wsfv5n)) |
-| [Configuring series](../api/chart_series_config/#the-list-of-config-options-for-series-for-charts-without-scales-pie-pie3d-donut) | Learn how to configure series for Pie, Pie3D, Donut charts |
-| [Configuring a legend](../api/chart_legend_config/#the-list-of-config-options-for-legend-for-charts-without-scales-treemap) | Learn how to configure a legend for Treemap chart ([Example 1](https://snippet.dhtmlx.com/p31wzm0b), [Example 2](https://snippet.dhtmlx.com/fmgnlue4)) |
-| [Configuring series](../api/chart_series_config/#the-list-of-config-options-for-series-for-charts-without-scales-treemap) | Learn how to configure series for Treemap chart |
-| [Configuring a mixed chart](../configuration_properties/#mixed-graphs-in-one-chart) | Learn how to combine different types of graphs in one chart ([Example](https://snippet.dhtmlx.com/eti3i33o)) |
+| [Configuring a legend](chart/api/chart_legend_config.md#the-list-of-config-options-for-legend-for-charts-with-scales) | Learn how to configure a legend for Line, Spline, Bar, X-Bar, Area, SplineArea, Radar, Scatter charts ([Example](https://snippet.dhtmlx.com/00ei3q23)) |
+| [Configuring X,Y scales](chart/api/chart_scales_config.md#the-list-of-config-options-for-scales) | Learn how to configure X,Y scales for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter charts ([Example 1](https://snippet.dhtmlx.com/iw00fgl5), [Example 2](https://snippet.dhtmlx.com/5ir00fer), [Example 3](https://snippet.dhtmlx.com/28y4x1zd)) |
+| [Configuring radial scales](chart/api/chart_scales_config.md#the-list-of-config-options-for-radial-scales) | Learn how to configure radial scales for Radar chart ([Example](https://snippet.dhtmlx.com/yksfvhhl)) |
+| [Configuring series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-with-scales) | Learn how to configure series for Line, Spline, Bar, X-Bar, Area, SplineArea, Scatter, Radar charts |
+| [Configuring a legend](chart/api/chart_legend_config.md#the-list-of-config-options-for-legend-for-charts-without-scales-pie-pie3d-donut) | Learn how to configure a legend for Pie, Pie3D, Donut charts ([Example](https://snippet.dhtmlx.com/n8wsfv5n)) |
+| [Configuring series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-pie-pie3d-donut) | Learn how to configure series for Pie, Pie3D, Donut charts |
+| [Configuring a legend](chart/api/chart_legend_config.md#the-list-of-config-options-for-legend-for-charts-without-scales-treemap) | Learn how to configure a legend for Treemap chart ([Example 1](https://snippet.dhtmlx.com/p31wzm0b), [Example 2](https://snippet.dhtmlx.com/fmgnlue4)) |
+| [Configuring series](chart/api/chart_series_config.md#the-list-of-config-options-for-series-for-charts-without-scales-treemap) | Learn how to configure series for Treemap chart |
+| [Configuring a mixed chart](chart/configuration_properties.md#mixed-graphs-in-one-chart) | Learn how to combine different types of graphs in one chart ([Example](https://snippet.dhtmlx.com/eti3i33o)) |
| [Changing configuration on the fly](https://snippet.dhtmlx.com/7umj531n) | Learn how to set configuration of a chart dynamically |
-| [Displaying average values](../api/chart_maxpoints_config/) | Learn how to display a huge data set in the chart ([Example](https://snippet.dhtmlx.com/6917eudu)) |
+| [Displaying average values](chart/api/chart_maxpoints_config.md) | Learn how to display a huge data set in the chart ([Example](https://snippet.dhtmlx.com/6917eudu)) |
## How to customize Chart
@@ -91,8 +91,8 @@ In this section you can learn how to customize Chart.
| [Scales. Dashed grid](https://snippet.dhtmlx.com/gnj1xc3r) | Learn how to make the grid lines dashed for Chart with scales |
| [Scales. Without grid (lines)](https://snippet.dhtmlx.com/leqdx9qr) | Learn how to show/hide the grid lines (for x,y, or both scales |
| [Scales. Custom paddings (indents)](https://snippet.dhtmlx.com/74onr5q1) | Learn how to set the padding between the scale and the chart container |
-| [Styling (custom CSS)](../customization/) | Learn how to change the look and feel of Chart ([Example](https://snippet.dhtmlx.com/p82iew5s)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Styling (custom CSS)](chart/customization.md) | Learn how to change the look and feel of Chart ([Example](https://snippet.dhtmlx.com/p82iew5s)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with data in Chart
@@ -101,9 +101,9 @@ In this section you can discover how to apply the [DataCollection API](guides/da
| Topic | Description |
| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| [Serializing chart data](../data_loading/#saving-and-restoring-state) | Learn how to serialize the chart data ([Example](https://snippet.dhtmlx.com/rqvvpopp)) |
-| [Adding new data into Chart](../usage/#adding-items-into-chart) | Learn how to add data on the fly ([Example](https://snippet.dhtmlx.com/dpz4w5nr)) |
-| [DataCollection API](../../data_collection/) | Check the list of all available DataCollection API |
+| [Serializing chart data](chart/data_loading.md#saving-and-restoring-state) | Learn how to serialize the chart data ([Example](https://snippet.dhtmlx.com/rqvvpopp)) |
+| [Adding new data into Chart](chart/usage.md#adding-items-into-chart) | Learn how to add data on the fly ([Example](https://snippet.dhtmlx.com/dpz4w5nr)) |
+| [DataCollection API](/data_collection/) | Check the list of all available DataCollection API |
## How to work with Chart series
@@ -112,8 +112,8 @@ In this section you will find out how to work with Chart series.
| Topic | Description |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| [Iterating over series](../usage/#iterating-over-series) | Learn how to perform iteration over chart series ([Example](https://snippet.dhtmlx.com/4kbj4lmw)) |
-| [Getting series configuration](../usage/#getting-series-configuration) | Learn how to get an object with the configuration of a certain series ([Example](https://snippet.dhtmlx.com/9jtscd9q)) |
+| [Iterating over series](chart/usage.md#iterating-over-series) | Learn how to perform iteration over chart series ([Example](https://snippet.dhtmlx.com/4kbj4lmw)) |
+| [Getting series configuration](chart/usage.md#getting-series-configuration) | Learn how to get an object with the configuration of a certain series ([Example](https://snippet.dhtmlx.com/9jtscd9q)) |
## How to export Chart
@@ -121,7 +121,7 @@ In this section you will know how to export Chart to different formats.
| Topic | Description |
| :----------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- |
-| [Exporting Chart to a PDF or PNG file](../usage/#exporting-data) | Learn how to export Chart to PDF or PNG formats ([Example](https://snippet.dhtmlx.com/4rybsjjq)) |
+| [Exporting Chart to a PDF or PNG file](chart/usage.md#exporting-data) | Learn how to export Chart to PDF or PNG formats ([Example](https://snippet.dhtmlx.com/4rybsjjq)) |
## How to work with Chart events
@@ -130,7 +130,7 @@ This section explains how to work with Chart events.
| Topic | Description |
| :------------------------------------------ | :----------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../events/) | Learn how to attach, detach, or call the Chart events ([Example](https://snippet.dhtmlx.com/a1b9yfwo)) |
+| [Event handling](chart/events.md) | Learn how to attach, detach, or call the Chart events ([Example](https://snippet.dhtmlx.com/a1b9yfwo)) |
## API reference
@@ -138,9 +138,9 @@ In this section you can find out corresponding references of Chart API.
| Topic | Description |
| ---------------------------------------------------- | --------------------------------- |
-| [Chart methods](../../category/chart-methods/) | Learn how to use Chart methods |
-| [Chart events](../../category/chart-events/) | Learn how to use Chart events |
-| [Chart properties](../../category/chart-properties/) | Learn how to use Chart properties |
+| [Chart methods](/category/chart-methods/) | Learn how to use Chart methods |
+| [Chart events](/category/chart-events/) | Learn how to use Chart events |
+| [Chart properties](/category/chart-properties/) | Learn how to use Chart properties |
## Common functionality
@@ -148,9 +148,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component's rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component's rendering |
## Any questions left?
diff --git a/docs/chart/index.md b/docs/chart/index.md
index afee1a96..c016ab87 100644
--- a/docs/chart/index.md
+++ b/docs/chart/index.md
@@ -20,23 +20,23 @@ You can check the following page to learn how to build a full-featured DHTMLX Ch
## API reference
-- [](api/api_overview.md)
+- [](chart/api/api_overview.md)
## Related resources
- To get just DHTMLX Chart, download it from [our website](https://dhtmlx.com/docs/products/dhtmlxChart/download.shtml)
- To get the whole JavaScript library of UI components [download DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX Chart](https://snippet.dhtmlx.com/bo82km4n?tag=chart)
-- To work with data of Chart check [DataCollection API](data_collection.md)
+- To work with data of Chart check [DataCollection API](/data_collection/)
## Guides
You can read the following articles to find out how to add Chart on the page and work with it.
-- [](charts_overview.md)
-- [](initialization.md)
-- [](configuration_properties.md)
-- [](data_loading.md)
-- [](usage.md)
-- [](customization.md)
-- [](events.md)
+- [](chart/charts_overview.md)
+- [](chart/initialization.md)
+- [](chart/configuration_properties.md)
+- [](chart/data_loading.md)
+- [](chart/usage.md)
+- [](chart/customization.md)
+- [](chart/events.md)
diff --git a/docs/chart/usage.md b/docs/chart/usage.md
index 0e59125d..adfd2027 100644
--- a/docs/chart/usage.md
+++ b/docs/chart/usage.md
@@ -107,7 +107,7 @@ chart.eachSeries(function(seria){
## Adding items into Chart
-The API of [Data Collection](data_collection.md) allows you to perform operations with Chart data items.
+The API of [Data Collection](/data_collection/) allows you to perform operations with Chart data items.
For example, you can add more items (points) into your Chart using the [](data_collection/api/datacollection_add_method.md) method, like this:
~~~js
diff --git a/docs/colorpicker/api/colorpicker_css_config.md b/docs/colorpicker/api/colorpicker_css_config.md
index b64cf7b9..65d56968 100644
--- a/docs/colorpicker/api/colorpicker_css_config.md
+++ b/docs/colorpicker/api/colorpicker_css_config.md
@@ -52,4 +52,4 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/colorpicker/features.md b/docs/colorpicker/features.md
index 2f54779e..d366e899 100644
--- a/docs/colorpicker/features.md
+++ b/docs/colorpicker/features.md
@@ -16,9 +16,9 @@ In this section you can find out the ways of Colorpicker initialization and loca
| Topic | Description |
| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| [Basic initialization](../how_to_start/) | Learn how to initialize Colorpicker ([Example](https://snippet.dhtmlx.com/ezk8rk4m)) |
-| [Colorpicker inside Popup](../how_to_start/#initialization-in-a-popup) | Learn how to initialize Colorpicker in a popup ([Example](https://snippet.dhtmlx.com/kw3e0h4j)) |
-| [Localization](../localizing_colorpicker/) | Learn how to localize Colorpicker ([Example](https://snippet.dhtmlx.com/l870h1gh)) |
+| [Basic initialization](colorpicker/how_to_start.md) | Learn how to initialize Colorpicker ([Example](https://snippet.dhtmlx.com/ezk8rk4m)) |
+| [Colorpicker inside Popup](colorpicker/how_to_start.md#initialization-in-a-popup) | Learn how to initialize Colorpicker in a popup ([Example](https://snippet.dhtmlx.com/kw3e0h4j)) |
+| [Localization](colorpicker/localizing_colorpicker.md) | Learn how to localize Colorpicker ([Example](https://snippet.dhtmlx.com/l870h1gh)) |
### Integration
@@ -26,7 +26,7 @@ In this section you can find out the ways of Colorpicker initialization and loca
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Colorpicker with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Colorpicker with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Colorpicker with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -37,9 +37,9 @@ In this section you will find out how to configure the modes of displaying Color
| Topic | Description |
| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| [Setting Colorpicker mode ("palette", "picker")](../api/colorpicker_mode_config/) | Learn how to configure the mode of displaying Colorpicker ([Example](https://snippet.dhtmlx.com/add0g4je)) |
-| [Displaying the picker only](../configuration/#palette-or-picker-mode-only) | Learn how to hide the palette and display the picker only ([Example](https://snippet.dhtmlx.com/5zlvvwpl)) |
-| [Displaying the palette only](../api/colorpicker_paletteonly_config/) | Learn how to hide the panel with custom colors ([Example](https://snippet.dhtmlx.com/3d75mz19)) |
+| [Setting Colorpicker mode ("palette", "picker")](colorpicker/api/colorpicker_mode_config.md) | Learn how to configure the mode of displaying Colorpicker ([Example](https://snippet.dhtmlx.com/add0g4je)) |
+| [Displaying the picker only](colorpicker/configuration.md#palette-or-picker-mode-only) | Learn how to hide the palette and display the picker only ([Example](https://snippet.dhtmlx.com/5zlvvwpl)) |
+| [Displaying the palette only](colorpicker/api/colorpicker_paletteonly_config.md) | Learn how to hide the panel with custom colors ([Example](https://snippet.dhtmlx.com/3d75mz19)) |
## How to configure palette
@@ -47,9 +47,9 @@ In this section you will find out how to configure and customize palette.
| Topic | Description |
| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
-| [Hiding gray shades](../configuration/#gray-shades) | Learn how to hide gray shades at the top of the palette ([Example](https://snippet.dhtmlx.com/b44fp8q2)) |
-| [Displaying custom colors](../configuration/#list-of-custom-colors) | Learn how to display a list of custom colors in the bottom part of Colorpicker |
-| [Configuring custom palette](../configuration/#custom-colors-in-palette) | Learn how to display Colorpicker with a custom palette ([Example](https://snippet.dhtmlx.com/097jjhb8)) |
+| [Hiding gray shades](colorpicker/configuration.md#gray-shades) | Learn how to hide gray shades at the top of the palette ([Example](https://snippet.dhtmlx.com/b44fp8q2)) |
+| [Displaying custom colors](colorpicker/configuration.md#list-of-custom-colors) | Learn how to display a list of custom colors in the bottom part of Colorpicker |
+| [Configuring custom palette](colorpicker/configuration.md#custom-colors-in-palette) | Learn how to display Colorpicker with a custom palette ([Example](https://snippet.dhtmlx.com/097jjhb8)) |
## How to customize Colorpicker and change its size
@@ -57,9 +57,9 @@ In this section you can learn how to customize Colorpicker and change its width.
| Topic | Description |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| [Width of Colorpicker](../configuration/#width-of-colorpicker) | Learn how to set the necessary width of Colorpicker |
-| [Styling (custom CSS)](../customization/) | Learn how to change the look and feel of Colorpicker ([Example](https://snippet.dhtmlx.com/mnwi3sp0)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Width of Colorpicker](colorpicker/configuration.md#width-of-colorpicker) | Learn how to set the necessary width of Colorpicker |
+| [Styling (custom CSS)](colorpicker/customization.md) | Learn how to change the look and feel of Colorpicker ([Example](https://snippet.dhtmlx.com/mnwi3sp0)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Colorpicker
@@ -67,13 +67,13 @@ In this section you will find out how to set/get selected color, how to set/get
| Topic | Description |
| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
-| [Setting selection to a color](../manipulating_colorpicker/#settinggetting-selected-color) | Learn how to select a certain color in Colorpicker ([Example](https://snippet.dhtmlx.com/h6oc5qsq)) |
-| [Getting selected color](../manipulating_colorpicker/#settinggetting-selected-color) | Learn how to get the code of a selected color |
-| [Setting custom colors](../manipulating_colorpicker/#settinggetting-custom-colors) | Learn how to display custom colors in the bottom part of Colorpicker ([Example](https://snippet.dhtmlx.com/z9jfv3fg)) |
-| [Getting custom colors](../manipulating_colorpicker/#settinggetting-custom-colors) | Learn how to return the codes of selected custom colors |
-| [Changing Colorpicker mode](../manipulating_colorpicker/#settinggetting-current-mode) | Learn how to change the current mode of Colorpicker ([Example](https://snippet.dhtmlx.com/0mhp5cp6)) |
-| [Getting Colorpicker mode](../manipulating_colorpicker/#settinggetting-current-mode) | Learn how to get the current mode of displaying Colorpicker |
-| [Setting focus](../manipulating_colorpicker/#setting-focus-on-a-color) | Learn how to set focus on the specified value ([Example](https://snippet.dhtmlx.com/fg13r3uh)) |
+| [Setting selection to a color](colorpicker/manipulating_colorpicker.md#settinggetting-selected-color) | Learn how to select a certain color in Colorpicker ([Example](https://snippet.dhtmlx.com/h6oc5qsq)) |
+| [Getting selected color](colorpicker/manipulating_colorpicker.md#settinggetting-selected-color) | Learn how to get the code of a selected color |
+| [Setting custom colors](colorpicker/manipulating_colorpicker.md#settinggetting-custom-colors) | Learn how to display custom colors in the bottom part of Colorpicker ([Example](https://snippet.dhtmlx.com/z9jfv3fg)) |
+| [Getting custom colors](colorpicker/manipulating_colorpicker.md#settinggetting-custom-colors) | Learn how to return the codes of selected custom colors |
+| [Changing Colorpicker mode](colorpicker/manipulating_colorpicker.md#settinggetting-current-mode) | Learn how to change the current mode of Colorpicker ([Example](https://snippet.dhtmlx.com/0mhp5cp6)) |
+| [Getting Colorpicker mode](colorpicker/manipulating_colorpicker.md#settinggetting-current-mode) | Learn how to get the current mode of displaying Colorpicker |
+| [Setting focus](colorpicker/manipulating_colorpicker.md#setting-focus-on-a-color) | Learn how to set focus on the specified value ([Example](https://snippet.dhtmlx.com/fg13r3uh)) |
## How to work with Colorpicker events
@@ -82,7 +82,7 @@ This section explains how to work with Colorpicker events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Colorpicker events ([Example](https://snippet.dhtmlx.com/fllgaabo)) |
+| [Event handling](colorpicker/handling_events.md) | Learn how to attach, detach, or call the Colorpicker events ([Example](https://snippet.dhtmlx.com/fllgaabo)) |
## API reference
@@ -90,9 +90,9 @@ In this section you can find out corresponding references of Colorpicker API.
| Topic | Description |
| -------------------------------------------------------------- | ---------------------------------------- |
-| [Colorpicker methods](../../category/colorpicker-methods/) | Check the list of Colorpicker methods |
-| [Colorpicker events](../../category/colorpicker-events/) | Check the list of Colorpicker events |
-| [Colorpicker properties](../../category/colorpicker-properties/) | Check the list of Colorpicker properties |
+| [Colorpicker methods](/category/colorpicker-methods/) | Check the list of Colorpicker methods |
+| [Colorpicker events](/category/colorpicker-events/) | Check the list of Colorpicker events |
+| [Colorpicker properties](/category/colorpicker-properties/) | Check the list of Colorpicker properties |
## Common functionality
@@ -100,9 +100,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/colorpicker/how_to_start.md b/docs/colorpicker/how_to_start.md
index 46aba804..a393bbf7 100644
--- a/docs/colorpicker/how_to_start.md
+++ b/docs/colorpicker/how_to_start.md
@@ -93,13 +93,13 @@ const colorpicker = new dhx.Colorpicker(null, { customColors: ["#f2f2f2"] });
const popup = new dhx.Popup();
~~~
-- attach the colorpicker to the popup using the [](../popup/api/popup_attach_method.md) method of Popup:
+- attach the colorpicker to the popup using the [](popup/api/popup_attach_method.md) method of Popup:
~~~js
popup.attach(colorpicker);
~~~
-- use the [show()](../../popup/api/popup_show_method/) and [hide()](../../popup/api/popup_hide_method/) methods of Popup to control when a popup with color picker should be shown/hidden. For example:
+- use the [show()](popup/api/popup_show_method.md) and [hide()](popup/api/popup_hide_method.md) methods of Popup to control when a popup with color picker should be shown/hidden. For example:
~~~js
popup.show("showButton");
diff --git a/docs/colorpicker/index.md b/docs/colorpicker/index.md
index a941d78a..6ec5a89a 100644
--- a/docs/colorpicker/index.md
+++ b/docs/colorpicker/index.md
@@ -21,7 +21,7 @@ You can check the following page to learn how to build a full-featured DHTMLX Co
## API reference
-- [](api/api_overview.md)
+- [](colorpicker/api/api_overview.md)
## Related resources
@@ -32,13 +32,13 @@ You can check the following page to learn how to build a full-featured DHTMLX Co
Covers the processes of creating, configuring, localizing, customizing ColorPicker, and working with it.
-- [](how_to_start.md)
-- [](configuration.md)
-- [](localizing_colorpicker.md)
-- [](manipulating_colorpicker.md)
-- [](customization.md)
-- [](handling_events.md)
+- [](colorpicker/how_to_start.md)
+- [](colorpicker/configuration.md)
+- [](colorpicker/localizing_colorpicker.md)
+- [](colorpicker/manipulating_colorpicker.md)
+- [](colorpicker/customization.md)
+- [](colorpicker/handling_events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/combobox/adding_options.md b/docs/combobox/adding_options.md
index b3ba2109..a3f8dd57 100644
--- a/docs/combobox/adding_options.md
+++ b/docs/combobox/adding_options.md
@@ -71,7 +71,7 @@ There are two ways to load data into Combobox after its initialization:
### External data loading
-To load data from an external file, make use of the [load()](data_collection/api/datacollection_load_method.md) method of [DataCollection](data_collection.md). It takes the URL of the file with data as a parameter:
+To load data from an external file, make use of the [load()](data_collection/api/datacollection_load_method.md) method of [DataCollection](/data_collection/). It takes the URL of the file with data as a parameter:
~~~js
const combo = new dhx.Combo("combo_container");
@@ -92,7 +92,7 @@ combo.data.load("/some/data").then(function(){
### Loading from local source
-To load data from a local data source, use the [parse()](data_collection/api/datacollection_parse_method.md) method of [DataCollection](data_collection.md). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
+To load data from a local data source, use the [parse()](data_collection/api/datacollection_parse_method.md) method of [DataCollection](/data_collection/). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
~~~js
const combo = new dhx.Combo("combo_container");
@@ -103,7 +103,7 @@ combo.data.parse(dataset);
## Saving and restoring state
-To save the current state of a combo box (in other words, the current list of Combobox options), use the **serialize()** method of [DataCollection](data_collection.md). It converts the data of a combo box into an array of JSON objects.
+To save the current state of a combo box (in other words, the current list of Combobox options), use the **serialize()** method of [DataCollection](/data_collection/). It converts the data of a combo box into an array of JSON objects.
Each JSON object contains a set of *key:value* pairs that represent attributes of ComboBox options.
~~~js
diff --git a/docs/combobox/api/api_overview.md b/docs/combobox/api/api_overview.md
index cbb6ddc3..a0f42e22 100644
--- a/docs/combobox/api/api_overview.md
+++ b/docs/combobox/api/api_overview.md
@@ -23,7 +23,7 @@ description: You can explore the API of Combo Box in the documentation of the DH
| [](combobox/api/combobox_setvalue_method.md) | @getshort(combobox/api/combobox_setvalue_method.md) |
:::info important
-Use [DataCollection methods](data_collection.md) to work with data.
+Use [DataCollection methods](/data_collection/) to work with data.
:::
## Events
@@ -42,7 +42,7 @@ Use [DataCollection methods](data_collection.md) to work with data.
| [](combobox/api/combobox_keydown_event.md) | @getshort(combobox/api/combobox_keydown_event.md) |
:::info important
-Use [DataCollection events](data_collection.md#events) to work with data.
+Use [DataCollection events](/data_collection/#events) to work with data.
:::
## Properties
diff --git a/docs/combobox/api/combobox_css_config.md b/docs/combobox/api/combobox_css_config.md
index e3bd672d..22b80e2e 100644
--- a/docs/combobox/api/combobox_css_config.md
+++ b/docs/combobox/api/combobox_css_config.md
@@ -43,4 +43,4 @@ const combo = new dhx.Combobox("combo_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/combobox/api/combobox_htmlenable_config.md b/docs/combobox/api/combobox_htmlenable_config.md
index 2bda6571..edc04441 100644
--- a/docs/combobox/api/combobox_htmlenable_config.md
+++ b/docs/combobox/api/combobox_htmlenable_config.md
@@ -31,6 +31,6 @@ You can disable rendering of the HTML content and display it as plain text via s
**Related sample**: [Combobox. Disable HTML rendering](https://snippet.dhtmlx.com/e4dolhfs)
-**Related article:** [HTML content of ComboBox options](combobox/configuration.md/#html-content-of-combobox-options)
+**Related article:** [HTML content of ComboBox options](combobox/configuration.md#html-content-of-combobox-options)
@changelog: added in v7.3
diff --git a/docs/combobox/api/combobox_newoptions_config.md b/docs/combobox/api/combobox_newoptions_config.md
index abb9c384..5c9abbf5 100644
--- a/docs/combobox/api/combobox_newoptions_config.md
+++ b/docs/combobox/api/combobox_newoptions_config.md
@@ -34,4 +34,4 @@ The end user can add a new item into the data collection in two ways:
@descr:
#### Related article
-[Editable combobox](combobox/configuration.md/#editable-combobox)
+[Editable combobox](combobox/configuration.md#editable-combobox)
diff --git a/docs/combobox/configuration.md b/docs/combobox/configuration.md
index ff1701f4..086aa97e 100644
--- a/docs/combobox/configuration.md
+++ b/docs/combobox/configuration.md
@@ -257,7 +257,7 @@ const combo = new dhx.Combobox("combo_container", {
## Event handlers for the template
-Starting from v8.4, it is possible to assign event handlers to HTML elements of a custom template of Combobox items by using the [eventHandlers](/combobox/api/combobox_eventhandlers_config/) configuration option:
+Starting from v8.4, it is possible to assign event handlers to HTML elements of a custom template of Combobox items by using the [eventHandlers](combobox/api/combobox_eventhandlers_config.md) configuration option:
~~~js {11-13,17-24}
const combobox = new dhx.Combobox("combobox", {
@@ -293,7 +293,7 @@ const combobox = new dhx.Combobox("combobox", {
By default, Combobox displays HTML content if it is specified for its options.
-In case you need to disable rendering of HTML content and show it as plain text to keep your application safe, set the [htmlEnable](../../combobox/api/combobox_htmlenable_config/) property to *false*.
+In case you need to disable rendering of HTML content and show it as plain text to keep your application safe, set the [htmlEnable](combobox/api/combobox_htmlenable_config.md) property to *false*.
~~~js
const combo = new dhx.Combobox("combo_container", {
diff --git a/docs/combobox/features.md b/docs/combobox/features.md
index 5174836e..45375ce6 100644
--- a/docs/combobox/features.md
+++ b/docs/combobox/features.md
@@ -16,26 +16,26 @@ In this section you can find out how to initialize and localize Combobox, how to
| Topic | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------- |
-| [Basic initialization](../how_to_start/) | Learn how to initialize Combobox |
-| [Localization](../localization/) | Learn how to localize Combobox ([Example](https://snippet.dhtmlx.com/cnj0j9g0)) |
+| [Basic initialization](combobox/how_to_start.md) | Learn how to initialize Combobox |
+| [Localization](combobox/localization.md) | Learn how to localize Combobox ([Example](https://snippet.dhtmlx.com/cnj0j9g0)) |
### Loading data into Combobox
| Topic | Description |
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| [Loading data into Combobox](../adding_options/#preparing-data-set) | Read how to load the initial data into Combobox |
+| [Loading data into Combobox](combobox/adding_options.md#preparing-data-set) | Read how to load the initial data into Combobox |
| [Initialization with config.data](https://snippet.dhtmlx.com/8bsb9dji) | The example shows how to load data into Combobox on the fly |
| [Initialization with data.load()](https://snippet.dhtmlx.com/69jnq5cn) | The example shows to load data from external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/d2y5yf46) | The example to load data from a local data source |
| [Initialization with external DataCollection](https://snippet.dhtmlx.com/u8bf3efb) | The example shows how to load data from external DataCollection |
-| [Rendering a large data set](../configuration/#dynamic-rendering-of-options) | Learn how to enable dynamic loading of data on scrolling the list of options ([Example](https://snippet.dhtmlx.com/5srwualw)) |
+| [Rendering a large data set](combobox/configuration.md#dynamic-rendering-of-options) | Learn how to enable dynamic loading of data on scrolling the list of options ([Example](https://snippet.dhtmlx.com/5srwualw)) |
### Integration
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Chart with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Chart with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Chart with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -46,17 +46,17 @@ In this section you will find out how to set initial value into the input, to en
| Topic | Description |
| ----------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| [Setting initial value](../configuration/#initial-value) | Learn how to specify the initial values to be shown in the Combobox input ([Example](https://snippet.dhtmlx.com/spnausim)) |
-| [Enabling multiselection](../configuration/#selection-of-multiple-options) | Learn how to enable the ability to select several options ([Example](https://snippet.dhtmlx.com/ui7pi7ty)) |
-| [Adding Select All button](../configuration/#selection-of-all-options-in-the-list) | Learn how to enable the ability to select all options at once ([Example](https://snippet.dhtmlx.com/ui7pi7ty)) |
-| [Displaying the number of selected options](../configuration/#number-of-selected-options) | Learn how to show total number of selected options in the Combobox input ([Example](https://snippet.dhtmlx.com/fw2u2bww)) |
-| [Configuring a label](../configuration/#label) | Learn how to configure a label and its position for Combobox ([Example](https://snippet.dhtmlx.com/2936fray)) |
-| [Hiding a label](../configuration/#hidden-label) | Learn how to make a label hidden |
-| [Setting a placeholder](../configuration/#placeholder) | Learn how to set a placeholder in the input of Combo ([Example](https://snippet.dhtmlx.com/759z23gh)) |
-| [Adding new options](../configuration/#editable-combobox) | Learn how to allow end users to add new options into Combobox via UI ([Example](https://snippet.dhtmlx.com/ui7pi7ty)) |
-| [Editing/deleting options](../configuration/#editable-combobox) | Learn how to allow end users to edit/delete options in Combobox via UI ([Example](https://snippet.dhtmlx.com/xd511ci5)) |
-| [Making Combobox readonly](../configuration/#readonly-mode) | Learn how to disable the ability to enter text in the input ([Example](https://snippet.dhtmlx.com/igjsuf7y)) |
-| [Making Combobox disabled](../configuration/#disabled-mode) | Learn how to block any operations with Combobox ([Example](https://snippet.dhtmlx.com/ductsm0f)) |
+| [Setting initial value](combobox/configuration.md#initial-value) | Learn how to specify the initial values to be shown in the Combobox input ([Example](https://snippet.dhtmlx.com/spnausim)) |
+| [Enabling multiselection](combobox/configuration.md#selection-of-multiple-options) | Learn how to enable the ability to select several options ([Example](https://snippet.dhtmlx.com/ui7pi7ty)) |
+| [Adding Select All button](combobox/configuration.md#selection-of-all-options-in-the-list) | Learn how to enable the ability to select all options at once ([Example](https://snippet.dhtmlx.com/ui7pi7ty)) |
+| [Displaying the number of selected options](combobox/configuration.md#number-of-selected-options) | Learn how to show total number of selected options in the Combobox input ([Example](https://snippet.dhtmlx.com/fw2u2bww)) |
+| [Configuring a label](combobox/configuration.md#label) | Learn how to configure a label and its position for Combobox ([Example](https://snippet.dhtmlx.com/2936fray)) |
+| [Hiding a label](combobox/configuration.md#hidden-label) | Learn how to make a label hidden |
+| [Setting a placeholder](combobox/configuration.md#placeholder) | Learn how to set a placeholder in the input of Combo ([Example](https://snippet.dhtmlx.com/759z23gh)) |
+| [Adding new options](combobox/configuration.md#editable-combobox) | Learn how to allow end users to add new options into Combobox via UI ([Example](https://snippet.dhtmlx.com/ui7pi7ty)) |
+| [Editing/deleting options](combobox/configuration.md#editable-combobox) | Learn how to allow end users to edit/delete options in Combobox via UI ([Example](https://snippet.dhtmlx.com/xd511ci5)) |
+| [Making Combobox readonly](combobox/configuration.md#readonly-mode) | Learn how to disable the ability to enter text in the input ([Example](https://snippet.dhtmlx.com/igjsuf7y)) |
+| [Making Combobox disabled](combobox/configuration.md#disabled-mode) | Learn how to block any operations with Combobox ([Example](https://snippet.dhtmlx.com/ductsm0f)) |
## How to customize Combobox and change its size
@@ -64,13 +64,13 @@ In this section you can learn how to customize Combobox and configure the height
| Topic | Description |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| [Height of Combobox elements](../configuration/#height-of-list-of-options-and-its-items) | Learn how to set the height for list of Combobox options and its items ([Example](https://snippet.dhtmlx.com/vilg4l7w)) |
-| [Applying custom filtering](../customization/#custom-filter-for-options) | Learn how to set a custom function for filtering Combobox options ([Example](https://snippet.dhtmlx.com/791incm9)) |
+| [Height of Combobox elements](combobox/configuration.md#height-of-list-of-options-and-its-items) | Learn how to set the height for list of Combobox options and its items ([Example](https://snippet.dhtmlx.com/vilg4l7w)) |
+| [Applying custom filtering](combobox/customization.md#custom-filter-for-options) | Learn how to set a custom function for filtering Combobox options ([Example](https://snippet.dhtmlx.com/791incm9)) |
| [Grouping Combobox options](https://snippet.dhtmlx.com/sk7q5wvl) | The example shows how to group Combobox options |
-| [Rendering HTML content](../configuration/#html-content-of-combobox-options) | Learn how to display HTML content as plain text to prevent XSS attacks ([Example](https://snippet.dhtmlx.com/e4dolhfs)) |
-| [Styling combobox (custom CSS)](../customization/#styling) | Learn how to change the look and feel of Combobox ([Example](https://snippet.dhtmlx.com/lldd739i)) |
-| [Styling Combobox items](../configuration/#template-for-combobox-options) | Learn how to customize the appearance of displaying options in the popup list ([Example](https://snippet.dhtmlx.com/z7cpj76i)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Rendering HTML content](combobox/configuration.md#html-content-of-combobox-options) | Learn how to display HTML content as plain text to prevent XSS attacks ([Example](https://snippet.dhtmlx.com/e4dolhfs)) |
+| [Styling combobox (custom CSS)](combobox/customization.md#styling) | Learn how to change the look and feel of Combobox ([Example](https://snippet.dhtmlx.com/lldd739i)) |
+| [Styling Combobox items](combobox/configuration.md#template-for-combobox-options) | Learn how to customize the appearance of displaying options in the popup list ([Example](https://snippet.dhtmlx.com/z7cpj76i)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
@@ -80,9 +80,9 @@ In this section you will find out how to enable and disable Combobox, to show an
| Topic | Description |
| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| [Enabling/disabling Combobox](../work_with_combo/#disablingenabling-combobox) | Learn how to enable/disable Combobox ([Example](https://snippet.dhtmlx.com/7bujtsuu)) |
-| [Showing/hiding a list of Combobox options](../work_with_combo/#hidingshowing-the-popup) | Learn how to manipulate the visibility of the Combo popup ([Example](https://snippet.dhtmlx.com/ztc4sko8)) |
-| [Setting/removing focus](../work_with_combo/#settingremoving-focus) | Learn how to set focus to Combobox ([Example](https://snippet.dhtmlx.com/hp6b5sxe)) |
+| [Enabling/disabling Combobox](combobox/work_with_combo.md#disablingenabling-combobox) | Learn how to enable/disable Combobox ([Example](https://snippet.dhtmlx.com/7bujtsuu)) |
+| [Showing/hiding a list of Combobox options](combobox/work_with_combo.md#hidingshowing-the-popup) | Learn how to manipulate the visibility of the Combo popup ([Example](https://snippet.dhtmlx.com/ztc4sko8)) |
+| [Setting/removing focus](combobox/work_with_combo.md#settingremoving-focus) | Learn how to set focus to Combobox ([Example](https://snippet.dhtmlx.com/hp6b5sxe)) |
## How to work with data in Combobox
@@ -92,10 +92,10 @@ In this section you can discover how to apply the [DataCollection API](guides/da
| Topic | Description |
| ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
-| [Adding](../work_with_combo/#adding-options-into-combobox)/[removing](../work_with_combo/#removing-options-from-combobox) items | Learn how to add or remove Combobox options ([Example](https://snippet.dhtmlx.com/o7vd331z)) |
-| [Updating items](../work_with_combo/#updating-combobox-options) | Learn how to update Combobox options (for example, to change their values) ([Example](https://snippet.dhtmlx.com/y7hpq0x8)) |
-| [Serializing combobox data](../adding_options/#saving-and-restoring-state) | Learn how to serialize Combobox data |
-| [DataCollection API](../../data_collection/) | Check the list of all available DataCollection API|
+| [Adding](combobox/work_with_combo.md#adding-options-into-combobox)/[removing](combobox/work_with_combo.md#removing-options-from-combobox) items | Learn how to add or remove Combobox options ([Example](https://snippet.dhtmlx.com/o7vd331z)) |
+| [Updating items](combobox/work_with_combo.md#updating-combobox-options) | Learn how to update Combobox options (for example, to change their values) ([Example](https://snippet.dhtmlx.com/y7hpq0x8)) |
+| [Serializing combobox data](combobox/adding_options.md#saving-and-restoring-state) | Learn how to serialize Combobox data |
+| [DataCollection API](/data_collection/) | Check the list of all available DataCollection API|
## How to work with selected options
@@ -104,10 +104,10 @@ In this section you will learn how to set the necessary values in the input and
| Topic | Description |
| --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| [Selecting values](../work_with_combo/#settinggetting-values) | Learn how to set the necessary values into the input ([Example](https://snippet.dhtmlx.com/xl1p7zcx)) |
-| [Getting selected values](../work_with_combo/#settinggetting-values) | Learn how to get the values which are set in the input ([Example](https://snippet.dhtmlx.com/ppvjknid)) |
-| [Getting index of selected values](../../data_collection/api/datacollection_getindex_method/) | Learn how to get the index of the value specified in the input ([Example](https://snippet.dhtmlx.com/ik6r8cs2)) |
-[Clearing input](../work_with_combo/#clearing-input)|Learn how to clear the Combobox input from the specified values ([Example](https://snippet.dhtmlx.com/omlrtmj7))|
+| [Selecting values](combobox/work_with_combo.md#settinggetting-values) | Learn how to set the necessary values into the input ([Example](https://snippet.dhtmlx.com/xl1p7zcx)) |
+| [Getting selected values](combobox/work_with_combo.md#settinggetting-values) | Learn how to get the values which are set in the input ([Example](https://snippet.dhtmlx.com/ppvjknid)) |
+| [Getting index of selected values](data_collection/api/datacollection_getindex_method.md) | Learn how to get the index of the value specified in the input ([Example](https://snippet.dhtmlx.com/ik6r8cs2)) |
+[Clearing input](combobox/work_with_combo.md#clearing-input)|Learn how to clear the Combobox input from the specified values ([Example](https://snippet.dhtmlx.com/omlrtmj7))|
## How to work with Combobox events
@@ -116,7 +116,7 @@ This section explains how to work with Combobox events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Combobox events ([Example](https://snippet.dhtmlx.com/n70eqx5l)) |
+| [Event handling](combobox/handling_events.md) | Learn how to attach, detach, or call the Combobox events ([Example](https://snippet.dhtmlx.com/n70eqx5l)) |
## API reference
@@ -124,9 +124,9 @@ In this section you can find out corresponding references of Combobox API.
| Topic | Description |
| ---------------------------------------------------------- | ---------------------------------------- |
-| [Combobox methods](../../category/combobox-methods/) | Check the list of Combobox methods |
-| [Combobox events](../../category/combobox-events/) | Check the list of Combobox events |
-| [Combobox properties](../../category/combobox-properties/) | Check the list of Combobox properties |
+| [Combobox methods](/category/combobox-methods/) | Check the list of Combobox methods |
+| [Combobox events](/category/combobox-events/) | Check the list of Combobox events |
+| [Combobox properties](/category/combobox-properties/) | Check the list of Combobox properties |
## Common functionality
@@ -134,9 +134,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component's rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component's rendering |
## Any questions left?
diff --git a/docs/combobox/index.md b/docs/combobox/index.md
index fd35f227..33702656 100644
--- a/docs/combobox/index.md
+++ b/docs/combobox/index.md
@@ -20,24 +20,24 @@ You can check the following page to learn how to build a full-featured DHTMLX Co
## API reference
-- [](api/api_overview.md)
+- [](combobox/api/api_overview.md)
## Related resources
- You can get DHTMLX ComboBox as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX ComboBox](https://snippet.dhtmlx.com/ui7pi7ty?tag=combobox)
-- To work with data of ComboBox check [DataCollection API](data_collection.md)
+- To work with data of ComboBox check [DataCollection API](/data_collection/)
## Guides
-- [](how_to_start.md)
-- [](configuration.md)
-- [](localization.md)
-- [](adding_options.md)
-- [](work_with_combo.md)
-- [](customization.md)
-- [](handling_events.md)
+- [](combobox/how_to_start.md)
+- [](combobox/configuration.md)
+- [](combobox/localization.md)
+- [](combobox/adding_options.md)
+- [](combobox/work_with_combo.md)
+- [](combobox/customization.md)
+- [](combobox/handling_events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/combobox/work_with_combo.md b/docs/combobox/work_with_combo.md
index 046d1e62..5ef7a67d 100644
--- a/docs/combobox/work_with_combo.md
+++ b/docs/combobox/work_with_combo.md
@@ -180,7 +180,7 @@ combo.popup.events.on("AfterHide", function(e){
## Using Data Collection API
-You can manipulate ComboBox options with the help of the [Data Collection API](data_collection.md).
+You can manipulate ComboBox options with the help of the [Data Collection API](/data_collection/).
### Adding options into ComboBox
@@ -247,5 +247,5 @@ combo.data.remove("option_id");
~~~
:::note
-Check the full list of [Data collection API](data_collection.md)
+Check the full list of [Data collection API](/data_collection/)
:::
diff --git a/docs/common_features/accessibility_support.md b/docs/common_features/accessibility_support.md
index 7baa7594..0ee75fa9 100644
--- a/docs/common_features/accessibility_support.md
+++ b/docs/common_features/accessibility_support.md
@@ -79,10 +79,10 @@ All DHTMLX Suite widgets are provided with a keyboard navigation support. It all
:::info
For the full list of built-in hotkeys, refer to the **Keyboard Navigation** articles of the following widgets:
-- [Grid](../../grid/configuration/#keyboard-navigation)
-- [List](../../list/configuration/#arrow-keys-navigation)
-- [Tree](../../tree/configuration/#key-navigation)
-- [DataView](../../dataview/configuration/#arrow-keys-navigation)
+- [Grid](grid/configuration.md#keyboard-navigation)
+- [List](list/configuration.md#arrow-keys-navigation)
+- [Tree](tree/configuration.md#key-navigation)
+- [DataView](dataview/configuration.md#arrow-keys-navigation)
:::
## High-Contrast Themes
diff --git a/docs/common_features/custom_scroll.md b/docs/common_features/custom_scroll.md
index 975bd511..e9b79a08 100644
--- a/docs/common_features/custom_scroll.md
+++ b/docs/common_features/custom_scroll.md
@@ -42,7 +42,7 @@ list.data.load(data);
list.scrollView.enable();
~~~
-For more details on the custom scroll configuration, read [this article](../../helpers/custom_scroll/).
+For more details on the custom scroll configuration, read [this article](helpers/custom_scroll.md).
## Custom scroll in Optimus demos
@@ -54,10 +54,10 @@ You may notice, that all DHTMLX demos built with Optimus have the custom scroll
| Demo | Related article |
|-----------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|
-| [File Explorer](https://dhtmlx.com/docs/products/demoApps/dhtmlxFileExplorerDemo/) | learn more in [the related article](../../optimus_guides/filemanager_demo/) |
-| [UI Dashboard](https://dhtmlx.com/docs/products/demoApps/dhtmlxFileExplorerDemo/) | learn more in [the related article](../../optimus_guides/dashboard_demo/) |
-| [Hotel Management Template](https://dhtmlx.com/docs/products/demoApps/dhtmlxDashboard/) | learn more in [the related article](../../optimus_guides/hotel_demo/) |
-| [Geo Tracking](https://dhtmlx.com/docs/products/demoApps/dhtmlxGeoTracking/) | learn more in [the related article](../../optimus_guides/geotracking_demo/) |
-| [Hospital Management](https://dhtmlx.com/docs/products/demoApps/dhtmlxHospital/) | learn more in [the related article](../../optimus_guides/hospital_demo/) |
-| [Sales KPI Tracking](https://dhtmlx.com/docs/products/demoApps/dhtmlxKPI/) | learn more in [the related article](../../optimus_guides/kpi_demo/) |
-| [Online Exam System](https://dhtmlx.com/docs/products/demoApps/dhtmlxExam/) | learn more in [the related article](../../optimus_guides/exam_demo/) |
+| [File Explorer](https://dhtmlx.com/docs/products/demoApps/dhtmlxFileExplorerDemo/) | learn more in [the related article](optimus_guides/filemanager_demo.md) |
+| [UI Dashboard](https://dhtmlx.com/docs/products/demoApps/dhtmlxFileExplorerDemo/) | learn more in [the related article](optimus_guides/dashboard_demo.md) |
+| [Hotel Management Template](https://dhtmlx.com/docs/products/demoApps/dhtmlxDashboard/) | learn more in [the related article](optimus_guides/hotel_demo.md) |
+| [Geo Tracking](https://dhtmlx.com/docs/products/demoApps/dhtmlxGeoTracking/) | learn more in [the related article](optimus_guides/geotracking_demo.md) |
+| [Hospital Management](https://dhtmlx.com/docs/products/demoApps/dhtmlxHospital/) | learn more in [the related article](optimus_guides/hospital_demo.md) |
+| [Sales KPI Tracking](https://dhtmlx.com/docs/products/demoApps/dhtmlxKPI/) | learn more in [the related article](optimus_guides/kpi_demo.md) |
+| [Online Exam System](https://dhtmlx.com/docs/products/demoApps/dhtmlxExam/) | learn more in [the related article](optimus_guides/exam_demo.md) |
diff --git a/docs/data_collection/api/datacollection_group_method.md b/docs/data_collection/api/datacollection_group_method.md
index 39d38548..151e94af 100644
--- a/docs/data_collection/api/datacollection_group_method.md
+++ b/docs/data_collection/api/datacollection_group_method.md
@@ -9,7 +9,7 @@ description: You can explore the group method of DataCollection in the documenta
@short: groups data in a collection that has a plain tree-like structure according to the specified order and additional configuration
:::info important
-Data grouping isn't intended for working with [`lazyDataProxy`](helpers.md/lazydataproxy/)
+Data grouping isn't intended for working with [`lazyDataProxy`](helpers/lazydataproxy.md)
:::
:::note
diff --git a/docs/data_collection/index.md b/docs/data_collection/index.md
index 221d01ae..67649d91 100644
--- a/docs/data_collection/index.md
+++ b/docs/data_collection/index.md
@@ -11,59 +11,59 @@ A set of APIs that allow you to work with data of a component. Applicable to Cha
| Name | Description |
| ------------------------------------------------- | ------------------------------------------------------- |
-| [](api/datacollection_add_method.md) | @getshort(api/datacollection_add_method.md) |
-| [](api/datacollection_changeid_method.md) | @getshort(api/datacollection_changeid_method.md) |
-| [](api/datacollection_copy_method.md) | @getshort(api/datacollection_copy_method.md) |
-| [](api/datacollection_exists_method.md) | @getshort(api/datacollection_exists_method.md) |
-| [](api/datacollection_filter_method.md) | @getshort(api/datacollection_filter_method.md) |
-| [](api/datacollection_find_method.md) | @getshort(api/datacollection_find_method.md) |
-| [](api/datacollection_findall_method.md) | @getshort(api/datacollection_findall_method.md) |
-| [](api/datacollection_foreach_method.md) | @getshort(api/datacollection_foreach_method.md) |
-| [](api/datacollection_getfilters_method.md) | @getshort(api/datacollection_getfilters_method.md) |
-| [](api/datacollection_getid_method.md) | @getshort(api/datacollection_getid_method.md) |
-| [](api/datacollection_getindex_method.md) | @getshort(api/datacollection_getindex_method.md) |
-| [](api/datacollection_getinitialdata_method.md) | @getshort(api/datacollection_getinitialdata_method.md) |
-| [](api/datacollection_getitem_method.md) | @getshort(api/datacollection_getitem_method.md) |
-| [](api/datacollection_getlength_method.md) | @getshort(api/datacollection_getlength_method.md) |
-| [](api/datacollection_getsortingstates_method.md) | @getshort(api/datacollection_getsortingstates_method.md)|
-| [](api/datacollection_group_method.md) | @getshort(api/datacollection_group_method.md) |
-| [](api/datacollection_isdataloaded_method.md) | @getshort(api/datacollection_isdataloaded_method.md) |
-| [](api/datacollection_isgrouped_method.md) | @getshort(api/datacollection_isgrouped_method.md) |
-| [](api/datacollection_issaved_method.md) | @getshort(api/datacollection_issaved_method.md) |
-| [](api/datacollection_load_method.md) | @getshort(api/datacollection_load_method.md) |
-| [](api/datacollection_map_method.md) | @getshort(api/datacollection_map_method.md) |
-| [](api/datacollection_maprange_method.md) | @getshort(api/datacollection_maprange_method.md) |
-| [](api/datacollection_move_method.md) | @getshort(api/datacollection_move_method.md) |
-| [](api/datacollection_parse_method.md) | @getshort(api/datacollection_parse_method.md) |
-| [](api/datacollection_reduce_method.md) | @getshort(api/datacollection_reduce_method.md) |
-| [](api/datacollection_remove_method.md) | @getshort(api/datacollection_remove_method.md) |
-| [](api/datacollection_removeall_method.md) | @getshort(api/datacollection_removeall_method.md) |
-| [](api/datacollection_resetfilter_method.md) | @getshort(api/datacollection_resetfilter_method.md) |
-| [](api/datacollection_save_method.md) | @getshort(api/datacollection_save_method.md) |
-| [](api/datacollection_serialize_method.md) | @getshort(api/datacollection_serialize_method.md) |
-| [](api/datacollection_sort_method.md) | @getshort(api/datacollection_sort_method.md) |
-| [](api/datacollection_ungroup_method.md) | @getshort(api/datacollection_ungroup_method.md) |
-| [](api/datacollection_update_method.md) | @getshort(api/datacollection_update_method.md) |
+| [](data_collection/api/datacollection_add_method.md) | @getshort(api/datacollection_add_method.md) |
+| [](data_collection/api/datacollection_changeid_method.md) | @getshort(api/datacollection_changeid_method.md) |
+| [](data_collection/api/datacollection_copy_method.md) | @getshort(api/datacollection_copy_method.md) |
+| [](data_collection/api/datacollection_exists_method.md) | @getshort(api/datacollection_exists_method.md) |
+| [](data_collection/api/datacollection_filter_method.md) | @getshort(api/datacollection_filter_method.md) |
+| [](data_collection/api/datacollection_find_method.md) | @getshort(api/datacollection_find_method.md) |
+| [](data_collection/api/datacollection_findall_method.md) | @getshort(api/datacollection_findall_method.md) |
+| [](data_collection/api/datacollection_foreach_method.md) | @getshort(api/datacollection_foreach_method.md) |
+| [](data_collection/api/datacollection_getfilters_method.md) | @getshort(api/datacollection_getfilters_method.md) |
+| [](data_collection/api/datacollection_getid_method.md) | @getshort(api/datacollection_getid_method.md) |
+| [](data_collection/api/datacollection_getindex_method.md) | @getshort(api/datacollection_getindex_method.md) |
+| [](data_collection/api/datacollection_getinitialdata_method.md) | @getshort(api/datacollection_getinitialdata_method.md) |
+| [](data_collection/api/datacollection_getitem_method.md) | @getshort(api/datacollection_getitem_method.md) |
+| [](data_collection/api/datacollection_getlength_method.md) | @getshort(api/datacollection_getlength_method.md) |
+| [](data_collection/api/datacollection_getsortingstates_method.md) | @getshort(api/datacollection_getsortingstates_method.md)|
+| [](data_collection/api/datacollection_group_method.md) | @getshort(api/datacollection_group_method.md) |
+| [](data_collection/api/datacollection_isdataloaded_method.md) | @getshort(api/datacollection_isdataloaded_method.md) |
+| [](data_collection/api/datacollection_isgrouped_method.md) | @getshort(api/datacollection_isgrouped_method.md) |
+| [](data_collection/api/datacollection_issaved_method.md) | @getshort(api/datacollection_issaved_method.md) |
+| [](data_collection/api/datacollection_load_method.md) | @getshort(api/datacollection_load_method.md) |
+| [](data_collection/api/datacollection_map_method.md) | @getshort(api/datacollection_map_method.md) |
+| [](data_collection/api/datacollection_maprange_method.md) | @getshort(api/datacollection_maprange_method.md) |
+| [](data_collection/api/datacollection_move_method.md) | @getshort(api/datacollection_move_method.md) |
+| [](data_collection/api/datacollection_parse_method.md) | @getshort(api/datacollection_parse_method.md) |
+| [](data_collection/api/datacollection_reduce_method.md) | @getshort(api/datacollection_reduce_method.md) |
+| [](data_collection/api/datacollection_remove_method.md) | @getshort(api/datacollection_remove_method.md) |
+| [](data_collection/api/datacollection_removeall_method.md) | @getshort(api/datacollection_removeall_method.md) |
+| [](data_collection/api/datacollection_resetfilter_method.md) | @getshort(api/datacollection_resetfilter_method.md) |
+| [](data_collection/api/datacollection_save_method.md) | @getshort(api/datacollection_save_method.md) |
+| [](data_collection/api/datacollection_serialize_method.md) | @getshort(api/datacollection_serialize_method.md) |
+| [](data_collection/api/datacollection_sort_method.md) | @getshort(api/datacollection_sort_method.md) |
+| [](data_collection/api/datacollection_ungroup_method.md) | @getshort(api/datacollection_ungroup_method.md) |
+| [](data_collection/api/datacollection_update_method.md) | @getshort(api/datacollection_update_method.md) |
## Events
| Name | Description |
| ---------------------------------------------- | ----------------------------------------------------- |
-| [](api/datacollection_afteradd_event.md) | @getshort(api/datacollection_afteradd_event.md) |
-| [](api/datacollection_aftergroup_event.md) | @getshort(api/datacollection_aftergroup_event.md) |
-| [](api/datacollection_afterlazyload_event.md) | @getshort(api/datacollection_afterlazyload_event.md) |
-| [](api/datacollection_afterremove_event.md) | @getshort(api/datacollection_afterremove_event.md) |
-| [](api/datacollection_afterungroup_event.md) | @getshort(api/datacollection_afterungroup_event.md) |
-| [](api/datacollection_beforeadd_event.md) | @getshort(api/datacollection_beforeadd_event.md) |
-| [](api/datacollection_beforegroup_event.md) | @getshort(api/datacollection_beforegroup_event.md) |
-| [](api/datacollection_beforelazyload_event.md) | @getshort(api/datacollection_beforelazyload_event.md) |
-| [](api/datacollection_beforeremove_event.md) | @getshort(api/datacollection_beforeremove_event.md) |
-| [](api/datacollection_beforeungroup_event.md) | @getshort(api/datacollection_beforeungroup_event.md) |
-| [](api/datacollection_change_event.md) | @getshort(api/datacollection_change_event.md) |
-| [](api/datacollection_filter_event.md) | @getshort(api/datacollection_filter_event.md) |
-| [](api/datacollection_load_event.md) | @getshort(api/datacollection_load_event.md) |
-| [](api/datacollection_loaderror_event.md) | @getshort(api/datacollection_loaderror_event.md) |
-| [](api/datacollection_removeall_event.md) | @getshort(api/datacollection_removeall_event.md) |
+| [](data_collection/api/datacollection_afteradd_event.md) | @getshort(api/datacollection_afteradd_event.md) |
+| [](data_collection/api/datacollection_aftergroup_event.md) | @getshort(api/datacollection_aftergroup_event.md) |
+| [](data_collection/api/datacollection_afterlazyload_event.md) | @getshort(api/datacollection_afterlazyload_event.md) |
+| [](data_collection/api/datacollection_afterremove_event.md) | @getshort(api/datacollection_afterremove_event.md) |
+| [](data_collection/api/datacollection_afterungroup_event.md) | @getshort(api/datacollection_afterungroup_event.md) |
+| [](data_collection/api/datacollection_beforeadd_event.md) | @getshort(api/datacollection_beforeadd_event.md) |
+| [](data_collection/api/datacollection_beforegroup_event.md) | @getshort(api/datacollection_beforegroup_event.md) |
+| [](data_collection/api/datacollection_beforelazyload_event.md) | @getshort(api/datacollection_beforelazyload_event.md) |
+| [](data_collection/api/datacollection_beforeremove_event.md) | @getshort(api/datacollection_beforeremove_event.md) |
+| [](data_collection/api/datacollection_beforeungroup_event.md) | @getshort(api/datacollection_beforeungroup_event.md) |
+| [](data_collection/api/datacollection_change_event.md) | @getshort(api/datacollection_change_event.md) |
+| [](data_collection/api/datacollection_filter_event.md) | @getshort(api/datacollection_filter_event.md) |
+| [](data_collection/api/datacollection_load_event.md) | @getshort(api/datacollection_load_event.md) |
+| [](data_collection/api/datacollection_loaderror_event.md) | @getshort(api/datacollection_loaderror_event.md) |
+| [](data_collection/api/datacollection_removeall_event.md) | @getshort(api/datacollection_removeall_event.md) |
:::info Ways of applying events
diff --git a/docs/data_proxy/index.md b/docs/data_proxy/index.md
index 121acc6a..22bc25b6 100644
--- a/docs/data_proxy/index.md
+++ b/docs/data_proxy/index.md
@@ -40,6 +40,6 @@ The list of the available methods of `dhx.DataProxy` is described below.
| Name | Description |
| ------------------------------------- | -------------------------------------------- |
-| [](api/dataproxy_load_method.md) | @getshort(api/dataproxy_load_method.md) |
-| [](api/dataproxy_save_method.md) | @getshort(api/dataproxy_save_method.md) |
-| [](api/dataproxy_updateurl_method.md) | @getshort(api/dataproxy_updateurl_method.md) |
+| [](data_proxy/api/dataproxy_load_method.md) | @getshort(api/dataproxy_load_method.md) |
+| [](data_proxy/api/dataproxy_save_method.md) | @getshort(api/dataproxy_save_method.md) |
+| [](data_proxy/api/dataproxy_updateurl_method.md) | @getshort(api/dataproxy_updateurl_method.md) |
diff --git a/docs/dataview/api/api_overview.md b/docs/dataview/api/api_overview.md
index a3b4402d..304bf49e 100644
--- a/docs/dataview/api/api_overview.md
+++ b/docs/dataview/api/api_overview.md
@@ -19,8 +19,8 @@ description: You can explore the API of DataView in the documentation of the DHT
| [](dataview/api/dataview_setfocus_method.md) | @getshort(dataview/api/dataview_setfocus_method.md) |
:::info important
-- Use [the methods of DataCollection](data_collection.md) to work with data.
-- Apply [the methods of Selection](selection.md#methods) to manage the selection of DataView items.
+- Use [the methods of DataCollection](/data_collection/) to work with data.
+- Apply [the methods of Selection](/selection/#methods) to manage the selection of DataView items.
:::
## Events
@@ -47,8 +47,8 @@ description: You can explore the API of DataView in the documentation of the DHT
| [](dataview/api/dataview_itemrightclick_event.md) | @getshort(dataview/api/dataview_itemrightclick_event.md) |
:::info important
-- Use [the events of DataCollection](data_collection.md#events) to work with data of DataView.
-- Apply [the events of Selection](selection.md#events) to control the selection of DataView items.
+- Use [the events of DataCollection](/data_collection/#events) to work with data of DataView.
+- Apply [the events of Selection](/selection/#events) to control the selection of DataView items.
:::
## Properties
diff --git a/docs/dataview/api/dataview_css_config.md b/docs/dataview/api/dataview_css_config.md
index e158dd4e..d4147342 100644
--- a/docs/dataview/api/dataview_css_config.md
+++ b/docs/dataview/api/dataview_css_config.md
@@ -66,4 +66,4 @@ const dataview = new dhx.DataView("dataview_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/dataview/data_loading.md b/docs/dataview/data_loading.md
index 94a17c18..bd210131 100644
--- a/docs/dataview/data_loading.md
+++ b/docs/dataview/data_loading.md
@@ -74,7 +74,7 @@ There are two ways to load data into Combobox after its initialization:
### External data loading
-To load data from an external file, make use of the **load()** method of [DataCollection](data_collection.md). It takes the URL of the file with data as a parameter:
+To load data from an external file, make use of the **load()** method of [DataCollection](/data_collection/). It takes the URL of the file with data as a parameter:
~~~js
const dataview = new dhx.DataView("dataview_container");
@@ -95,7 +95,7 @@ dataview.data.load("/some/data").then(function(){
### Loading from local source
-To load data from a local data source, use the **parse()** method of [DataCollection](data_collection.md). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
+To load data from a local data source, use the **parse()** method of [DataCollection](/data_collection/). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
~~~js
const dataview = new dhx.DataView("dataview_container");
@@ -106,7 +106,7 @@ dataview.data.parse(dataset);
## Saving and restoring state
-To save the current state of a dataview, use the **serialize()** method of [DataCollection](data_collection.md). It converts the data of a dataview into an array of JSON objects.
+To save the current state of a dataview, use the **serialize()** method of [DataCollection](/data_collection/). It converts the data of a dataview into an array of JSON objects.
Each JSON object contains a set of *key:value* pairs that represent attributes of DataView items.
~~~js
diff --git a/docs/dataview/features.md b/docs/dataview/features.md
index 9c03c724..b2884397 100644
--- a/docs/dataview/features.md
+++ b/docs/dataview/features.md
@@ -16,7 +16,7 @@ In this section you can find out how to initialize DataView, how to load data in
| Topic | Description |
| --------------------------------------------------------------- | -------------------------------------------------------------- |
-| [Basic initialization](../initialization/) | Learn how to initialize DataView |
+| [Basic initialization](dataview/initialization.md) | Learn how to initialize DataView |
| [Pagination with DataView](https://snippet.dhtmlx.com/xmf0lx8z) | The example shows how to initialize DataView inside Pagination |
@@ -24,7 +24,7 @@ In this section you can find out how to initialize DataView, how to load data in
| Topic | Description |
| ---------------------------------------------------------------------------------- | --------------------------------------------------------------- |
-| [Loading data into DataView](../data_loading/) | Read how to load the initial data into DataView |
+| [Loading data into DataView](dataview/data_loading.md) | Read how to load the initial data into DataView |
| [Initialization with config.data](https://snippet.dhtmlx.com/s547z4xr) | The example shows how to load data into DataView on the fly |
| [Initialization with data.load()](https://snippet.dhtmlx.com/7rjmp5ol) | The example shows how to load data from external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/shhsmgrq) | The example shows how to load data from a local data source |
@@ -35,7 +35,7 @@ In this section you can find out how to initialize DataView, how to load data in
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX DataView with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX DataView with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX DataView with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -47,11 +47,11 @@ In this section you will know how to configure the drag-n-drop functionality, ho
| Topic | Description |
| ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring drag-n-drop](../configuration/#drag-n-drop-of-items) | Learn how to configure drag-n-drop of items between dataviews ([Example](https://snippet.dhtmlx.com/nia2e5a9)) |
-| [Copying items during drag-n-drop](../configuration/#copying-dragged-item) | Learn how to copy an item to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/h89c3gl3)) |
-| [Enabling/disabling key navigation](../configuration/#arrow-keys-navigation) | Learn how to enable/disable key navigation ([Example](https://snippet.dhtmlx.com/u7mgoly9)) |
-| [Activating inline editing](../configuration/#editing-items) | Learn how to enable inline editing on DataView initialization ([Example](https://snippet.dhtmlx.com/m8fbqcza)) |
-| [Configuring amount of items in a row](../configuration/#number-of-items-in-a-row) | Learn how to define the number of items that should be displayed in a row of DataView ([Example](https://snippet.dhtmlx.com/de4r8km3)) |
+| [Configuring drag-n-drop](dataview/configuration.md#drag-n-drop-of-items) | Learn how to configure drag-n-drop of items between dataviews ([Example](https://snippet.dhtmlx.com/nia2e5a9)) |
+| [Copying items during drag-n-drop](dataview/configuration.md#copying-dragged-item) | Learn how to copy an item to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/h89c3gl3)) |
+| [Enabling/disabling key navigation](dataview/configuration.md#arrow-keys-navigation) | Learn how to enable/disable key navigation ([Example](https://snippet.dhtmlx.com/u7mgoly9)) |
+| [Activating inline editing](dataview/configuration.md#editing-items) | Learn how to enable inline editing on DataView initialization ([Example](https://snippet.dhtmlx.com/m8fbqcza)) |
+| [Configuring amount of items in a row](dataview/configuration.md#number-of-items-in-a-row) | Learn how to define the number of items that should be displayed in a row of DataView ([Example](https://snippet.dhtmlx.com/de4r8km3)) |
## How to customize DataView and change its size
@@ -59,19 +59,19 @@ In this section you can learn how to configure the height and style of DataView
| Topic | Description |
| ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Height of DataView](../configuration/#height-of-the-dataview) | Learn how to set the height for DataView ([Example](https://snippet.dhtmlx.com/g1k2l4q0)) |
-| [Height of an item](../configuration/#height-of-an-item) | Learn how to set the height for DataView items ([Example](https://snippet.dhtmlx.com/cth9mwrf)) |
-| [Setting template for rendering items](../configuration/#template-for-dataview-items) | Learn how [to define a template](../configuration/#template-for-dataview-items) for rendering items in a dataview ([Example](https://snippet.dhtmlx.com/d6l6grr7)) and add [event handlers](../configuration/#event-handlers-for-the-template) to HTML elements of the template ([Example](https://snippet.dhtmlx.com/26873eql)) |
-| [Setting margins for items](../configuration/#margins-around-dataview-items) | Learn how to set margins around DataView items ([Example](https://snippet.dhtmlx.com/ozsuww1q)) |
-| [Styling DataView items](../customization/#custom-styling-of-items) | Learn how to customize DataView items ([Example](https://snippet.dhtmlx.com/kpnzizbf)) |
-| [Styling selected DataView items](../customization/#custom-styling-of-selection-and-focus) | Learn how to add custom style to the selected items ([Example](https://snippet.dhtmlx.com/n98tzmzp)) |
-| [Styling DataView](../customization/#custom-styling-of-widget) | Learn how to customize DataView ([Example](https://snippet.dhtmlx.com/j1yv94o8)) |
+| [Height of DataView](dataview/configuration.md#height-of-the-dataview) | Learn how to set the height for DataView ([Example](https://snippet.dhtmlx.com/g1k2l4q0)) |
+| [Height of an item](dataview/configuration.md#height-of-an-item) | Learn how to set the height for DataView items ([Example](https://snippet.dhtmlx.com/cth9mwrf)) |
+| [Setting template for rendering items](dataview/configuration.md#template-for-dataview-items) | Learn how [to define a template](dataview/configuration.md#template-for-dataview-items) for rendering items in a dataview ([Example](https://snippet.dhtmlx.com/d6l6grr7)) and add [event handlers](dataview/configuration.md#event-handlers-for-the-template) to HTML elements of the template ([Example](https://snippet.dhtmlx.com/26873eql)) |
+| [Setting margins for items](dataview/configuration.md#margins-around-dataview-items) | Learn how to set margins around DataView items ([Example](https://snippet.dhtmlx.com/ozsuww1q)) |
+| [Styling DataView items](dataview/customization.md#custom-styling-of-items) | Learn how to customize DataView items ([Example](https://snippet.dhtmlx.com/kpnzizbf)) |
+| [Styling selected DataView items](dataview/customization.md#custom-styling-of-selection-and-focus) | Learn how to add custom style to the selected items ([Example](https://snippet.dhtmlx.com/n98tzmzp)) |
+| [Styling DataView](dataview/customization.md#custom-styling-of-widget) | Learn how to customize DataView ([Example](https://snippet.dhtmlx.com/j1yv94o8)) |
| [CSS template A](https://snippet.dhtmlx.com/dataview_template_a) | The example of a CSS template for DHTMLX DataView |
| [CSS template B](https://snippet.dhtmlx.com/dataview_template_b) | The example of a CSS template for DHTMLX DataView |
| [CSS template C](https://snippet.dhtmlx.com/dataview_template_c) | The example of a CSS template for DHTMLX DataView |
| [CSS template D](https://snippet.dhtmlx.com/dataview_template_d) | The example of a CSS template for DHTMLX DataView |
| [CSS template E](https://snippet.dhtmlx.com/dataview_template_e) | The example of a CSS template for DHTMLX DataView |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with data in DataView
@@ -83,11 +83,11 @@ In this section you may study how to add new data items into DataView, how to ed
| Topic | Description |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| [Editing item's data](../manipulating_data/#editing-items) | Learn how to edit an item by its id ([Example](https://snippet.dhtmlx.com/i09isp2d)) |
-| [Adding an item](../manipulating_data/#adding-items-into-dataview) | Learn how to add a new item into data collection ([Example](https://snippet.dhtmlx.com/k4sbj47b)) |
-| [Updating an item](../manipulating_data/#updating-dataview-items) | Learn how to update data of an item ([Example](https://snippet.dhtmlx.com/we9vm6iz)) |
-| [Removing an item](../manipulating_data/#removing-items-from-dataview) | Learn how to remove an item from data collection ([Example](https://snippet.dhtmlx.com/i5cjuj2y)) |
-| [DataCollection API](../../data_collection/) | Check the list of all available DataCollection API|
+| [Editing item's data](dataview/manipulating_data.md#editing-items) | Learn how to edit an item by its id ([Example](https://snippet.dhtmlx.com/i09isp2d)) |
+| [Adding an item](dataview/manipulating_data.md#adding-items-into-dataview) | Learn how to add a new item into data collection ([Example](https://snippet.dhtmlx.com/k4sbj47b)) |
+| [Updating an item](dataview/manipulating_data.md#updating-dataview-items) | Learn how to update data of an item ([Example](https://snippet.dhtmlx.com/we9vm6iz)) |
+| [Removing an item](dataview/manipulating_data.md#removing-items-from-dataview) | Learn how to remove an item from data collection ([Example](https://snippet.dhtmlx.com/i5cjuj2y)) |
+| [DataCollection API](/data_collection/) | Check the list of all available DataCollection API|
### How to sort and filter data
@@ -95,8 +95,8 @@ In this section you may study how to sort and filter data.
| Topic | Description |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| [Sorting items](../manipulating_data/#sorting-dataview-data) | Learn how to sort DataView items ([Example](https://snippet.dhtmlx.com/mix83emb)) |
-| [Filtering items](../manipulating_data/#filtering-dataview-data) | Learn how to filter DataView items ([Example](https://snippet.dhtmlx.com/8f970hby)) |
+| [Sorting items](dataview/manipulating_data.md#sorting-dataview-data) | Learn how to sort DataView items ([Example](https://snippet.dhtmlx.com/mix83emb)) |
+| [Filtering items](dataview/manipulating_data.md#filtering-dataview-data) | Learn how to filter DataView items ([Example](https://snippet.dhtmlx.com/8f970hby)) |
## How to work with selection
@@ -105,12 +105,12 @@ In this section you may study how to work with selection functionality.
| Topic | Description |
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Enabling/disabling selection](../configuration/#selection-of-items) | Learn how to enable/disable selection on DataView initialization |
-| [Enabling/disabling multiselection](../configuration/#multiple-selection-of-items) | Learn how to enable/disable selection of multiple items ([Example](https://snippet.dhtmlx.com/g0xwdx10)) |
-| [Enabling/disabling selection](../usage_selection/#enablingdisabling-selection-object) | Learn how to enable/disable the ability to select items via the selection object ([Example](https://snippet.dhtmlx.com/kn42gb50)) |
-| [Setting selection](../usage_selection/#selecting-an-item) | Learn how to select a particular item or all items ([Example](https://snippet.dhtmlx.com/8li8wi20)) |
-| Getting selection | Learn how to get the [id](../usage_selection/#getting-id-of-a-selected-item) or an [object](../usage_selection/#getting-object-of-a-selected-item) of a selected item ([Example](https://snippet.dhtmlx.com/uop0vy8u)) |
-| [Removing selection](../usage_selection/#unselecting-an-item) | Learn how to remove selection from a selected item(s) |
+| [Enabling/disabling selection](dataview/configuration.md#selection-of-items) | Learn how to enable/disable selection on DataView initialization |
+| [Enabling/disabling multiselection](dataview/configuration.md#multiple-selection-of-items) | Learn how to enable/disable selection of multiple items ([Example](https://snippet.dhtmlx.com/g0xwdx10)) |
+| [Enabling/disabling selection](dataview/usage_selection.md#enablingdisabling-selection-object) | Learn how to enable/disable the ability to select items via the selection object ([Example](https://snippet.dhtmlx.com/kn42gb50)) |
+| [Setting selection](dataview/usage_selection.md#selecting-an-item) | Learn how to select a particular item or all items ([Example](https://snippet.dhtmlx.com/8li8wi20)) |
+| Getting selection | Learn how to get the [id](dataview/usage_selection.md#getting-id-of-a-selected-item) or an [object](dataview/usage_selection.md#getting-object-of-a-selected-item) of a selected item ([Example](https://snippet.dhtmlx.com/uop0vy8u)) |
+| [Removing selection](dataview/usage_selection.md#unselecting-an-item) | Learn how to remove selection from a selected item(s) |
## How to work with item in focus
@@ -118,8 +118,8 @@ In this section you will learn how to set focus on an item and get the id/object
| Topic | Description |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| [Setting focus on item](../manipulating_data/#setting-focus-on-item) | Learn how to set focus on an item ([Example](https://snippet.dhtmlx.com/4l38pct7)) |
-| Getting an item in focus | Learn how to get the [id](../api/dataview_getfocus_method/) or an [object](../api/dataview_getfocusitem_method/) of an item in focus |
+| [Setting focus on item](dataview/manipulating_data.md#setting-focus-on-item) | Learn how to set focus on an item ([Example](https://snippet.dhtmlx.com/4l38pct7)) |
+| Getting an item in focus | Learn how to get the [id](dataview/api/dataview_getfocus_method.md) or an [object](dataview/api/dataview_getfocusitem_method.md) of an item in focus |
## How to work with DataView events
@@ -128,7 +128,7 @@ This section explains how to work with DataView events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../events/) | Learn how to attach, detach, or call the DataView events ([Example](https://snippet.dhtmlx.com/2d74uyoh)) |
+| [Event handling](dataview/events.md) | Learn how to attach, detach, or call the DataView events ([Example](https://snippet.dhtmlx.com/2d74uyoh)) |
## API reference
@@ -136,10 +136,10 @@ In this section you can find out corresponding references of DataView API.
| Topic | Description |
| ---------------------------------------------------------- | ---------------------------------------------------------- |
-| [DataView methods](../../category/dataview-methods/) | Check the list of DataView methods |
-| [DataView events](../../category/dataview-events/) | Check the list of DataView events |
-| [DataView properties](../../category/dataview-properties/) | Check the list of DataView properties |
-| [DataCollection API](../../data_collection/) | Check the API of DataCollection to work with DataView data |
+| [DataView methods](/category/dataview-methods/) | Check the list of DataView methods |
+| [DataView events](/category/dataview-events/) | Check the list of DataView events |
+| [DataView properties](/category/dataview-properties/) | Check the list of DataView properties |
+| [DataCollection API](/data_collection/) | Check the API of DataCollection to work with DataView data |
## Common functionality
@@ -147,10 +147,10 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [Custom scroll](../../common_features/custom_scroll/) | Learn how to use custom scroll in DataView |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [Custom scroll](common_features/custom_scroll.md) | Learn how to use custom scroll in DataView |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/dataview/index.md b/docs/dataview/index.md
index 59918b85..bfa89a28 100644
--- a/docs/dataview/index.md
+++ b/docs/dataview/index.md
@@ -20,26 +20,26 @@ You can check the following page to learn how to build a full-featured DHTMLX Da
## API reference
-- [](api/api_overview.md)
+- [](dataview/api/api_overview.md)
## Related resources
- You can get DHTMLX DataView as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX DataView](https://snippet.dhtmlx.com/j1yv94o8?tag=dataview)
-- To work with data of DataView check [DataCollection API](data_collection.md)
+- To work with data of DataView check [DataCollection API](/data_collection/)
## Guides
You can read the following articles to find out how to add DataView on the page and work with it.
-- [](initialization.md)
-- [](configuration.md)
-- [](data_loading.md)
-- [](manipulating_data.md)
-- [](usage_selection.md)
-- [](customization.md)
-- [](events.md)
+- [](dataview/initialization.md)
+- [](dataview/configuration.md)
+- [](dataview/data_loading.md)
+- [](dataview/manipulating_data.md)
+- [](dataview/usage_selection.md)
+- [](dataview/customization.md)
+- [](dataview/events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/dataview/initialization.md b/docs/dataview/initialization.md
index 1d29db35..fc07954a 100644
--- a/docs/dataview/initialization.md
+++ b/docs/dataview/initialization.md
@@ -74,9 +74,9 @@ const dataview = new dhx.DataView("dataview_container", {
~~~
:::info
-To display data in DataView you should define a [template](dataview/configuration.md/#template-for-dataview-items) via the [template](dataview/api/dataview_template_config.md) configuration property.
+To display data in DataView you should define a [template](dataview/configuration.md#template-for-dataview-items) via the [template](dataview/api/dataview_template_config.md) configuration property.
-Another way to display data in DataView is to prepare a data set with the ["value"](dataview/data_loading.md/#preparing-data-set) attribute.
+Another way to display data in DataView is to prepare a data set with the ["value"](dataview/data_loading.md#preparing-data-set) attribute.
:::
### Configuration properties
diff --git a/docs/dataview/manipulating_data.md b/docs/dataview/manipulating_data.md
index c79ded37..e1edb8b5 100644
--- a/docs/dataview/manipulating_data.md
+++ b/docs/dataview/manipulating_data.md
@@ -30,7 +30,7 @@ For information on disabling/enabling selection of an item, read [Enabling/Disab
## Using Data Collection API
-You can manipulate DataView items with the help of the [Data Collection API](data_collection.md).
+You can manipulate DataView items with the help of the [Data Collection API](/data_collection/).
### Adding items into DataView
@@ -100,8 +100,8 @@ dataview.data.remove("id");
### Filtering DataView data
-You can filter DataView data by the specified criteria with the help of the [](../data_collection/api/datacollection_filter_method.md) method of Data collection. Check all details on parameters of the method in the
-[Data Collection API](data_collection.md).
+You can filter DataView data by the specified criteria with the help of the [](data_collection/api/datacollection_filter_method.md) method of Data collection. Check all details on parameters of the method in the
+[Data Collection API](/data_collection/).
~~~js
dataview.data.filter({
@@ -115,9 +115,9 @@ dataview.data.filter({
### Sorting DataView data
-It is possible to sort data in DataView via the [](../data_collection/api/datacollection_sort_method.md) method of Data Collection.
+It is possible to sort data in DataView via the [](data_collection/api/datacollection_sort_method.md) method of Data Collection.
-Check all details on the parameters of the method in the [Data Collection API](data_collection.md).
+Check all details on the parameters of the method in the [Data Collection API](/data_collection/).
~~~js
dataview.data.sort({
diff --git a/docs/dataview/usage_selection.md b/docs/dataview/usage_selection.md
index 051c7ffa..a3b79333 100644
--- a/docs/dataview/usage_selection.md
+++ b/docs/dataview/usage_selection.md
@@ -24,7 +24,7 @@ dataview.selection.disable();
**Related sample**: [Dataview. Disable / enable selection](https://snippet.dhtmlx.com/kn42gb50)
-{{note To make the process of working with the selection of items more flexible, you can apply the [related](selection.md#events) events of the Selection object.}}
+{{note To make the process of working with the selection of items more flexible, you can apply the [related](/selection/#events) events of the Selection object.}}
## Selecting an item
diff --git a/docs/form/api/api_overview.md b/docs/form/api/api_overview.md
index 6c5cc66b..7e678cd0 100644
--- a/docs/form/api/api_overview.md
+++ b/docs/form/api/api_overview.md
@@ -417,12 +417,12 @@ description: You can explore the API of Form in the documentation of the DHTMLX
| Name | Description |
| :------------------------------------------------------ | :------------------------------------------------------------- |
-| [](container/container_afterchangeproperties_event.md) | @getshort(container/container_afterchangeproperties_event.md) |
-| [](container/container_afterhide_event.md) | @getshort(container/container_afterhide_event.md) |
-| [](container/container_aftershow_event.md) | @getshort(container/container_aftershow_event.md) |
-| [](container/container_beforechangeproperties_event.md) | @getshort(container/container_beforechangeproperties_event.md) |
-| [](container/container_beforehide_event.md) | @getshort(container/container_beforehide_event.md) |
-| [](container/container_beforeshow_event.md) | @getshort(container/container_beforeshow_event.md) |
+| [](form/api/container/container_afterchangeproperties_event.md) | @getshort(container/container_afterchangeproperties_event.md) |
+| [](form/api/container/container_afterhide_event.md) | @getshort(container/container_afterhide_event.md) |
+| [](form/api/container/container_aftershow_event.md) | @getshort(container/container_aftershow_event.md) |
+| [](form/api/container/container_beforechangeproperties_event.md) | @getshort(container/container_beforechangeproperties_event.md) |
+| [](form/api/container/container_beforehide_event.md) | @getshort(container/container_beforehide_event.md) |
+| [](form/api/container/container_beforeshow_event.md) | @getshort(container/container_beforeshow_event.md) |
### Container properties
diff --git a/docs/form/api/form_css_config.md b/docs/form/api/form_css_config.md
index f5d81145..c0bc97ec 100644
--- a/docs/form/api/form_css_config.md
+++ b/docs/form/api/form_css_config.md
@@ -57,4 +57,4 @@ const form = new dhx.Form("form_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/form/calendar.md b/docs/form/calendar.md
index dfacedd1..59618625 100644
--- a/docs/form/calendar.md
+++ b/docs/form/calendar.md
@@ -70,4 +70,4 @@ datepicker.showDate(null,"month"); // shows the current month
**Related sample**: [Form. Get widget of control](https://snippet.dhtmlx.com/0aqkdsi7)
-Check [the full list of methods of the DHTMLX Calendar component](../../calendar/api/api_overview/#methods) which you can apply via the [getWidget()](../../form/api/calendar/calendar_getwidget_method/) method.
\ No newline at end of file
+Check [the full list of methods of the DHTMLX Calendar component](calendar/api/api_overview.md#methods) which you can apply via the [getWidget()](form/api/calendar/calendar_getwidget_method.md) method.
\ No newline at end of file
diff --git a/docs/form/colorpicker.md b/docs/form/colorpicker.md
index 28f2602d..31b26f53 100644
--- a/docs/form/colorpicker.md
+++ b/docs/form/colorpicker.md
@@ -69,4 +69,4 @@ colorpicker.setFocus("#BDF0E9"); // sets focus on the "#BDF0E9" color
**Related sample**: [Form. Get widget of control](https://snippet.dhtmlx.com/0aqkdsi7)
-Check [the full list of methods of the DHTMLX Colorpicker component](../../colorpicker/api/api_overview/#methods) which you can apply via the [getWidget()](../../form/api/colorpicker/colorpicker_getwidget_method/) method.
\ No newline at end of file
+Check [the full list of methods of the DHTMLX Colorpicker component](colorpicker/api/api_overview.md#methods) which you can apply via the [getWidget()](form/api/colorpicker/colorpicker_getwidget_method.md) method.
\ No newline at end of file
diff --git a/docs/form/combo.md b/docs/form/combo.md
index 56c77999..5f803ce5 100644
--- a/docs/form/combo.md
+++ b/docs/form/combo.md
@@ -77,4 +77,4 @@ const combo = form.getItem("combo").getWidget(); // -> ComboBox
combo.focus(); // sets focus in the input
~~~
-Check [the full list of methods of the DHTMLX Combobox component](../../combobox/api/api_overview/#methods) which you can apply via the [getWidget()](../../form/api/combo/combo_getwidget_method/) method.
\ No newline at end of file
+Check [the full list of methods of the DHTMLX Combobox component](combobox/api/api_overview.md#methods) which you can apply via the [getWidget()](form/api/combo/combo_getwidget_method.md) method.
\ No newline at end of file
diff --git a/docs/form/features.md b/docs/form/features.md
index e21dfc26..2fbafef4 100644
--- a/docs/form/features.md
+++ b/docs/form/features.md
@@ -16,32 +16,32 @@ In this section you can find out how to initialize and localize Form, how to add
| Topic | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------- |
-| [Basic initialization](../how_to_start/) | Learn how to initialize a Form ([Example](https://snippet.dhtmlx.com/yut2mnsz)) |
+| [Basic initialization](form/how_to_start.md) | Learn how to initialize a Form ([Example](https://snippet.dhtmlx.com/yut2mnsz)) |
| [All controls](https://snippet.dhtmlx.com/ikyyekxq) | The example shows how to initialize a Form with all available controls |
-| [Localization](../localization/) | Learn how to localize a Form ([Example](https://snippet.dhtmlx.com/x8n18cr4)) |
+| [Localization](form/localization.md) | Learn how to localize a Form ([Example](https://snippet.dhtmlx.com/x8n18cr4)) |
### Form controls
| Topic | Description |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
-| [Button](../button/) | Learn how to add a Button control into a Form ([Example](https://snippet.dhtmlx.com/qgxzwyfa)) |
-| [Date picker](../calendar/) | Learn how to add a DatePicker control into a Form ([Example](https://snippet.dhtmlx.com/q3yk7e6s)) |
-| [Checkbox](../checkbox/) | Learn how to add a Checkbox group control into a Form ([Example](https://snippet.dhtmlx.com/scs712zl)) |
-| [Checkbox group](../checkboxgroup/) | Learn how to add a Checkbox control into a Form ([Example](https://snippet.dhtmlx.com/p89u4ovb)) |
-| [ColorPicker](../colorpicker/) | Learn how to add a ColorPicker control into a Form ([Example](https://snippet.dhtmlx.com/n52dl19s)) |
-| [Combobox](../combo/) | Learn how to add a Combobox control into a Form ([Example](https://snippet.dhtmlx.com/wla7u1xq)) |
-| [Container](../container/) | Learn how to add a Container control into a Form ([Example](https://snippet.dhtmlx.com/cnxi9eqq)) |
-| [Input](../input/) | Learn how to add an Input control into a Form ([Example](https://snippet.dhtmlx.com/9q8fubjm)) |
+| [Button](form/button.md) | Learn how to add a Button control into a Form ([Example](https://snippet.dhtmlx.com/qgxzwyfa)) |
+| [Date picker](form/calendar.md) | Learn how to add a DatePicker control into a Form ([Example](https://snippet.dhtmlx.com/q3yk7e6s)) |
+| [Checkbox](form/checkbox.md) | Learn how to add a Checkbox group control into a Form ([Example](https://snippet.dhtmlx.com/scs712zl)) |
+| [Checkbox group](form/checkboxgroup.md) | Learn how to add a Checkbox control into a Form ([Example](https://snippet.dhtmlx.com/p89u4ovb)) |
+| [ColorPicker](form/colorpicker.md) | Learn how to add a ColorPicker control into a Form ([Example](https://snippet.dhtmlx.com/n52dl19s)) |
+| [Combobox](form/combo.md) | Learn how to add a Combobox control into a Form ([Example](https://snippet.dhtmlx.com/wla7u1xq)) |
+| [Container](form/container.md) | Learn how to add a Container control into a Form ([Example](https://snippet.dhtmlx.com/cnxi9eqq)) |
+| [Input](form/input.md) | Learn how to add an Input control into a Form ([Example](https://snippet.dhtmlx.com/9q8fubjm)) |
| [Labels](https://snippet.dhtmlx.com/7m2wxs8c) | The example shows how to add labels for controls |
| [Helpers](https://snippet.dhtmlx.com/84k1mstw) | The example shows how to add a help message for a control |
-| [Radio group with Radio buttons](../radiogroup/) | Learn how to add Radio buttons into a Form ([Example](https://snippet.dhtmlx.com/ycp1cbct)) |
-| [Select](../select/) | Learn how to add a Select control into a Form ([Example](https://snippet.dhtmlx.com/yo9w9o2t)) |
-| [SimpleVault](../simplevault/) | Learn how to add a SimpleVault control into a Form ([Example](https://snippet.dhtmlx.com/ofy4k51o)) |
-| [Slider](../slider/) | Learn how to add a Slider control into a Form |
-| [Spacer](../spacer/) | Learn how to add a Spacer control into a Form |
-| [Text](../text/) | Learn how to add a Text control into a Form |
-| [Textarea](../textarea/) | Learn how to add a Textarea control into a Form ([Example](https://snippet.dhtmlx.com/mt93jzrk)) |
-| [TimePicker](../timepicker/) | Learn how to add a TimePicker control into a Form ([Example](https://snippet.dhtmlx.com/4k3o8p7b)) |
+| [Radio group with Radio buttons](form/radiogroup.md) | Learn how to add Radio buttons into a Form ([Example](https://snippet.dhtmlx.com/ycp1cbct)) |
+| [Select](form/select.md) | Learn how to add a Select control into a Form ([Example](https://snippet.dhtmlx.com/yo9w9o2t)) |
+| [SimpleVault](form/simplevault.md) | Learn how to add a SimpleVault control into a Form ([Example](https://snippet.dhtmlx.com/ofy4k51o)) |
+| [Slider](form/slider.md) | Learn how to add a Slider control into a Form |
+| [Spacer](form/spacer.md) | Learn how to add a Spacer control into a Form |
+| [Text](form/text.md) | Learn how to add a Text control into a Form |
+| [Textarea](form/textarea.md) | Learn how to add a Textarea control into a Form ([Example](https://snippet.dhtmlx.com/mt93jzrk)) |
+| [TimePicker](form/timepicker.md) | Learn how to add a TimePicker control into a Form ([Example](https://snippet.dhtmlx.com/4k3o8p7b)) |
### Integration
@@ -49,7 +49,7 @@ In this section you can find out how to initialize and localize Form, how to add
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Form with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Form with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Form with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -60,12 +60,12 @@ In this section you will know how to configure groups of controls, how to align
| Topic | Description |
| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
-| [Grouping controls](../configuration/#grouping-controls-in-form) | Learn how to group Form controls into rows and columns |
-| [Configuring padding](../api/form_padding_config/) | Learn how to set padding for content inside the control group |
-| [Setting a title](../configuration/#title) | Learn how to define a title for the control group |
-| [Making Form disabled](../configuration/#making-form-disabled) | Learn how to initialize a disabled Form ([Example](https://snippet.dhtmlx.com/7qjwg2sw)) |
-| [Making Form hidden](../configuration/#making-form-hidden) | Learn how to initialize a hidden Form |
-| [Aligning controls](../configuration/#alignment) | Learn how to configure the alignment of controls in Form ([Example](https://snippet.dhtmlx.com/jjhkypod)) |
+| [Grouping controls](form/configuration.md#grouping-controls-in-form) | Learn how to group Form controls into rows and columns |
+| [Configuring padding](form/api/form_padding_config.md) | Learn how to set padding for content inside the control group |
+| [Setting a title](form/configuration.md#title) | Learn how to define a title for the control group |
+| [Making Form disabled](form/configuration.md#making-form-disabled) | Learn how to initialize a disabled Form ([Example](https://snippet.dhtmlx.com/7qjwg2sw)) |
+| [Making Form hidden](form/configuration.md#making-form-hidden) | Learn how to initialize a hidden Form |
+| [Aligning controls](form/configuration.md#alignment) | Learn how to configure the alignment of controls in Form ([Example](https://snippet.dhtmlx.com/jjhkypod)) |
| [Changing Form configuration](https://snippet.dhtmlx.com/1pzybtja) | The example allows you to change the configuration settings of a Form right from UI |
## How to configure validation and work with it
@@ -74,13 +74,13 @@ In this section you will learn how to configure required fields, to add validati
| Topic | Description |
| ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring required fields](../work_with_form/#required-fields) | Learn how to specify that the input field is required to be filled in by the user ([Example](https://snippet.dhtmlx.com/0pr3var0)) |
-| [Defining restricted values](../work_with_form/#number-of-allowed-characters) | Learn how to specify the minimum and/or maximum values allowed in the input |
-| [Setting allowed length of input values](../work_with_form/#number-of-allowed-characters) | Learn how to limit the number of characters entered in an input or textarea field |
-| [Validation rules](../work_with_form/#validation-rules) | Learn how to specify the rules of validation ([Example](https://snippet.dhtmlx.com/3cz9v7rm)) |
-| [Configuring messages](../work_with_form/#messages) | Learn how to show messages that will notify the end users, whether they are filling the form in correctly ([Example](https://snippet.dhtmlx.com/yhiuq2mi)) |
-| [Validating Form](../api/form_validate_method/) | Learn how to validate the whole form ([Example](https://snippet.dhtmlx.com/pmz0zk16)) |
-| [Validating a separate control](../api/input/input_validate_method/) | Learn how to validate a separate control ([Example](https://snippet.dhtmlx.com/2wz5lfbp)) |
+| [Configuring required fields](form/work_with_form.md#required-fields) | Learn how to specify that the input field is required to be filled in by the user ([Example](https://snippet.dhtmlx.com/0pr3var0)) |
+| [Defining restricted values](form/work_with_form.md#number-of-allowed-characters) | Learn how to specify the minimum and/or maximum values allowed in the input |
+| [Setting allowed length of input values](form/work_with_form.md#number-of-allowed-characters) | Learn how to limit the number of characters entered in an input or textarea field |
+| [Validation rules](form/work_with_form.md#validation-rules) | Learn how to specify the rules of validation ([Example](https://snippet.dhtmlx.com/3cz9v7rm)) |
+| [Configuring messages](form/work_with_form.md#messages) | Learn how to show messages that will notify the end users, whether they are filling the form in correctly ([Example](https://snippet.dhtmlx.com/yhiuq2mi)) |
+| [Validating Form](form/api/form_validate_method.md) | Learn how to validate the whole form ([Example](https://snippet.dhtmlx.com/pmz0zk16)) |
+| [Validating a separate control](form/api/input/input_validate_method.md) | Learn how to validate a separate control ([Example](https://snippet.dhtmlx.com/2wz5lfbp)) |
## How to customize Form and change its size
@@ -88,9 +88,9 @@ In this section you can learn how to configure the size and style of Form and it
| Topic | Description |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| [Width and height of Form](../configuration/#widthheight) | Learn how to set the width and height for Form |
-| [Styling Form](../customization/) | Learn how to customize a Form and its controls ([Example](https://snippet.dhtmlx.com/wnscgb50)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Width and height of Form](form/configuration.md#widthheight) | Learn how to set the width and height for Form |
+| [Styling Form](form/customization.md) | Learn how to customize a Form and its controls ([Example](https://snippet.dhtmlx.com/wnscgb50)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Form
@@ -98,13 +98,13 @@ In this section you will study how to send a Form to the server, how to disable
| Topic | Description |
| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| [Sending Form to server](../work_with_form/#sending-form-to-server) | Learn how to send a Form to the server |
-| [Disabling / enabling Form](../work_with_form/#enablingdisabling-a-form) | Learn how to enable/disable a Form ([Example](https://snippet.dhtmlx.com/few71nk2)) |
-| [Is disabled](../work_with_form/#checking-if-a-form-is-disabled) | Learn how to check whether a Form or its control is disabled ([Example](https://snippet.dhtmlx.com/lthu8p6p)) |
-| [Hiding / showing Form](../work_with_form/#hidingshowing-a-form) | Learn how to hide/show a Form |
-| [Checking visibility of a Form](../work_with_form/#checking-if-a-form-is-visible) | Learn how to check whether a Form or its control is visible |
-| [Using input masks](../work_with_form/#using-input-masks) | Learn how to use pattern and input masks to provide entering of values in a predefined way ([Example 1](https://snippet.dhtmlx.com/51wnauq3), [Example 2](https://snippet.dhtmlx.com/gu1ekt1z)) |
-| [Clearing Form](../work_with_form/#clearing-form) | Learn how to clear the values and (or) validation of Form ([Example](https://snippet.dhtmlx.com/a64ih4ih)) |
+| [Sending Form to server](form/work_with_form.md#sending-form-to-server) | Learn how to send a Form to the server |
+| [Disabling / enabling Form](form/work_with_form.md#enablingdisabling-a-form) | Learn how to enable/disable a Form ([Example](https://snippet.dhtmlx.com/few71nk2)) |
+| [Is disabled](form/work_with_form.md#checking-if-a-form-is-disabled) | Learn how to check whether a Form or its control is disabled ([Example](https://snippet.dhtmlx.com/lthu8p6p)) |
+| [Hiding / showing Form](form/work_with_form.md#hidingshowing-a-form) | Learn how to hide/show a Form |
+| [Checking visibility of a Form](form/work_with_form.md#checking-if-a-form-is-visible) | Learn how to check whether a Form or its control is visible |
+| [Using input masks](form/work_with_form.md#using-input-masks) | Learn how to use pattern and input masks to provide entering of values in a predefined way ([Example 1](https://snippet.dhtmlx.com/51wnauq3), [Example 2](https://snippet.dhtmlx.com/gu1ekt1z)) |
+| [Clearing Form](form/work_with_form.md#clearing-form) | Learn how to clear the values and (or) validation of Form ([Example](https://snippet.dhtmlx.com/a64ih4ih)) |
## How to work with Form controls
@@ -113,18 +113,18 @@ In this section you will study how to get access to the object of the control, h
| Topic | Description |
| ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Getting an item](../api/form_getitem_method/) | Learn how to get access to the own methods and events of a control ([Example](https://snippet.dhtmlx.com/ocfas6go)) |
+| [Getting an item](form/api/form_getitem_method.md) | Learn how to get access to the own methods and events of a control ([Example](https://snippet.dhtmlx.com/ocfas6go)) |
| * [Disabling/enabling a control](https://snippet.dhtmlx.com/n0ndn215) | The example shows how to enable/disable a separate control |
| * [Clearing a control](https://snippet.dhtmlx.com/82i6levj) | The example shows how to clear a separate control |
| * [Clearing validation of a control](https://snippet.dhtmlx.com/2yj3obz2) | The example shows how to clear validation of a separate control |
| * [Getting widget of control](https://snippet.dhtmlx.com/0aqkdsi7) | The example shows how to return the object of the related DHTMLX widget of the control and apply the methods of the widget to the control |
-| * Check all available methods and events for each control | [Button](../button/#working-with-button), [DatePicker](../calendar/#working-with-datepicker), [Checkbox](../checkbox/#working-with-checkbox), [CheckboxGroup](../checkboxgroup/#working-with-checkboxgroup), [ColorPicker](../colorpicker/#working-with-colorpicker), [Combo](../combo/#working-with-combo), [Container](../container/#methods), [Input](../input/#working-with-input), [RadioGroup](../radiogroup/#working-with-radiogroup), [Select](../select/#working-with-select), [SimpleVault](../simplevault/#working-with-simplevault), [Slider](../slider/#working-with-slider), [Spacer](../spacer/#working-with-spacer), [Text](../text/#working-with-text), [Textarea](../textarea/#working-with-textarea), [TimePicker](../timepicker/#working-with-timepicker) |
-| [Iterating over controls](../api/form_foreach_method/) | Learn how to iterate over Form controls ([Example](https://snippet.dhtmlx.com/hqzqpavs)) |
-| [Setting focus on control](../work_with_form/#setting-focus-to-a-control) | Learn how to set focus on a control via Form API ([Example](https://snippet.dhtmlx.com/tye82oqs)) |
-| [Setting value](../work_with_form/#setting-new-values-for-controls) | Learn how to set new values or states for Form controls ([via Form API](https://snippet.dhtmlx.com/7nxbtlzs)), ([via Form control API](https://snippet.dhtmlx.com/ptwm9ttd)) |
-| [Getting value](../work_with_form/#getting-values-of-controls) | Learn how to get current values/states of Form controls ([via Form API](https://snippet.dhtmlx.com/odod5v12)), ([via Form control API](https://snippet.dhtmlx.com/q3u16v01)) |
-| [Setting properties](../api/form_setproperties_method/) | Learn how to change the values of the properties of Form controls ([Example](https://snippet.dhtmlx.com/67s17ve7)) |
-| [Getting properties](../api/form_getproperties_method/) | Learn how to return an object with the properties which are set for Form controls ([Example](https://snippet.dhtmlx.com/7ubqapqq)) |
+| * Check all available methods and events for each control | [Button](form/button.md#working-with-button), [DatePicker](form/calendar.md#working-with-datepicker), [Checkbox](form/checkbox.md#working-with-checkbox), [CheckboxGroup](form/checkboxgroup.md#working-with-checkboxgroup), [ColorPicker](form/colorpicker.md#working-with-colorpicker), [Combo](form/combo.md#working-with-combo), [Container](form/container.md#methods), [Input](form/input.md#working-with-input), [RadioGroup](form/radiogroup.md#working-with-radiogroup), [Select](form/select.md#working-with-select), [SimpleVault](form/simplevault.md#working-with-simplevault), [Slider](form/slider.md#working-with-slider), [Spacer](form/spacer.md#working-with-spacer), [Text](form/text.md#working-with-text), [Textarea](form/textarea.md#working-with-textarea), [TimePicker](form/timepicker.md#working-with-timepicker) |
+| [Iterating over controls](form/api/form_foreach_method.md) | Learn how to iterate over Form controls ([Example](https://snippet.dhtmlx.com/hqzqpavs)) |
+| [Setting focus on control](form/work_with_form.md#setting-focus-to-a-control) | Learn how to set focus on a control via Form API ([Example](https://snippet.dhtmlx.com/tye82oqs)) |
+| [Setting value](form/work_with_form.md#setting-new-values-for-controls) | Learn how to set new values or states for Form controls ([via Form API](https://snippet.dhtmlx.com/7nxbtlzs)), ([via Form control API](https://snippet.dhtmlx.com/ptwm9ttd)) |
+| [Getting value](form/work_with_form.md#getting-values-of-controls) | Learn how to get current values/states of Form controls ([via Form API](https://snippet.dhtmlx.com/odod5v12)), ([via Form control API](https://snippet.dhtmlx.com/q3u16v01)) |
+| [Setting properties](form/api/form_setproperties_method.md) | Learn how to change the values of the properties of Form controls ([Example](https://snippet.dhtmlx.com/67s17ve7)) |
+| [Getting properties](form/api/form_getproperties_method.md) | Learn how to return an object with the properties which are set for Form controls ([Example](https://snippet.dhtmlx.com/7ubqapqq)) |
## How to work with Form events
@@ -133,7 +133,7 @@ This section explains how to work with Form events.
| Topic | Description |
| :------------------------------------------ | :---------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Form events ([Example](https://snippet.dhtmlx.com/vyipsaoa)) |
+| [Event handling](form/handling_events.md) | Learn how to attach, detach, or call the Form events ([Example](https://snippet.dhtmlx.com/vyipsaoa)) |
## API reference
@@ -143,30 +143,30 @@ In this section you can find out corresponding references of Form and Form contr
| Topic | Description |
| -------------------------------------------------- | --------------------------------- |
-| [Form methods](../../category/form-methods/) | Check the list of Form methods |
-| [Form events](../../category/form-events/) | Check the list of Form events |
-| [Form properties](../../category/form-properties/) | Check the list of Form properties |
+| [Form methods](/category/form-methods/) | Check the list of Form methods |
+| [Form events](/category/form-events/) | Check the list of Form events |
+| [Form properties](/category/form-properties/) | Check the list of Form properties |
### Form controls API
| Topic | Description |
| ------------------------------------------------------ | -------------------------------------------------- |
-| [Button API](../../category/button-api/) | Check the API of the Button control of Form |
-| [Datepicker API](../../category/datepicker-api/) | Check the API of the Datepicker control of Form |
-| [Checkbox API](../../category/checkbox-api/) | Check the API of the Checkbox control of Form |
-| [CheckboxGroup API](../../category/checkboxgroup-api/) | Check the API of the CheckboxGroup control of Form |
-| [Colorpicker API](../../category/colorpicker-api/) | Check the API of the Colorpicker control of Form |
-| [Combo API](../../category/combo-api/) | Check the API of the Combo control of Form |
-| [Container API](../../category/container-api/) | Check the API of the Container control of Form |
-| [Input API](../../category/input-api/) | Check the API of the Input control of Form |
-| [Radiogroup API](../../category/radiogroup-api/) | Check the API of the Radiogroup control of Form |
-| [Select API](../../category/select-api/) | Check the API of the Select control of Form |
-| [Simple Vault API](../../category/simple-vault-api/) | Check the API of the Simple Vault control of Form |
-| [Slider API](../../category/slider-api/) | Check the API of the Slider control of Form |
-| [Spacer API](../../category/spacer-api/) | Check the API of the Spacer control of Form |
-| [Text API](../../category/text-api/) | Check the API of the Text control of Form |
-| [Textarea API](../../category/textarea-api/) | Check the API of the Textarea control of Form |
-| [Timepicker API](../../category/timepicker-api/) | Check the API of the Timepicker control of Form |
+| [Button API](/category/button-api/) | Check the API of the Button control of Form |
+| [Datepicker API](/category/datepicker-api/) | Check the API of the Datepicker control of Form |
+| [Checkbox API](/category/checkbox-api/) | Check the API of the Checkbox control of Form |
+| [CheckboxGroup API](/category/checkboxgroup-api/) | Check the API of the CheckboxGroup control of Form |
+| [Colorpicker API](/category/colorpicker-api/) | Check the API of the Colorpicker control of Form |
+| [Combo API](/category/combo-api/) | Check the API of the Combo control of Form |
+| [Container API](/category/container-api/) | Check the API of the Container control of Form |
+| [Input API](/category/input-api/) | Check the API of the Input control of Form |
+| [Radiogroup API](/category/radiogroup-api/) | Check the API of the Radiogroup control of Form |
+| [Select API](/category/select-api/) | Check the API of the Select control of Form |
+| [Simple Vault API](/category/simple-vault-api/) | Check the API of the Simple Vault control of Form |
+| [Slider API](/category/slider-api/) | Check the API of the Slider control of Form |
+| [Spacer API](/category/spacer-api/) | Check the API of the Spacer control of Form |
+| [Text API](/category/text-api/) | Check the API of the Text control of Form |
+| [Textarea API](/category/textarea-api/) | Check the API of the Textarea control of Form |
+| [Timepicker API](/category/timepicker-api/) | Check the API of the Timepicker control of Form |
## Common functionality
@@ -175,9 +175,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/form/index.md b/docs/form/index.md
index 502ff6bd..e422d7c1 100644
--- a/docs/form/index.md
+++ b/docs/form/index.md
@@ -19,7 +19,7 @@ You can check the following page to learn how to build a full-featured DHTMLX Fo
## API reference
-- [](api/api_overview.md)
+- [](form/api/api_overview.md)
## Related resources
@@ -32,9 +32,9 @@ You can check the following page to learn how to build a full-featured DHTMLX Fo
Guides you through common information you may need while working with Form.
-- [](how_to_start.md)
-- [](localization.md)
-- [](configuration.md)
+- [](form/how_to_start.md)
+- [](form/localization.md)
+- [](form/configuration.md)
- [](form/work_with_form.md)
- [](form/customization.md)
- [](form/handling_events.md)
@@ -66,4 +66,4 @@ Discusses the creation of Form controls and the possibilities of manipulating th
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/form/slider.md b/docs/form/slider.md
index 603b39ba..2641184e 100644
--- a/docs/form/slider.md
+++ b/docs/form/slider.md
@@ -63,4 +63,4 @@ const slider = form.getItem("slider_id").getWidget(); // -> DHTMLX Slider
slider.disable(); // disables slider
~~~
-Check [the full list of methods of the DHTMLX Slider component](../../slider/api/api_overview/#methods) which you can apply via the [getWidget()](../../form/api/slider/slider_getwidget_method/) method.
\ No newline at end of file
+Check [the full list of methods of the DHTMLX Slider component](slider/api/api_overview.md#methods) which you can apply via the [getWidget()](form/api/slider/slider_getwidget_method.md) method.
\ No newline at end of file
diff --git a/docs/form/timepicker.md b/docs/form/timepicker.md
index e24f0074..6ec4c25a 100644
--- a/docs/form/timepicker.md
+++ b/docs/form/timepicker.md
@@ -69,4 +69,4 @@ timepicker.setValue("00:39"); //set the value as a string
**Related sample**: [Form. Get widget of control](https://snippet.dhtmlx.com/0aqkdsi7)
-Check [the full list of methods of the DHTMLX Timepicker component](../../timepicker/api/api_overview/#methods) which you can apply via the [getWidget()](../../form/api/timepicker/timepicker_getwidget_method/) method.
+Check [the full list of methods of the DHTMLX Timepicker component](timepicker/api/api_overview.md#methods) which you can apply via the [getWidget()](form/api/timepicker/timepicker_getwidget_method.md) method.
diff --git a/docs/grid/api/api_gridcolumn_properties.md b/docs/grid/api/api_gridcolumn_properties.md
index 552d4378..4c8f8885 100644
--- a/docs/grid/api/api_gridcolumn_properties.md
+++ b/docs/grid/api/api_gridcolumn_properties.md
@@ -13,7 +13,7 @@ Click the name of the necessary property to see the details on its usage.
| [adjust](grid/api/gridcolumn_properties/gridcolumn_adjust_property.md) | (optional) *false* by default, defines whether the width of a column is automatically adjusted to its content |
| [align](grid/api/gridcolumn_properties/gridcolumn_align_property.md) | (optional) aligns data in a column: *"left"*/*"center"*/*"right"*|
| [autoWidth](grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md) | (optional) enables/disables the ability of a column to adjust its size to the size of Grid, *false* by default |
-| [closable](grid/api/gridcolumn_properties/gridcolumn_closable_property.md) | (optional) either allows closing a particular element of the [`group`](../../api/grid_group_config/) panel or makes it permanently enabled (**PRO version only**)|
+| [closable](grid/api/gridcolumn_properties/gridcolumn_closable_property.md) | (optional) either allows closing a particular element of the [`group`](grid/api/grid_group_config.md) panel or makes it permanently enabled (**PRO version only**)|
| [dateFormat](grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md) | (optional) defines the format of dates. The date format must include delimiters (spaces or symbols), otherwise an error will be thrown |
| [draggable](grid/api/gridcolumn_properties/gridcolumn_draggable_property.md) | (optional) defines whether a column is draggable, *false* by default |
| [editable](grid/api/gridcolumn_properties/gridcolumn_editable_property.md) | (optional) defines whether a column is editable, *false* by default |
diff --git a/docs/grid/api/api_overview.md b/docs/grid/api/api_overview.md
index 44d6c0c9..f5c82360 100644
--- a/docs/grid/api/api_overview.md
+++ b/docs/grid/api/api_overview.md
@@ -42,8 +42,8 @@ description: You can explore the API of Grid in the documentation of the DHTMLX
| [](grid/api/grid_showrow_method.md) | @getshort(grid/api/grid_showrow_method.md) |
:::info important
-- Use [the methods of DataCollection](data_collection.md) to work with data.
-- Use [the methods of TreeCollection](tree_collection.md#methods) to work with data of Grid in the TreeGrid mode.
+- Use [the methods of DataCollection](/data_collection/) to work with data.
+- Use [the methods of TreeCollection](/tree_collection/#methods) to work with data of Grid in the TreeGrid mode.
- Use [the methods of the Selection object](grid/api/api_overview.md#selection-methods) to work with the selection of Grid cells.
- Use [the methods of the RangeSelection module](grid/api/api_overview.md#rangeselection-methods) to work with the range selection within Grid.
- Use [the methods of the BlockSelection module](grid/api/api_overview.md#blockselection-methods) to work with the block selection within Grid.
@@ -167,8 +167,8 @@ description: You can explore the API of Grid in the documentation of the DHTMLX
| [](grid/api/grid_beforerowresize_event.md) | @getshort(grid/api/grid_beforerowresize_event.md) |
:::info important
-- Use [the events of DataCollection](data_collection.md#events) to work with data of Grid.
-- Use [the events of TreeCollection](tree_collection.md#events) to work with data of Grid in the TreeGrid mode.
+- Use [the events of DataCollection](/data_collection/#events) to work with data of Grid.
+- Use [the events of TreeCollection](/tree_collection/#events) to work with data of Grid in the TreeGrid mode.
- Use [the events of the Selection object](grid/api/api_overview.md#selection-events) to work with the selection of Grid cells.
- Use [the events of the RangeSelection module](grid/api/api_overview.md#rangeselection-events) to work with the range selection within Grid.
- Use [the events of the BlockSelection module](grid/api/api_overview.md#blockselection-events) to work with the block selection within Grid.
diff --git a/docs/grid/api/export/grid_csv_method.md b/docs/grid/api/export/grid_csv_method.md
index 68f34d90..6fc1eb15 100644
--- a/docs/grid/api/export/grid_csv_method.md
+++ b/docs/grid/api/export/grid_csv_method.md
@@ -18,7 +18,7 @@ description: You can explore the csv export method of Grid in the documentation
- `columnDelimiter?: string` - (optional) a comma (",") by default. A separator between columns, can be a semicolon - ";", or any other value
:::note
-You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property.
+You can specify extended export configuration settings via the Grid [`exportConfig`](grid/api/grid_exportconfig_config.md) configuration property.
:::
@returns:
diff --git a/docs/grid/api/export/grid_pdf_method.md b/docs/grid/api/export/grid_pdf_method.md
index 45bdfe00..3e2c658b 100644
--- a/docs/grid/api/export/grid_pdf_method.md
+++ b/docs/grid/api/export/grid_pdf_method.md
@@ -47,7 +47,7 @@ A promise of data export
- `footer?: string` - (optional) an HTML template for the footer in the exported file
:::note
-You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property.
+You can specify extended export configuration settings via the Grid [`exportConfig`](grid/api/grid_exportconfig_config.md) configuration property.
:::
@@ -78,7 +78,7 @@ It is necessary to set sufficient margin for correct display of `headerTemplate`
:::
:::info
-If you use Grid in conjunction with [Pagination](pagination.md), only the displayed page will be exported.
+If you use Grid in conjunction with [Pagination](/pagination/), only the displayed page will be exported.
:::
## List of formats
diff --git a/docs/grid/api/export/grid_png_method.md b/docs/grid/api/export/grid_png_method.md
index a39d3364..6e1b335a 100644
--- a/docs/grid/api/export/grid_png_method.md
+++ b/docs/grid/api/export/grid_png_method.md
@@ -23,7 +23,7 @@ A promise of data export
- `footer?: string` - (optional) an HTML template for the footer in the exported file
:::note
-You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property.
+You can specify extended export configuration settings via the Grid [`exportConfig`](grid/api/grid_exportconfig_config.md) configuration property.
:::
@example:
@@ -45,7 +45,7 @@ grid.export.png({
@descr:
:::info
-If you use Grid in conjunction with [Pagination](pagination.md), only the displayed page will be exported.
+If you use Grid in conjunction with [Pagination](/pagination/), only the displayed page will be exported.
:::
**Related sample**: [Grid. Export to PDF/PNG](https://snippet.dhtmlx.com/ti9l91mn)
diff --git a/docs/grid/api/export/grid_xlsx_method.md b/docs/grid/api/export/grid_xlsx_method.md
index 68074b2b..d5dbe7d9 100644
--- a/docs/grid/api/export/grid_xlsx_method.md
+++ b/docs/grid/api/export/grid_xlsx_method.md
@@ -9,7 +9,7 @@ description: You can explore the xlsx export method of Grid in the documentation
@short: Exports data from a grid to an Excel file
:::info
-DHTMLX Grid uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for export of data to Excel. [Check the details](grid/usage.md/#exporting-data-to-excel).
+DHTMLX Grid uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for export of data to Excel. [Check the details](grid/usage.md#exporting-data-to-excel).
:::
@signature: {'xlsx(config?: IXlsxExportConfig) => Promise;'}
@@ -26,7 +26,7 @@ DHTMLX Grid uses the WebAssembly-based library [Json2Excel](https://github.com/d
- `dateFormatMask?: string` - (optional) "dd/mm/yy" by default. The mask used for [dates formatting in Excel](https://support.microsoft.com/en-us/office/format-a-date-the-way-you-want-in-excel-8e10019e-d5d8-47a1-ba95-db95123d273e)
:::note
-You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property.
+You can specify extended export configuration settings via the Grid [`exportConfig`](grid/api/grid_exportconfig_config.md) configuration property.
:::
@returns:
@@ -54,7 +54,7 @@ grid.export.xlsx({
**Related samples**: [Grid. Export to xlsx and csv](https://snippet.dhtmlx.com/58oqij47)
-**Related article:** [Exporting Grid](grid/usage.md/#exporting-data-to-excel)
+**Related article:** [Exporting Grid](grid/usage.md#exporting-data-to-excel)
**Change log:**
diff --git a/docs/grid/api/grid_adjust_config.md b/docs/grid/api/grid_adjust_config.md
index 1f19ac7c..1a6dced6 100644
--- a/docs/grid/api/grid_adjust_config.md
+++ b/docs/grid/api/grid_adjust_config.md
@@ -59,9 +59,9 @@ The property can be specified to one of the available adjustment modes:
-The `adjust` property has a priority over the [`autoWidth`](../../../grid/configuration/#autowidth-for-columns) property if it is specified either for a grid or for its column, and over the [`width`](../../../grid/api/api_gridcolumn_properties/) property of the column.
+The `adjust` property has a priority over the [`autoWidth`](grid/configuration.md#autowidth-for-columns) property if it is specified either for a grid or for its column, and over the [`width`](grid/api/api_gridcolumn_properties.md) property of the column.
-The width the columns will be adjusted to also depends on the values of the [`minWidth/maxWidth`](../../../grid/api/api_gridcolumn_properties/) properties if they are set for a column.
+The width the columns will be adjusted to also depends on the values of the [`minWidth/maxWidth`](grid/api/api_gridcolumn_properties.md) properties if they are set for a column.
#### Take into account the information below:
diff --git a/docs/grid/api/grid_autowidth_config.md b/docs/grid/api/grid_autowidth_config.md
index eaf7db0d..7069b746 100644
--- a/docs/grid/api/grid_autowidth_config.md
+++ b/docs/grid/api/grid_autowidth_config.md
@@ -26,10 +26,10 @@ const grid = new dhx.Grid("grid_container", {
**Related sample**: [Grid. Columns auto width](https://snippet.dhtmlx.com/4as4y3l4)
:::note
-The property is ignored if the [`adjust`](../../../grid/configuration/#autosize-for-columns) property is used.
+The property is ignored if the [`adjust`](grid/configuration.md#autosize-for-columns) property is used.
:::
-The width of the columns is calculated on the base of the sizes of the container of the grid and the values of the [`minWidth/maxWidth`](../../../grid/api/api_gridcolumn_properties/) properties if they are set for the columns.
+The width of the columns is calculated on the base of the sizes of the container of the grid and the values of the [`minWidth/maxWidth`](grid/api/api_gridcolumn_properties.md) properties if they are set for the columns.
:::note
If the `width` property is specified in the configuration object of a column, the `autoWidth` property won't work for this column.
diff --git a/docs/grid/api/grid_blockselection_config.md b/docs/grid/api/grid_blockselection_config.md
index 88609bc9..7168bc0a 100644
--- a/docs/grid/api/grid_blockselection_config.md
+++ b/docs/grid/api/grid_blockselection_config.md
@@ -199,7 +199,7 @@ function blockSelectionHandler({ cell, array, index, grid }) {
**Related sample:** [Grid. BlockSelection. Work with the handle configuration](https://snippet.dhtmlx.com/sryiguxu)
**Related articles:**
-- [Managing block selection in Grid](grid/configuration.md/#managing-block-selection-in-grid)
+- [Managing block selection in Grid](grid/configuration.md#managing-block-selection-in-grid)
- [Work with BlockSelection module](grid/usage_blockselection.md)
@changelog: added in v9.2
diff --git a/docs/grid/api/grid_cellclick_event.md b/docs/grid/api/grid_cellclick_event.md
index 6a3cf881..352c0a0a 100644
--- a/docs/grid/api/grid_cellclick_event.md
+++ b/docs/grid/api/grid_cellclick_event.md
@@ -25,4 +25,4 @@ grid.events.on("cellClick", (row, column, event) => {
**Related sample**: [Grid. Events](https://snippet.dhtmlx.com/9zeyp4ds)
-You can use the event when you need to open the editor of a grid cell with a single click. Check the details in the [Opening editor with one click](../../../grid/configuration/#opening-editor-with-one-click) article.
\ No newline at end of file
+You can use the event when you need to open the editor of a grid cell with a single click. Check the details in the [Opening editor with one click](grid/configuration.md#opening-editor-with-one-click) article.
\ No newline at end of file
diff --git a/docs/grid/api/grid_clipboard_config.md b/docs/grid/api/grid_clipboard_config.md
index 4defc87e..b24839cd 100644
--- a/docs/grid/api/grid_clipboard_config.md
+++ b/docs/grid/api/grid_clipboard_config.md
@@ -48,7 +48,7 @@ const grid = new dhx.Grid("grid_container", {
The `clipboard` property can be set in two ways:
- as a *boolean* value it enables or disables the `clipboard` module upon the component initialization
-- as an *object* it enables the module and allows defining [modifier functions](grid/usage_clipboard.md/#using-formatter-functions) for data processing. The following properties are available:
+- as an *object* it enables the module and allows defining [modifier functions](grid/usage_clipboard.md#using-formatter-functions) for data processing. The following properties are available:
- `copyModifier` - (*function*) modifies data before copying to the clipboard. Accepts as parameters the cell value, the cell object, and the `cut` flag (set to `true`, if it's a cut operation)
- `cutModifier` - (*function*) modifies the cell data before cutting (before clearing the cell). Accepts as parameters the cell value and the cell object
- `pasteModifier` - (*function*) modifies data from the clipboard before pasting into a cell. Accepts as parameters the cell value and the cell object
@@ -77,7 +77,7 @@ const grid = new dhx.Grid("grid_container", {
**Related sample**: [Grid. Clipboard. Custom copy/cut/paste for number and date columns](https://snippet.dhtmlx.com/dfj49xah)
**Related articles:**
-- [Clipboard](grid/configuration.md/#clipboard)
+- [Clipboard](grid/configuration.md#clipboard)
- [Work with Clipboard module](grid/usage_clipboard.md)
@changelog: added in v9.2
\ No newline at end of file
diff --git a/docs/grid/api/grid_css_config.md b/docs/grid/api/grid_css_config.md
index a1524a7f..4149f048 100644
--- a/docs/grid/api/grid_css_config.md
+++ b/docs/grid/api/grid_css_config.md
@@ -52,4 +52,4 @@ const grid = new dhx.Grid("grid_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/grid/api/grid_dragpanel_config.md b/docs/grid/api/grid_dragpanel_config.md
index 14e584f2..894474be 100644
--- a/docs/grid/api/grid_dragpanel_config.md
+++ b/docs/grid/api/grid_dragpanel_config.md
@@ -27,7 +27,7 @@ dragPanel?:
@default: false
:::note
-The module is automatically enabled, if the [row Drag-and-Drop](grid/configuration.md/#drag-n-drop) functionality is active (e.g. via the `dragItem: "row"` or `dragItem: "both"` properties), and either the [`BlockSelection`](grid/usage_blockselection.md) or [`Clipboard`](grid/usage_clipboard.md) modules are enabled.
+The module is automatically enabled, if the [row Drag-and-Drop](grid/configuration.md#drag-n-drop) functionality is active (e.g. via the `dragItem: "row"` or `dragItem: "both"` properties), and either the [`BlockSelection`](grid/usage_blockselection.md) or [`Clipboard`](grid/usage_clipboard.md) modules are enabled.
:::
@example:
@@ -88,7 +88,7 @@ const grid = new dhx.Grid("grid_container", {
**Related sample:** [Grid (TreeGrid). DragPanel. Initialization](https://snippet.dhtmlx.com/uevdwjuo)
**Related articles:**
-- [Adjusting DragPanel module](grid/configuration.md/#adjusting-dragpanel-module)
+- [Adjusting DragPanel module](grid/configuration.md#adjusting-dragpanel-module)
- [Work with DragPanel module](grid/usage_dragpanel.md)
diff --git a/docs/grid/api/grid_dropbehaviour_config.md b/docs/grid/api/grid_dropbehaviour_config.md
index 04adb246..27f308e8 100644
--- a/docs/grid/api/grid_dropbehaviour_config.md
+++ b/docs/grid/api/grid_dropbehaviour_config.md
@@ -15,7 +15,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac
:::note
The `dropBehaviour` property is available only in the TreeGrid mode with the enabled drag-n-drop functionality.
-To enable drag-n-drop within Grid in the TreeGrid mode (reorder the items), use the [`dragItem`](/grid/api/grid_dragitem_config/) property, to enable drag-n-drop between Grids in the TreeGrid mode, use the [`dragMode`](/grid/api/grid_dragmode_config/) property.
+To enable drag-n-drop within Grid in the TreeGrid mode (reorder the items), use the [`dragItem`](grid/api/grid_dragitem_config.md) property, to enable drag-n-drop between Grids in the TreeGrid mode, use the [`dragMode`](grid/api/grid_dragmode_config.md) property.
:::
@signature: {'dropBehaviour?: "child" | "sibling" | "complex";'}
@@ -43,4 +43,4 @@ There are three modes of behaviour of a dragged item, depending on the value set
**Related sample**: [Grid (TreeGrid). Drop behaviour](https://snippet.dhtmlx.com/o2v3pcg0)
-**Related article**: [Drop behaviour](/grid/treegrid_mode/#drop-behaviour)
\ No newline at end of file
+**Related article**: [Drop behaviour](grid/treegrid_mode.md#drop-behaviour)
\ No newline at end of file
diff --git a/docs/grid/api/grid_exportconfig_config.md b/docs/grid/api/grid_exportconfig_config.md
index 0448c597..78b72a2a 100644
--- a/docs/grid/api/grid_exportconfig_config.md
+++ b/docs/grid/api/grid_exportconfig_config.md
@@ -164,6 +164,6 @@ The `exportConfig` property extends the possibilities of the standard export and
**Related sample**: [Grid. Custom export logic for PDF, PNG, XLSX, CSV](https://snippet.dhtmlx.com/aher21cg)
-**Related article**: [Extended export configuration settings](/grid/usage/#extended-export-configuration-settings)
+**Related article**: [Extended export configuration settings](grid/usage.md#extended-export-configuration-settings)
@changelog: added in v9.3
\ No newline at end of file
diff --git a/docs/grid/api/grid_exportstyles_config.md b/docs/grid/api/grid_exportstyles_config.md
index 0db7d48e..e3916312 100644
--- a/docs/grid/api/grid_exportstyles_config.md
+++ b/docs/grid/api/grid_exportstyles_config.md
@@ -44,7 +44,7 @@ You must use only absolute paths not relative ones.
:::
:::info
-You need to enable the property if you want to export Grid with a [custom or overridden theme](themes.md).
+You need to enable the property if you want to export Grid with a [custom or overridden theme](/themes/).
:::
@descr:
diff --git a/docs/grid/api/grid_footerposition_config.md b/docs/grid/api/grid_footerposition_config.md
index 49b9bc0d..efbbd5d6 100644
--- a/docs/grid/api/grid_footerposition_config.md
+++ b/docs/grid/api/grid_footerposition_config.md
@@ -54,7 +54,7 @@ const grid = new dhx.Grid("grid_container", {
The property has the following values:
- `relative` - 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 to the last row.
-- `bottom` - the footer and [bottom-pinned rows](/grid/api/grid_bottomsplit_config/) are strictly locked to the bottom edge of the container. They remain at the base of the component even if the content occupies only a fraction of the available height.
+- `bottom` - the footer and [bottom-pinned rows](grid/api/grid_bottomsplit_config.md) are strictly locked to the bottom edge of the container. They remain at the base of the component even if the content occupies only a fraction of the available height.
@changelog: added in v9.3
@@ -62,4 +62,4 @@ The property has the following values:
- [Grid. Fixed rows positioned at the bottom](https://snippet.dhtmlx.com/w5xzdjb7)
- [Grid. Footer positioned at the bottom](https://snippet.dhtmlx.com/8sbf8b2y)
-**Related article**: [Configuration](/grid/configuration/#footer-position)
\ No newline at end of file
+**Related article**: [Configuration](grid/configuration.md#footer-position)
\ No newline at end of file
diff --git a/docs/grid/api/grid_group_config.md b/docs/grid/api/grid_group_config.md
index 488bc972..404d2816 100644
--- a/docs/grid/api/grid_group_config.md
+++ b/docs/grid/api/grid_group_config.md
@@ -73,7 +73,7 @@ You can find the detailed description of the `group` object properties with exam
- a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the `dhx.methods` helper
- a user-defined aggregation function `((row: IRow[]) => string | number)`
- `summary` - (optional) specifies where the total row is rendered - at the `top` or at the `bottom` of the group
-- `column` - (optional) defines the [configuration of a column](grid/usage.md/#configuration-of-the-column-property-of-the-group-object) that renders values of the grouped data. This column will be used as a main one for structuring and rendering data grouped by value
+- `column` - (optional) defines the [configuration of a column](grid/usage.md#configuration-of-the-column-property-of-the-group-object) that renders values of the grouped data. This column will be used as a main one for structuring and rendering data grouped by value
@example:
const grid = new dhx.Grid("grid_container", {
diff --git a/docs/grid/api/grid_history_config.md b/docs/grid/api/grid_history_config.md
index c217a0d1..91662b48 100644
--- a/docs/grid/api/grid_history_config.md
+++ b/docs/grid/api/grid_history_config.md
@@ -69,7 +69,7 @@ grid.history.enable(); // enabling the module
**Related sample:** [Grid. History. Configuration](https://snippet.dhtmlx.com/vznpyeit)
**Related articles:**
-- [History of Grid actions](grid/configuration.md/#history-of-grid-actions)
+- [History of Grid actions](grid/configuration.md#history-of-grid-actions)
- [Work with History module](grid/usage_history.md)
@changelog: added in v9.2
\ No newline at end of file
diff --git a/docs/grid/api/grid_rangeselection_config.md b/docs/grid/api/grid_rangeselection_config.md
index 54e7e561..460a7d44 100644
--- a/docs/grid/api/grid_rangeselection_config.md
+++ b/docs/grid/api/grid_rangeselection_config.md
@@ -61,7 +61,7 @@ grid.range.setRange({ xStart: "a", yStart: "1" }); // the range will not be set
~~~
**Related articles:**
-- [Managing RangeSelection in Grid](grid/configuration.md/#managing-range-selection-in-grid)
+- [Managing RangeSelection in Grid](grid/configuration.md#managing-range-selection-in-grid)
- [Work with RangeSelection module](grid/usage_rangeselection.md)
@changelog: added in v9.2
\ No newline at end of file
diff --git a/docs/grid/api/grid_subrowconfig_config.md b/docs/grid/api/grid_subrowconfig_config.md
index 306f5094..85f8793c 100644
--- a/docs/grid/api/grid_subrowconfig_config.md
+++ b/docs/grid/api/grid_subrowconfig_config.md
@@ -13,7 +13,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac
@short: Optional. Specifies the configuration settings of a sub-row
:::note
-Note that when the [`subRow`](/grid/api/grid_subrow_config/) config is used, Grid doesn't support the [TreeGrid mode](grid/treegrid_mode.md), except for the [data grouping](grid/usage.md#grouping-data) functionality.
+Note that when the [`subRow`](grid/api/grid_subrow_config.md) config is used, Grid doesn't support the [TreeGrid mode](grid/treegrid_mode.md), except for the [data grouping](grid/usage.md#grouping-data) functionality.
:::
@signature: {'subRowConfig?: ((row: IRow) => ISubRowConfig) | ISubRowConfig;'}
diff --git a/docs/grid/api/grid_summary_config.md b/docs/grid/api/grid_summary_config.md
index 48981521..b02a8dc9 100644
--- a/docs/grid/api/grid_summary_config.md
+++ b/docs/grid/api/grid_summary_config.md
@@ -82,7 +82,7 @@ console.log(summary); // { totalPopulation: 1000000, totalArea: 50000, density:
@descr:
-**Related article:** [Custom statistics in the column header/footer and spans](../../configuration/#custom-statistics-in-the-column-headerfooter-and-spans)
+**Related article:** [Custom statistics in the column header/footer and spans](grid/configuration.md#custom-statistics-in-the-column-headerfooter-and-spans)
**Related API**: [getSummary()](grid/api/grid_getsummary_method.md)
diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md b/docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md
index 7017920a..998429f5 100644
--- a/docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md
+++ b/docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md
@@ -36,4 +36,4 @@ Also note:
- The property is ignored if the [`adjust`](grid/configuration.md#autosize-for-columns) property is used.
- If the `width` property is specified in the configuration object of a column, the `autoWidth` property won't work for this column.
-**Related article**: [Autowidth for columns](grid/configuration.md/#autowidth-for-columns)
\ No newline at end of file
+**Related article**: [Autowidth for columns](grid/configuration.md#autowidth-for-columns)
\ No newline at end of file
diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_summary_property.md b/docs/grid/api/gridcolumn_properties/gridcolumn_summary_property.md
index cf9cf61b..54de62ae 100644
--- a/docs/grid/api/gridcolumn_properties/gridcolumn_summary_property.md
+++ b/docs/grid/api/gridcolumn_properties/gridcolumn_summary_property.md
@@ -20,7 +20,7 @@ summary?: {
The defined list of calculated values is available only at the column's level. Can be initialized either as an *object* or as a *string*.
As an *object* it contains calculated values set as *key:value* pairs, where the *keys* are the field names and *values* can be:
-- a string with the name of the [applied functor](/helpers/data_calculation_functions/)
+- a string with the name of the [applied functor](helpers/data_calculation_functions.md)
- a tuple `[string, string]` that specifies the field name and the name of the applied functor
- a `(rows: IRow[]) => string | number;` function for calculating the summary of the column
diff --git a/docs/grid/api/headerfilter/setvalue_method.md b/docs/grid/api/headerfilter/setvalue_method.md
index 2d37e2b6..8acf77f1 100644
--- a/docs/grid/api/headerfilter/setvalue_method.md
+++ b/docs/grid/api/headerfilter/setvalue_method.md
@@ -39,12 +39,12 @@ grid.getHeaderFilter("country").setValue("Brazil");
@descr:
:::info
-The [`dateFilter`](/grid/configuration/#headerfooter-filters) type of filter supports only the *Date object* values.
+The [`dateFilter`](grid/configuration.md#headerfooter-filters) type of filter supports only the *Date object* values.
:::
Note that in case of the enabled `multiselection` or `range` modes, the method awaits the value to be passed as an array.
-**Related article**: [Header/footer filters](/grid/configuration/#headerfooter-filters)
+**Related article**: [Header/footer filters](grid/configuration.md#headerfooter-filters)
@changelog:
diff --git a/docs/grid/api/history/add_method.md b/docs/grid/api/history/add_method.md
index b0ba9748..c3d70327 100644
--- a/docs/grid/api/history/add_method.md
+++ b/docs/grid/api/history/add_method.md
@@ -70,7 +70,7 @@ console.log(history.length); // ->1
@descr:
-**Related article**: [Adding/removing Grid history actions](grid/usage_history.md/#addingremoving-grid-history-actions)
+**Related article**: [Adding/removing Grid history actions](grid/usage_history.md#addingremoving-grid-history-actions)
**Related API**: [`remove()`](grid/api/history/remove_method.md), [`removeAll()`](grid/api/history/removeall_method.md), [`getHistory()`](grid/api/history/gethistory_method.md)
diff --git a/docs/grid/api/history/afteradd_event.md b/docs/grid/api/history/afteradd_event.md
index f3fa4450..5591037d 100644
--- a/docs/grid/api/history/afteradd_event.md
+++ b/docs/grid/api/history/afteradd_event.md
@@ -59,7 +59,7 @@ grid.history.events.on("afterAdd", (action) => {
**Related sample:** [Grid. History. Configuration](https://snippet.dhtmlx.com/vznpyeit)
-**Related article**: [Adding/removing Grid history actions](grid/usage_history.md/#addingremoving-grid-history-actions)
+**Related article**: [Adding/removing Grid history actions](grid/usage_history.md#addingremoving-grid-history-actions)
**Related API**: [`add()`](grid/api/history/add_method.md), [`beforeAdd()`](grid/api/history/beforeadd_event.md)
diff --git a/docs/grid/api/history/afterredo_event.md b/docs/grid/api/history/afterredo_event.md
index 43021a9b..d11279ac 100644
--- a/docs/grid/api/history/afterredo_event.md
+++ b/docs/grid/api/history/afterredo_event.md
@@ -58,7 +58,7 @@ grid.history.events.on("afterRedo", (action) => {
**Related sample:** [Grid. History. Configuration](https://snippet.dhtmlx.com/vznpyeit)
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`redo()`](grid/api/history/redo_method.md), [`beforeRedo()`](grid/api/history/beforeredo_event.md)
diff --git a/docs/grid/api/history/afterundo_event.md b/docs/grid/api/history/afterundo_event.md
index e5cf908c..3a960920 100644
--- a/docs/grid/api/history/afterundo_event.md
+++ b/docs/grid/api/history/afterundo_event.md
@@ -59,7 +59,7 @@ grid.history.events.on("afterUndo", (action) => {
**Related sample:** [Grid. History. Configuration](https://snippet.dhtmlx.com/vznpyeit)
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`undo()`](grid/api/history/undo_method.md), [`beforeUndo()`](grid/api/history/beforeundo_event.md)
diff --git a/docs/grid/api/history/beforeadd_event.md b/docs/grid/api/history/beforeadd_event.md
index ba04f9d7..95b69941 100644
--- a/docs/grid/api/history/beforeadd_event.md
+++ b/docs/grid/api/history/beforeadd_event.md
@@ -63,7 +63,7 @@ grid.history.events.on("beforeAdd", (action) => {
@descr:
-**Related article**: [Adding/removing Grid history actions](grid/usage_history.md/#addingremoving-grid-history-actions)
+**Related article**: [Adding/removing Grid history actions](grid/usage_history.md#addingremoving-grid-history-actions)
**Related API**: [`add()`](grid/api/history/add_method.md), [`afterAdd()`](grid/api/history/afteradd_event.md)
diff --git a/docs/grid/api/history/beforeredo_event.md b/docs/grid/api/history/beforeredo_event.md
index d15f8511..82106990 100644
--- a/docs/grid/api/history/beforeredo_event.md
+++ b/docs/grid/api/history/beforeredo_event.md
@@ -62,7 +62,7 @@ grid.history.events.on("beforeRedo", (action) => {
@descr:
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`redo()`](grid/api/history/redo_method.md), [`afterRedo()`](grid/api/history/afterredo_event.md)
diff --git a/docs/grid/api/history/beforeundo_event.md b/docs/grid/api/history/beforeundo_event.md
index 9b4d12e0..fe15fbd8 100644
--- a/docs/grid/api/history/beforeundo_event.md
+++ b/docs/grid/api/history/beforeundo_event.md
@@ -62,7 +62,7 @@ grid.history.events.on("beforeUndo", (action) => {
@descr:
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`undo()`](grid/api/history/undo_method.md), [`afterUndo()`](grid/api/history/afterundo_event.md)
diff --git a/docs/grid/api/history/canredo_method.md b/docs/grid/api/history/canredo_method.md
index 4048c14c..0f8e6ae8 100644
--- a/docs/grid/api/history/canredo_method.md
+++ b/docs/grid/api/history/canredo_method.md
@@ -47,7 +47,7 @@ if (grid.history.canRedo()) {
@descr:
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`redo()`](grid/api/history/redo_method.md)
diff --git a/docs/grid/api/history/canundo_method.md b/docs/grid/api/history/canundo_method.md
index 2b8a8d7b..e0f611e0 100644
--- a/docs/grid/api/history/canundo_method.md
+++ b/docs/grid/api/history/canundo_method.md
@@ -45,7 +45,7 @@ if (grid.history.canUndo()) {
@descr:
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`undo()`](grid/api/history/undo_method.md)
diff --git a/docs/grid/api/history/disable_method.md b/docs/grid/api/history/disable_method.md
index c849778b..d4dda458 100644
--- a/docs/grid/api/history/disable_method.md
+++ b/docs/grid/api/history/disable_method.md
@@ -47,7 +47,7 @@ console.log(grid.history.getHistory().length); // -> 1 (the new action hasn't be
@descr:
-**Related article**: [Enabling/disabling History module](grid/usage_history.md/#enablingdisabling-history-module)
+**Related article**: [Enabling/disabling History module](grid/usage_history.md#enablingdisabling-history-module)
**Related API**: [`enable()`](grid/api/history/enable_method.md), [`isDisabled()`](grid/api/history/isdisabled_method.md)
diff --git a/docs/grid/api/history/enable_method.md b/docs/grid/api/history/enable_method.md
index 40ecdab5..b8af7e9a 100644
--- a/docs/grid/api/history/enable_method.md
+++ b/docs/grid/api/history/enable_method.md
@@ -45,7 +45,7 @@ console.log(grid.history.getHistory().length); // -> 1
@descr:
-**Related article**: [Enabling/disabling History module](grid/usage_history.md/#enablingdisabling-history-module)
+**Related article**: [Enabling/disabling History module](grid/usage_history.md#enablingdisabling-history-module)
**Related API**: [`disable()`](grid/api/history/disable_method.md), [`isDisabled()`](grid/api/history/isdisabled_method.md)
diff --git a/docs/grid/api/history/gethistory_method.md b/docs/grid/api/history/gethistory_method.md
index ec4fcafe..ed3ec626 100644
--- a/docs/grid/api/history/gethistory_method.md
+++ b/docs/grid/api/history/gethistory_method.md
@@ -68,7 +68,7 @@ console.log(history.length); // -> 2
@descr:
-**Related article**: [Getting the history of Grid actions](grid/usage_history.md/#getting-the-history-of-grid-actions)
+**Related article**: [Getting the history of Grid actions](grid/usage_history.md#getting-the-history-of-grid-actions)
**Related API**: [`add()`](grid/api/history/add_method.md), [`remove()`](grid/api/history/remove_method.md), [`removeAll()`](grid/api/history/removeall_method.md)
diff --git a/docs/grid/api/history/isdisabled_method.md b/docs/grid/api/history/isdisabled_method.md
index dc6747e7..cc20af01 100644
--- a/docs/grid/api/history/isdisabled_method.md
+++ b/docs/grid/api/history/isdisabled_method.md
@@ -38,7 +38,7 @@ console.log(grid.history.isDisabled()); // -> false
@descr:
-**Related article**: [Enabling/disabling History module](grid/usage_history.md/#enablingdisabling-history-module)
+**Related article**: [Enabling/disabling History module](grid/usage_history.md#enablingdisabling-history-module)
**Related API**: [`enable()`](grid/api/history/enable_method.md), [`disable()`](grid/api/history/disable_method.md)
diff --git a/docs/grid/api/history/redo_method.md b/docs/grid/api/history/redo_method.md
index 8c86f165..77bda344 100644
--- a/docs/grid/api/history/redo_method.md
+++ b/docs/grid/api/history/redo_method.md
@@ -47,7 +47,7 @@ console.log(grid.history.canUndo()); // -> true
@descr:
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`undo()`](grid/api/history/undo_method.md), [`canRedo()`](grid/api/history/canredo_method.md)
diff --git a/docs/grid/api/history/remove_method.md b/docs/grid/api/history/remove_method.md
index cb0378ae..4869c8a6 100644
--- a/docs/grid/api/history/remove_method.md
+++ b/docs/grid/api/history/remove_method.md
@@ -48,7 +48,7 @@ console.log(grid.history.getHistory().length); // -> 0
@descr:
-**Related article**: [Adding/removing Grid history actions](grid/usage_history.md/#addingremoving-grid-history-actions)
+**Related article**: [Adding/removing Grid history actions](grid/usage_history.md#addingremoving-grid-history-actions)
**Related API**: [`add()`](grid/api/history/add_method.md), [`removeAll()`](grid/api/history/removeall_method.md), [`getHistory()`](grid/api/history/gethistory_method.md)
diff --git a/docs/grid/api/history/removeall_method.md b/docs/grid/api/history/removeall_method.md
index 2e967aa9..afa9c498 100644
--- a/docs/grid/api/history/removeall_method.md
+++ b/docs/grid/api/history/removeall_method.md
@@ -48,7 +48,7 @@ console.log(grid.history.canRedo()); // -> false
@descr:
-**Related article**: [Adding/removing Grid history actions](grid/usage_history.md/#addingremoving-grid-history-actions)
+**Related article**: [Adding/removing Grid history actions](grid/usage_history.md#addingremoving-grid-history-actions)
**Related API**: [`add()`](grid/api/history/add_method.md), [`remove()`](grid/api/history/remove_method.md), [`getHistory()`](grid/api/history/gethistory_method.md)
diff --git a/docs/grid/api/history/undo_method.md b/docs/grid/api/history/undo_method.md
index 876157cb..2f91ce8a 100644
--- a/docs/grid/api/history/undo_method.md
+++ b/docs/grid/api/history/undo_method.md
@@ -50,7 +50,7 @@ console.log(grid.history.canRedo()); // -> true
@descr:
-**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md/#applying-undoredo-operations-to-grid-history-actions)
+**Related article**: [Applying undo/redo operations to Grid history actions](grid/usage_history.md#applying-undoredo-operations-to-grid-history-actions)
**Related API**: [`redo()`](grid/api/history/redo_method.md), [`canUndo()`](grid/api/history/canundo_method.md)
diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md
index 2994e873..e7c85957 100644
--- a/docs/grid/configuration.md
+++ b/docs/grid/configuration.md
@@ -861,7 +861,7 @@ You can also save a date as a string representation of the Date object by settin
**Related sample**: [Grid. Editing with different editors (combobox, select, multiselect, boolean, date)](https://snippet.dhtmlx.com/w2cdossn)
:::info
-You can configure the date picker by passing the [properties of Calendar](category/calendar-properties.md) (**except for** the `value` and `range` ones) to the `editorConfig` object, as in:
+You can configure the date picker by passing the [properties of Calendar](/category/calendar-properties/) (**except for** the `value` and `range` ones) to the `editorConfig` object, as in:
~~~jsx
{
@@ -1460,7 +1460,7 @@ If you specify **comboFilter** as the header or footer content of a column, you
#### Redefining the default sorting for comboFilter
-By default the elements of the comboFilter are sorted by ID. You can modify the way of sorting elements in this type of the filter inside the handler of the [`beforeOpen`](/combobox/api/combobox_beforeopen_event/) event. For example, you can specify that the options in the comboFilter should be sorted by value in the following way:
+By default the elements of the comboFilter are sorted by ID. You can modify the way of sorting elements in this type of the filter inside the handler of the [`beforeOpen`](combobox/api/combobox_beforeopen_event.md) event. For example, you can specify that the options in the comboFilter should be sorted by value in the following way:
~~~jsx
const comboFilter = grid.getHeaderFilter("access").getFilter();
@@ -1619,7 +1619,7 @@ const grid2 = new dhx.Grid("grid", {
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-You can define the logic of setting the position of the Grid footer as well as of the frozen rows fixed at the Grid bottom by the [`bottomSplit`](/grid/api/grid_bottomsplit_config/) option with another Grid property [`footerPosition`](/grid/api/grid_footerposition_config/). The property has the following values:
+You can define the logic of setting the position of the Grid footer as well as of the frozen rows fixed at the Grid bottom by the [`bottomSplit`](grid/api/grid_bottomsplit_config.md) option with another Grid property [`footerPosition`](grid/api/grid_footerposition_config.md). The property has the following values:
- `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.
@@ -2655,7 +2655,7 @@ If you use the GPL version of DHTMLX Grid (or DHTMLX Suite), you will be able to
**Note**, to be able to drag-n-drop a column and (or) multiple rows, you need to use PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-There are some peculiarities of the drag-n-drop functionality in the Grid in the TreeGrid mode. [Check the related section for details](/grid/treegrid_mode/#drag-n-drop).
+There are some peculiarities of the drag-n-drop functionality in the Grid in the TreeGrid mode. [Check the related section for details](grid/treegrid_mode.md#drag-n-drop).
### Drag-n-drop inside the grid
@@ -2692,7 +2692,7 @@ const grid = new dhx.Grid("grid_container", {
~~~
:::tip
-To make the process of work with drag and drop more flexible, you can apply the related drag-n-drop events of Grid for [columns](grid/api/api_overview.md#column-drag-and-drop) and [rows](grid/api/api_overview.md/#row-drag-and-drop).
+To make the process of work with drag and drop more flexible, you can apply the related drag-n-drop events of Grid for [columns](grid/api/api_overview.md#column-drag-and-drop) and [rows](grid/api/api_overview.md#row-drag-and-drop).
:::
### Drag-n-drop between grids
@@ -3072,7 +3072,7 @@ const grid = new dhx.Grid("grid_container", {
The `clipboard` property can be set in two ways:
- as a *boolean* value it enables or disables the `clipboard` module upon the component initialization
-- as an *object* it enables the module and allows defining [modifier functions](grid/usage_clipboard.md/#using-formatter-functions) for data processing. The following properties are available:
+- as an *object* it enables the module and allows defining [modifier functions](grid/usage_clipboard.md#using-formatter-functions) for data processing. The following properties are available:
- `copyModifier` - (*function*) modifies data before copying to the clipboard. Accepts as parameters the cell value, the cell object, and the `cut` flag (set to `true`, if it's a cut operation)
- `cutModifier` - (*function*) modifies the cell data before cutting (before clearing the cell). Accepts as parameters the cell value and the cell object
- `pasteModifier` - (*function*) modifies data from the clipboard before pasting into a cell. Accepts as parameters the cell value and the cell object
diff --git a/docs/grid/data_loading.md b/docs/grid/data_loading.md
index de7e5717..7e7c18bd 100644
--- a/docs/grid/data_loading.md
+++ b/docs/grid/data_loading.md
@@ -88,7 +88,7 @@ There are two ways to load data into Grid after its initialization:
### External data loading
-To load data from an external file, make use of the **load()** method of [Data Collection](data_collection.md). It takes the URL of the file with data as a parameter:
+To load data from an external file, make use of the **load()** method of [Data Collection](/data_collection/). It takes the URL of the file with data as a parameter:
~~~jsx
const grid = new dhx.Grid("grid_container");
@@ -109,7 +109,7 @@ grid.data.load("/some/data").then(function(){
### Loading from local source
-To load data from a local data source, use the `parse()` method of [Data Collection](data_collection.md). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
+To load data from a local data source, use the `parse()` method of [Data Collection](/data_collection/). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
~~~jsx
const grid = new dhx.Grid("grid_container");
@@ -120,7 +120,7 @@ grid.data.parse(dataset);
Note that for loading data from a **CSV file** into a grid, you need to:
-- [create a data driver](/helpers/datadrivers/#csv-format) with the `nameByHeader: true` setting. Thus the data from the first data line will be used as keys of items
+- [create a data driver](helpers/datadrivers.md#csv-format) with the `nameByHeader: true` setting. Thus the data from the first data line will be used as keys of items
- pass the created driver as a second parameter to the `parse()` method
Check the example below:
@@ -148,7 +148,7 @@ grid.data.parse(csvData, csvDataDriver);
## Saving and restoring state
-To save the current state of a grid, use the **serialize()** method of [Data Collection](data_collection.md). It converts the data of a grid into an array of JSON objects.
+To save the current state of a grid, use the **serialize()** method of [Data Collection](/data_collection/). It converts the data of a grid into an array of JSON objects.
Each JSON object contains the configuration of a separate row.
~~~jsx
diff --git a/docs/grid/features.md b/docs/grid/features.md
index a0264faf..b39bf4b9 100644
--- a/docs/grid/features.md
+++ b/docs/grid/features.md
@@ -16,8 +16,8 @@ In this section you can find out how to initialize Grid, how to load data into t
| Topic | Description |
| ----------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| [Basic initialization](../initialization/) | Learn how to initialize Grid |
-| [Initialization in the TreeGrid mode](../treegrid_mode/) | Learn how to initialize Grid in the TreeGrid mode |
+| [Basic initialization](grid/initialization.md) | Learn how to initialize Grid |
+| [Initialization in the TreeGrid mode](grid/treegrid_mode.md) | Learn how to initialize Grid in the TreeGrid mode |
| [Pagination with Grid](https://snippet.dhtmlx.com/0sku3cfa) | The example shows how to initialize Grid inside Pagination |
| [Large dataset](https://snippet.dhtmlx.com/w3p07d6s) | The example shows how Grid works with over 11000 rows loaded |
| [Several grids with large dataset](https://snippet.dhtmlx.com/l9tm2kmp) | The example shows how to initialize several grids inside one container |
@@ -26,7 +26,7 @@ In this section you can find out how to initialize Grid, how to load data into t
| Topic | Description |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| [Loading data into Grid](../data_loading/) | Read how to load the initial data into Grid |
+| [Loading data into Grid](grid/data_loading.md) | Read how to load the initial data into Grid |
| [Initialization with config.data](https://snippet.dhtmlx.com/luh8d0vv) | The example shows how to load data into Grid on the initialization stage |
| [Initialization with data.load()](https://snippet.dhtmlx.com/svkb27d5) | The example shows how to load data from external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/pwzie5wz) | The example shows how to load data from a local data source |
@@ -38,7 +38,7 @@ In this section you can find out how to initialize Grid, how to load data into t
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Grid with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Grid with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Grid with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -52,11 +52,11 @@ In this section you will find the ways of working with the TreeGrid mode of Grid
| Topic | Description |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Enabling TreeGrid mode](../treegrid_mode/#initialization) | Learn how to enable the TreeGrid mode of Grid |
-| [Configuring TreeGrid mode](../treegrid_mode/#configuration)| Learn how to configure the TreeGrid mode of Grid |
-| [Data loading in TreeGrid mode](../treegrid_mode/#data-loading)| Learn how to load data in the TreeGrid mode of Grid |
-| [Drag-n-drop in TreeGrid mode](../treegrid_mode/#drag-n-drop)| Learn how to enable and configure the drag-n-drop functionality in the TreeGrid mode of Grid |
-| [Working with TreeGrid mode](../treegrid_mode/#work-with-grid-in-the-treegrid-mode) | Learn how to expand/collapse nodes |
+| [Enabling TreeGrid mode](grid/treegrid_mode.md#initialization) | Learn how to enable the TreeGrid mode of Grid |
+| [Configuring TreeGrid mode](grid/treegrid_mode.md#configuration)| Learn how to configure the TreeGrid mode of Grid |
+| [Data loading in TreeGrid mode](grid/treegrid_mode.md#data-loading)| Learn how to load data in the TreeGrid mode of Grid |
+| [Drag-n-drop in TreeGrid mode](grid/treegrid_mode.md#drag-n-drop)| Learn how to enable and configure the drag-n-drop functionality in the TreeGrid mode of Grid |
+| [Working with TreeGrid mode](grid/treegrid_mode.md#work-with-grid-in-the-treegrid-mode) | Learn how to expand/collapse nodes |
### How to configure columns
@@ -64,12 +64,12 @@ In this section you will get to know how to configure Grid columns on Grid initi
| Topic | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
-| [Configuring columns](../configuration/#columns) | Learn how to define initial structure of Grid |
-| [Configuring content alignment](../configuration/#alignment) | Learn how to align data in a column ([Example](https://snippet.dhtmlx.com/eyreddku)) |
-| [Frozen columns](../configuration/#frozen-columns) | Learn how to split grid columns into the frozen and movable parts ([Example](https://snippet.dhtmlx.com/hcgl9nth)) |
-| [Hidden columns](../configuration/#hidden-columns) | Learn how to initialize Grid with hidden columns ([Example](https://snippet.dhtmlx.com/lh7ma639)) |
-| [Sortable columns](../configuration/#sortable-columns) | Learn how to make columns sortable ([Example](https://snippet.dhtmlx.com/r3prvlmo)) |
-| [Resizable columns](../configuration/#resizable-columns) | Learn how to make columns resizable ([Example](https://snippet.dhtmlx.com/aeqzuks0)) |
+| [Configuring columns](grid/configuration.md#columns) | Learn how to define initial structure of Grid |
+| [Configuring content alignment](grid/configuration.md#alignment) | Learn how to align data in a column ([Example](https://snippet.dhtmlx.com/eyreddku)) |
+| [Frozen columns](grid/configuration.md#frozen-columns) | Learn how to split grid columns into the frozen and movable parts ([Example](https://snippet.dhtmlx.com/hcgl9nth)) |
+| [Hidden columns](grid/configuration.md#hidden-columns) | Learn how to initialize Grid with hidden columns ([Example](https://snippet.dhtmlx.com/lh7ma639)) |
+| [Sortable columns](grid/configuration.md#sortable-columns) | Learn how to make columns sortable ([Example](https://snippet.dhtmlx.com/r3prvlmo)) |
+| [Resizable columns](grid/configuration.md#resizable-columns) | Learn how to make columns resizable ([Example](https://snippet.dhtmlx.com/aeqzuks0)) |
### How to configure rows
@@ -77,8 +77,8 @@ In this section you will get to know how to configure Grid rows on Grid initiali
| Topic | Description |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [Automatic adding of empty row into Grid](../configuration/#automatic-adding-of-empty-row-into-grid) | Learn how to to automatically add an empty row after the last filled row in the grid ([Example](https://snippet.dhtmlx.com/rkytig73)) |
-| [Frozen rows](../configuration/#frozen-rows) | Learn how to split grid rows into the frozen and movable parts ([Example](https://snippet.dhtmlx.com/hcgl9nth)) |
+| [Automatic adding of empty row into Grid](grid/configuration.md#automatic-adding-of-empty-row-into-grid) | Learn how to to automatically add an empty row after the last filled row in the grid ([Example](https://snippet.dhtmlx.com/rkytig73)) |
+| [Frozen rows](grid/configuration.md#frozen-rows) | Learn how to split grid rows into the frozen and movable parts ([Example](https://snippet.dhtmlx.com/hcgl9nth)) |
### How to specify formats for Grid data
@@ -87,9 +87,9 @@ In this section you will learn how to specify the necessary data formats for a s
| Topic | Description |
| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring data formats](../configuration/#formatting-columns) | Learn how to display values of cells in different formats (percent, currency, date and combination with templates) ([Example](https://snippet.dhtmlx.com/ox37nvdm)) |
-| [Date column and support of the Date() object](https://snippet.dhtmlx.com/ylbu791i) | The example shows how [to use the Date() object for specifying dates](../api/grid_data_config/) |
-| [Setting pattern and number masks](../configuration/#formatting-columns) | Learn how to specify input masks for the values of column cells ([Example](https://snippet.dhtmlx.com/45gjhciv)) |
+| [Configuring data formats](grid/configuration.md#formatting-columns) | Learn how to display values of cells in different formats (percent, currency, date and combination with templates) ([Example](https://snippet.dhtmlx.com/ox37nvdm)) |
+| [Date column and support of the Date() object](https://snippet.dhtmlx.com/ylbu791i) | The example shows how [to use the Date() object for specifying dates](grid/api/grid_data_config.md) |
+| [Setting pattern and number masks](grid/configuration.md#formatting-columns) | Learn how to specify input masks for the values of column cells ([Example](https://snippet.dhtmlx.com/45gjhciv)) |
@@ -99,12 +99,12 @@ In this section you can learn how to configure the header and footer of Grid, ho
| Topic | Description |
| --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| [Configuring header/footer](../api/api_gridcolumn_properties/) | Learn how to configure a Grid header/footer ([Example](https://snippet.dhtmlx.com/9jl55ep7)) |
-| [Setting the height for header and footer](../configuration/#headerfooter-height) | Learn how to set the height for rows in the header and footer of Grid ([Example](https://snippet.dhtmlx.com/wjcjl80i)) |
-| [Setting the text for header and footer](../configuration/#headerfooter-text) | Learn how to set the text for rows in the header and footer of Grid ([Example](https://snippet.dhtmlx.com/9jl55ep7)) |
-| [Setting the position of the footer](../configuration/#footer-position) | Learn how to set the position of the footer and bottom-pinned rows ([Example 1](https://snippet.dhtmlx.com/w5xzdjb7), [Example 2](https://snippet.dhtmlx.com/8sbf8b2y)) |
-| [Styling header cells](../customization/#styling-header-cells) | Learn how to set styling to the text of header cells ([Example](https://snippet.dhtmlx.com/7o4elf48)) |
-| [Styling footer cells](../customization/#styling-footer-cells) | Learn how to set styling to the text of footer cells ([Example](https://snippet.dhtmlx.com/d254hcvp)) |
+| [Configuring header/footer](grid/api/api_gridcolumn_properties.md) | Learn how to configure a Grid header/footer ([Example](https://snippet.dhtmlx.com/9jl55ep7)) |
+| [Setting the height for header and footer](grid/configuration.md#headerfooter-height) | Learn how to set the height for rows in the header and footer of Grid ([Example](https://snippet.dhtmlx.com/wjcjl80i)) |
+| [Setting the text for header and footer](grid/configuration.md#headerfooter-text) | Learn how to set the text for rows in the header and footer of Grid ([Example](https://snippet.dhtmlx.com/9jl55ep7)) |
+| [Setting the position of the footer](grid/configuration.md#footer-position) | Learn how to set the position of the footer and bottom-pinned rows ([Example 1](https://snippet.dhtmlx.com/w5xzdjb7), [Example 2](https://snippet.dhtmlx.com/8sbf8b2y)) |
+| [Styling header cells](grid/customization.md#styling-header-cells) | Learn how to set styling to the text of header cells ([Example](https://snippet.dhtmlx.com/7o4elf48)) |
+| [Styling footer cells](grid/customization.md#styling-footer-cells) | Learn how to set styling to the text of footer cells ([Example](https://snippet.dhtmlx.com/d254hcvp)) |
### How to configure tooltips
@@ -113,8 +113,8 @@ In this section you will get to know how to add tooltips of the desired appearan
| Topic | Description |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Hiding tooltips](../configuration/#tooltip) | Learn how to hide/show a tooltip on hovering over the content of a column ([Example](https://snippet.dhtmlx.com/mq4t3t3w)) |
-| [Adding templates for tooltips](../customization/#adding-template-to-tooltip) | Learn how to customize the content of the tooltip of a column ([Example 1](https://snippet.dhtmlx.com/md8tr3pr), [Example 2](https://snippet.dhtmlx.com/954f7h9m)) |
+| [Hiding tooltips](grid/configuration.md#tooltip) | Learn how to hide/show a tooltip on hovering over the content of a column ([Example](https://snippet.dhtmlx.com/mq4t3t3w)) |
+| [Adding templates for tooltips](grid/customization.md#adding-template-to-tooltip) | Learn how to customize the content of the tooltip of a column ([Example 1](https://snippet.dhtmlx.com/md8tr3pr), [Example 2](https://snippet.dhtmlx.com/954f7h9m)) |
### How to group cells in Grid
@@ -123,9 +123,9 @@ In this section you will find out how to group cells in Grid and its header.
| Topic | Description |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| [Grouping cells](../configuration/#spans) | Learn how to specify columns and rows spans in Grid ([Example](https://snippet.dhtmlx.com/1775dwbl)) |
-| [Adding/removing spans](../usage/#addingremoving-spans) | Learn how to add, remove and get spans of rows and columns via API methods |
-| [Grouping rows and columns in the header](../api/api_gridcolumn_properties/) | Learn how to specify spans for columns and rows in the Grid header ([Example](https://snippet.dhtmlx.com/eol76o68)) |
+| [Grouping cells](grid/configuration.md#spans) | Learn how to specify columns and rows spans in Grid ([Example](https://snippet.dhtmlx.com/1775dwbl)) |
+| [Adding/removing spans](grid/usage.md#addingremoving-spans) | Learn how to add, remove and get spans of rows and columns via API methods |
+| [Grouping rows and columns in the header](grid/api/api_gridcolumn_properties.md) | Learn how to specify spans for columns and rows in the Grid header ([Example](https://snippet.dhtmlx.com/eol76o68)) |
### How to configure drag-n-drop
@@ -133,11 +133,11 @@ In this section you will get to know how to configure the drag-n-drop functional
| Topic | Description |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| [Drag-n-drop inside a grid](../configuration/#drag-n-drop-inside-the-grid) | Learn how to configure drag-n-drop of columns and (or) rows inside the grid |
-| [Drag-n-drop between grids](../configuration/#drag-n-drop-between-grids) | Learn how to configure drag-n-drop between grids ([Example](https://snippet.dhtmlx.com/qx9a86ax)) |
+| [Drag-n-drop inside a grid](grid/configuration.md#drag-n-drop-inside-the-grid) | Learn how to configure drag-n-drop of columns and (or) rows inside the grid |
+| [Drag-n-drop between grids](grid/configuration.md#drag-n-drop-between-grids) | Learn how to configure drag-n-drop between grids ([Example](https://snippet.dhtmlx.com/qx9a86ax)) |
| [Drag-n-drop of multiple rows](grid/configuration.md#drag-n-drop-of-multiple-rows) | Learn how to allow end users to drag-n-drop several rows at once |
-| [Copying of rows during drag-n-drop](../api/grid_dragcopy_config/) | Learn how to copy a row to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/23slivyz)) |
-| [Using the DragPanel module](../usage_dragpanel/) | Learn how to use the DragPanel module that provides additional functionality for moving rows in the Grid ([Example](https://snippet.dhtmlx.com/uevdwjuo)) |
+| [Copying of rows during drag-n-drop](grid/api/grid_dragcopy_config.md) | Learn how to copy a row to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/23slivyz)) |
+| [Using the DragPanel module](grid/usage_dragpanel.md) | Learn how to use the DragPanel module that provides additional functionality for moving rows in the Grid ([Example](https://snippet.dhtmlx.com/uevdwjuo)) |
## How to render custom statistics in the column header/footer and in the spans
@@ -145,13 +145,13 @@ In this section you will get to know how to render custom statistics in the colu
| Topic | Description |
| -----------------------------------------------------------| -----------------------------------------------|
-| [Defining the data calculation function](../../helpers/data_calculation_functions/) | Learn how to define the default or create a custom statistical function for data calculation|
-| [Calculating a column summary](../configuration/#column-summary) | Learn how to form a summary list for a column ([Example](https://snippet.dhtmlx.com/jhjxjv2l))|
-| [Calculating a Grid summary](../configuration/#grid-summary) | Learn how to form a summary list for a Grid |
-| [Getting the summary object](../configuration/#getting-the-summary-object) | Learn how to get the summary object |
-| [Displaying custom statistics in the column header/footer text](../configuration/#headerfooter-text) | Learn how to render custom statistics in the text of a column header/footer ([Example](https://snippet.dhtmlx.com/jhjxjv2l))|
-| [Displaying custom statistics in the column header/footer tooltip](../configuration/#column-headerfooter-tooltip) | Learn how to render custom statistics in the tooltip of a column header/footer|
-| [Displaying custom statistics in the spans](../configuration/#spans) | Learn how to render custom statistics in the spans|
+| [Defining the data calculation function](helpers/data_calculation_functions.md) | Learn how to define the default or create a custom statistical function for data calculation|
+| [Calculating a column summary](grid/configuration.md#column-summary) | Learn how to form a summary list for a column ([Example](https://snippet.dhtmlx.com/jhjxjv2l))|
+| [Calculating a Grid summary](grid/configuration.md#grid-summary) | Learn how to form a summary list for a Grid |
+| [Getting the summary object](grid/configuration.md#getting-the-summary-object) | Learn how to get the summary object |
+| [Displaying custom statistics in the column header/footer text](grid/configuration.md#headerfooter-text) | Learn how to render custom statistics in the text of a column header/footer ([Example](https://snippet.dhtmlx.com/jhjxjv2l))|
+| [Displaying custom statistics in the column header/footer tooltip](grid/configuration.md#column-headerfooter-tooltip) | Learn how to render custom statistics in the tooltip of a column header/footer|
+| [Displaying custom statistics in the spans](grid/configuration.md#spans) | Learn how to render custom statistics in the spans|
## How to configure sizes of Grid and its cells
@@ -161,14 +161,14 @@ In this section you can learn how to configure the size of Grid and its cells.
| Topic | Description |
| -----------------------------------------------------------| -----------------------------------------------|
| [Responsiveness](https://snippet.dhtmlx.com/qjhstaf3) | The example shows how to configure Grid to adapt its sizes according to the parent container |
-| [Width and height of Grid](../configuration/#widthheight) | Learn how to set specific size of Grid ([Example](https://snippet.dhtmlx.com/ffxj6se0)) |
-| [Auto-height for Grid](../configuration/#autoheight-for-grid) | Learn how to configure auto-height for Grid ([Example](https://snippet.dhtmlx.com/srbu56ob)) |
-| [Adjusting columns by header, footer, data content](../configuration/#autosize-for-columns) | Learn how to make the size of columns to automatically adjust to their content ([Example](https://snippet.dhtmlx.com/zfrpe22d)) |
-| [Max width of a column](../api/api_gridcolumn_properties/) | Learn how to define the maximal width which can be set for a column ([Example](https://snippet.dhtmlx.com/ku3cfaux)) |
-| [Min width of a column](../api/api_gridcolumn_properties/) | Learn how to define the minimum width which can be set for a column ([Example](https://snippet.dhtmlx.com/x5hmpi9d)) |
-| [Auto-width for columns](../configuration/#autowidth-for-columns) | Learn how to configure auto-width for columns ([Example](https://snippet.dhtmlx.com/4as4y3l4)) |
-| [Auto-height for rows](../configuration/#autoheight-for-rows) | Learn how to configure auto-height for rows ([Example](https://snippet.dhtmlx.com/zkcsyazg)) |
-| [Row height](../configuration/#row-height) | Learn how to configure the height of rows ([Example](https://snippet.dhtmlx.com/2jo5lcuj)) |
+| [Width and height of Grid](grid/configuration.md#widthheight) | Learn how to set specific size of Grid ([Example](https://snippet.dhtmlx.com/ffxj6se0)) |
+| [Auto-height for Grid](grid/configuration.md#autoheight-for-grid) | Learn how to configure auto-height for Grid ([Example](https://snippet.dhtmlx.com/srbu56ob)) |
+| [Adjusting columns by header, footer, data content](grid/configuration.md#autosize-for-columns) | Learn how to make the size of columns to automatically adjust to their content ([Example](https://snippet.dhtmlx.com/zfrpe22d)) |
+| [Max width of a column](grid/api/api_gridcolumn_properties.md) | Learn how to define the maximal width which can be set for a column ([Example](https://snippet.dhtmlx.com/ku3cfaux)) |
+| [Min width of a column](grid/api/api_gridcolumn_properties.md) | Learn how to define the minimum width which can be set for a column ([Example](https://snippet.dhtmlx.com/x5hmpi9d)) |
+| [Auto-width for columns](grid/configuration.md#autowidth-for-columns) | Learn how to configure auto-width for columns ([Example](https://snippet.dhtmlx.com/4as4y3l4)) |
+| [Auto-height for rows](grid/configuration.md#autoheight-for-rows) | Learn how to configure auto-height for rows ([Example](https://snippet.dhtmlx.com/zkcsyazg)) |
+| [Row height](grid/configuration.md#row-height) | Learn how to configure the height of rows ([Example](https://snippet.dhtmlx.com/2jo5lcuj)) |
## How to customize Grid and its cells
@@ -177,15 +177,15 @@ In this section you can learn how to configure the style of Grid and its cells.
| Topic | Description |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Row context menu with custom logic](https://snippet.dhtmlx.com/6zf3i9gi) | The example shows how to add a context menu with custom logic for the grid rows |
-| [Adding HTML content into cells](../configuration/#html-content-of-grid-columns) | Learn how to add HTML content (for example, an image, an icon) into data of Grid cells ([Example](https://snippet.dhtmlx.com/chitkvkc)) |
-| [Adding a template to cells](../customization/#adding-template-to-cells) | Learn how to customize the content of cells ([Example](https://snippet.dhtmlx.com/9txizaow)) |
-| [Handling events in template](../configuration/#event-handlers-for-html-content) | Learn how to assign event handlers to HTML elements of a custom template of Grid cells ([Example](https://snippet.dhtmlx.com/zcv5drxc)) |
-| [Styling Grid](../customization/#styling-grid) | Learn how to customize a grid ([Example](https://snippet.dhtmlx.com/c5tr3s5r)) |
-| [Styling cells](../customization/#styling-cells) | Learn how to style the necessary cells ([Example](https://snippet.dhtmlx.com/hskmp8rh)) |
-| [Marking cells with colors](../customization/#adding-custom-marks-to-cells) | Learn how to apply conditional formatting and mark cells in the grid ([Example 1](https://snippet.dhtmlx.com/9whjve0v), [Example 2](https://snippet.dhtmlx.com/buirf16n)) |
-| [Styling rows](../customization/#styling-rows) | Learn how to style the necessary rows ([Example 1](https://snippet.dhtmlx.com/idvmge2d), [Example 2](https://snippet.dhtmlx.com/2dxtwf9n)) |
+| [Adding HTML content into cells](grid/configuration.md#html-content-of-grid-columns) | Learn how to add HTML content (for example, an image, an icon) into data of Grid cells ([Example](https://snippet.dhtmlx.com/chitkvkc)) |
+| [Adding a template to cells](grid/customization.md#adding-template-to-cells) | Learn how to customize the content of cells ([Example](https://snippet.dhtmlx.com/9txizaow)) |
+| [Handling events in template](grid/configuration.md#event-handlers-for-html-content) | Learn how to assign event handlers to HTML elements of a custom template of Grid cells ([Example](https://snippet.dhtmlx.com/zcv5drxc)) |
+| [Styling Grid](grid/customization.md#styling-grid) | Learn how to customize a grid ([Example](https://snippet.dhtmlx.com/c5tr3s5r)) |
+| [Styling cells](grid/customization.md#styling-cells) | Learn how to style the necessary cells ([Example](https://snippet.dhtmlx.com/hskmp8rh)) |
+| [Marking cells with colors](grid/customization.md#adding-custom-marks-to-cells) | Learn how to apply conditional formatting and mark cells in the grid ([Example 1](https://snippet.dhtmlx.com/9whjve0v), [Example 2](https://snippet.dhtmlx.com/buirf16n)) |
+| [Styling rows](grid/customization.md#styling-rows) | Learn how to style the necessary rows ([Example 1](https://snippet.dhtmlx.com/idvmge2d), [Example 2](https://snippet.dhtmlx.com/2dxtwf9n)) |
| [Styling selection](https://snippet.dhtmlx.com/xs7bixmg) | The example shows how to style the selection in the grid |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with columns and rows
@@ -195,40 +195,40 @@ In this section you will learn how to add and remove columns and rows, how to hi
| Topic | Description |
| -------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| [Adding / removing columns](../usage/#setting-columns-configuration) | Learn how to add/remove columns |
-| [Adding / removing rows](../usage/#addingremoving-a-row) | Learn how to add/remove rows ([Example](https://snippet.dhtmlx.com/8ezuj7io)) |
+| [Adding / removing columns](grid/usage.md#setting-columns-configuration) | Learn how to add/remove columns |
+| [Adding / removing rows](grid/usage.md#addingremoving-a-row) | Learn how to add/remove rows ([Example](https://snippet.dhtmlx.com/8ezuj7io)) |
### Getting configuration of a cell/column
| Topic | Description |
| -------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-| [Getting configuration of a column](../usage/#getting-configuration-of-a-column) | Learn how to get an object with configuration of the specified column |
-| [Getting configuration of a cell](../usage/#getting-configuration-of-a-cell) | Learn how to get the current coordinates and size of a cell |
+| [Getting configuration of a column](grid/usage.md#getting-configuration-of-a-column) | Learn how to get an object with configuration of the specified column |
+| [Getting configuration of a cell](grid/usage.md#getting-configuration-of-a-cell) | Learn how to get the current coordinates and size of a cell |
### Showing/hiding columns and rows
| Topic | Description |
| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| [Showing / hiding a row](../usage/#hidingshowing-a-row) | Learn how to show and hide a row in Grid ([Example](https://snippet.dhtmlx.com/8y83d6jv)) |
-| [Checking visibility of a row](../usage/#checking-visibility-of-a-row) | Learn how to check whether a row is hidden |
-| [Hiding columns](../configuration/#hidden-columns) | Learn how to make a column hidden on Grid initialization ([Example](https://snippet.dhtmlx.com/lh7ma639)) |
-| [Showing / hiding a column](../usage/#hidingshowing-a-column) | Learn how to show and hide a column in Grid ([Example](https://snippet.dhtmlx.com/n4zjwsqj)) |
-| [Checking visibility of a column](../usage/#checking-visibility-of-a-column) | Learn how to check whether a column is hidden ([Example](https://snippet.dhtmlx.com/rdqhwnjv)) |
+| [Showing / hiding a row](grid/usage.md#hidingshowing-a-row) | Learn how to show and hide a row in Grid ([Example](https://snippet.dhtmlx.com/8y83d6jv)) |
+| [Checking visibility of a row](grid/usage.md#checking-visibility-of-a-row) | Learn how to check whether a row is hidden |
+| [Hiding columns](grid/configuration.md#hidden-columns) | Learn how to make a column hidden on Grid initialization ([Example](https://snippet.dhtmlx.com/lh7ma639)) |
+| [Showing / hiding a column](grid/usage.md#hidingshowing-a-column) | Learn how to show and hide a column in Grid ([Example](https://snippet.dhtmlx.com/n4zjwsqj)) |
+| [Checking visibility of a column](grid/usage.md#checking-visibility-of-a-column) | Learn how to check whether a column is hidden ([Example](https://snippet.dhtmlx.com/rdqhwnjv)) |
## How to work with row expander
| Topic | Description |
| -------------------------------------------------------------- | ---------------------------------------------- |
-| [Adding sub-rows](../configuration/#adding-sub-rows) | Learn how to enable the row expander feature and add sub-rows into Grid ([Example](https://snippet.dhtmlx.com/xdw2037t)) |
-| [Adjusting configuration of sub-rows](../configuration/#adjusting-configuration-of-sub-rows) | Learn how to configure the sub-rows ([Example](https://snippet.dhtmlx.com/xdw2037t)) |
-| [Dynamic configuration of sub-rows](../configuration/#dynamic-configuration-of-sub-rows) | Learn how to adjust the configuration settings of sub-rows dynamically ([Example](https://snippet.dhtmlx.com/pbubj175)) |
-| [Saving state of nested components or data in sub-rows](../configuration/#saving-state-of-nested-components-or-data-in-sub-rows) | Learn how to save the state of nested components or the data of sub-rows |
-| [Loading data into a sub-row](../configuration/#loading-data-into-a-sub-row) | Learn how to dynamically load data into a sub-row ([Example](https://snippet.dhtmlx.com/03ndqrqt)) |
-| [Handling events](../configuration/#handling-events) | Learn how to add event handlers for sub-rows with sub-components or HTML content ([Example](https://snippet.dhtmlx.com/3364si14)) |
-| [Multi-level Grid nesting](../configuration/#multi-level-grid-nesting) | Learn how to specify a multi-level Grid nesting structure ([Example](https://snippet.dhtmlx.com/dih3z7cz)) |
-| [Adjusting sub-row width](../configuration/#adjusting-sub-row-width) | Learn how to adjust the sub-row width depending on the width of the parent Grid |
-| [Getting sub-row config and content](../configuration/#getting-sub-row-config-and-content) | Learn how to get the configuration settings applied to a sub-row and the content inside it |
+| [Adding sub-rows](grid/configuration.md#adding-sub-rows) | Learn how to enable the row expander feature and add sub-rows into Grid ([Example](https://snippet.dhtmlx.com/xdw2037t)) |
+| [Adjusting configuration of sub-rows](grid/configuration.md#adjusting-configuration-of-sub-rows) | Learn how to configure the sub-rows ([Example](https://snippet.dhtmlx.com/xdw2037t)) |
+| [Dynamic configuration of sub-rows](grid/configuration.md#dynamic-configuration-of-sub-rows) | Learn how to adjust the configuration settings of sub-rows dynamically ([Example](https://snippet.dhtmlx.com/pbubj175)) |
+| [Saving state of nested components or data in sub-rows](grid/configuration.md#saving-state-of-nested-components-or-data-in-sub-rows) | Learn how to save the state of nested components or the data of sub-rows |
+| [Loading data into a sub-row](grid/configuration.md#loading-data-into-a-sub-row) | Learn how to dynamically load data into a sub-row ([Example](https://snippet.dhtmlx.com/03ndqrqt)) |
+| [Handling events](grid/configuration.md#handling-events) | Learn how to add event handlers for sub-rows with sub-components or HTML content ([Example](https://snippet.dhtmlx.com/3364si14)) |
+| [Multi-level Grid nesting](grid/configuration.md#multi-level-grid-nesting) | Learn how to specify a multi-level Grid nesting structure ([Example](https://snippet.dhtmlx.com/dih3z7cz)) |
+| [Adjusting sub-row width](grid/configuration.md#adjusting-sub-row-width) | Learn how to adjust the sub-row width depending on the width of the parent Grid |
+| [Getting sub-row config and content](grid/configuration.md#getting-sub-row-config-and-content) | Learn how to get the configuration settings applied to a sub-row and the content inside it |
## How to work with data in Grid
@@ -241,15 +241,15 @@ In this section you will find the ways of editing data in Grid.
| Topic | Description |
| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| [Enabling/disabling editing](../configuration/#editing-grid-and-separate-columns) | Read how to enable/disable editing of the whole Grid or its separate columns |
-| [Editing with different editors](../configuration/#types-of-column-editor) | Learn how to specify the type of the editor for editing the cells ([Example](https://snippet.dhtmlx.com/w2cdossn)), ([Example 2](https://snippet.dhtmlx.com/1mxmshax)), ([Example 3](https://snippet.dhtmlx.com/i22fg83z)) |
+| [Enabling/disabling editing](grid/configuration.md#editing-grid-and-separate-columns) | Read how to enable/disable editing of the whole Grid or its separate columns |
+| [Editing with different editors](grid/configuration.md#types-of-column-editor) | Learn how to specify the type of the editor for editing the cells ([Example](https://snippet.dhtmlx.com/w2cdossn)), ([Example 2](https://snippet.dhtmlx.com/1mxmshax)), ([Example 3](https://snippet.dhtmlx.com/i22fg83z)) |
| [Editing with a colorpicker editor](https://snippet.dhtmlx.com/z2c4sfnn) | The example shows how to implement a colorpicker editor for editing cells |
| [Inline editing](https://snippet.dhtmlx.com/7mbs47en) | The example allows you to try out inline editing in Grid |
| [Editing data using the right panel](https://snippet.dhtmlx.com/1z3jqrlj) | The example shows how to implement editing in Grid via the right panel |
| [Editing data using a modal window](https://snippet.dhtmlx.com/5tbcflek) | The example shows how to implement editing in Grid via the modal window |
-| [Editing of a specific cell](../usage/#editing-data) | Learn how to enable editing of a cell ([Example](https://snippet.dhtmlx.com/pqbax5vs)) |
+| [Editing of a specific cell](grid/usage.md#editing-data) | Learn how to enable editing of a cell ([Example](https://snippet.dhtmlx.com/pqbax5vs)) |
| [Grid and Chart. Edit Grid to see the changes in Chart](https://snippet.dhtmlx.com/gdeqtev4) | Check the example to see how the chart changes after you edit data in the grid |
-| [Keyboard navigation](../configuration/#shortcut-keys-for-editing) | Learn how to enable key navigation for editing the cells ([Example](https://snippet.dhtmlx.com/y9kdk0md)) |
+| [Keyboard navigation](grid/configuration.md#shortcut-keys-for-editing) | Learn how to enable key navigation for editing the cells ([Example](https://snippet.dhtmlx.com/y9kdk0md)) |
### How to sort data
@@ -257,10 +257,10 @@ In this section you will find the ways of sorting data in Grid.
| Topic | Description |
| --------------------------------------------- | ---------------------------------------------------------------- |
-| [Sorting data](../usage/#sorting-data) | Learn how to sort data in the grid ([Example](https://snippet.dhtmlx.com/81dmbdfd)) |
-| [Sorting by multiple columns](../usage/#sorting-by-multiple-columns) | Learn how to sort Grid data by multiple columns ([Example 1](https://snippet.dhtmlx.com/4ej0i3qi), [Example 2](https://snippet.dhtmlx.com/786zr190)) |
-| [Sortable columns](../configuration/#sortable-columns)| Learn how to define whether a column should be sortable ([Example](https://snippet.dhtmlx.com/r3prvlmo)) |
-| [Getting sorting state](../usage/#getting-the-sorting-state) | Learn how to get the current state of sorting data in Grid ([Example](https://snippet.dhtmlx.com/u2vk3ri3)) |
+| [Sorting data](grid/usage.md#sorting-data) | Learn how to sort data in the grid ([Example](https://snippet.dhtmlx.com/81dmbdfd)) |
+| [Sorting by multiple columns](grid/usage.md#sorting-by-multiple-columns) | Learn how to sort Grid data by multiple columns ([Example 1](https://snippet.dhtmlx.com/4ej0i3qi), [Example 2](https://snippet.dhtmlx.com/786zr190)) |
+| [Sortable columns](grid/configuration.md#sortable-columns)| Learn how to define whether a column should be sortable ([Example](https://snippet.dhtmlx.com/r3prvlmo)) |
+| [Getting sorting state](grid/usage.md#getting-the-sorting-state) | Learn how to get the current state of sorting data in Grid ([Example](https://snippet.dhtmlx.com/u2vk3ri3)) |
### How to filter data
@@ -268,10 +268,10 @@ In this section you will find the ways of filtering data in Grid.
| Topic | Description |
| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Setting the type of a filter in the header/footer](../configuration/#headerfooter-filters) | Learn how to specify the type of the filter in the header/footer of a Grid column ([Example](https://snippet.dhtmlx.com/4qz8ng3c)) |
-| [Filtering data](../usage/#filtering-data) | Learn how to filter grid data by the specified criteria ([Example 1](https://snippet.dhtmlx.com/g0zpjqi1), [Example 2](https://snippet.dhtmlx.com/12suognm)) |
-| [Customizing filters in the header/footer](../configuration/#customizing-headerfooter-filters) | Learn how to add a custom function with your own logic for filtering data in a Grid column ([Example](https://snippet.dhtmlx.com/gcidkxjg)) |
-| [Getting the header filter](../api/grid_getheaderfilter_method/) | Learn how to get and use an object of the header filter ([Example](https://snippet.dhtmlx.com/n8srjle3)) |
+| [Setting the type of a filter in the header/footer](grid/configuration.md#headerfooter-filters) | Learn how to specify the type of the filter in the header/footer of a Grid column ([Example](https://snippet.dhtmlx.com/4qz8ng3c)) |
+| [Filtering data](grid/usage.md#filtering-data) | Learn how to filter grid data by the specified criteria ([Example 1](https://snippet.dhtmlx.com/g0zpjqi1), [Example 2](https://snippet.dhtmlx.com/12suognm)) |
+| [Customizing filters in the header/footer](grid/configuration.md#customizing-headerfooter-filters) | Learn how to add a custom function with your own logic for filtering data in a Grid column ([Example](https://snippet.dhtmlx.com/gcidkxjg)) |
+| [Getting the header filter](grid/api/grid_getheaderfilter_method.md) | Learn how to get and use an object of the header filter ([Example](https://snippet.dhtmlx.com/n8srjle3)) |
### How to group data
@@ -279,10 +279,10 @@ In this section you will get to know how to group row data in Grid.
| Topic | Description |
| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Enabling data grouping](../usage/#enabling-data-grouping) | Learn how to enable row data grouping ([Example](https://snippet.dhtmlx.com/dvqy4ewe)) |
-| [Configuring data grouping](../usage/#configuring-data-grouping) | Learn how to configure row data grouping ([Example](https://snippet.dhtmlx.com/z3iw2p3k)) |
-| [Making group panel elements closable](../usage/#making-group-panel-elements-closable) | Learn how to make elements of the group panel closable ([Example](https://snippet.dhtmlx.com/z3iw2p3k)) |
-| [Using DataCollection API for data grouping](../usage/#using-datacollection-api-for-data-grouping) | Learn how to group Grid data with DataCollection API ([Example](https://snippet.dhtmlx.com/vo3pgkgh)) |
+| [Enabling data grouping](grid/usage.md#enabling-data-grouping) | Learn how to enable row data grouping ([Example](https://snippet.dhtmlx.com/dvqy4ewe)) |
+| [Configuring data grouping](grid/usage.md#configuring-data-grouping) | Learn how to configure row data grouping ([Example](https://snippet.dhtmlx.com/z3iw2p3k)) |
+| [Making group panel elements closable](grid/usage.md#making-group-panel-elements-closable) | Learn how to make elements of the group panel closable ([Example](https://snippet.dhtmlx.com/z3iw2p3k)) |
+| [Using DataCollection API for data grouping](grid/usage.md#using-datacollection-api-for-data-grouping) | Learn how to group Grid data with DataCollection API ([Example](https://snippet.dhtmlx.com/vo3pgkgh)) |
## How to work with selection
@@ -291,11 +291,11 @@ In this section you will find the ways of working with selection functionality.
| Topic | Description |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring selection](../configuration/#selection) | Learn how to configure the mode of selection of Grid elements ([Example](https://snippet.dhtmlx.com/ad6roqsx)) |
-| [Enabling multiselection](../configuration/#multiple-selection-of-grid-cells) | Learn how to enable multi-row/multi-cell selection in Grid ([Example](https://snippet.dhtmlx.com/4nj0e9ye)) |
-| [Working with selection](../usage_selection/) | Learn how to enable/disable selection, set selection to cells, remove selection, and get the object of a selected cell ([Example](https://snippet.dhtmlx.com/4nj0e9ye)) |
-| [Selection API](../../category/selection-api/) | Learn how to use the API of Selection to manage the selection of Grid cells |
-| [Keyboard navigation](../configuration/#shortcut-keys-for-moving-selection-between-cells) | Learn how to enable key navigation that allows moving the selection between cells ([Example](https://snippet.dhtmlx.com/y9kdk0md)) |
+| [Configuring selection](grid/configuration.md#selection) | Learn how to configure the mode of selection of Grid elements ([Example](https://snippet.dhtmlx.com/ad6roqsx)) |
+| [Enabling multiselection](grid/configuration.md#multiple-selection-of-grid-cells) | Learn how to enable multi-row/multi-cell selection in Grid ([Example](https://snippet.dhtmlx.com/4nj0e9ye)) |
+| [Working with selection](grid/usage_selection.md) | Learn how to enable/disable selection, set selection to cells, remove selection, and get the object of a selected cell ([Example](https://snippet.dhtmlx.com/4nj0e9ye)) |
+| [Selection API](/category/selection-api/) | Learn how to use the API of Selection to manage the selection of Grid cells |
+| [Keyboard navigation](grid/configuration.md#shortcut-keys-for-moving-selection-between-cells) | Learn how to enable key navigation that allows moving the selection between cells ([Example](https://snippet.dhtmlx.com/y9kdk0md)) |
## How to work with range selection
@@ -303,9 +303,9 @@ In this section you will get to know how to work with the range selection functi
| Topic | Description |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring range selection](../configuration/#managing-range-selection-in-grid) | Learn how to configure the range selection module within Grid |
-| [Working with range selection](../usage_rangeselection/) | Learn how to enable/disable range selection, set/reset range selection, get the range selection object, and check whether a cell is in the range ([Example](https://snippet.dhtmlx.com/42fp5qvt)) |
-| [Range Selection API](../../category/rangeselection-api/) | Learn how to use the API of the RangeSelection module to manage the range selection within Grid |
+| [Configuring range selection](grid/configuration.md#managing-range-selection-in-grid) | Learn how to configure the range selection module within Grid |
+| [Working with range selection](grid/usage_rangeselection.md) | Learn how to enable/disable range selection, set/reset range selection, get the range selection object, and check whether a cell is in the range ([Example](https://snippet.dhtmlx.com/42fp5qvt)) |
+| [Range Selection API](/category/rangeselection-api/) | Learn how to use the API of the RangeSelection module to manage the range selection within Grid |
## How to work with block selection
@@ -314,9 +314,9 @@ In this section you will get to know how to work with the block selection functi
| Topic | Description |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring block selection](../configuration/#managing-block-selection-in-grid) | Learn how to configure the block selection module within Grid ([Example](https://snippet.dhtmlx.com/sryiguxu)) |
-| [Working with block selection](../usage_blockselection/) | Learn how to enable/disable block selection in Grid, check the main features of the BlockSelection module and explore how it interacts with other modules |
-| [BlockSelection API](../../category/blockselection-api/) | Learn how to use API of the BlockSelection module to manage the block selection within Grid |
+| [Configuring block selection](grid/configuration.md#managing-block-selection-in-grid) | Learn how to configure the block selection module within Grid ([Example](https://snippet.dhtmlx.com/sryiguxu)) |
+| [Working with block selection](grid/usage_blockselection.md) | Learn how to enable/disable block selection in Grid, check the main features of the BlockSelection module and explore how it interacts with other modules |
+| [BlockSelection API](/category/blockselection-api/) | Learn how to use API of the BlockSelection module to manage the block selection within Grid |
## How to work with clipboard
@@ -324,9 +324,9 @@ In this section you will get to know how to work with the clipboard functionalit
| Topic | Description |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring clipboard](../configuration/#clipboard) | Learn how to configure the Clipboard module within Grid ([Example](https://snippet.dhtmlx.com/dfj49xah)) |
-| [Working with clipboard](../usage_clipboard/) | Learn how to enable the clipboard in Grid, check the main features and explore the peculiarities of using the Clipboard module |
-| [Clipboard API](../../category/clipboard-events/) | Learn how to use API of the Clipboard module to manage the clipboard operations within Grid |
+| [Configuring clipboard](grid/configuration.md#clipboard) | Learn how to configure the Clipboard module within Grid ([Example](https://snippet.dhtmlx.com/dfj49xah)) |
+| [Working with clipboard](grid/usage_clipboard.md) | Learn how to enable the clipboard in Grid, check the main features and explore the peculiarities of using the Clipboard module |
+| [Clipboard API](/category/clipboard-events/) | Learn how to use API of the Clipboard module to manage the clipboard operations within Grid |
## How to work with history of Grid actions
@@ -334,9 +334,9 @@ In this section you will get to know how to work with the history of Grid action
| Topic | Description |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring history of Grid actions](../configuration/#history-of-grid-actions) | Learn how to configure the History module within Grid ([Example](https://snippet.dhtmlx.com/vznpyeit)) |
-| [Working with history of actions](../usage_history/) | Learn how to enable the history of actions in Grid, check the main features and explore the peculiarities of using the History module |
-| [History API](../../category/history-api/) | Learn how to use API of the History module to manage the history of operations within Grid |
+| [Configuring history of Grid actions](grid/configuration.md#history-of-grid-actions) | Learn how to configure the History module within Grid ([Example](https://snippet.dhtmlx.com/vznpyeit)) |
+| [Working with history of actions](grid/usage_history.md) | Learn how to enable the history of actions in Grid, check the main features and explore the peculiarities of using the History module |
+| [History API](/category/history-api/) | Learn how to use API of the History module to manage the history of operations within Grid |
## How to scroll Grid
@@ -345,8 +345,8 @@ In this section you will learn how to scroll Grid to the necessary position.
| Topic | Description |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| [Controlling scroll behavior](../usage/#controlling-scroll-behavior) | Learn how to scroll the grid content to exact position ([Example](https://snippet.dhtmlx.com/usu1rnpu)) |
-| [Keyboard navigation](../configuration/#default-shortcut-keys) | Learn how to enable key navigation in Grid ([Example](https://snippet.dhtmlx.com/y9kdk0md)) |
+| [Controlling scroll behavior](grid/usage.md#controlling-scroll-behavior) | Learn how to scroll the grid content to exact position ([Example](https://snippet.dhtmlx.com/usu1rnpu)) |
+| [Keyboard navigation](grid/configuration.md#default-shortcut-keys) | Learn how to enable key navigation in Grid ([Example](https://snippet.dhtmlx.com/y9kdk0md)) |
## How to export Grid
@@ -355,8 +355,8 @@ In this section you will get to know how to export Grid to different formats.
| Topic | Description |
| --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Exporting Grid to XLSX, CSV, PNG or PDF format](../usage/#exporting-data) | Learn how to export Grid to the necessary format ([Example 1](https://snippet.dhtmlx.com/58oqij47), [Example 2](https://snippet.dhtmlx.com/ti9l91mn)) |
-| [Extended export configuration settings](../usage/#extended-export-configuration-settings)| Learn how to provide extended configuration properties for Grid export ([Example](https://snippet.dhtmlx.com/aher21cg))|
+| [Exporting Grid to XLSX, CSV, PNG or PDF format](grid/usage.md#exporting-data) | Learn how to export Grid to the necessary format ([Example 1](https://snippet.dhtmlx.com/58oqij47), [Example 2](https://snippet.dhtmlx.com/ti9l91mn)) |
+| [Extended export configuration settings](grid/usage.md#extended-export-configuration-settings)| Learn how to provide extended configuration properties for Grid export ([Example](https://snippet.dhtmlx.com/aher21cg))|
## How to localize Grid
@@ -364,7 +364,7 @@ In this section you will get to know how to localize the interface of Grid.
| Topic | Description |
| --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Localizing Grid](../localization/) | Learn how to apply different languages to the interface of dhtmlxGrid |
+| [Localizing Grid](grid/localization.md) | Learn how to apply different languages to the interface of dhtmlxGrid |
## How to work with Grid events
@@ -373,7 +373,7 @@ This section explains how to work with Grid events.
| Topic | Description |
| :------------------------------------------ | :---------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../events/) | Learn how to attach, detach, or call the Grid events ([Example](https://snippet.dhtmlx.com/9zeyp4ds)) |
+| [Event handling](grid/events.md) | Learn how to attach, detach, or call the Grid events ([Example](https://snippet.dhtmlx.com/9zeyp4ds)) |
## API reference
@@ -381,19 +381,19 @@ In this section you can find out corresponding references of Grid API.
| Topic | Description |
| ----------------------------------------------------------- | ---------------------------------------------------------------- |
-| [Grid methods](../api/api_overview/#grid-methods) | Check the list of Grid methods |
-| [Grid events](../api/api_overview/#grid-events) | Check the list of Grid events |
-| [Grid properties](../api/api_overview/#grid-properties) | Check the list of Grid properties |
-| [Grid column properties](../api/api_gridcolumn_properties/) | Check the list of properties of a Grid column |
-| [DataCollection API](../../data_collection/) | Check the API of DataCollection to work with Grid data |
-| [TreeCollection API](../../tree_collection/) | Check the API of TreeCollection to work with Grid data in the TreeGrid mode |
-| [Selection API](../../category/selection-api/) | Check the API of the Selection object to manage the selection of Grid cells |
-| [RangeSelection API](../../category/rangeselection-api/) | Check the API of the RangeSelection module to manage the range selection in Grid |
-| [BlockSelection API](../../category/blockselection-api/) | Check the API of the BlockSelection module to manage the block selection in Grid |
-| [Clipboard API](../../category/clipboard-events/) | Check the API of the Clipboard module to work with clipboard in Grid |
-| [DragPanel API](../../category/dragpanel-events/) | Check the API of the DragPanel module to work with drag panel within Grid |
-| [History API](../../category/history-api/) | Check the API of the History module to work with the history of Grid actions |
-| [Export API](../../category/export-methods-1/) | Check the API of the Export module to export Grid data |
+| [Grid methods](grid/api/api_overview.md#grid-methods) | Check the list of Grid methods |
+| [Grid events](grid/api/api_overview.md#grid-events) | Check the list of Grid events |
+| [Grid properties](grid/api/api_overview.md#grid-properties) | Check the list of Grid properties |
+| [Grid column properties](grid/api/api_gridcolumn_properties.md) | Check the list of properties of a Grid column |
+| [DataCollection API](/data_collection/) | Check the API of DataCollection to work with Grid data |
+| [TreeCollection API](/tree_collection/) | Check the API of TreeCollection to work with Grid data in the TreeGrid mode |
+| [Selection API](/category/selection-api/) | Check the API of the Selection object to manage the selection of Grid cells |
+| [RangeSelection API](/category/rangeselection-api/) | Check the API of the RangeSelection module to manage the range selection in Grid |
+| [BlockSelection API](/category/blockselection-api/) | Check the API of the BlockSelection module to manage the block selection in Grid |
+| [Clipboard API](/category/clipboard-events/) | Check the API of the Clipboard module to work with clipboard in Grid |
+| [DragPanel API](/category/dragpanel-events/) | Check the API of the DragPanel module to work with drag panel within Grid |
+| [History API](/category/history-api/) | Check the API of the History module to work with the history of Grid actions |
+| [Export API](/category/export-methods-1/) | Check the API of the Export module to export Grid data |
## Common functionality
@@ -402,10 +402,10 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [Custom scroll](../../common_features/custom_scroll/) | Learn how to enable custom scroll in Grid |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component's rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [Custom scroll](common_features/custom_scroll.md) | Learn how to enable custom scroll in Grid |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component's rendering |
## Any questions left?
@@ -413,7 +413,7 @@ In this section you will learn about common functionality of the library which c
-- [**Check the TreeGrid mode of the Grid widget >>>**](../treegrid_mode/) - it allows showing the nested tabular data
+- [**Check the TreeGrid mode of the Grid widget >>>**](grid/treegrid_mode.md) - it allows showing the nested tabular data
- [**Check SpreadSheet >>>**](https://docs.dhtmlx.com/spreadsheet/) - if you need functionality like Google Spreadsheets or Excel
- [**Check Pivot >>>**](https://docs.dhtmlx.com/pivot/index.html) - if you are interested in analyzing data from large datasets
diff --git a/docs/grid/index.md b/docs/grid/index.md
index e95af17d..6da190f0 100644
--- a/docs/grid/index.md
+++ b/docs/grid/index.md
@@ -27,8 +27,8 @@ You can check the following page to learn how to build a full-featured DHTMLX Gr
- To get just DHTMLX Grid, download it from [our website](https://dhtmlx.com/docs/products/dhtmlxGrid/download.shtml)
- To get the whole JavaScript library of UI components [download DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX Grid](https://snippet.dhtmlx.com/1mxmshax?tag=grid)
-- To work with data of Grid check [DataCollection API](data_collection.md)
-- To work with data of Grid in the TreeGrid mode check [TreeCollection API](tree_collection.md)
+- To work with data of Grid check [DataCollection API](/data_collection/)
+- To work with data of Grid in the TreeGrid mode check [TreeCollection API](/tree_collection/)
## Guides
@@ -51,4 +51,4 @@ Says how to build a standard grid on a page and bring it to life: configure with
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/grid/treegrid_mode.md b/docs/grid/treegrid_mode.md
index f1479ea0..e2ce1e87 100644
--- a/docs/grid/treegrid_mode.md
+++ b/docs/grid/treegrid_mode.md
@@ -203,11 +203,11 @@ grid.data.load("/some/data").then(function(){
The drag-n-drop functionality provides the possibility to reorder items inside the grid or between several grids in the TreeGrid mode.
-To enable drag-n-drop within Grid in the TreeGrid mode (reorder the items), use the [`dragItem`](/grid/api/grid_dragitem_config/) property, to enable drag-n-drop between Grids in the TreeGrid mode, use the [`dragMode`](/grid/api/grid_dragmode_config/) property.
+To enable drag-n-drop within Grid in the TreeGrid mode (reorder the items), use the [`dragItem`](grid/api/grid_dragitem_config.md) property, to enable drag-n-drop between Grids in the TreeGrid mode, use the [`dragMode`](grid/api/grid_dragmode_config.md) property.
### Drop behaviour
-You can specify the drag-n-drop behaviour of items in the Grid in the TreeGrid mode with the [`dropBehaviour`](/grid/api/grid_dropbehaviour_config/) option in the configuration object of the component.
+You can specify the drag-n-drop behaviour of items in the Grid in the TreeGrid mode with the [`dropBehaviour`](grid/api/grid_dropbehaviour_config.md) option in the configuration object of the component.
There are three modes of behaviour of a dragged item:
@@ -339,6 +339,6 @@ grid.collapseAll();
When you work with Grid in the TreeGrid mode, you can use the [API Events of DHTMLX Grid](/category/grid-events/).
-You can learn how to work with Grid events in the [related guide](/grid/events/).
+You can learn how to work with Grid events in the [related guide](grid/events.md).
diff --git a/docs/grid/usage.md b/docs/grid/usage.md
index 5fb34f7a..74c99588 100644
--- a/docs/grid/usage.md
+++ b/docs/grid/usage.md
@@ -128,7 +128,7 @@ grid.getHeaderFilter("country").clear();
#### Adding a row
-You may add a new row into the grid by using the [](../data_collection/api/datacollection_add_method.md) method of **DataCollection**:
+You may add a new row into the grid by using the [](data_collection/api/datacollection_add_method.md) method of **DataCollection**:
~~~jsx
grid.data.add({
@@ -148,7 +148,7 @@ grid.data.add({
#### Removing a row
-To remove the necessary row from the grid, apply the [](../data_collection/api/datacollection_remove_method.md) method of **DataCollection**. Pass the id of the row that should be removed to the method:
+To remove the necessary row from the grid, apply the [](data_collection/api/datacollection_remove_method.md) method of **DataCollection**. Pass the id of the row that should be removed to the method:
~~~jsx
grid.data.remove("5");
@@ -163,11 +163,11 @@ grid.data.remove(cell.row.id);
**Related sample**: [Grid. Delete row](https://snippet.dhtmlx.com/8ezuj7io)
-For more information about the selection functionality in Grid, read the [Selection](grid/configuration.md/#selection) and [Work with selection object](grid/usage_selection.md) articles.
+For more information about the selection functionality in Grid, read the [Selection](grid/configuration.md#selection) and [Work with selection object](grid/usage_selection.md) articles.
#### Removing all rows
-If you need to remove all rows at once, use the [](../data_collection/api/datacollection_removeall_method.md) method of **DataCollection**:
+If you need to remove all rows at once, use the [](data_collection/api/datacollection_removeall_method.md) method of **DataCollection**:
~~~jsx
grid.data.removeAll();
@@ -267,7 +267,7 @@ grid.removeSpan("10", "a");
### Filtering data
-You can filter grid data by the specified criteria with the help of the `filter()` method of [DataCollection](data_collection.md). The method takes as a parameter an object with the properties described below:
+You can filter grid data by the specified criteria with the help of the `filter()` method of [DataCollection](/data_collection/). The method takes as a parameter an object with the properties described below:
@@ -312,7 +312,7 @@ grid.data.filter({
### Sorting data
-It is possible to sort data in the grid via the `sort()` method of [DataCollection](data_collection.md). The method takes two parameters:
+It is possible to sort data in the grid via the `sort()` method of [DataCollection](/data_collection/). The method takes two parameters:
@@ -353,7 +353,7 @@ You can sort Grid by multiple columns simultaneously.
**Related sample**: [Grid. Sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/4ej0i3qi)
-Multi-sorting is enabled on initialization of the component. In the example below Grid data is sorted with the help of the `sort()` method of [DataCollection](data_collection.md) by several columns:
+Multi-sorting is enabled on initialization of the component. In the example below Grid data is sorted with the help of the `sort()` method of [DataCollection](/data_collection/) by several columns:
~~~jsx
const grid = new dhx.Grid("grid_container", {
@@ -473,7 +473,7 @@ The [](grid/api/grid_editend_method.md) method does not work if [the type of the
### Exporting data
-You can easily export data of Grid into the Excel, CSV, PDF, or PNG format. Besides the standard functionality of the `Export` module methods described below, you can also [provide advanced configuring of parameters for Grid export](/grid/usage/#extended-export-configuration-settings) via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) property.
+You can easily export data of Grid into the Excel, CSV, PDF, or PNG format. Besides the standard functionality of the `Export` module methods described below, you can also [provide advanced configuring of parameters for Grid export](grid/usage.md#extended-export-configuration-settings) via the Grid [`exportConfig`](grid/api/grid_exportconfig_config.md) property.
#### Exporting data to Excel
@@ -575,9 +575,9 @@ grid.export.png({
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-There is a possibility to provide an advanced configuring of parameters for Grid export into the CSV, XLSX, PDF, and PNG formats with the [`exportConfig`](/grid/api/grid_exportconfig_config/) property.
+There is a possibility to provide an advanced configuring of parameters for Grid export into the CSV, XLSX, PDF, and PNG formats with the [`exportConfig`](grid/api/grid_exportconfig_config.md) property.
-Unlike the standard export, [`exportConfig`](/grid/api/grid_exportconfig_config/) allows you to dynamically modify the structure and content of the resulting document at the moment the export function is called. With this property, you can:
+Unlike the standard export, [`exportConfig`](grid/api/grid_exportconfig_config.md) allows you to dynamically modify the structure and content of the resulting document at the moment the export function is called. With this property, you can:
- **filter data**: exclude specific rows, columns, or spans by returning `null` in the corresponding callback methods
- **transform content**: modify headers, format values, or strip HTML templates to ensure data is displayed correctly in spreadsheet editors
@@ -1181,11 +1181,11 @@ const grid = new dhx.Grid("grid_container", {
### Using DataCollection API for data grouping
-After you've [enabled grouping in Grid](#enabling-data-grouping), you can use the [DataCollection API](../../data_collection) to work with data grouping.
+After you've [enabled grouping in Grid](#enabling-data-grouping), you can use the [DataCollection API](/data_collection/) to work with data grouping.
#### Grouping Grid data
-To group Grid data, use the [](../data_collection/api/datacollection_group_method.md) method of DataCollection.
+To group Grid data, use the [](data_collection/api/datacollection_group_method.md) method of DataCollection.
The method takes the following parameters:
- `order` - an array that defines the order and configuration for data grouping. Each element in the array can be:
@@ -1285,7 +1285,7 @@ grid.data.group(["city"], {
#### Ungrouping Grid data
-To ungroup Grid data, use the [](../data_collection/api/datacollection_ungroup_method.md) method of DataCollection.
+To ungroup Grid data, use the [](data_collection/api/datacollection_ungroup_method.md) method of DataCollection.
~~~jsx
grid.data.ungroup();
@@ -1293,7 +1293,7 @@ grid.data.ungroup();
#### Checking whether Grid data is grouped
-To check whether Grid data is grouped at the moment, use the [](../data_collection/api/datacollection_isgrouped_method.md) method of DataCollection. The method returns *true* if Grid data is grouped at the moment and *false* if it isn't grouped.
+To check whether Grid data is grouped at the moment, use the [](data_collection/api/datacollection_isgrouped_method.md) method of DataCollection. The method returns *true* if Grid data is grouped at the moment and *false* if it isn't grouped.
~~~jsx
if (grid.data.isGrouped()) {
diff --git a/docs/grid/usage_blockselection.md b/docs/grid/usage_blockselection.md
index 1af99cca..1c8eae3d 100644
--- a/docs/grid/usage_blockselection.md
+++ b/docs/grid/usage_blockselection.md
@@ -10,7 +10,7 @@ description: You can explore how to work with BlockSelection module of Grid in t
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-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.
+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.
@@ -33,7 +33,7 @@ const grid = new dhx.Grid("grid_container", {
~~~
The `blockSelection` property can also be set as an *object* to enable the module and provide additional configuration options.
-Learn about configuration possibilities of the `BlockSelection` module in the [Configuration](grid/configuration.md/#managing-block-selection-in-grid) guide.
+Learn about configuration possibilities of the `BlockSelection` module in the [Configuration](grid/configuration.md#managing-block-selection-in-grid) guide.
**Related sample:** [Grid. BlockSelection in the "range" mode. Selection with restricted columns](https://snippet.dhtmlx.com/42fp5qvt)
@@ -103,7 +103,7 @@ console.log(grid.block.isDisabled()); // -> true
## Using events of the BlockSelection object
-To make the process of working with block selection more flexible, you can apply the [related events of the `block` object](grid/api/api_overview.md/#blockselection-events).
+To make the process of working with block selection more flexible, you can apply the [related events of the `block` object](grid/api/api_overview.md#blockselection-events).
## User-interface features
@@ -116,8 +116,8 @@ The main points of cell selection while using the `BlockSelection` module are gi
- The user selects a range by dragging the mouse from the initial cell to the end cell. For example, dragging from **A1** to **B3** creates the range **A1:B3**, which is highlighted.
- The `Shift + click` combination allows extending the range from the current initial cell to the clicked cell.
- The cell selection behavior depends on the applied mode:
- - the `"range"` mode uses the [**RangeSelection API**](grid/api/api_overview.md/#rangeselection-api)
- - the `"manual"` mode requires specifying a custom logic via the [events](grid/api/api_overview.md/#blockselection-events)
+ - the `"range"` mode uses the [**RangeSelection API**](grid/api/api_overview.md#rangeselection-api)
+ - the `"manual"` mode requires specifying a custom logic via the [events](grid/api/api_overview.md#blockselection-events)
### Keyboard navigation
@@ -246,7 +246,7 @@ grid.events.on("beforeKeyDown", (event) => {
The peculiarities of the selection handle functionality are the following:
-- When the handle is enabled via [`blockSelection.handle`](grid/api/grid_blockselection_config.md/#parameters), it appears in the bottom-right corner of the range.
+- When the handle is enabled via [`blockSelection.handle`](grid/api/grid_blockselection_config.md#parameters), it appears in the bottom-right corner of the range.
- When the handle is used with **default** settings (the `handler` property isn't specified in the `handle` object) and the `BlockSelection` module is used in the `"range"` mode, the behavior of the handle is the following:
- copies the value of the first cell of the selected range (or the entire range if selected) to new cells. For example, selecting **A1** (the value is "x") and dragging to **A3** fills **A2**, **A3** with "x".
- if the range **A1:B1** (the values are "x" and "y", correspondingly) is selected, dragging to **D1** copies "x" to **C1** and "y" to **D1**.
@@ -259,7 +259,7 @@ The way of `BlockSelection` API interacting with other grid modules depends on w
#### Range mode
-- The `BlockSelection` module uses the [`RangeSelection` API](grid/api/api_overview.md/#rangeselection-api) to manage continuous rectangular ranges.
+- The `BlockSelection` module uses the [`RangeSelection` API](grid/api/api_overview.md#rangeselection-api) to manage continuous rectangular ranges.
- The handle automatically fills data in the new range.
- The selected range will be reset during data grouping or ungrouping.
- The range will be reinstalled to a new one when moving columns or rows.
@@ -273,7 +273,7 @@ The way of `BlockSelection` API interacting with other grid modules depends on w
#### Restricting selection in the Range mode
-This example shows how to control the start of a block selection and programmatically set a range using the [`RangeSelection` API](grid/api/api_overview.md/#rangeselection-api).
+This example shows how to control the start of a block selection and programmatically set a range using the [`RangeSelection` API](grid/api/api_overview.md#rangeselection-api).
~~~jsx
const grid = new dhx.Grid("grid_container", {
diff --git a/docs/grid/usage_clipboard.md b/docs/grid/usage_clipboard.md
index a02a9677..6ec49597 100644
--- a/docs/grid/usage_clipboard.md
+++ b/docs/grid/usage_clipboard.md
@@ -10,7 +10,7 @@ description: You can explore how to work with Clipboard module of Grid in the do
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-You can manage the clipboard functionality within a grid via the API of the [`Clipboard`](grid/configuration.md/#clipboard) module. It enables copying, cutting, and pasting data from a selected range of cells. Besides, it allows [integrating with other grids or external applications](#interaction-between-grids-and-external-widgets) like Google Spreadsheets.
+You can manage the clipboard functionality within a grid via the API of the [`Clipboard`](grid/configuration.md#clipboard) module. It enables copying, cutting, and pasting data from a selected range of cells. Besides, it allows [integrating with other grids or external applications](#interaction-between-grids-and-external-widgets) like Google Spreadsheets.
## Initializing the Clipboard module
@@ -52,7 +52,7 @@ When `Clipboard` module is enabled (e.g., via `grid.config.clipboard: true`), th
### Usage in other BlockSelection modes
-If the [`BlockSelection`](grid/usage_blockselection.md) module is configured in the `manual` mode, the `Clipboard` module does not automatically receive a range. In this case, you should manually set the range using the [`RangeSelection` API](grid/api/api_overview.md/#rangeselection-api). For this purpose, you need to call `grid.range.setRange({ xStart, xEnd, yStart, yEnd })`.
+If the [`BlockSelection`](grid/usage_blockselection.md) module is configured in the `manual` mode, the `Clipboard` module does not automatically receive a range. In this case, you should manually set the range using the [`RangeSelection` API](grid/api/api_overview.md#rangeselection-api). For this purpose, you need to call `grid.range.setRange({ xStart, xEnd, yStart, yEnd })`.
:::note
Without a set range, copying and pasting will not work, as **Clipboard API** relies on data from the **RangeSelection API**.
@@ -60,10 +60,10 @@ Without a set range, copying and pasting will not work, as **Clipboard API** rel
### Data source for Clipboard
-The **Clipboard API** always uses data from the [`RangeSelection` API](grid/api/api_overview.md/#rangeselection-api) to determine the cells that will be copied or into which data will be pasted.
+The **Clipboard API** always uses data from the [`RangeSelection` API](grid/api/api_overview.md#rangeselection-api) to determine the cells that will be copied or into which data will be pasted.
:::note
-The `cut`/`paste` operations will be blocked in the [*grouping*](grid/usage.md/#grouping-data) mode.
+The `cut`/`paste` operations will be blocked in the [*grouping*](grid/usage.md#grouping-data) mode.
:::
## Interaction between Grids and external widgets
diff --git a/docs/grid/usage_dragpanel.md b/docs/grid/usage_dragpanel.md
index c8a73173..3f536a3c 100644
--- a/docs/grid/usage_dragpanel.md
+++ b/docs/grid/usage_dragpanel.md
@@ -14,9 +14,9 @@ The `DragPanel` module provides auxiliary functionality for moving rows in the *
-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.
+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.
-You can also adjust the appearance and behavior of the `DragPanel` module via the [configuration options](grid/configuration.md/#adjusting-dragpanel-module).
+You can also adjust the appearance and behavior of the `DragPanel` module via the [configuration options](grid/configuration.md#adjusting-dragpanel-module).
## Initializing the DragPanel module
@@ -45,7 +45,7 @@ const grid = new dhx.Grid("grid_container", {
**Related sample**: [Grid (TreeGrid). DragPanel. Initialization](https://snippet.dhtmlx.com/uevdwjuo)
The `dragPanel` property can also be set as an *object* to enable the module and provide additional configuration options.
-Learn about configuration possibilities of the drag panel in the [Configuration](grid/configuration.md/#adjusting-dragpanel-module) guide.
+Learn about configuration possibilities of the drag panel in the [Configuration](grid/configuration.md#adjusting-dragpanel-module) guide.
## Using events of the DragPanel module
diff --git a/docs/grid/usage_history.md b/docs/grid/usage_history.md
index 4c92e757..10d2ccf7 100644
--- a/docs/grid/usage_history.md
+++ b/docs/grid/usage_history.md
@@ -10,7 +10,7 @@ description: You can explore how to work with History module of Grid in the docu
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-You can manage the history of actions in the Grid component via the API of the [`History`](grid/configuration.md/#history-of-grid-actions) module. It allows tracking changes made by the user through the user interface, such as editing cells using the editor, clearing cells, or applying modifications via the handle in the `BlockSelection` mode. The module supports the `undo` and `redo` operations, as well as allows managing the history stack with the ability to limit its size.
+You can manage the history of actions in the Grid component via the API of the [`History`](grid/configuration.md#history-of-grid-actions) module. It allows tracking changes made by the user through the user interface, such as editing cells using the editor, clearing cells, or applying modifications via the handle in the `BlockSelection` mode. The module supports the `undo` and `redo` operations, as well as allows managing the history stack with the ability to limit its size.
## Initializing the History module
@@ -31,7 +31,7 @@ const grid = new dhx.Grid("grid_container", {
~~~
The `history` property can also be set as an *object* to enable the module and provide additional configuration options.
-Learn about configuration possibilities of the `History` module in the [Configuration](grid/configuration.md/#history-of-grid-actions) guide.
+Learn about configuration possibilities of the `History` module in the [Configuration](grid/configuration.md#history-of-grid-actions) guide.
**Related sample:** [Grid. History. Configuration](https://snippet.dhtmlx.com/vznpyeit)
@@ -448,7 +448,7 @@ The `History` module records actions performed through the user interface, inclu
- cells editing: changes made using the cell editor
- cells clearing: clearing the contents of cells using keyboard navigation
-- handle modifications: if the handle is used in the [`BlockSelection` mode](grid/configuration.md/#managing-block-selection-in-grid) and the [`handler`](grid/api/grid_blockselection_config.md/#parameters) function returns an object with the `prev` (the previous cell value) and `current` (the new cell value) fields, these changes are added to the history
+- handle modifications: if the handle is used in the [`BlockSelection` mode](grid/configuration.md#managing-block-selection-in-grid) and the [`handler`](grid/api/grid_blockselection_config.md#parameters) function returns an object with the `prev` (the previous cell value) and `current` (the new cell value) fields, these changes are added to the history
The actions not related to the UI (e.g., programmatic changes via `grid.data`) are not automatically recorded, but can be manually added using the [`add()`](grid/api/history/add_method.md) method.
diff --git a/docs/grid/usage_rangeselection.md b/docs/grid/usage_rangeselection.md
index 74884ed5..24eb19ac 100644
--- a/docs/grid/usage_rangeselection.md
+++ b/docs/grid/usage_rangeselection.md
@@ -10,7 +10,7 @@ description: You can explore how to work with RangeSelection module of Grid in t
This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
:::
-You can manage range selection within a grid via the API of the [`RangeSelection`](grid/configuration.md/#managing-range-selection-in-grid) module. It provides methods for setting and resetting a range of cells, getting information about the current range, and checking whether specific cells belong to the selected range. It also supports an [event system](grid/api/api_overview.md/#rangeselection-events) to track changes.
+You can manage range selection within a grid via the API of the [`RangeSelection`](grid/configuration.md#managing-range-selection-in-grid) module. It provides methods for setting and resetting a range of cells, getting information about the current range, and checking whether specific cells belong to the selected range. It also supports an [event system](grid/api/api_overview.md#rangeselection-events) to track changes.
## Initializing the RangeSelection module
@@ -31,7 +31,7 @@ const grid = new dhx.Grid("grid_container", {
~~~
The `rangeSelection` property can also be set as an *object* to enable the module and provide additional configuration options.
-Learn about configuration possibilities of the `RangeSelection` module in the [Configuration](grid/configuration.md/#managing-range-selection-in-grid) guide.
+Learn about configuration possibilities of the `RangeSelection` module in the [Configuration](grid/configuration.md#managing-range-selection-in-grid) guide.
## Enabling/disabling RangeSelection module
diff --git a/docs/guides/datacollection_guide.md b/docs/guides/datacollection_guide.md
index 61bc5138..6e6811d8 100644
--- a/docs/guides/datacollection_guide.md
+++ b/docs/guides/datacollection_guide.md
@@ -8,12 +8,12 @@ description: You can learn how to work with DataCollection in the documentation
The DHTMLX library includes two invisible components (in other words, helpers) that serve to store data:
-- [DataCollection](data_collection.md/) - stores a non-hierarchical set of data (data for Chart, Combobox, DataView, Grid, List)
-- [TreeCollection](tree_collection.md/) - stores a hierarchical set of data (data for Menu, Ribbon, Sidebar, Toolbar, Tree, Grid in the TreeGrid mode)
+- [DataCollection](/data_collection/) - stores a non-hierarchical set of data (data for Chart, Combobox, DataView, Grid, List)
+- [TreeCollection](/tree_collection/) - stores a hierarchical set of data (data for Menu, Ribbon, Sidebar, Toolbar, Tree, Grid in the TreeGrid mode)
API methods and events of DataCollection and TreeCollection let you work with data items, namely to load, process, and edit the items.
-The helpers allow using the same data set in different components. For instance, you can prepare one data set and load it into DataView, Grid, and List with the help of the [](../data_collection/api/datacollection_load_method.md) method of DataCollection.
+The helpers allow using the same data set in different components. For instance, you can prepare one data set and load it into DataView, Grid, and List with the help of the [](data_collection/api/datacollection_load_method.md) method of DataCollection.
:::info
Please note that if you specify the `id` fields in the data collection, their values should be **unique**. You can also omit the `id` fields in the data collection. In this case they will be generated automatically.
@@ -21,7 +21,7 @@ Please note that if you specify the `id` fields in the data collection, their va
In this article we will consider how to work with DataCollection.
-Check all the methods and events of [Data Collection API](data_collection.md/).
+Check all the methods and events of [Data Collection API](/data_collection/).
## Common features of DataCollection
@@ -68,7 +68,7 @@ The `serialize()` method is used to serialize data into JSON, XML or CSV format.
You can group the data of a component using the `group()` method and remove data groups via the `ungroup()` method. The `isGrouped()` method allows you to check whether a data collection is grouped.
-Check all the [methods](data_collection.md/#methods) of DataCollection.
+Check all the [methods](/data_collection/#methods) of DataCollection.
### DataCollection events
@@ -85,9 +85,9 @@ where:
Events of DataCollection are helpful when you need to configure a system response to the changes made in data.
-Check all the [events](data_collection.md/#events) of DataCollection.
+Check all the [events](/data_collection/#events) of DataCollection.
-Check how to work with events in the [Events basic rules](guides/events_guide.md/) guide.
+Check how to work with events in the [Events basic rules](guides/events_guide.md) guide.
## The DataCollection usage sample
@@ -121,7 +121,7 @@ const list = new dhx.List("list_container", {
});
~~~
-For more information about List initialization check [here](list/initialization.md/).
+For more information about List initialization check [here](list/initialization.md).
As you can see, we've initialized the list but it is still empty. To fill in our list with data we need to take the following steps:
@@ -265,7 +265,7 @@ Please note that if you specify the `id` fields in the data set, their values sh
~~~
-- Then, to load the prepared data into the list we apply the [](../data_collection/api/datacollection_parse_method.md) method of DataCollection:
+- Then, to load the prepared data into the list we apply the [](data_collection/api/datacollection_parse_method.md) method of DataCollection:
~~~jsx
list.data.parse(data);
@@ -273,7 +273,7 @@ list.data.parse(data);
As a result, the list of books is rendered on the page according to the specified template. We took a small part of the list just for a convenience sample, in real-life practice, the list can be very huge.
-Now, let's add a new book to the list. To do that, we need to use the [](../data_collection/api/datacollection_add_method.md) method of DataCollection:
+Now, let's add a new book to the list. To do that, we need to use the [](data_collection/api/datacollection_add_method.md) method of DataCollection:
~~~jsx
list.data.add(
@@ -296,13 +296,13 @@ list.data.add(
Note, that we have added the new item into the list but not into the data set.
-To save the current state of the list we will serialize the component data with the help of the [](../data_collection/api/datacollection_serialize_method.md) method of DataCollection.
+To save the current state of the list we will serialize the component data with the help of the [](data_collection/api/datacollection_serialize_method.md) method of DataCollection.
~~~jsx
const state = list.data.serialize();
~~~
-After that, we can parse the serialized data to the new list. We will use the [](../data_collection/api/datacollection_parse_method.md) method for it.
+After that, we can parse the serialized data to the new list. We will use the [](data_collection/api/datacollection_parse_method.md) method for it.
Do not forget to add a separate container for the new component.
diff --git a/docs/guides/mcp-server.md b/docs/guides/mcp-server.md
index 2c62703a..3b6079fa 100644
--- a/docs/guides/mcp-server.md
+++ b/docs/guides/mcp-server.md
@@ -33,7 +33,7 @@ The MCP server indexes the full DHTMLX Suite documentation across all components
- Loading and managing data using [DataCollection](/data_collection/) across components.
- Handling component events to respond to user interactions, value changes, and data updates.
- Composing multiple components in a shared [Layout](/layout/) with rows, columns, and cells.
-- Exploring [TypeScript support](/common_features/using_typescript/) and integration with [React](/integration/suite_and_react/), [Vue](/integration/suite_and_vue/), [Angular](/integration/suite_and_angular/), and [Svelte](/integration/suite_and_svelte/).
+- Exploring [TypeScript support](common_features/using_typescript.md) and integration with [React](integration/suite_and_react.md), [Vue](integration/suite_and_vue.md), [Angular](integration/suite_and_angular.md), and [Svelte](integration/suite_and_svelte.md).
## How DHTMLX MCP server works
diff --git a/docs/helpers/custom_scroll.md b/docs/helpers/custom_scroll.md
index 25f21259..80a0358d 100644
--- a/docs/helpers/custom_scroll.md
+++ b/docs/helpers/custom_scroll.md
@@ -6,7 +6,7 @@ description: You can have an overview of Custom Scroll in the documentation of t
# Custom scroll
-[Custom Scroll](../../common_features/custom_scroll/) of the DHTMLX library is developed to replace the default browser scrollbars and make your application more attractive for the end users.
+[Custom Scroll](common_features/custom_scroll.md) of the DHTMLX library is developed to replace the default browser scrollbars and make your application more attractive for the end users.
{{pronote The custom scroll is available only in PRO version of the DHTMLX Suite package.}}
diff --git a/docs/helpers/datadrivers.md b/docs/helpers/datadrivers.md
index 8d69d517..aa07bc73 100644
--- a/docs/helpers/datadrivers.md
+++ b/docs/helpers/datadrivers.md
@@ -6,7 +6,7 @@ description: You can explore the DataDrivers helper in the documentation of the
# DataDrivers
-By default, the components of the DHTMLX Suite library operate data in JSON format. But, if necessary, they can also handle data in CSV or XML formats. Using API of [Data Collection](data_collection.md) or [Tree Collection](tree_collection.md) provides an opportunity to parse, load or serialize data of a component in any of the mentioned formats.
+By default, the components of the DHTMLX Suite library operate data in JSON format. But, if necessary, they can also handle data in CSV or XML formats. Using API of [Data Collection](/data_collection/) or [Tree Collection](/tree_collection/) provides an opportunity to parse, load or serialize data of a component in any of the mentioned formats.
However, for further work, you may need to get the same data in different formats, and, in that case, you need to convert the data between them. The best way to do this is to use the **DataDrivers** helper.
@@ -37,7 +37,7 @@ The constructor has one parameter:
- `rowDelimiter` - (*string*) optional, a newline ("\n") by default. A separator between rows, can be a tab - "\t", or any other value
- `nameByHeader` - (*boolean*) optional, if set to *true*, the data from the first line are used as keys of the items; *false* by default
:::note
-Note that the `nameByHeader: true` setting is required when you [create a data driver for parsing CSV data into a grid](/grid/data_loading/#loading-from-local-source)
+Note that the `nameByHeader: true` setting is required when you [create a data driver for parsing CSV data into a grid](grid/data_loading.md#loading-from-local-source)
:::
To convert data of a component (for instance, data of a chart) into a CSV string, use the `serialize()` method, as in:
diff --git a/docs/index.md b/docs/index.md
index 2e17c260..9b9d8b35 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -23,20 +23,20 @@ The DHTMLX Suite UI library comprises 20+ versatile widgets for processing and v
There is a collection of helpers aimed to streamline web development by giving you all the necessary tools to work with data, content, and styles in the DHTMLX Suite library.
-- [AJAX](ajax/)
-- [AwaitRedraw](helpers/await_redraw)
-- [CSS classes of base elements](helpers/base_elements)
-- [CssManager](css_manager/)
-- [DataCollection API](data_collection/)
-- [DataDrivers](helpers/datadrivers)
-- [DataProxy](data_proxy/)
-- [Default Icons](helpers/icon)
-- [Dynamic Loading](helpers/lazydataproxy)
-- [Resizer](helpers/resize_handler)
-- [Selection Object API](selection/)
-- [Themes](themes/)
-- [TreeCollection API](tree_collection/)
-- [Uploader API](uploader/)
+- [AJAX](/ajax/)
+- [AwaitRedraw](helpers/await_redraw.md)
+- [CSS classes of base elements](helpers/base_elements.md)
+- [CssManager](/css_manager/)
+- [DataCollection API](/data_collection/)
+- [DataDrivers](helpers/datadrivers.md)
+- [DataProxy](/data_proxy/)
+- [Default Icons](helpers/icon.md)
+- [Dynamic Loading](helpers/lazydataproxy.md)
+- [Resizer](helpers/resize_handler.md)
+- [Selection Object API](/selection/)
+- [Themes](/themes/)
+- [TreeCollection API](/tree_collection/)
+- [Uploader API](/uploader/)
## How to create DHTMLX-based web applications
@@ -50,13 +50,13 @@ Here you can find best practices in working with DHTMLX Suite widgets and explor
A gallery of live demos provides real-life examples of using DHTMLX widgets in web apps. You can download any demo, view the source code, and try it out in your project. All demos are created with the help of Suite and Optimus.
-- [File manager demo](optimus_guides/filemanager_demo)
-- [UI dashboard demo](optimus_guides/dashboard_demo)
-- [Hotel management demo](optimus_guides/hotel_demo)
-- [Geo tracking demo](optimus_guides/geotracking_demo)
-- [Sales KPI tracking demo](optimus_guides/kpi_demo)
-- [Hospital management demo](optimus_guides/hospital_demo)
-- [Online exam demo](optimus_guides/exam_demo)
+- [File manager demo](optimus_guides/filemanager_demo.md)
+- [UI dashboard demo](optimus_guides/dashboard_demo.md)
+- [Hotel management demo](optimus_guides/hotel_demo.md)
+- [Geo tracking demo](optimus_guides/geotracking_demo.md)
+- [Sales KPI tracking demo](optimus_guides/kpi_demo.md)
+- [Hospital management demo](optimus_guides/hospital_demo.md)
+- [Online exam demo](optimus_guides/exam_demo.md)
### CSS widget templates
@@ -90,10 +90,10 @@ You can access the DHTMLX private **npm** directly in the [Client's Area](https:
Being a fully client-side library, DHTMLX Suite can be used with any backend. There is an example of integrating [DHTMLX Suite widgets with Node.js](https://github.com/DHTMLX/nodejs-suite-demo) in our GitHub repository.
### Touch support
-You can easily create responsive web applications using DHTMLX Suite due to built-in touch support. Check out how UI widgets work on touch devices in the [Touch Support](/common_features/touch_support/) guide.
+You can easily create responsive web applications using DHTMLX Suite due to built-in touch support. Check out how UI widgets work on touch devices in the [Touch Support](common_features/touch_support.md) guide.
### TypeScript support
-The Suite library is equipped with built-in type definitions allowing you to write clean code faster. Browse the [TypeScript Support](/common_features/using_typescript/) guide with code snippets to learn more.
+The Suite library is equipped with built-in type definitions allowing you to write clean code faster. Browse the [TypeScript Support](common_features/using_typescript.md) guide with code snippets to learn more.
### Accessibility
@@ -101,7 +101,7 @@ All DHTMLX widgets are created with accessible design in mind. DHTMLX sticks to
## Release History
-The list of all DHTMLX Suite versions including maintenance, minor, and major releases is available in the ["What's new"](/whatsnew/) section of the documentation. If you are using an older version of DHTMLX Suite than the current one, the [migration guide](/migration/) will instruct you on the changes in the code.
+The list of all DHTMLX Suite versions including maintenance, minor, and major releases is available in the ["What's new"](whatsnew.md) section of the documentation. If you are using an older version of DHTMLX Suite than the current one, the [migration guide](migration.md) will instruct you on the changes in the code.
## Documentation for DHTMLX Suite 5 version
diff --git a/docs/integration/suite_and_backend.md b/docs/integration/suite_and_backend.md
index 2aa762a8..1afbfeb7 100644
--- a/docs/integration/suite_and_backend.md
+++ b/docs/integration/suite_and_backend.md
@@ -10,7 +10,7 @@ description: You can explore how to connect DHTMLX Suite to a backend. Browse de
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.
-The DHTMLX library includes the [DataCollection](/data_collection/) helper that completely supports REST API for dealing with the backend. Thus, to transfer data from your backend to the Suite components, all you need to do is create a valid JSON dataset. You can load it into the component using the [load()](/data_collection/api/datacollection_load_method/) method of DataCollection.
+The DHTMLX library includes the [DataCollection](/data_collection/) helper that completely supports REST API for dealing with the backend. Thus, to transfer data from your backend to the Suite components, all you need to do is create a valid JSON dataset. You can load it into the component using the [load()](data_collection/api/datacollection_load_method.md) method of DataCollection.
diff --git a/docs/layout/api/layout_css_config.md b/docs/layout/api/layout_css_config.md
index 9d6b354f..c331c41a 100644
--- a/docs/layout/api/layout_css_config.md
+++ b/docs/layout/api/layout_css_config.md
@@ -71,4 +71,4 @@ const layout = new dhx.Layout("layout_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/layout/features.md b/docs/layout/features.md
index c10d619d..1a6378be 100644
--- a/docs/layout/features.md
+++ b/docs/layout/features.md
@@ -16,7 +16,7 @@ In this section you can find out how to initialize Layout, how to attach the nec
| Topic | Description |
| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| [Basic initialization](../initialization/) | Learn how to initialize a Layout ([Example](https://snippet.dhtmlx.com/ls3cbcys)) |
+| [Basic initialization](layout/initialization.md) | Learn how to initialize a Layout ([Example](https://snippet.dhtmlx.com/ls3cbcys)) |
| [Attaching widgets](layout/work_with_layout.md#attaching-a-component-to-a-cell) | Learn how to attach a DHTMLX component to a Layout cell or detach it ([Example](https://snippet.dhtmlx.com/6wuxj6sh)) |
### Integration
@@ -24,7 +24,7 @@ In this section you can find out how to initialize Layout, how to attach the nec
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Layout with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Layout with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Layout with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -35,8 +35,8 @@ In this section you will know how to build a horizontal, vertical, or mixed layo
| Topic | Description |
| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Defining Layout structure](../layout_structure/) | Learn how to create a Layout of the necessary structure |
-| [Adding borders to cells ](../cell_configuration/#setting-borders-for-cells) | Learn how to configure the borders or add space between cells in Layout ([Example 1](https://snippet.dhtmlx.com/9ge1a4zx), [Example 2](https://snippet.dhtmlx.com/w00fgl57)) |
+| [Defining Layout structure](layout/layout_structure.md) | Learn how to create a Layout of the necessary structure |
+| [Adding borders to cells ](layout/cell_configuration.md#setting-borders-for-cells) | Learn how to configure the borders or add space between cells in Layout ([Example 1](https://snippet.dhtmlx.com/9ge1a4zx), [Example 2](https://snippet.dhtmlx.com/w00fgl57)) |
## How to configure Layout cells
@@ -44,12 +44,12 @@ In this section you can find out how to configure the size and visibility of cel
| Topic | Description |
| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Making a cell resizable](../cell_configuration/#resizability) | Learn how to configure the ability to change the size of a cell by dragging its borders ([Example](https://snippet.dhtmlx.com/f1f49n35)) |
-| [Making cells hidden](../cell_configuration/#hidden-cell) | Learn how to render a layout with some hidden cells |
-| [Adding the header to a cell](../cell_configuration/#cell-header) | Learn how to add a header for a cell ([Example](https://snippet.dhtmlx.com/bxqnzesl)) |
-| [Configuring content alignment](../api/cell/layout_cell_align_config/) | Learn how to set the alignment of content inside a cell ([Example](https://snippet.dhtmlx.com/4w1033c9)) |
-| [Configuring paddings](../api/cell/layout_cell_padding_config/) | Learn how to configure the distance between a cell and the Layout border ([Example](https://snippet.dhtmlx.com/tk6tpwwv)) |
-| [Initializing a collapsed cell](../cell_configuration/#collapsibility) | Learn how to initialize a collapsed cell and provide the ability to expand it ([Example 1](https://snippet.dhtmlx.com/f1f49n35), [Example 2](https://snippet.dhtmlx.com/r2e0y6n7)) |
+| [Making a cell resizable](layout/cell_configuration.md#resizability) | Learn how to configure the ability to change the size of a cell by dragging its borders ([Example](https://snippet.dhtmlx.com/f1f49n35)) |
+| [Making cells hidden](layout/cell_configuration.md#hidden-cell) | Learn how to render a layout with some hidden cells |
+| [Adding the header to a cell](layout/cell_configuration.md#cell-header) | Learn how to add a header for a cell ([Example](https://snippet.dhtmlx.com/bxqnzesl)) |
+| [Configuring content alignment](layout/api/cell/layout_cell_align_config.md) | Learn how to set the alignment of content inside a cell ([Example](https://snippet.dhtmlx.com/4w1033c9)) |
+| [Configuring paddings](layout/api/cell/layout_cell_padding_config.md) | Learn how to configure the distance between a cell and the Layout border ([Example](https://snippet.dhtmlx.com/tk6tpwwv)) |
+| [Initializing a collapsed cell](layout/cell_configuration.md#collapsibility) | Learn how to initialize a collapsed cell and provide the ability to expand it ([Example 1](https://snippet.dhtmlx.com/f1f49n35), [Example 2](https://snippet.dhtmlx.com/r2e0y6n7)) |
|[Showing a progress bar by default](layout/cell_configuration.md#progress-bar)|Learn how to render the progress bar in a cell in the absence of the component/HTML content in the cell|
## How to configure sizes of Layout cells
@@ -58,9 +58,9 @@ In this section you will learn how to configure sizes of Layout cells and their
| Topic | Description |
| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| [Width and height of a cell](../cell_configuration/#cell-size) | Learn how to configure the width and height of a cell ([Example](https://snippet.dhtmlx.com/miej9gb9)) |
-| [Size of a cell within a row](../api/cell/layout_cell_gravity_config/) | Learn how to define the "weight" of a cell in relation to other cells placed in the same row and within one parent ([Example](https://snippet.dhtmlx.com/1u521djj)) |
-| [Height of the cell's header](../cell_configuration/#height-of-a-header-cell) | Learn how to configure the height of the header of a cell |
+| [Width and height of a cell](layout/cell_configuration.md#cell-size) | Learn how to configure the width and height of a cell ([Example](https://snippet.dhtmlx.com/miej9gb9)) |
+| [Size of a cell within a row](layout/api/cell/layout_cell_gravity_config.md) | Learn how to define the "weight" of a cell in relation to other cells placed in the same row and within one parent ([Example](https://snippet.dhtmlx.com/1u521djj)) |
+| [Height of the cell's header](layout/cell_configuration.md#height-of-a-header-cell) | Learn how to configure the height of the header of a cell |
## How to customize Layout and its cells
@@ -68,10 +68,10 @@ In this section you can learn how to configure the style of Layout and its cells
| Topic | Description |
| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| [Rendering HTML content](../api/cell/layout_cell_html_config/) | Learn how to render HTML content in a cell on Layout initialization ([Example](https://snippet.dhtmlx.com/6x76kgyq)) |
+| [Rendering HTML content](layout/api/cell/layout_cell_html_config.md) | Learn how to render HTML content in a cell on Layout initialization ([Example](https://snippet.dhtmlx.com/6x76kgyq)) |
| [Attaching HTML content](layout/work_with_layout.md#attaching-an-html-content-to-a-cell) | Learn how to attach HTML content into a cell dynamically or detach it |
-| [Styling (custom CSS)](../customization/) | Learn how to apply custom styles to a Layout cell ([Example](https://snippet.dhtmlx.com/pwxmf0lx)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Styling (custom CSS)](layout/customization.md) | Learn how to apply custom styles to a Layout cell ([Example](https://snippet.dhtmlx.com/pwxmf0lx)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Layout cells
@@ -80,12 +80,12 @@ In this section you will learn how to get a cell object, how to add or remove, h
| Topic | Description |
| -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| [Removing a cell](../work_with_layout/#removing-cells) | Learn how to remove a cell from Layout ([Example](https://snippet.dhtmlx.com/tnujp7jk)) |
-| [Iterating over all cells](../api/layout_foreach_method/) | Learn how to iterate over Layout cells ([Example](https://snippet.dhtmlx.com/9hfntqpy)) |
-| [Getting a cell object](../api/layout_getcell_method/) | Learn how to get a configuration object of a particular cell |
-| [Showing/hiding a cell](../work_with_layout/#hidingshowing-a-cell) | Learn how to hide/show a cell ([Example 1](https://snippet.dhtmlx.com/v0q7gq26), [Example](https://snippet.dhtmlx.com/u0jd8ah3)) |
-| [Checking visibility of a cell](../work_with_layout/#checking-visibility-of-a-cell) | Learn how to check whether a Layout cell is visible |
-| [Expanding/collapsing a cell](../work_with_layout/#collapsingexpanding-a-cell) | Learn how to collapse/expand a cell ([Example 1](https://snippet.dhtmlx.com/h0wtlpyk), [Example 2](https://snippet.dhtmlx.com/t38tqk0k)) |
+| [Removing a cell](layout/work_with_layout.md#removing-cells) | Learn how to remove a cell from Layout ([Example](https://snippet.dhtmlx.com/tnujp7jk)) |
+| [Iterating over all cells](layout/api/layout_foreach_method.md) | Learn how to iterate over Layout cells ([Example](https://snippet.dhtmlx.com/9hfntqpy)) |
+| [Getting a cell object](layout/api/layout_getcell_method.md) | Learn how to get a configuration object of a particular cell |
+| [Showing/hiding a cell](layout/work_with_layout.md#hidingshowing-a-cell) | Learn how to hide/show a cell ([Example 1](https://snippet.dhtmlx.com/v0q7gq26), [Example](https://snippet.dhtmlx.com/u0jd8ah3)) |
+| [Checking visibility of a cell](layout/work_with_layout.md#checking-visibility-of-a-cell) | Learn how to check whether a Layout cell is visible |
+| [Expanding/collapsing a cell](layout/work_with_layout.md#collapsingexpanding-a-cell) | Learn how to collapse/expand a cell ([Example 1](https://snippet.dhtmlx.com/h0wtlpyk), [Example 2](https://snippet.dhtmlx.com/t38tqk0k)) |
|[Showing/hiding a progress bar](layout/work_with_layout.md#showinghiding-a-progress-bar)|Learn how to show/hide the progress bar in a Layout container or in a cell ([Example](https://snippet.dhtmlx.com/vzrvf4rm))|
@@ -135,7 +135,7 @@ This section explains how to work with Layout events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../events/) | Learn how to attach, detach, or call the Layout events ([Example](https://snippet.dhtmlx.com/fyxw0map)) |
+| [Event handling](layout/events.md) | Learn how to attach, detach, or call the Layout events ([Example](https://snippet.dhtmlx.com/fyxw0map)) |
## API reference
@@ -145,16 +145,16 @@ In this section you can find out corresponding references of Layout and Layout c
| Topic | Description |
| ------------------------------------------------------ | ----------------------------------- |
-| [Layout methods](../../category/layout-methods/) | Check the list of Layout methods |
-| [Layout events](../../category/layout-events/) | Check the list of Layout events |
-| [Layout properties](../../category/layout-properties/) | Check the list of Layout properties |
+| [Layout methods](/category/layout-methods/) | Check the list of Layout methods |
+| [Layout events](/category/layout-events/) | Check the list of Layout events |
+| [Layout properties](/category/layout-properties/) | Check the list of Layout properties |
### Layout cell API
| Topic | Description |
| ---------------------------------------------------- | --------------------------------------------- |
-| [Layout cell methods](category/layout-cell-methods.md) | Check the list of methods of a Layout cell |
-| [Layout cell properties](category/layout-cell-properties.md) | Check the list of properties of a Layout cell |
+| [Layout cell methods](/category/layout-cell-methods/) | Check the list of methods of a Layout cell |
+| [Layout cell properties](/category/layout-cell-properties/) | Check the list of properties of a Layout cell |
## Common functionality
@@ -162,10 +162,10 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [Custom scroll](../../common_features/custom_scroll/) | Learn how to enable custom scroll in Layout cells |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [Custom scroll](common_features/custom_scroll.md) | Learn how to enable custom scroll in Layout cells |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/layout/index.md b/docs/layout/index.md
index c9690892..740ae6c4 100644
--- a/docs/layout/index.md
+++ b/docs/layout/index.md
@@ -19,7 +19,7 @@ You can check the following page to learn how to build a full-featured DHTMLX La
## API reference
-- [](api/api_overview.md)
+- [](layout/api/api_overview.md)
## Related resources
@@ -30,14 +30,14 @@ You can check the following page to learn how to build a full-featured DHTMLX La
You can read the following articles to find out how to add Layout on the page and work with it.
-- [](initialization.md)
-- [](layout_structure.md)
-- [](layout_patterns.md)
-- [](cell_configuration.md)
-- [](work_with_layout.md)
-- [](customization.md)
-- [](events.md)
+- [](layout/initialization.md)
+- [](layout/layout_structure.md)
+- [](layout/layout_patterns.md)
+- [](layout/cell_configuration.md)
+- [](layout/work_with_layout.md)
+- [](layout/customization.md)
+- [](layout/events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/list/api/api_overview.md b/docs/list/api/api_overview.md
index ae8eeb9f..b4040160 100644
--- a/docs/list/api/api_overview.md
+++ b/docs/list/api/api_overview.md
@@ -19,8 +19,8 @@ description: You can explore the API of List in the documentation of the DHTMLX
| [](list/api/list_setfocus_method.md) | @getshort(list/api/list_setfocus_method.md) |
:::info important
-- Use [the methods of DataCollection](data_collection.md) to work with data.
-- Apply [the methods of Selection](selection.md#methods) to manage the selection of List items.
+- Use [the methods of DataCollection](/data_collection/) to work with data.
+- Apply [the methods of Selection](/selection/#methods) to manage the selection of List items.
:::
## Events
@@ -47,8 +47,8 @@ description: You can explore the API of List in the documentation of the DHTMLX
| [](list/api/list_itemrightclick_event.md) | @getshort(list/api/list_itemrightclick_event.md) |
:::info important
-- Use [the events of DataCollection](data_collection.md#events) to work with data of List.
-- Apply [the events of Selection](selection.md#events) to control the selection of List items.
+- Use [the events of DataCollection](/data_collection/#events) to work with data of List.
+- Apply [the events of Selection](/selection/#events) to control the selection of List items.
:::
## Properties
diff --git a/docs/list/api/list_css_config.md b/docs/list/api/list_css_config.md
index 913c9479..1c7069ed 100644
--- a/docs/list/api/list_css_config.md
+++ b/docs/list/api/list_css_config.md
@@ -46,4 +46,4 @@ const list = new dhx.List("list_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
\ No newline at end of file
+- [Themes](/themes/)
\ No newline at end of file
diff --git a/docs/list/api/list_getfocus_method.md b/docs/list/api/list_getfocus_method.md
index 722262b7..7f03327a 100644
--- a/docs/list/api/list_getfocus_method.md
+++ b/docs/list/api/list_getfocus_method.md
@@ -19,7 +19,7 @@ list.getFocus(); // -> "item_id"
@descr:
:::info
-From v8.0, focusing of items isn't available when [key navigation](list/api/list_keynavigation_config.md) is disabled. Use methods of the [Selection](selection.md#methods) object.
+From v8.0, focusing of items isn't available when [key navigation](list/api/list_keynavigation_config.md) is disabled. Use methods of the [Selection](/selection/#methods) object.
:::
@changelog:
diff --git a/docs/list/api/list_getfocusitem_method.md b/docs/list/api/list_getfocusitem_method.md
index b137319c..50ede7c7 100644
--- a/docs/list/api/list_getfocusitem_method.md
+++ b/docs/list/api/list_getfocusitem_method.md
@@ -18,5 +18,5 @@ const focus = list.getFocusItem();
@descr:
:::info
-From v8.0, focusing of items isn't available when [key navigation](list/api/list_keynavigation_config.md) is disabled. Use methods of the [Selection](selection.md#methods) object.
+From v8.0, focusing of items isn't available when [key navigation](list/api/list_keynavigation_config.md) is disabled. Use methods of the [Selection](/selection/#methods) object.
:::
\ No newline at end of file
diff --git a/docs/list/api/list_htmlenable_config.md b/docs/list/api/list_htmlenable_config.md
index e3e611c4..a4da7466 100644
--- a/docs/list/api/list_htmlenable_config.md
+++ b/docs/list/api/list_htmlenable_config.md
@@ -40,5 +40,5 @@ You can disable rendering of the HTML content and display it as plain text via s
@changelog: added in v7.3
@descr:
-**Related article:** [HTML content of List options](list/configuration.md/#html-content-of-list-options)
+**Related article:** [HTML content of List options](list/configuration.md#html-content-of-list-options)
diff --git a/docs/list/api/list_keynavigation_config.md b/docs/list/api/list_keynavigation_config.md
index de9f6cdf..73bc7407 100644
--- a/docs/list/api/list_keynavigation_config.md
+++ b/docs/list/api/list_keynavigation_config.md
@@ -19,7 +19,7 @@ const list = new dhx.List("list_container", {
@descr:
:::info
-From v8.0, focusing of items isn't available when key navigation is disabled. Use methods of the [Selection](selection.md#methods) object.
+From v8.0, focusing of items isn't available when key navigation is disabled. Use methods of the [Selection](/selection/#methods) object.
:::
[comment]: # (@related: list/configuration.md#arrow-keys-navigation)
diff --git a/docs/list/configuration.md b/docs/list/configuration.md
index 26e03b27..764a6df0 100644
--- a/docs/list/configuration.md
+++ b/docs/list/configuration.md
@@ -255,7 +255,7 @@ const list = new dhx.List("list_container", {
By default, List displays HTML content if it is specified for its options.
-In case you need to disable rendering of HTML content and show it as plain text to keep your application safe, set the [htmlEnable](../../list/api/list_htmlenable_config/) property to *false*.
+In case you need to disable rendering of HTML content and show it as plain text to keep your application safe, set the [htmlEnable](list/api/list_htmlenable_config.md) property to *false*.
~~~js
const list = new dhx.List("list_container", {
diff --git a/docs/list/features.md b/docs/list/features.md
index 9ca3d7cf..1c3c9cde 100644
--- a/docs/list/features.md
+++ b/docs/list/features.md
@@ -16,19 +16,19 @@ In this section you can find out how to initialize List, how to load data into t
| Topic | Description |
| ----------------------------------------------------------- | ---------------------------------------------------------- |
-| [Basic initialization](../initialization/) | Learn how to initialize List |
+| [Basic initialization](list/initialization.md) | Learn how to initialize List |
| [Pagination with List](https://snippet.dhtmlx.com/6sju9jl5) | The example shows how to initialize List inside Pagination |
### Loading data into List
| Topic | Description |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| [Loading data into List](../load_data/) | Read how to load the initial data into List |
+| [Loading data into List](list/load_data.md) | Read how to load the initial data into List |
| [Initialization with config.data](https://snippet.dhtmlx.com/kzg2fza0) | The example shows how to load data into List on the initialization stage |
| [Initialization with data.load()](https://snippet.dhtmlx.com/1it5kfhq) | The example shows how to load data from external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/anj2keoc) | The example shows how to load data from a local data source |
| [Initialization with external DataCollection](https://snippet.dhtmlx.com/20i6vbtj) | The example shows how to load data from external DataCollection |
-| [Rendering a large data set](../configuration/#dynamic-rendering-of-items) | Learn how to enable dynamic loading of data on scrolling the list ([Example](https://snippet.dhtmlx.com/x4gxy38e)) |
+| [Rendering a large data set](list/configuration.md#dynamic-rendering-of-items) | Learn how to enable dynamic loading of data on scrolling the list ([Example](https://snippet.dhtmlx.com/x4gxy38e)) |
| [Lazy loading](https://snippet.dhtmlx.com/list_lazy_loading) | The example shows how to render data dynamically |
### Integration
@@ -36,7 +36,7 @@ In this section you can find out how to initialize List, how to load data into t
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX List with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX List with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX List with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -47,10 +47,10 @@ In this section you will know how to configure the drag-n-drop functionality, ho
| Topic | Description |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| [Configuring drag-n-drop](../configuration/#drag-n-drop-of-items) | Learn how to configure drag-n-drop of items between lists ([Example](https://snippet.dhtmlx.com/yfz6ai7j)) |
-| [Copying items during drag-n-drop](../api/list_dragcopy_config/) | Learn how to copy an item to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/b0dikxzp)) |
-| [Inline editing](../configuration/#editing-items) | Learn how to enable inline editing in List ([Example](https://snippet.dhtmlx.com/f26lfcai)) |
-| [Keyboard navigation](../configuration/#arrow-keys-navigation) | Learn how to enable key navigation in List |
+| [Configuring drag-n-drop](list/configuration.md#drag-n-drop-of-items) | Learn how to configure drag-n-drop of items between lists ([Example](https://snippet.dhtmlx.com/yfz6ai7j)) |
+| [Copying items during drag-n-drop](list/api/list_dragcopy_config.md) | Learn how to copy an item to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/b0dikxzp)) |
+| [Inline editing](list/configuration.md#editing-items) | Learn how to enable inline editing in List ([Example](https://snippet.dhtmlx.com/f26lfcai)) |
+| [Keyboard navigation](list/configuration.md#arrow-keys-navigation) | Learn how to enable key navigation in List |
## How to customize List and change its size
@@ -58,16 +58,16 @@ In this section you can learn how to configure the height and style of List and
| Topic | Description |
| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Height of List](../configuration/#height-of-the-list) | Learn how to set the height for List ([Example](https://snippet.dhtmlx.com/k2mj2sz7)) |
-| [Height of a List item](../configuration/#height-of-an-item) | Learn how to set the height for List items ([Example](https://snippet.dhtmlx.com/89buovn2)) |
-| [Setting template for rendering items](../configuration/#template-for-list-items) | Learn how [to define a template](../configuration/#template-for-list-items) for rendering items in List ([Example](https://snippet.dhtmlx.com/gtzdwpj4)) and add [event handlers](../configuration/#event-handlers-for-the-template) to HTML elements of the template ([Example](https://snippet.dhtmlx.com/7fyilbb7)) |
-| [Rendering HTML content](../configuration/#html-content-of-list-options) | Learn how to display HTML content as plain text to prevent XSS attacks ([Example](https://snippet.dhtmlx.com/tj0tn7fl)) |
-| [Styling List](../customization/#styling) | Learn how to customize List ([Example](https://snippet.dhtmlx.com/s461f09w)) |
-| [Styling selected List items](../customization/#adding-custom-selection) | Learn how to add custom style to the selected items ([Example](https://snippet.dhtmlx.com/6hss19d3)) |
-| [Styling List items](../customization/#styling-items) | Learn how to customize List items ([Example](https://snippet.dhtmlx.com/ipu9yshl)) |
+| [Height of List](list/configuration.md#height-of-the-list) | Learn how to set the height for List ([Example](https://snippet.dhtmlx.com/k2mj2sz7)) |
+| [Height of a List item](list/configuration.md#height-of-an-item) | Learn how to set the height for List items ([Example](https://snippet.dhtmlx.com/89buovn2)) |
+| [Setting template for rendering items](list/configuration.md#template-for-list-items) | Learn how [to define a template](list/configuration.md#template-for-list-items) for rendering items in List ([Example](https://snippet.dhtmlx.com/gtzdwpj4)) and add [event handlers](list/configuration.md#event-handlers-for-the-template) to HTML elements of the template ([Example](https://snippet.dhtmlx.com/7fyilbb7)) |
+| [Rendering HTML content](list/configuration.md#html-content-of-list-options) | Learn how to display HTML content as plain text to prevent XSS attacks ([Example](https://snippet.dhtmlx.com/tj0tn7fl)) |
+| [Styling List](list/customization.md#styling) | Learn how to customize List ([Example](https://snippet.dhtmlx.com/s461f09w)) |
+| [Styling selected List items](list/customization.md#adding-custom-selection) | Learn how to add custom style to the selected items ([Example](https://snippet.dhtmlx.com/6hss19d3)) |
+| [Styling List items](list/customization.md#styling-items) | Learn how to customize List items ([Example](https://snippet.dhtmlx.com/ipu9yshl)) |
| [CSS template A](https://snippet.dhtmlx.com/list_template_a) | The example of a CSS template for DHTMLX List |
| [CSS template B](https://snippet.dhtmlx.com/list_template_b) | The example of a CSS template for DHTMLX List |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with data in List
@@ -79,11 +79,11 @@ In this section you may study how to add new data items into List, how to edit,
| Topic | Description |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| [Editing items](../work_with_list/#updating-list-items) | Learn how to update List items using Form ([Example](https://snippet.dhtmlx.com/6jpn7a6h)) |
-| [Adding new items](../work_with_list/#adding-items-into-list) | Learn how to add new items into List using Form ([Example](https://snippet.dhtmlx.com/f7cbdiqg)) |
-| [Updating an item](../work_with_list/#updating-list-items) | Learn how to update data of an item ([Example](https://snippet.dhtmlx.com/6jpn7a6h)) |
-| [Removing items](../work_with_list/#removing-items-from-list) | Learn how to remove items from List ([Example](https://snippet.dhtmlx.com/wmozu18g)) |
-| [DataCollection API](../../data_collection/) | Check the list of all available DataCollection API|
+| [Editing items](list/work_with_list.md#updating-list-items) | Learn how to update List items using Form ([Example](https://snippet.dhtmlx.com/6jpn7a6h)) |
+| [Adding new items](list/work_with_list.md#adding-items-into-list) | Learn how to add new items into List using Form ([Example](https://snippet.dhtmlx.com/f7cbdiqg)) |
+| [Updating an item](list/work_with_list.md#updating-list-items) | Learn how to update data of an item ([Example](https://snippet.dhtmlx.com/6jpn7a6h)) |
+| [Removing items](list/work_with_list.md#removing-items-from-list) | Learn how to remove items from List ([Example](https://snippet.dhtmlx.com/wmozu18g)) |
+| [DataCollection API](/data_collection/) | Check the list of all available DataCollection API|
### How to sort and filter data
@@ -91,8 +91,8 @@ In this section you may study how to sort and filter data in List.
| Topic | Description |
| --------------------------------------------------------- | --------------------------------------------------------------------------------- |
-| [Filtering items](../work_with_list/#filtering-list-data) | Learn how to filter data in List ([Example](https://snippet.dhtmlx.com/k8kvmy8v)) |
-| [Sorting items](../work_with_list/#sorting-list-data) | Learn how to sort data in List ([Example](https://snippet.dhtmlx.com/876meu9a)) |
+| [Filtering items](list/work_with_list.md#filtering-list-data) | Learn how to filter data in List ([Example](https://snippet.dhtmlx.com/k8kvmy8v)) |
+| [Sorting items](list/work_with_list.md#sorting-list-data) | Learn how to sort data in List ([Example](https://snippet.dhtmlx.com/876meu9a)) |
## How to work with selection
@@ -101,12 +101,12 @@ In this section you may study how to work with selection functionality.
| Topic | Description |
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Enabling/disabling selection](../configuration/#selection-of-items) | Learn how to enable/disable selection on List initialization ([Example](https://snippet.dhtmlx.com/dk4czs1z)) |
-| [Enabling/disabling multiselection](../configuration/#multiple-selection-of-items) | Learn how to enable/disable selection of multiple items ([Example](https://snippet.dhtmlx.com/0sorkczm)) |
-| [Enabling/disabling selection](../usage_selection/#enablingdisabling-selection-object) | Learn how to enable/disable the ability to select items via the selection object |
-| [Setting selection](../usage_selection/#selecting-an-item) | Learn how to select a particular item or all items ([Example](https://snippet.dhtmlx.com/io8oxxg2)) |
-| Getting selection | Learn how to get the [id](../usage_selection/#getting-id-of-a-selected-item) or [an object](../usage_selection/#getting-object-of-a-selected-item) of a selected item ([Example](https://snippet.dhtmlx.com/elonnovx)) |
-| [Removing selection](../usage_selection/#unselecting-an-item) | Learn how to remove selection from a selected item(s) |
+| [Enabling/disabling selection](list/configuration.md#selection-of-items) | Learn how to enable/disable selection on List initialization ([Example](https://snippet.dhtmlx.com/dk4czs1z)) |
+| [Enabling/disabling multiselection](list/configuration.md#multiple-selection-of-items) | Learn how to enable/disable selection of multiple items ([Example](https://snippet.dhtmlx.com/0sorkczm)) |
+| [Enabling/disabling selection](list/usage_selection.md#enablingdisabling-selection-object) | Learn how to enable/disable the ability to select items via the selection object |
+| [Setting selection](list/usage_selection.md#selecting-an-item) | Learn how to select a particular item or all items ([Example](https://snippet.dhtmlx.com/io8oxxg2)) |
+| Getting selection | Learn how to get the [id](list/usage_selection.md#getting-id-of-a-selected-item) or [an object](list/usage_selection.md#getting-object-of-a-selected-item) of a selected item ([Example](https://snippet.dhtmlx.com/elonnovx)) |
+| [Removing selection](list/usage_selection.md#unselecting-an-item) | Learn how to remove selection from a selected item(s) |
## How to work with item in focus
@@ -115,8 +115,8 @@ In this section you will learn how to set focus on an item and get the id/object
| Topic | Description |
| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| [Setting focus on item](../api/list_setfocus_method/) | Learn how to set focus on an item ([Example](https://snippet.dhtmlx.com/ermcjx3d)) |
-| Getting an item in focus | Learn how to get the [id](../api/list_getfocus_method/) or an [object](../api/list_getfocusitem_method/) of an item in focus |
+| [Setting focus on item](list/api/list_setfocus_method.md) | Learn how to set focus on an item ([Example](https://snippet.dhtmlx.com/ermcjx3d)) |
+| Getting an item in focus | Learn how to get the [id](list/api/list_getfocus_method.md) or an [object](list/api/list_getfocusitem_method.md) of an item in focus |
## How to work with List events
@@ -125,7 +125,7 @@ This section explains how to work with List events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../events/) | Learn how to attach, detach, or call the List events ([Example](https://snippet.dhtmlx.com/iwt1yd61)) |
+| [Event handling](list/events.md) | Learn how to attach, detach, or call the List events ([Example](https://snippet.dhtmlx.com/iwt1yd61)) |
## API reference
@@ -133,10 +133,10 @@ In this section you can find out corresponding references of List API.
| Topic | Description |
| -------------------------------------------------- | ------------------------------------------------------ |
-| [List methods](../../category/list-methods/) | Check the list of List methods |
-| [List events](../../category/list-events/) | Check the list of List events |
-| [List properties](../../category/list-properties/) | Check the list of List properties |
-| [DataCollection API](../../data_collection/) | Check the API of DataCollection to work with List data |
+| [List methods](/category/list-methods/) | Check the list of List methods |
+| [List events](/category/list-events/) | Check the list of List events |
+| [List properties](/category/list-properties/) | Check the list of List properties |
+| [DataCollection API](/data_collection/) | Check the API of DataCollection to work with List data |
## Common functionality
@@ -145,10 +145,10 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [Custom scroll](../../common_features/custom_scroll/) | Learn how to use custom scroll in List |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [Custom scroll](common_features/custom_scroll.md) | Learn how to use custom scroll in List |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/list/index.md b/docs/list/index.md
index 25c0f66f..198b9df7 100644
--- a/docs/list/index.md
+++ b/docs/list/index.md
@@ -19,24 +19,24 @@ You can check the following page to learn how to build a full-featured DHTMLX Li
## API reference
-- [](api/api_overview.md)
+- [](list/api/api_overview.md)
## Related resources
- You can get DHTMLX List as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX List](https://snippet.dhtmlx.com/0sorkczm?tag=list)
-- To work with data of List check [DataCollection API](data_collection.md)
+- To work with data of List check [DataCollection API](/data_collection/)
## Guides
-- [](initialization.md)
-- [](configuration.md)
-- [](load_data.md)
-- [](work_with_list.md)
-- [](usage_selection.md)
-- [](customization.md)
-- [](events.md)
+- [](list/initialization.md)
+- [](list/configuration.md)
+- [](list/load_data.md)
+- [](list/work_with_list.md)
+- [](list/usage_selection.md)
+- [](list/customization.md)
+- [](list/events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/list/initialization.md b/docs/list/initialization.md
index 3ece0c48..bf992166 100644
--- a/docs/list/initialization.md
+++ b/docs/list/initialization.md
@@ -75,9 +75,9 @@ const list = new dhx.List("list_container", {
~~~
:::info
-To display data in List you should define a [template](list/configuration.md/#template-for-list-items) via the [template](list/api/list_template_config.md/) configuration property.
+To display data in List you should define a [template](list/configuration.md#template-for-list-items) via the [template](list/api/list_template_config.md) configuration property.
-Another way to display data in List is to prepare a data set with the ["value"](list/load_data.md/#preparing-data-set) attribute.
+Another way to display data in List is to prepare a data set with the ["value"](list/load_data.md#preparing-data-set) attribute.
:::
### Configuration properties
diff --git a/docs/list/load_data.md b/docs/list/load_data.md
index 94ea4db7..5b3203ee 100644
--- a/docs/list/load_data.md
+++ b/docs/list/load_data.md
@@ -59,7 +59,7 @@ There are two ways to load data into Grid after its initialization:
### External data loading
-To load data from an external file, make use of the **load()** method of [DataCollection](data_collection.md). It takes the URL of the file with data as a parameter:
+To load data from an external file, make use of the **load()** method of [DataCollection](/data_collection/). It takes the URL of the file with data as a parameter:
~~~js
const list = new dhx.List("list_container", {
@@ -83,7 +83,7 @@ list.data.load("/some/data").then(function(){
### Loading from local source
-To load data from a local data source, use the **parse()** method of [DataCollection](data_collection.md). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
+To load data from a local data source, use the **parse()** method of [DataCollection](/data_collection/). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
~~~js
const list = new dhx.List("list_container", {
@@ -97,7 +97,7 @@ list.data.parse(dataset);
## Saving and restoring state
-To save the current state of a list, use the **serialize()** method of [DataCollection](data_collection.md). It converts the data of a list into an array of JSON objects.
+To save the current state of a list, use the **serialize()** method of [DataCollection](/data_collection/). It converts the data of a list into an array of JSON objects.
Each JSON object contains a set of *key:value* pairs that represent attributes of List items.
~~~js
diff --git a/docs/list/usage_selection.md b/docs/list/usage_selection.md
index d73fadde..311df0a4 100644
--- a/docs/list/usage_selection.md
+++ b/docs/list/usage_selection.md
@@ -10,13 +10,13 @@ You can manipulate with List items via the API of the **selection** object. It i
## Enabling/Disabling Selection object
-Starting from v7.0, you can activate selection of items via the [](../selection/api/selection_enable_method.md) method of the selection object.
+Starting from v7.0, you can activate selection of items via the [](selection/api/selection_enable_method.md) method of the selection object.
~~~js
list.selection.enable();
~~~
-To disable selection of items in List, make use of the [](../selection/api/selection_disable_method.md) method of the selection object:
+To disable selection of items in List, make use of the [](selection/api/selection_disable_method.md) method of the selection object:
~~~js
list.selection.disable();
@@ -24,7 +24,7 @@ list.selection.disable();
**Related sample**: [List. Disable / enable selection](https://snippet.dhtmlx.com/i4zj985o)
-{{note To make the process of working with the selection of items more flexible, you can apply the [related](selection.md#events) events of the Selection object.}}
+{{note To make the process of working with the selection of items more flexible, you can apply the [related](/selection/#events) events of the Selection object.}}
## Selecting an item
diff --git a/docs/list/work_with_list.md b/docs/list/work_with_list.md
index 4eb6dd24..871d4328 100644
--- a/docs/list/work_with_list.md
+++ b/docs/list/work_with_list.md
@@ -38,11 +38,11 @@ For information on disabling/enabling selection of an item, read [Enabling/Disab
## Using Data Collection API
-You can manipulate List items with the help of the [Data Collection API](data_collection.md).
+You can manipulate List items with the help of the [Data Collection API](/data_collection/).
### Adding items into List
-It is possible to add more items into the initialized List on the fly. Use the [add()](../../data_collection/api/datacollection_add_method/) method of Data Collection. It takes two parameters:
+It is possible to add more items into the initialized List on the fly. Use the [add()](data_collection/api/datacollection_add_method.md) method of Data Collection. It takes two parameters:
@@ -66,7 +66,7 @@ list.data.add({value:"New item"},1);
### Updating List items
-You can change config options of the item via the [update()](../../data_collection/api/datacollection_update_method/) method of Data Collection. It takes two parameters:
+You can change config options of the item via the [update()](data_collection/api/datacollection_update_method.md) method of Data Collection. It takes two parameters:
@@ -93,13 +93,13 @@ list.data.update("option_id",{
### Removing items from List
-To remove an item, make use of the [remove()](../../data_collection/api/datacollection_remove_method/) method of Data Collection. Pass the id of the item that should be removed to the method:
+To remove an item, make use of the [remove()](data_collection/api/datacollection_remove_method.md) method of Data Collection. Pass the id of the item that should be removed to the method:
~~~js
list.data.remove("option_id");
~~~
-To remove all items at once, use the [removeAll()](../../data_collection/api/datacollection_removeall_method/) method of DataCollection:
+To remove all items at once, use the [removeAll()](data_collection/api/datacollection_removeall_method.md) method of DataCollection:
~~~js
list.data.removeAll();
@@ -109,9 +109,9 @@ list.data.removeAll();
### Filtering List data
-You can filter List data by the specified criteria with the help of the [filter()](../../data_collection/api/datacollection_filter_method/) method of Data Collection.
+You can filter List data by the specified criteria with the help of the [filter()](data_collection/api/datacollection_filter_method.md) method of Data Collection.
-Check all details on the parameters of the method in the [Data Collection API](data_collection.md).
+Check all details on the parameters of the method in the [Data Collection API](/data_collection/).
~~~js
list.data.filter({
@@ -127,9 +127,9 @@ Filtering can be applied to any attribute of a data item.
### Sorting List data
-It is possible to sort data in List via the [sort()](../../data_collection/api/datacollection_sort_method/) method of Data Collection.
+It is possible to sort data in List via the [sort()](data_collection/api/datacollection_sort_method.md) method of Data Collection.
-Check all details on the parameters of the method in the [Data Collection API](data_collection.md).
+Check all details on the parameters of the method in the [Data Collection API](/data_collection/).
~~~js
list.data.sort({
diff --git a/docs/menu/api/api_overview.md b/docs/menu/api/api_overview.md
index 5e7db919..f554f08c 100644
--- a/docs/menu/api/api_overview.md
+++ b/docs/menu/api/api_overview.md
@@ -24,7 +24,7 @@ description: You can explore the API of Menu in the documentation of the DHTMLX
| [](menu/api/menu_unselect_method.md) | @getshort(menu/api/menu_unselect_method.md) |
:::info important
-Use [TreeCollection methods](tree_collection.md) to work with data.
+Use [TreeCollection methods](/tree_collection/) to work with data.
:::
## Menu events
@@ -38,7 +38,7 @@ Use [TreeCollection methods](tree_collection.md) to work with data.
| [](menu/api/menu_openmenu_event.md) | @getshort(menu/api/menu_openmenu_event.md) |
:::info important
-Use [TreeCollection events](tree_collection.md#events) to work with data.
+Use [TreeCollection events](/tree_collection/#events) to work with data.
:::
## Menu properties
diff --git a/docs/menu/api/menu_css_config.md b/docs/menu/api/menu_css_config.md
index 2c96ae27..d8bc49ad 100644
--- a/docs/menu/api/menu_css_config.md
+++ b/docs/menu/api/menu_css_config.md
@@ -50,4 +50,4 @@ const menu = new dhx.Menu("menu_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
\ No newline at end of file
+- [Themes](/themes/)
\ No newline at end of file
diff --git a/docs/menu/configuring_menu_items.md b/docs/menu/configuring_menu_items.md
index e3bb5fb8..80052a5b 100644
--- a/docs/menu/configuring_menu_items.md
+++ b/docs/menu/configuring_menu_items.md
@@ -8,7 +8,7 @@ description: You can explore the list of Menu controls of Menu in the documentat
In this article you'll find the controls you can use in DHTMLX Menu. Their descriptions contain lists of attributes and examples of adding the controls into Menu on the fly.
-To operate Menu controls, you can use Menu API and [Tree Collection API](tree_collection.md). Check the [related article](menu/work_with_menu.md).
+To operate Menu controls, you can use Menu API and [Tree Collection API](/tree_collection/). Check the [related article](menu/work_with_menu.md).
## MenuItem
@@ -45,7 +45,7 @@ This is an item that contains any custom HTML content (for example, an image, ic
### Adding Custom HTML
-Any custom HTML content can be easily added to a menu with the help of the **add()** method of [Tree Collection](tree_collection.md):
+Any custom HTML content can be easily added to a menu with the help of the **add()** method of [Tree Collection](/tree_collection/):
~~~js
menu.data.add({
diff --git a/docs/menu/features.md b/docs/menu/features.md
index a7b900d1..73d3775b 100644
--- a/docs/menu/features.md
+++ b/docs/menu/features.md
@@ -16,14 +16,14 @@ In this section you can find out how to initialize Menu, how to add controls ins
| Topic | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------- |
-| [Basic initialization](../how_to_start/) | Learn how to initialize a Menu |
+| [Basic initialization](menu/how_to_start.md) | Learn how to initialize a Menu |
### Loading data into Menu
| Topic | Description |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| [Loading data into Menu](../data_loading/) | Read how to load the initial data into Menu |
+| [Loading data into Menu](menu/data_loading.md) | Read how to load the initial data into Menu |
| [Initialization with config.data](https://snippet.dhtmlx.com/cg62qa9v) | The example shows how to load data into Menu on the initialization stage |
| [Initialization with data.load()](https://snippet.dhtmlx.com/wjqno7xq) | The example shows how to load data from external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/8y2b1zqm) | The example shows how to load data from a local data source |
@@ -34,17 +34,17 @@ In this section you can find out how to initialize Menu, how to add controls ins
| Topic | Description |
| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Initialization of Context Menu](../creating_context_menu/) | Learn how to initialize and show DHTMLX Context Menu on the page ([Example 1](https://snippet.dhtmlx.com/mgya9p1l), [Example 2](https://snippet.dhtmlx.com/9xfpymlg)) |
+| [Initialization of Context Menu](menu/creating_context_menu.md) | Learn how to initialize and show DHTMLX Context Menu on the page ([Example 1](https://snippet.dhtmlx.com/mgya9p1l), [Example 2](https://snippet.dhtmlx.com/9xfpymlg)) |
### Menu controls
| Topic | Description |
| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| [MenuItem](../configuring_menu_items/) | Learn how to add a MenuItem control into the menu ([Example](https://snippet.dhtmlx.com/qkxeer2h)) |
-| [Custom HTML](../configuring_menu_items/#custom-html) | Learn how to add an item with custom HTML content into the menu ([Example](https://snippet.dhtmlx.com/nk65jfmx)) |
-| [Spacer](../configuring_menu_items/#spacer) | Learn how to add a Spacer control into the menu ([Example](https://snippet.dhtmlx.com/fjaolual)) |
-| [Separator](../configuring_menu_items/#separator) | Learn how to add a Separator control into the menu ([Example](https://snippet.dhtmlx.com/71tybx5j)) |
+| [MenuItem](menu/configuring_menu_items.md) | Learn how to add a MenuItem control into the menu ([Example](https://snippet.dhtmlx.com/qkxeer2h)) |
+| [Custom HTML](menu/configuring_menu_items.md#custom-html) | Learn how to add an item with custom HTML content into the menu ([Example](https://snippet.dhtmlx.com/nk65jfmx)) |
+| [Spacer](menu/configuring_menu_items.md#spacer) | Learn how to add a Spacer control into the menu ([Example](https://snippet.dhtmlx.com/fjaolual)) |
+| [Separator](menu/configuring_menu_items.md#separator) | Learn how to add a Separator control into the menu ([Example](https://snippet.dhtmlx.com/71tybx5j)) |
### Integration
@@ -52,7 +52,7 @@ In this section you can find out how to initialize Menu, how to add controls ins
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Menu with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Menu with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Menu with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -64,11 +64,11 @@ In this section you can learn how to configure the style of Menu and its control
| Topic | Description |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| [Configuring type of navigation](../api/menu_navigationtype_config/) | Learn how to configure the action that opens menu options (click or pointer) ([Example](https://snippet.dhtmlx.com/uhv64cm7)) |
-| [Adding HTML content into items](../configuring_menu_items/) | Learn how to add a custom image into the menu item ([Example](https://snippet.dhtmlx.com/2hr77egx)) |
-| [Applying custom icons](../customization/#icons) | Learn how to add custom icons to Menu items ([Example](https://snippet.dhtmlx.com/nkmz6ilv)) |
-| [Styling Menu](../customization/#styling) | Learn how to customize Menu ([Example](https://snippet.dhtmlx.com/kfy2th5n)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Configuring type of navigation](menu/api/menu_navigationtype_config.md) | Learn how to configure the action that opens menu options (click or pointer) ([Example](https://snippet.dhtmlx.com/uhv64cm7)) |
+| [Adding HTML content into items](menu/configuring_menu_items.md) | Learn how to add a custom image into the menu item ([Example](https://snippet.dhtmlx.com/2hr77egx)) |
+| [Applying custom icons](menu/customization.md#icons) | Learn how to add custom icons to Menu items ([Example](https://snippet.dhtmlx.com/nkmz6ilv)) |
+| [Styling Menu](menu/customization.md#styling) | Learn how to customize Menu ([Example](https://snippet.dhtmlx.com/kfy2th5n)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with data in Menu
@@ -76,12 +76,12 @@ This section will tell you how to use [TreeCollection API](guides/datacollection
| Topic | Description |
| --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Adding](../work_with_menu/#adding-menu-items) / [removing items](../work_with_menu/#removing-menu-items) | Learn how to add and remove items in Menu ([Example](https://snippet.dhtmlx.com/nood4bfx)) |
-| [Updating an item](../../tree_collection/api/treecollection_update_method/) | Learn how to update items in Menu ([Example](https://snippet.dhtmlx.com/321il6oc)) |
-| Setting item's configuration | Learn how to [set a text label for menu item](../work_with_menu/#setting-item-text) or [add a shortcut to a menu option](../work_with_menu/#setting-item-hotkey) |
-| [Rearranging items](../work_with_menu/#rearranging-menu-items) | Learn how to move menu items to another position |
-| [Iterating items](../work_with_menu/#iterating-menu-items) | Learn how to apply the necessary logic to all (or some) menu items |
-| [TreeCollection API](../../tree_collection/) | Check the list of all available TreeCollection API|
+| [Adding](menu/work_with_menu.md#adding-menu-items) / [removing items](menu/work_with_menu.md#removing-menu-items) | Learn how to add and remove items in Menu ([Example](https://snippet.dhtmlx.com/nood4bfx)) |
+| [Updating an item](tree_collection/api/treecollection_update_method.md) | Learn how to update items in Menu ([Example](https://snippet.dhtmlx.com/321il6oc)) |
+| Setting item's configuration | Learn how to [set a text label for menu item](menu/work_with_menu.md#setting-item-text) or [add a shortcut to a menu option](menu/work_with_menu.md#setting-item-hotkey) |
+| [Rearranging items](menu/work_with_menu.md#rearranging-menu-items) | Learn how to move menu items to another position |
+| [Iterating items](menu/work_with_menu.md#iterating-menu-items) | Learn how to apply the necessary logic to all (or some) menu items |
+| [TreeCollection API](/tree_collection/) | Check the list of all available TreeCollection API|
## How to work with Menu items
@@ -89,9 +89,9 @@ In this section you may study how to hide and show, enable and disable Menu item
| Topic | Description |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
-| [Enabling / disabling items](../work_with_menu/#disablingenabling-menu-options) | Learn how to disable and enable menu items ([Example](https://snippet.dhtmlx.com/zuoam7r7)) |
-| [Is disabled](../work_with_menu/#checking-if-a-menu-option-is-disabled) | Learn how to check whether a menu item is disabled |
-| [Showing / hiding items](../work_with_menu/#hidingshowing-menu-options) | Learn how to hide and show menu items ([Example](https://snippet.dhtmlx.com/a9vbhxgd)) |
+| [Enabling / disabling items](menu/work_with_menu.md#disablingenabling-menu-options) | Learn how to disable and enable menu items ([Example](https://snippet.dhtmlx.com/zuoam7r7)) |
+| [Is disabled](menu/work_with_menu.md#checking-if-a-menu-option-is-disabled) | Learn how to check whether a menu item is disabled |
+| [Showing / hiding items](menu/work_with_menu.md#hidingshowing-menu-options) | Learn how to hide and show menu items ([Example](https://snippet.dhtmlx.com/a9vbhxgd)) |
## How to work with selection
@@ -99,10 +99,10 @@ In this section you will find the ways of work with selection functionality.
| Topic | Description |
| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| [Setting selection](../work_with_menu/#selectingunselecting-an-item) | Learn how to select a particular item ([Example](https://snippet.dhtmlx.com/9qqah8ex)) |
-| [Is selected](../work_with_menu/#checking-if-a-menu-item-is-selected) | Learn how to check whether a menu item is selected |
-| [Getting selected items](../work_with_menu/#getting-selected-items) | Learn how to get the selected items |
-| [Removing selection](../work_with_menu/#selectingunselecting-an-item) | Learn how to remove selection from a selected item |
+| [Setting selection](menu/work_with_menu.md#selectingunselecting-an-item) | Learn how to select a particular item ([Example](https://snippet.dhtmlx.com/9qqah8ex)) |
+| [Is selected](menu/work_with_menu.md#checking-if-a-menu-item-is-selected) | Learn how to check whether a menu item is selected |
+| [Getting selected items](menu/work_with_menu.md#getting-selected-items) | Learn how to get the selected items |
+| [Removing selection](menu/work_with_menu.md#selectingunselecting-an-item) | Learn how to remove selection from a selected item |
## How to work with Menu events
@@ -111,7 +111,7 @@ This section explains how to work with Menu events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Menu events ([Example](https://snippet.dhtmlx.com/yjt39a4k)) |
+| [Event handling](menu/handling_events.md) | Learn how to attach, detach, or call the Menu events ([Example](https://snippet.dhtmlx.com/yjt39a4k)) |
## API reference
@@ -119,14 +119,14 @@ In this section you can find out corresponding references of Menu and Menu contr
| Topic | Description |
| ----------------------------------------------------------- | ------------------------------------------------------- |
-| [Menu methods](../../category/menu-methods/) | Check the list of Menu methods |
-| [Menu events](../../category/menu-events/) | Check the list of Menu events |
-| [Menu properties](../../category/menu-properties/) | Check the list of Menu properties |
-| [MenuItem properties](../api/api_menuitem_properties/) | Check the list of properties of the MenuItem control |
-| [Custom HTML properties](../api/api_customhtml_properties/) | Check the list of properties of the Custom HTML control |
-| [Separator properties](../api/api_separator_properties/) | Check the list of properties of the Separator control |
-| [Spacer properties](../api/api_spacer_properties/) | Check the list of properties of the Spacer control |
-| [TreeCollection API](../../tree_collection/) | Check the API of TreeCollection to work with Menu data |
+| [Menu methods](/category/menu-methods/) | Check the list of Menu methods |
+| [Menu events](/category/menu-events/) | Check the list of Menu events |
+| [Menu properties](/category/menu-properties/) | Check the list of Menu properties |
+| [MenuItem properties](menu/api/api_menuitem_properties.md) | Check the list of properties of the MenuItem control |
+| [Custom HTML properties](menu/api/api_customhtml_properties.md) | Check the list of properties of the Custom HTML control |
+| [Separator properties](menu/api/api_separator_properties.md) | Check the list of properties of the Separator control |
+| [Spacer properties](menu/api/api_spacer_properties.md) | Check the list of properties of the Spacer control |
+| [TreeCollection API](/tree_collection/) | Check the API of TreeCollection to work with Menu data |
## Common functionality
@@ -135,9 +135,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/menu/index.md b/docs/menu/index.md
index 30a95b87..464b8c2b 100644
--- a/docs/menu/index.md
+++ b/docs/menu/index.md
@@ -24,7 +24,7 @@ You can check the following page to learn how to build a full-featured DHTMLX Me
- You can get DHTMLX Menu as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX Menu](https://snippet.dhtmlx.com/nk65jfmx?tag=menu)
-- To work with data of Menu check [TreeCollection API](tree_collection.md)
+- To work with data of Menu check [TreeCollection API](/tree_collection/)
## Guides
diff --git a/docs/menu/work_with_menu.md b/docs/menu/work_with_menu.md
index d9f6434e..2021f700 100644
--- a/docs/menu/work_with_menu.md
+++ b/docs/menu/work_with_menu.md
@@ -150,7 +150,7 @@ menu.getSelected(); // -> ["selected_1", "selected_1.1"]
## Using Tree collection API
-You can manipulate the controls of Menu with the help of the [Tree collection API](tree_collection.md).
+You can manipulate the controls of Menu with the help of the [Tree collection API](/tree_collection/).
### Adding menu items
@@ -240,4 +240,4 @@ menu.data.removeAll();
menu.data.parse(new_options);
~~~
-{{note Check the full list of [Tree collection API](tree_collection.md).}}
+{{note Check the full list of [Tree collection API](/tree_collection/).}}
diff --git a/docs/message/features.md b/docs/message/features.md
index 3dbb8b43..94950daf 100644
--- a/docs/message/features.md
+++ b/docs/message/features.md
@@ -16,7 +16,7 @@ In this section you can find out how to initialize and show different types of M
| Topic | Description |
| -------------------------------------------- | ------------------------------------------ |
-| [Basic initialization](../creating_message/) | Read how to initialize a message on a page |
+| [Basic initialization](message/creating_message.md) | Read how to initialize a message on a page |
### Types of DHTMLX Message
@@ -33,7 +33,7 @@ In this section you can find out how to initialize and show different types of M
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Message with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Message with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Message with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -44,10 +44,10 @@ In this section you will find the examples of how to configure an alert and conf
| Topic | Description |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Message box](../configuration/#message-box) | Learn how to configure a message box ([Example 1](https://snippet.dhtmlx.com/qfmd877x), [Example 2](https://snippet.dhtmlx.com/3wxrafmo)) |
-| [Alert box](../configuration/#alert-box) | Learn how to configure an alert box ([Example](https://snippet.dhtmlx.com/dk4a7959)) |
-| [Confirm box](../configuration/#confirm-box) | Learn how to configure a confirm box ([Example](https://snippet.dhtmlx.com/dk4a7959)) |
-| [Tooltip](../configuration/#tooltip) | Learn how to configure a tooltip ([Example 1](https://snippet.dhtmlx.com/4wrrsr67), [Example 2](https://snippet.dhtmlx.com/zts0avym)) |
+| [Message box](message/configuration.md#message-box) | Learn how to configure a message box ([Example 1](https://snippet.dhtmlx.com/qfmd877x), [Example 2](https://snippet.dhtmlx.com/3wxrafmo)) |
+| [Alert box](message/configuration.md#alert-box) | Learn how to configure an alert box ([Example](https://snippet.dhtmlx.com/dk4a7959)) |
+| [Confirm box](message/configuration.md#confirm-box) | Learn how to configure a confirm box ([Example](https://snippet.dhtmlx.com/dk4a7959)) |
+| [Tooltip](message/configuration.md#tooltip) | Learn how to configure a tooltip ([Example 1](https://snippet.dhtmlx.com/4wrrsr67), [Example 2](https://snippet.dhtmlx.com/zts0avym)) |
## How to customize Message
@@ -56,14 +56,14 @@ In this section you can learn how to customize different types of DHTMLX Message
| Topic | Description |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| [DHTMLX Message customization](../customization/) | Read how to customize DHTMLX Message |
-| [Message with HTML content](../api/api_message_properties/) | Learn how to display the HTML content in a message box ([Example](https://snippet.dhtmlx.com/1stqqejp)) |
+| [DHTMLX Message customization](message/customization.md) | Read how to customize DHTMLX Message |
+| [Message with HTML content](message/api/api_message_properties.md) | Learn how to display the HTML content in a message box ([Example](https://snippet.dhtmlx.com/1stqqejp)) |
| [Message system colors](https://snippet.dhtmlx.com/tfiqt79l) | The example shows how to change the color of a message box |
| [Styling a message (custom CSS)](https://snippet.dhtmlx.com/7s6p67ht) | The example shows how to apply custom styles to a message box |
| [Styling an alert (custom CSS)](https://snippet.dhtmlx.com/g9tba9xi) | The example shows how to apply custom styles to an alert box |
| [Styling a confirm (custom CSS)](https://snippet.dhtmlx.com/x0barf98) | The example shows how to apply custom styles to a confirm box |
| [Tooltip in light (white) color](https://snippet.dhtmlx.com/ivec9yxi) | The example shows how to customize a tooltip |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with message box
@@ -79,11 +79,11 @@ In this section you can find out corresponding references of Message API.
| Topic | Description |
| -------------------------------------------------------------------- | --------------------------------------------- |
-| [Message box methods](category/message-box-methods.md) | Check the list of methods of a message box |
-| [Message box properties](../api/api_message_properties/#message-box) | Check the list of properties of a message box |
-| [Alert box properties](../api/api_message_properties/#alert-box) | Check the list of properties of an alert box |
-| [Confirm box properties](../api/api_message_properties/#confirm-box) | Check the list of properties of a confirm box |
-| [Tooltip properties](../api/api_message_properties/#tooltip) | Check the list of properties of a tooltip |
+| [Message box methods](/category/message-box-methods/) | Check the list of methods of a message box |
+| [Message box properties](message/api/api_message_properties.md#message-box) | Check the list of properties of a message box |
+| [Alert box properties](message/api/api_message_properties.md#alert-box) | Check the list of properties of an alert box |
+| [Confirm box properties](message/api/api_message_properties.md#confirm-box) | Check the list of properties of a confirm box |
+| [Tooltip properties](message/api/api_message_properties.md#tooltip) | Check the list of properties of a tooltip |
## Common functionality
@@ -91,9 +91,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/message/index.md b/docs/message/index.md
index b3d20dba..d92ab777 100644
--- a/docs/message/index.md
+++ b/docs/message/index.md
@@ -32,4 +32,4 @@ You can check the following page to learn how to build a full-featured DHTMLX Me
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/migration.md b/docs/migration.md
index 72733886..809bb96b 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -17,7 +17,7 @@ If you are using an outdated version of DHTMLX Suite 5 and require the documenta
#### Export to Excel module update
-Since v9.2 the Grid component uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for [exporting Grid data to an Excel file](grid/usage.md/#exporting-data-to-excel). As earlier, you can use either the public export server or a local export server.
+Since v9.2 the Grid component uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for [exporting Grid data to an Excel file](grid/usage.md#exporting-data-to-excel). As earlier, you can use either the public export server or a local export server.
##### From v9.2
@@ -241,7 +241,7 @@ Before v9.0, the format for dates in a column has been set by specifying the `ty
}
~~~
-Since v9.0, to set the format for dates, you need to use the combination of the `type: "date"` property and the [`dateFormat`](/grid/configuration#setting-the-format-for-dates) option:
+Since v9.0, to set the format for dates, you need to use the combination of the `type: "date"` property and the [`dateFormat`](grid/configuration.md#setting-the-format-for-dates) option:
~~~jsx {3}title="From v9.0"
{
@@ -264,7 +264,7 @@ Before v9.0 the necessary format of data for a column has been specified via the
}
~~~
-Since v9.0, the data format is specified via the [`numberMask`](/grid/configuration#numbermask) configuration option of a column object:
+Since v9.0, the data format is specified via the [`numberMask`](grid/configuration.md#numbermask) configuration option of a column object:
~~~jsx {6-8}title="From v9.0"
{
@@ -289,7 +289,7 @@ Before v9.0, to display the percentage value in a column, the `type: "percent"`
}
~~~
-Since v9.0, the percentage value is specified via the `suffix: "%"` attribute of the [`numberMask`](/grid/configuration#numbermask) configuration option of a column object:
+Since v9.0, the percentage value is specified via the `suffix: "%"` attribute of the [`numberMask`](grid/configuration.md#numbermask) configuration option of a column object:
~~~jsx {3}title="From v9.0"
{
diff --git a/docs/optimus_guides/how_to_start_optimus.md b/docs/optimus_guides/how_to_start_optimus.md
index 3889d2d8..cdcbed5c 100644
--- a/docs/optimus_guides/how_to_start_optimus.md
+++ b/docs/optimus_guides/how_to_start_optimus.md
@@ -12,7 +12,7 @@ The guide will teach you how to create your own views on the base of DHTMLX Opti
{{note The complete source code is available on GitHub. You can check the step-by-step changes by switching between the branches with the related names.}}
-For more information about working with the components of DHTMLX Suite, see **DHTMLX documentation**. The detailed information on DHTMLX Optimus is presented [here](optimus_guides.md).
+For more information about working with the components of DHTMLX Suite, see **DHTMLX documentation**. The detailed information on DHTMLX Optimus is presented [here](/optimus_guides/).
So, let's get started!
@@ -133,7 +133,7 @@ export class MyApp extends App {
}
~~~
-You can find more details on API methods [here](optimus_guides.md#api).
+You can find more details on API methods [here](/optimus_guides/#api).
5\. Finally, we've initialized our application via updating the code of the *index.html* file with the following:
@@ -274,7 +274,7 @@ export class TopLayout extends View {
In the above code we've returned Layout as a view and placed the *EmptyView* and *ToolbarView* views into the cells of the layout.
-To render the views, the **show()** method is called. For details about rendering of the components of the DHTMLX Suite library, see the [documentation](optimus_guides.md#initialization-of-the-dhtmlx-layout-component).
+To render the views, the **show()** method is called. For details about rendering of the components of the DHTMLX Suite library, see the [documentation](/optimus_guides/#initialization-of-the-dhtmlx-layout-component).
But, if you've already run your app, you can notice that nothing happens when switching the buttons in the toolbar. To solve this problem, we need to add global events.
@@ -338,9 +338,9 @@ After clicking on the "Second" button you should see the view, as in:
You can also learn more details about how to:
-- [pass parameters to child components](optimus_guides.md#passing-data-to-child-components);
-- [use global event bus](optimus_guides.md#subscribing-to-global-events);
-- [work with the DHTMLX Suite library in views](optimus_guides.md#working-with-widgets-of-suite).
+- [pass parameters to child components](/optimus_guides/#passing-data-to-child-components);
+- [use global event bus](/optimus_guides/#subscribing-to-global-events);
+- [work with the DHTMLX Suite library in views](/optimus_guides/#working-with-widgets-of-suite).
Step 3. Define the global state of the app
--------------------------------
@@ -557,7 +557,7 @@ export class MyApp extends App {
4\. Now, create the *views/content* folder. We are going to create the DataView, Chart, and Grid views there:
-- create the *DataView.js* file and add the DataView view there by using the [DataView widget](dataview.md) of Suite:
+- create the *DataView.js* file and add the DataView view there by using the [DataView widget](/dataview/) of Suite:
~~~js title="src/views/content/DataView.js"
import { View } from "dhx-optimus";
@@ -581,7 +581,7 @@ export class DataView extends View {
}
~~~
-- create the *ChartView.js* file and add the Chart view there by using the [Chart widget](chart.md) of Suite:
+- create the *ChartView.js* file and add the Chart view there by using the [Chart widget](/chart/) of Suite:
~~~js title="src/views/content/ChartView.js"
import { View } from "dhx-optimus";
@@ -616,7 +616,7 @@ export class ChartView extends View {
The *getChartStatistic* function is used to prepare the data for Chart. For details on the function, see the utils/helpers.js file.
-- create the *GridView.js* file and add the Grid view there by using the [Grid widget](grid.md) of Suite:
+- create the *GridView.js* file and add the Grid view there by using the [Grid widget](/grid/) of Suite:
~~~js title="src/views/content/GridView.js"
import { View } from "dhx-optimus";
@@ -967,7 +967,7 @@ We hope you have learned how to build the DHTMLX-based app with DHTMLX Optimus a
You can find the initial code on GitHub, clone or download it and use it for your projects.
-For details about API methods of DHTMLX Optimus, see [the documentation](optimus_guides.md).
+For details about API methods of DHTMLX Optimus, see [the documentation](/optimus_guides/).
Check more demos build with Optimus:
diff --git a/docs/optimus_guides/index.md b/docs/optimus_guides/index.md
index 6edaa43a..e85678bb 100644
--- a/docs/optimus_guides/index.md
+++ b/docs/optimus_guides/index.md
@@ -134,7 +134,7 @@ export class MyApp extends App {
}
~~~
-You can find more details on API methods [below](optimus_guides.md#api).
+You can find more details on API methods [below](/optimus_guides/#api).
5\. Finally, we've initialized our application via updating the code of the *index.html* file with the following:
@@ -332,7 +332,7 @@ The above code shows that:
The Component class also provides access to the events of the app via the `fire()`, `on()` methods. See more details below.
-The following example shows that it is possible to use the class inherited from the Component class by calling it in the class inherited from the App class via the [`use()`](optimus_guides.md#api) method.
+The following example shows that it is possible to use the class inherited from the Component class by calling it in the class inherited from the App class via the [`use()`](/optimus_guides/#api) method.
~~~js
import { App } from "dhx-optimus";
diff --git a/docs/pagination/api/pagination_css_config.md b/docs/pagination/api/pagination_css_config.md
index d9d1ebde..29771070 100644
--- a/docs/pagination/api/pagination_css_config.md
+++ b/docs/pagination/api/pagination_css_config.md
@@ -43,4 +43,4 @@ const pagination = new dhx.Pagination("pagination_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
\ No newline at end of file
+- [Themes](/themes/)
\ No newline at end of file
diff --git a/docs/pagination/features.md b/docs/pagination/features.md
index fa2f4655..d91fbb91 100644
--- a/docs/pagination/features.md
+++ b/docs/pagination/features.md
@@ -18,7 +18,7 @@ In this section you can find out how to initialize Pagination with different dat
| Topic | Description |
| --------------------------------------------------------------- | -------------------------------------------------------------- |
-| [Basic initialization](../init/) | Read how to initialize a pagination on a page |
+| [Basic initialization](pagination/init.md) | Read how to initialize a pagination on a page |
| [Pagination with DataView](https://snippet.dhtmlx.com/xmf0lx8z) | The example shows how to initialize DataView inside Pagination |
| [Pagination with Grid](https://snippet.dhtmlx.com/0sku3cfa) | The example shows how to initialize Grid inside Pagination |
| [Pagination with List](https://snippet.dhtmlx.com/6sju9jl5) | The example shows how to initialize List inside Pagination |
@@ -30,7 +30,7 @@ In this section you can find out how to initialize Pagination with different dat
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Pagination with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Pagination with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Pagination with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -41,8 +41,8 @@ In this section you will learn how to specify the initial page of Pagination and
| Topic | Description |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Setting initial page](../configuration/#initial-page) | Learn how to define the initial page of the pagination ([Example](https://snippet.dhtmlx.com/5vwz8tgb)) |
-| [Configuring page size](../configuration/#number-of-items-per-page) | Learn how to define the number of items that should be displayed per page of the related widget ([Example](https://snippet.dhtmlx.com/m57w0vlb)) |
+| [Setting initial page](pagination/configuration.md#initial-page) | Learn how to define the initial page of the pagination ([Example](https://snippet.dhtmlx.com/5vwz8tgb)) |
+| [Configuring page size](pagination/configuration.md#number-of-items-per-page) | Learn how to define the number of items that should be displayed per page of the related widget ([Example](https://snippet.dhtmlx.com/m57w0vlb)) |
## How to customize Pagination
@@ -51,9 +51,9 @@ In this section you may study how to change the style of Pagination, how to alig
| Topic | Description |
| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| [Aligning elements](https://snippet.dhtmlx.com/4vin492u) | The example shows how to align elements in Pagination |
-| [Setting width of input](../configuration/#input-width) | Learn how to configure the width of the input of a pagination ([Example](https://snippet.dhtmlx.com/1fttbjh9)) |
-| [Styling Pagination](../customization/) | Learn how to customize Pagination ([Example](https://snippet.dhtmlx.com/e7bujtsu)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Setting width of input](pagination/configuration.md#input-width) | Learn how to configure the width of the input of a pagination ([Example](https://snippet.dhtmlx.com/1fttbjh9)) |
+| [Styling Pagination](pagination/customization.md) | Learn how to customize Pagination ([Example](https://snippet.dhtmlx.com/e7bujtsu)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Pagination
@@ -61,10 +61,10 @@ In this section you will know how to set an active page dynamically, how to spec
| Topic | Description |
| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Getting / setting page index](../usage/#settinggetting-the-active-page) | Learn how to set any page as an active page or get the index of the currently active page ([Example](https://snippet.dhtmlx.com/qepjgf7h)) |
-| [Setting number of items displayed per page](../usage/#settinggetting-count-of-items-per-page) | Learn how to specify the number of items that should be displayed on each page ([Example](https://snippet.dhtmlx.com/9u3gsyd4)) |
-| [Getting number of items displayed per page](../usage/#settinggetting-count-of-items-per-page) | Learn how to get the count of items displayed per page ([Example](https://snippet.dhtmlx.com/9u3gsyd4)) |
-| [Getting total page count](../usage/#getting-total-number-of-pages) | Learn how to get the total number of pages ([Example](https://snippet.dhtmlx.com/k5j6acc5)) |
+| [Getting / setting page index](pagination/usage.md#settinggetting-the-active-page) | Learn how to set any page as an active page or get the index of the currently active page ([Example](https://snippet.dhtmlx.com/qepjgf7h)) |
+| [Setting number of items displayed per page](pagination/usage.md#settinggetting-count-of-items-per-page) | Learn how to specify the number of items that should be displayed on each page ([Example](https://snippet.dhtmlx.com/9u3gsyd4)) |
+| [Getting number of items displayed per page](pagination/usage.md#settinggetting-count-of-items-per-page) | Learn how to get the count of items displayed per page ([Example](https://snippet.dhtmlx.com/9u3gsyd4)) |
+| [Getting total page count](pagination/usage.md#getting-total-number-of-pages) | Learn how to get the total number of pages ([Example](https://snippet.dhtmlx.com/k5j6acc5)) |
## How to work with Pagination events
@@ -73,7 +73,7 @@ This section explains how to work with Pagination events.
| Topic | Description |
| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Pagination events ([Example](https://snippet.dhtmlx.com/mlrtmj7p)) |
+| [Event handling](pagination/handling_events.md) | Learn how to attach, detach, or call the Pagination events ([Example](https://snippet.dhtmlx.com/mlrtmj7p)) |
## API reference
@@ -81,9 +81,9 @@ In this section you can find out corresponding references of Pagination API.
| Topic | Description |
| -------------------------------------------------------------- | --------------------------------------- |
-| [Pagination methods](../../category/pagination-methods/) | Check the list of Pagination methods |
-| [Pagination events](../../category/pagination-events/) | Check the list of Pagination events |
-| [Pagination properties](../../category/pagination-properties/) | Check the list of Pagination properties |
+| [Pagination methods](/category/pagination-methods/) | Check the list of Pagination methods |
+| [Pagination events](/category/pagination-events/) | Check the list of Pagination events |
+| [Pagination properties](/category/pagination-properties/) | Check the list of Pagination properties |
## Common functionality
@@ -91,9 +91,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/pagination/init.md b/docs/pagination/init.md
index 59b27a0f..65ef03bf 100644
--- a/docs/pagination/init.md
+++ b/docs/pagination/init.md
@@ -86,7 +86,7 @@ Add two containers:
## Initialize a related widget
:::note
-DHTMLX Pagination can be used in conjunction with data components like [List](list.md), [DataView](dataview.md), [Tree](tree.md), [Grid](grid.md), or [Grid in the TreeGrid mode](/grid/treegrid_mode/).
+DHTMLX Pagination can be used in conjunction with data components like [List](/list/), [DataView](/dataview/), [Tree](/tree/), [Grid](/grid/), or [Grid in the TreeGrid mode](grid/treegrid_mode.md).
:::
Choose the widget you want to link to the Pagination component, for example, DHTMLX List.
diff --git a/docs/popup/api/popup_css_config.md b/docs/popup/api/popup_css_config.md
index c94bd675..f0a54fd5 100644
--- a/docs/popup/api/popup_css_config.md
+++ b/docs/popup/api/popup_css_config.md
@@ -45,4 +45,4 @@ const popup = new dhx.Popup({
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/popup/features.md b/docs/popup/features.md
index c17229fc..253a9ad5 100644
--- a/docs/popup/features.md
+++ b/docs/popup/features.md
@@ -16,9 +16,9 @@ In this section you can find out how to initialize Popup with different data com
| Topic | Description |
| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Basic initialization](../initialization/) | Read how to initialize a Popup on a page |
-| [Attaching widgets](../work_with_popup/#attaching-dhtmlx-components) | Learn how to attach a DHTMLX component to a Popup ([Example 1](https://snippet.dhtmlx.com/7x6hlbqx), [Example 2](https://snippet.dhtmlx.com/kw3e0h4j?tag=popup)) |
-| [Attaching HTML content](../work_with_popup/#attaching-content) | Learn how to attach some HTML content to a Popup ([Example](https://snippet.dhtmlx.com/ajv5qqxq)) |
+| [Basic initialization](popup/initialization.md) | Read how to initialize a Popup on a page |
+| [Attaching widgets](popup/work_with_popup.md#attaching-dhtmlx-components) | Learn how to attach a DHTMLX component to a Popup ([Example 1](https://snippet.dhtmlx.com/7x6hlbqx), [Example 2](https://snippet.dhtmlx.com/kw3e0h4j?tag=popup)) |
+| [Attaching HTML content](popup/work_with_popup.md#attaching-content) | Learn how to attach some HTML content to a Popup ([Example](https://snippet.dhtmlx.com/ajv5qqxq)) |
### Integration
@@ -26,7 +26,7 @@ In this section you can find out how to initialize Popup with different data com
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Popup with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Popup with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Popup with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -37,8 +37,8 @@ In this section you may study how to change the style of Popup.
| Topic | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------- |
-| [Styling Popup](../customization/) | Learn how to customize a Popup ([Example](https://snippet.dhtmlx.com/rd8zfw5h)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Styling Popup](popup/customization.md) | Learn how to customize a Popup ([Example](https://snippet.dhtmlx.com/rd8zfw5h)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Popup
@@ -46,10 +46,10 @@ In this section you may learn how to show or hide a popup, how to check its visi
| Topic | Description |
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Showing / hiding a Popup](../work_with_popup/#hidingshowing-popup) | Learn how to show a Popup at the specified position or hide a Popup ([Example 1](https://snippet.dhtmlx.com/aqzy536h), [Example 2](https://snippet.dhtmlx.com/bu4uj2ik)) |
+| [Showing / hiding a Popup](popup/work_with_popup.md#hidingshowing-popup) | Learn how to show a Popup at the specified position or hide a Popup ([Example 1](https://snippet.dhtmlx.com/aqzy536h), [Example 2](https://snippet.dhtmlx.com/bu4uj2ik)) |
| [Auto positioning](https://snippet.dhtmlx.com/bz1ekc71) | The example shows how to configure the auto positioning for Popup |
| Prevent showing or hiding of a Popup | The example helps to understand how to prevent a Popup from being shown ([Example](https://snippet.dhtmlx.com/z788l8r7)) or hidden ([Example](https://snippet.dhtmlx.com/aocef9cv)) |
-| [Checking visibility of a Popup](../work_with_popup/#checking-visibility-of-popup) | Learn how to check whether a Popup is visible ([Example](https://snippet.dhtmlx.com/f614sdm3)) |
+| [Checking visibility of a Popup](popup/work_with_popup.md#checking-visibility-of-popup) | Learn how to check whether a Popup is visible ([Example](https://snippet.dhtmlx.com/f614sdm3)) |
## How to work with Popup events
@@ -58,7 +58,7 @@ This section explains how to work with Popup events.
| Topic | Description |
| :------------------------------------------ | :----------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../event_handling/) | Learn how to attach, detach, or call the Popup events ([Example](https://snippet.dhtmlx.com/ro2lza9t)) |
+| [Event handling](popup/event_handling.md) | Learn how to attach, detach, or call the Popup events ([Example](https://snippet.dhtmlx.com/ro2lza9t)) |
## API reference
@@ -66,9 +66,9 @@ In this section you can find out corresponding references of Popup API.
| Topic | Description |
| ---------------------------------------------------- | ---------------------------------- |
-| [Popup methods](../../category/popup-methods/) | Check the list of Popup methods |
-| [Popup events](../../category/popup-events/) | Check the list of Popup events |
-| [Popup properties](../../category/popup-properties/) | Check the list of Popup properties |
+| [Popup methods](/category/popup-methods/) | Check the list of Popup methods |
+| [Popup events](/category/popup-events/) | Check the list of Popup events |
+| [Popup properties](/category/popup-properties/) | Check the list of Popup properties |
## Common functionality
@@ -76,9 +76,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component's rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component's rendering |
## Any questions left?
diff --git a/docs/ribbon/api/api_datepicker_properties.md b/docs/ribbon/api/api_datepicker_properties.md
index 173d8b3b..d7e417b0 100644
--- a/docs/ribbon/api/api_datepicker_properties.md
+++ b/docs/ribbon/api/api_datepicker_properties.md
@@ -46,7 +46,7 @@ const data = [
### Description
-- `type` - (required) the type of a control, set it to `"datePicker"`, if not specified - the [navItem](../../../ribbon/navitem/) type is applied by default
+- `type` - (required) the type of a control, set it to `"datePicker"`, if not specified - the [navItem](ribbon/navitem.md) type is applied by default
- `id` - (optional) the id of a control, auto-generated if not set
- `parent` - (optional) the parent of the item
- `value` - (optional) the value of a datepicker
diff --git a/docs/ribbon/api/api_overview.md b/docs/ribbon/api/api_overview.md
index b59b5f82..257ab9bc 100644
--- a/docs/ribbon/api/api_overview.md
+++ b/docs/ribbon/api/api_overview.md
@@ -25,7 +25,7 @@ description: You can explore the API of Ribbon in the documentation of the DHTML
| [](ribbon/api/ribbon_unselect_method.md) | @getshort(ribbon/api/ribbon_unselect_method.md) |
:::info important
-Use [TreeCollection methods](tree_collection.md) to work with data.
+Use [TreeCollection methods](/tree_collection/) to work with data.
:::
## Ribbon events
@@ -42,7 +42,7 @@ Use [TreeCollection methods](tree_collection.md) to work with data.
| [](ribbon/api/ribbon_openmenu_event.md) | @getshort(ribbon/api/ribbon_openmenu_event.md) |
:::info important
-Use [TreeCollection events](tree_collection.md#events) to work with data.
+Use [TreeCollection events](/tree_collection/#events) to work with data.
:::
## Ribbon properties
diff --git a/docs/ribbon/api/ribbon_css_config.md b/docs/ribbon/api/ribbon_css_config.md
index 32f3a261..1ebca73d 100644
--- a/docs/ribbon/api/ribbon_css_config.md
+++ b/docs/ribbon/api/ribbon_css_config.md
@@ -41,4 +41,4 @@ const ribbon = new dhx.Ribbon("ribbon_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
\ No newline at end of file
+- [Themes](/themes/)
\ No newline at end of file
diff --git a/docs/ribbon/customhtmlbutton.md b/docs/ribbon/customhtmlbutton.md
index c48441eb..c74a33da 100644
--- a/docs/ribbon/customhtmlbutton.md
+++ b/docs/ribbon/customhtmlbutton.md
@@ -14,7 +14,7 @@ This is an item that contains any custom HTML content (for example, an image, ic
## Adding Custom HTML
-Any custom HTML content can be easily added to a ribbon with the help of the **add()** method of [Tree Collection](tree_collection.md):
+Any custom HTML content can be easily added to a ribbon with the help of the **add()** method of [Tree Collection](/tree_collection/):
~~~js
ribbon.data.add({
@@ -31,4 +31,4 @@ You can provide the [following properties](ribbon/api/api_customhtml_properties.
## Working with Custom HTML
-You can perform operations over the **Custom HTML** item with the help of the available [Ribbon API](ribbon/api/api_overview.md) and [Tree Collection API](tree_collection.md).
+You can perform operations over the **Custom HTML** item with the help of the available [Ribbon API](ribbon/api/api_overview.md) and [Tree Collection API](/tree_collection/).
diff --git a/docs/ribbon/features.md b/docs/ribbon/features.md
index 97b89119..00f3b072 100644
--- a/docs/ribbon/features.md
+++ b/docs/ribbon/features.md
@@ -16,13 +16,13 @@ In this section you can find out how to initialize Ribbon, how to load data into
| Topic | Description |
| ---------------------------------------- | ------------------------------ |
-| [Basic initialization](../how_to_start/) | Learn how to initialize Ribbon |
+| [Basic initialization](ribbon/how_to_start.md) | Learn how to initialize Ribbon |
### Loading data into Ribbon
| Topic | Description |
| ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| [Loading data into Ribbon](../data_loading/) | Read how to load the initial data into Ribbon |
+| [Loading data into Ribbon](ribbon/data_loading.md) | Read how to load the initial data into Ribbon |
| [Initialization with config.data](https://snippet.dhtmlx.com/lek4v9m7) | The example shows how to load data into Ribbon on the initialization stage |
| [Initialization with data.load()](https://snippet.dhtmlx.com/1gd5tbcf) | The example shows how to load data from an external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/zz5ijqy9) | The example shows how to load data from a local data source |
@@ -33,23 +33,23 @@ In this section you can find out how to initialize Ribbon, how to load data into
| Topic | Description |
| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Block](../block/) | Learn how to add a Block control into the ribbon ([Example 1](https://snippet.dhtmlx.com/nlviu82g), [Example 2](https://snippet.dhtmlx.com/1ayiafd1)) |
-| [Button](../button/) | Learn how to add a Button control into the ribbon ([Example](https://snippet.dhtmlx.com/trli6sq7)) |
-| [Custom HTML](../customhtmlbutton/) | Learn how to add an item with custom HTML content into the ribbon ([Example](https://snippet.dhtmlx.com/c0i0q3cu)) |
-| [ImageButton](../image_button/) | Learn how to add a button with an image into the ribbon |
-| [Input](../input/) | Learn how to add an Input control into the ribbon ([Example](https://snippet.dhtmlx.com/jjnzc3ng)) |
-| [NavItem](../navitem/) | Learn how to add a NavItem control into the ribbon ([Example](https://snippet.dhtmlx.com/zijc2nta)) |
-| [SelectButton](../selectbutton/) | Learn how to add a SelectButton control into the ribbon ([Example](https://snippet.dhtmlx.com/5acqc24m)) |
-| [Separator](../separator/) | Learn how to add a Separator control into the ribbon ([Example](https://snippet.dhtmlx.com/wqhahyw8)) |
-| [Spacer](../spacer/) | Learn how to add a Spacer control into the ribbon ([Example](https://snippet.dhtmlx.com/a8c6y3ob)) |
-| [Title](../title/) | Learn how to add a Title control into the ribbon |
+| [Block](ribbon/block.md) | Learn how to add a Block control into the ribbon ([Example 1](https://snippet.dhtmlx.com/nlviu82g), [Example 2](https://snippet.dhtmlx.com/1ayiafd1)) |
+| [Button](ribbon/button.md) | Learn how to add a Button control into the ribbon ([Example](https://snippet.dhtmlx.com/trli6sq7)) |
+| [Custom HTML](ribbon/customhtmlbutton.md) | Learn how to add an item with custom HTML content into the ribbon ([Example](https://snippet.dhtmlx.com/c0i0q3cu)) |
+| [ImageButton](ribbon/image_button.md) | Learn how to add a button with an image into the ribbon |
+| [Input](ribbon/input.md) | Learn how to add an Input control into the ribbon ([Example](https://snippet.dhtmlx.com/jjnzc3ng)) |
+| [NavItem](ribbon/navitem.md) | Learn how to add a NavItem control into the ribbon ([Example](https://snippet.dhtmlx.com/zijc2nta)) |
+| [SelectButton](ribbon/selectbutton.md) | Learn how to add a SelectButton control into the ribbon ([Example](https://snippet.dhtmlx.com/5acqc24m)) |
+| [Separator](ribbon/separator.md) | Learn how to add a Separator control into the ribbon ([Example](https://snippet.dhtmlx.com/wqhahyw8)) |
+| [Spacer](ribbon/spacer.md) | Learn how to add a Spacer control into the ribbon ([Example](https://snippet.dhtmlx.com/a8c6y3ob)) |
+| [Title](ribbon/title.md) | Learn how to add a Title control into the ribbon |
### Integration
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Ribbon with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Ribbon with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Ribbon with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -61,9 +61,9 @@ In this section you can learn how to customize a Ribbon.
| Topic | Description |
| --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| [Adding HTML content into items](https://snippet.dhtmlx.com/3djaib6o) | The example shows how to add custom element into the Ribbon items |
-| [Applying custom icons](../customization/#icons) | Learn how to add custom icons to Ribbon items ([Example](https://snippet.dhtmlx.com/sfkou9gp)) |
-| [Styling Ribbon](../customization/#styling) | Learn how to customize a Ribbon ([Example](https://snippet.dhtmlx.com/9ckg47ro)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Applying custom icons](ribbon/customization.md#icons) | Learn how to add custom icons to Ribbon items ([Example](https://snippet.dhtmlx.com/sfkou9gp)) |
+| [Styling Ribbon](ribbon/customization.md#styling) | Learn how to customize a Ribbon ([Example](https://snippet.dhtmlx.com/9ckg47ro)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Ribbon controls
@@ -71,11 +71,11 @@ In this section you may study how to disable and enable, hide and show Ribbon co
| Topic | Description |
| ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
-| [Disabling / enabling controls](../operating_ribbon/#disabling-and-enabling-controls) | Learn how to disable or enable controls on a page dynamically ([Example](https://snippet.dhtmlx.com/l3f8pq2g)) |
-| [Is disabled](../operating_ribbon/#checking-if-a-ribbon-item-is-disabled) | Learn how to check whether a control is disabled on the page |
-| [Hiding / showing controls](../operating_ribbon/#hiding-and-showing-controls) | Learn how to hide or show controls dynamically ([Example](https://snippet.dhtmlx.com/1jkf7954)) |
-| [Setting values/states of controls](../operating_ribbon/#settinggetting-values-and-states) | Learn how to change the value or state of a control ([Example](https://snippet.dhtmlx.com/i7kabram)) |
-| [Getting values/states of controls](../operating_ribbon/#settinggetting-values-and-states) | Learn how to get the current value or state of a control ([Example](https://snippet.dhtmlx.com/coei9fys)) |
+| [Disabling / enabling controls](ribbon/operating_ribbon.md#disabling-and-enabling-controls) | Learn how to disable or enable controls on a page dynamically ([Example](https://snippet.dhtmlx.com/l3f8pq2g)) |
+| [Is disabled](ribbon/operating_ribbon.md#checking-if-a-ribbon-item-is-disabled) | Learn how to check whether a control is disabled on the page |
+| [Hiding / showing controls](ribbon/operating_ribbon.md#hiding-and-showing-controls) | Learn how to hide or show controls dynamically ([Example](https://snippet.dhtmlx.com/1jkf7954)) |
+| [Setting values/states of controls](ribbon/operating_ribbon.md#settinggetting-values-and-states) | Learn how to change the value or state of a control ([Example](https://snippet.dhtmlx.com/i7kabram)) |
+| [Getting values/states of controls](ribbon/operating_ribbon.md#settinggetting-values-and-states) | Learn how to get the current value or state of a control ([Example](https://snippet.dhtmlx.com/coei9fys)) |
## How to work with data in Ribbon
@@ -83,13 +83,13 @@ This section will tell you how to use [TreeCollection API](guides/datacollection
| Topic | Description |
| ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| [Adding controls](../operating_ribbon/#adding-controls) | Learn how to add new controls into Ribbon dynamically ([Example](https://snippet.dhtmlx.com/bphk7h9u)) |
-| [Copying controls](../operating_ribbon/#making-copies-of-controls) | Learn how to copy a control |
-| [Getting controls](../operating_ribbon/#getting-controls-by-ids) | Learn how to get a particular control, the parent or children of a control |
-| [Iterating through controls](../operating_ribbon/#iterating-through-controls) | Learn how to apply the necessary logic to all (or some) Ribbon controls, as well as to the parent or children of a control |
-| [Rearranging controls](../operating_ribbon/#rearranging-ribbon-controls) | Learn how to move Ribbon items to another position |
-| [Removing controls](../operating_ribbon/#clearing-ribbon) | Learn how to remove all controls from Ribbon at once |
-| [TreeCollection API](../../tree_collection/) | Check the list of all available TreeCollection API|
+| [Adding controls](ribbon/operating_ribbon.md#adding-controls) | Learn how to add new controls into Ribbon dynamically ([Example](https://snippet.dhtmlx.com/bphk7h9u)) |
+| [Copying controls](ribbon/operating_ribbon.md#making-copies-of-controls) | Learn how to copy a control |
+| [Getting controls](ribbon/operating_ribbon.md#getting-controls-by-ids) | Learn how to get a particular control, the parent or children of a control |
+| [Iterating through controls](ribbon/operating_ribbon.md#iterating-through-controls) | Learn how to apply the necessary logic to all (or some) Ribbon controls, as well as to the parent or children of a control |
+| [Rearranging controls](ribbon/operating_ribbon.md#rearranging-ribbon-controls) | Learn how to move Ribbon items to another position |
+| [Removing controls](ribbon/operating_ribbon.md#clearing-ribbon) | Learn how to remove all controls from Ribbon at once |
+| [TreeCollection API](/tree_collection/) | Check the list of all available TreeCollection API|
## How to work with selection
@@ -98,10 +98,10 @@ In this section you will learn how to work with selection functionality.
| Topic | Description |
| ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| [Setting selection](../operating_ribbon/#selectingunselecting-an-item) | Learn how to select a particular item ([Example](https://snippet.dhtmlx.com/0vy8uk4s)) |
-| [Is selected](../operating_ribbon/#checking-if-a-ribbon-item-is-selected) | Learn how to check whether a Ribbon item is selected ([Example](https://snippet.dhtmlx.com/0vy8uk4s)) |
-| [Getting selected items](../operating_ribbon/#getting-selected-items) | Learn how to get the selected items |
-| [Removing selection](../operating_ribbon/#selectingunselecting-an-item) | Learn how to remove selection from a selected item ([Example](https://snippet.dhtmlx.com/0vy8uk4s)) |
+| [Setting selection](ribbon/operating_ribbon.md#selectingunselecting-an-item) | Learn how to select a particular item ([Example](https://snippet.dhtmlx.com/0vy8uk4s)) |
+| [Is selected](ribbon/operating_ribbon.md#checking-if-a-ribbon-item-is-selected) | Learn how to check whether a Ribbon item is selected ([Example](https://snippet.dhtmlx.com/0vy8uk4s)) |
+| [Getting selected items](ribbon/operating_ribbon.md#getting-selected-items) | Learn how to get the selected items |
+| [Removing selection](ribbon/operating_ribbon.md#selectingunselecting-an-item) | Learn how to remove selection from a selected item ([Example](https://snippet.dhtmlx.com/0vy8uk4s)) |
## How to work with Ribbon events
@@ -110,7 +110,7 @@ This section explains how to work with Ribbon events.
| Topic | Description |
| :------------------------------------------ | :----------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Popup events ([Example](https://snippet.dhtmlx.com/i7cfddkl)) |
+| [Event handling](ribbon/handling_events.md) | Learn how to attach, detach, or call the Popup events ([Example](https://snippet.dhtmlx.com/i7cfddkl)) |
## API reference
@@ -121,26 +121,26 @@ In this section you can find out corresponding references of Ribbon and its cont
| Topic | Description |
| -------------------------------------------------------------- | -------------------------------------------------------- |
-| [Ribbon methods](../../category/ribbon-methods/) | Check the list of Ribbon methods |
-| [Ribbon events](../../category/ribbon-events/) | Check the list of Ribbon events |
-| [Ribbon properties](../../category/ribbon-properties/) | Check the list of Ribbon properties |
-| [TreeCollection API](../../tree_collection/) | Check the API of TreeCollection to work with Ribbon data |
+| [Ribbon methods](/category/ribbon-methods/) | Check the list of Ribbon methods |
+| [Ribbon events](/category/ribbon-events/) | Check the list of Ribbon events |
+| [Ribbon properties](/category/ribbon-properties/) | Check the list of Ribbon properties |
+| [TreeCollection API](/tree_collection/) | Check the API of TreeCollection to work with Ribbon data |
### Ribbon controls API
| Topic | Description |
| -------------------------------------------------------------- | -------------------------------------------------------- |
-| [Block properties](../api/api_block_properties/) | Check the list of properties of the Block control |
-| [Button properties](../api/api_button_properties/) | Check the list of properties of the Button control |
-| [Custom HTML properties](../api/api_customhtml_properties/) | Check the list of properties of the Custom HTML control |
-| [ImageButton properties](../api/api_imagebutton_properties/) | Check the list of properties of the ImageButton control |
-| [Input properties](../api/api_input_properties/) | Check the list of properties of the Input control |
-| [NavItem properties](../api/api_navitem_properties/) | Check the list of properties of the NavItem control |
-| [SelectButton properties](../api/api_selectbutton_properties/) | Check the list of properties of the SelectButton control |
-| [Separator properties](../api/api_separator_properties/) | Check the list of properties of the Separator control |
-| [Spacer properties](../api/api_spacer_properties/) | Check the list of properties of the Spacer control |
-| [Title properties](../api/api_title_properties/) | Check the list of properties of the Title control |
+| [Block properties](ribbon/api/api_block_properties.md) | Check the list of properties of the Block control |
+| [Button properties](ribbon/api/api_button_properties.md) | Check the list of properties of the Button control |
+| [Custom HTML properties](ribbon/api/api_customhtml_properties.md) | Check the list of properties of the Custom HTML control |
+| [ImageButton properties](ribbon/api/api_imagebutton_properties.md) | Check the list of properties of the ImageButton control |
+| [Input properties](ribbon/api/api_input_properties.md) | Check the list of properties of the Input control |
+| [NavItem properties](ribbon/api/api_navitem_properties.md) | Check the list of properties of the NavItem control |
+| [SelectButton properties](ribbon/api/api_selectbutton_properties.md) | Check the list of properties of the SelectButton control |
+| [Separator properties](ribbon/api/api_separator_properties.md) | Check the list of properties of the Separator control |
+| [Spacer properties](ribbon/api/api_spacer_properties.md) | Check the list of properties of the Spacer control |
+| [Title properties](ribbon/api/api_title_properties.md) | Check the list of properties of the Title control |
## Common functionality
@@ -149,10 +149,10 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [Custom scroll](../../common_features/custom_scroll/) | Learn how to enable custom scroll in Ribbon |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [Custom scroll](common_features/custom_scroll.md) | Learn how to enable custom scroll in Ribbon |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/ribbon/image_button.md b/docs/ribbon/image_button.md
index 71828eb3..3f40942c 100644
--- a/docs/ribbon/image_button.md
+++ b/docs/ribbon/image_button.md
@@ -28,4 +28,4 @@ You can provide the [following properties](ribbon/api/api_imagebutton_properties
## Working with ImageButton
-You can perform operations over the **imageButton** control with the help of the available [Ribbon API](ribbon/api/api_overview.md) and [Tree Collection API](tree_collection.md).
+You can perform operations over the **imageButton** control with the help of the available [Ribbon API](ribbon/api/api_overview.md) and [Tree Collection API](/tree_collection/).
diff --git a/docs/ribbon/index.md b/docs/ribbon/index.md
index 6a82ac7f..36f9b134 100644
--- a/docs/ribbon/index.md
+++ b/docs/ribbon/index.md
@@ -24,7 +24,7 @@ You can check the following page to learn how to build a full-featured DHTMLX Ri
- You can get DHTMLX Ribbon as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX Ribbon](https://snippet.dhtmlx.com/3djaib6o?tag=ribbon)
-- To work with data of Ribbon check [TreeCollection API](tree_collection.md)
+- To work with data of Ribbon check [TreeCollection API](/tree_collection/)
## Guides
diff --git a/docs/ribbon/operating_ribbon.md b/docs/ribbon/operating_ribbon.md
index 167e837f..596725da 100644
--- a/docs/ribbon/operating_ribbon.md
+++ b/docs/ribbon/operating_ribbon.md
@@ -190,7 +190,7 @@ ribbon.getSelected(); // -> ["selected_1", "selected_1.1"]
### Adding controls
-You can add controls dynamically with the **add()** method of [TreeCollection](tree_collection.md).
+You can add controls dynamically with the **add()** method of [TreeCollection](/tree_collection/).
~~~js
ribbon.data.add({
diff --git a/docs/ribbon/selectbutton.md b/docs/ribbon/selectbutton.md
index 6f5cce21..6a4d5f29 100644
--- a/docs/ribbon/selectbutton.md
+++ b/docs/ribbon/selectbutton.md
@@ -46,4 +46,4 @@ You can provide the [following properties](ribbon/api/api_selectbutton_propertie
## Operations with a button
-You can perform operations over the SelectButton control with the help of the available [Ribbon API](ribbon/api/api_overview.md) and [Tree Collection API](tree_collection.md).
+You can perform operations over the SelectButton control with the help of the available [Ribbon API](ribbon/api/api_overview.md) and [Tree Collection API](/tree_collection/).
diff --git a/docs/sidebar/api/api_overview.md b/docs/sidebar/api/api_overview.md
index f271422b..dae27f6b 100644
--- a/docs/sidebar/api/api_overview.md
+++ b/docs/sidebar/api/api_overview.md
@@ -27,7 +27,7 @@ description: You can explore the API of Sidebar in the documentation of the DHTM
| [](sidebar/api/sidebar_unselect_method.md) | @getshort(sidebar/api/sidebar_unselect_method.md) |
:::info important
-Use [TreeCollection methods](tree_collection.md) to work with data.
+Use [TreeCollection methods](/tree_collection/) to work with data.
:::
## Sidebar events
@@ -48,7 +48,7 @@ Use [TreeCollection methods](tree_collection.md) to work with data.
| [](sidebar/api/sidebar_openmenu_event.md) | @getshort(sidebar/api/sidebar_openmenu_event.md) |
:::info important
-Use [TreeCollection events](tree_collection.md#events) to work with data.
+Use [TreeCollection events](/tree_collection/#events) to work with data.
:::
## Sidebar properties
diff --git a/docs/sidebar/api/sidebar_css_config.md b/docs/sidebar/api/sidebar_css_config.md
index 852be939..e500af7c 100644
--- a/docs/sidebar/api/sidebar_css_config.md
+++ b/docs/sidebar/api/sidebar_css_config.md
@@ -50,4 +50,4 @@ const sidebar = new dhx.Sidebar("sidebar_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/sidebar/customhtmlbutton.md b/docs/sidebar/customhtmlbutton.md
index 6039b571..3b91e031 100644
--- a/docs/sidebar/customhtmlbutton.md
+++ b/docs/sidebar/customhtmlbutton.md
@@ -14,7 +14,7 @@ This is an item that contains any custom HTML content (for example, an image, ic
## Adding Custom HTML
-Any custom HTML content can be easily added to a sidebar with the help of the **add()** method of [Tree Collection](tree_collection.md):
+Any custom HTML content can be easily added to a sidebar with the help of the **add()** method of [Tree Collection](/tree_collection/):
~~~js
sidebar.data.add({
@@ -39,4 +39,4 @@ You can provide the [following properties](sidebar/api/api_customhtml_properties
## Working with Custom HTML
-You can perform operations over the **Custom HTML** item with the help of the available [Sidebar API](sidebar/api/api_overview.md) and [Tree Collection API](tree_collection.md).
+You can perform operations over the **Custom HTML** item with the help of the available [Sidebar API](sidebar/api/api_overview.md) and [Tree Collection API](/tree_collection/).
diff --git a/docs/sidebar/features.md b/docs/sidebar/features.md
index d0fb3295..8ccba927 100644
--- a/docs/sidebar/features.md
+++ b/docs/sidebar/features.md
@@ -16,14 +16,14 @@ In this section you can find out how to initialize Sidebar, how to load data int
| Topic | Description |
| -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| [Basic initialization](../initialization/) | Learn how to initialize a Sidebar |
-| [Initialization of a collapsed Sidebar](../sidebar_config/#collapsed-mode) | Learn how to initialize a Sidebar in the collapsed state ([Example](https://snippet.dhtmlx.com/bkh54ir7)) |
+| [Basic initialization](sidebar/initialization.md) | Learn how to initialize a Sidebar |
+| [Initialization of a collapsed Sidebar](sidebar/sidebar_config.md#collapsed-mode) | Learn how to initialize a Sidebar in the collapsed state ([Example](https://snippet.dhtmlx.com/bkh54ir7)) |
### Loading data into Sidebar
| Topic | Description |
| ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| [Loading data into Sidebar](../data_loading/) | Read how to load the initial data into Sidebar |
+| [Loading data into Sidebar](sidebar/data_loading.md) | Read how to load the initial data into Sidebar |
| [Initialization with config.data](https://snippet.dhtmlx.com/y8y7iw42) | The example shows how to load data into Sidebar on the initialization stage |
| [Initialization with data.load()](https://snippet.dhtmlx.com/mq4ggjmm) | The example shows how to load data from an external file |
| [Initialization with data.parse()](https://snippet.dhtmlx.com/x0qpt7pk) | The example shows how to load data from a local data source |
@@ -33,19 +33,19 @@ In this section you can find out how to initialize Sidebar, how to load data int
| Topic | Description |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| [Custom HTML](../customhtmlbutton/) | Learn how to add an item with custom HTML content into the sidebar ([Example](https://snippet.dhtmlx.com/26ds0gxp)) |
-| [MenuItem](../menuitem/) | Learn how to add a MenuItem control into the sidebar |
-| [NavItem](../navitem/) | Learn how to add a NavItem control into the sidebar ([Example](https://snippet.dhtmlx.com/potv580p)) |
-| [Separator](../separator/) | Learn how to add a Separator control into the sidebar ([Example](https://snippet.dhtmlx.com/aq2l1z5n)) |
-| [Spacer](../spacer/) | Learn how to add a Spacer control into the sidebar ([Example](https://snippet.dhtmlx.com/wk50830i)) |
-| [Title](../title/) | Learn how to add a Title control into the sidebar |
+| [Custom HTML](sidebar/customhtmlbutton.md) | Learn how to add an item with custom HTML content into the sidebar ([Example](https://snippet.dhtmlx.com/26ds0gxp)) |
+| [MenuItem](sidebar/menuitem.md) | Learn how to add a MenuItem control into the sidebar |
+| [NavItem](sidebar/navitem.md) | Learn how to add a NavItem control into the sidebar ([Example](https://snippet.dhtmlx.com/potv580p)) |
+| [Separator](sidebar/separator.md) | Learn how to add a Separator control into the sidebar ([Example](https://snippet.dhtmlx.com/aq2l1z5n)) |
+| [Spacer](sidebar/spacer.md) | Learn how to add a Spacer control into the sidebar ([Example](https://snippet.dhtmlx.com/wk50830i)) |
+| [Title](sidebar/title.md) | Learn how to add a Title control into the sidebar |
### Integration
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Sidebar with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Sidebar with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Sidebar with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -56,13 +56,13 @@ In this section you can learn how to customize a Sidebar and configure its size.
| Topic | Description |
| --------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-| [Width of Sidebar](../api/sidebar_width_config/) | Learn how to set the necessary width of Sidebar |
-| [Minimal width of Sidebar](../api/sidebar_minwidth_config/) | Learn how to set the minimal width of Sidebar in the collapsed state |
+| [Width of Sidebar](sidebar/api/sidebar_width_config.md) | Learn how to set the necessary width of Sidebar |
+| [Minimal width of Sidebar](sidebar/api/sidebar_minwidth_config.md) | Learn how to set the minimal width of Sidebar in the collapsed state |
| [Adding HTML content into items](https://snippet.dhtmlx.com/xb6av4qj) | The example shows how to add custom element into the Sidebar items |
-| [Applying custom icons](../customization/#icons) | Learn how to add custom icons to Sidebar items |
-| [Styling Sidebar](../customization/#styling) | Learn how to customize a Sidebar ([Example](https://snippet.dhtmlx.com/3mhhvvcr)) |
+| [Applying custom icons](sidebar/customization.md#icons) | Learn how to add custom icons to Sidebar items |
+| [Styling Sidebar](sidebar/customization.md#styling) | Learn how to customize a Sidebar ([Example](https://snippet.dhtmlx.com/3mhhvvcr)) |
| [CSS template A](https://snippet.dhtmlx.com/sidebar_template_a) | The example of a CSS template for DHTMLX Sidebar |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Sidebar
@@ -72,18 +72,18 @@ In this section you may study how to expand or collapse a Sidebar, how to disabl
| Topic | Description |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| [Expanding / collapsing Sidebar](../work_with_sidebar/#expanding-and-collapsing-sidebar) | Learn how to expand or collapse a Sidebar dynamically ([Example](https://snippet.dhtmlx.com/ydlltdq6)) |
-| [Toggling Sidebar](../work_with_sidebar/#toggling-sidebar) | Learn how to toggle a Sidebar ([Example](https://snippet.dhtmlx.com/wll2h9nd)) |
-| [Is collapsed](../work_with_sidebar/#checking-if-sidebar-is-collapsed) | Learn how to check whether a Sidebar is collapsed |
+| [Expanding / collapsing Sidebar](sidebar/work_with_sidebar.md#expanding-and-collapsing-sidebar) | Learn how to expand or collapse a Sidebar dynamically ([Example](https://snippet.dhtmlx.com/ydlltdq6)) |
+| [Toggling Sidebar](sidebar/work_with_sidebar.md#toggling-sidebar) | Learn how to toggle a Sidebar ([Example](https://snippet.dhtmlx.com/wll2h9nd)) |
+| [Is collapsed](sidebar/work_with_sidebar.md#checking-if-sidebar-is-collapsed) | Learn how to check whether a Sidebar is collapsed |
### How to work with Sidebar controls
| Topic | Description |
| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Disabling / enabling controls](../work_with_sidebar/#disabling-and-enabling-controls) | Learn how to disable or enable controls on a page dynamically ([Example 1](https://snippet.dhtmlx.com/ea9fywne), [Example 2](https://snippet.dhtmlx.com/bi40ovcw)) |
-| [Is disabled](../work_with_sidebar/#checking-if-a-sidebar-item-is-disabled) | Learn how to check whether a control is disabled on the page |
-| [Hiding / showing controls](../work_with_sidebar/#hiding-and-showing-controls) | Learn how to hide or show controls dynamically ([Example](https://snippet.dhtmlx.com/5hsowdoy)) |
+| [Disabling / enabling controls](sidebar/work_with_sidebar.md#disabling-and-enabling-controls) | Learn how to disable or enable controls on a page dynamically ([Example 1](https://snippet.dhtmlx.com/ea9fywne), [Example 2](https://snippet.dhtmlx.com/bi40ovcw)) |
+| [Is disabled](sidebar/work_with_sidebar.md#checking-if-a-sidebar-item-is-disabled) | Learn how to check whether a control is disabled on the page |
+| [Hiding / showing controls](sidebar/work_with_sidebar.md#hiding-and-showing-controls) | Learn how to hide or show controls dynamically ([Example](https://snippet.dhtmlx.com/5hsowdoy)) |
## How to work with data in Sidebar
@@ -92,11 +92,11 @@ This section will tell you how to use [TreeCollection API](guides/datacollection
| Topic | Description |
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Adding controls](../work_with_sidebar/#adding-new-controls-into-sidebar) | Learn how to add new controls into Sidebar dynamically ([Example](https://snippet.dhtmlx.com/jcnw95ac)) |
-| [Updating controls](../work_with_sidebar/#updating-config-of-controls) | Learn how to update config options of a Sidebar control (for example, to change the icon of the control) ([Example](https://snippet.dhtmlx.com/p1zu63le)) |
-| [Rearranging controls](../work_with_sidebar/#rearranging-controls) | Learn how to move Sidebar controls to another position |
-| [Removing controls](../work_with_sidebar/#removing-controls-from-sidebar) | Learn how to remove a control from Sidebar ([Example](https://snippet.dhtmlx.com/ecp3etuf)) |
-| [TreeCollection API](../../tree_collection/) | Check the list of all available TreeCollection API|
+| [Adding controls](sidebar/work_with_sidebar.md#adding-new-controls-into-sidebar) | Learn how to add new controls into Sidebar dynamically ([Example](https://snippet.dhtmlx.com/jcnw95ac)) |
+| [Updating controls](sidebar/work_with_sidebar.md#updating-config-of-controls) | Learn how to update config options of a Sidebar control (for example, to change the icon of the control) ([Example](https://snippet.dhtmlx.com/p1zu63le)) |
+| [Rearranging controls](sidebar/work_with_sidebar.md#rearranging-controls) | Learn how to move Sidebar controls to another position |
+| [Removing controls](sidebar/work_with_sidebar.md#removing-controls-from-sidebar) | Learn how to remove a control from Sidebar ([Example](https://snippet.dhtmlx.com/ecp3etuf)) |
+| [TreeCollection API](/tree_collection/) | Check the list of all available TreeCollection API|
## How to work with selection
@@ -105,10 +105,10 @@ In this section you can learn how to work with selection functionality.
| Topic | Description |
| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| [Setting selection](../work_with_sidebar/#selectingunselecting-an-item) | Learn how to select a particular Sidebar item ([Example](https://snippet.dhtmlx.com/3odod5v1)) |
-| [Is selected](../work_with_sidebar/#checking-if-a-sidebar-item-is-selected) | Learn how to check whether a Sidebar item is selected ([Example](https://snippet.dhtmlx.com/3odod5v1)) |
-| [Getting selected items](../work_with_sidebar/#getting-selected-items) | Learn how to get the selected items |
-| [Removing selection](../work_with_sidebar/#selectingunselecting-an-item) | Learn how to remove selection from a selected item ([Example](https://snippet.dhtmlx.com/3odod5v1)) |
+| [Setting selection](sidebar/work_with_sidebar.md#selectingunselecting-an-item) | Learn how to select a particular Sidebar item ([Example](https://snippet.dhtmlx.com/3odod5v1)) |
+| [Is selected](sidebar/work_with_sidebar.md#checking-if-a-sidebar-item-is-selected) | Learn how to check whether a Sidebar item is selected ([Example](https://snippet.dhtmlx.com/3odod5v1)) |
+| [Getting selected items](sidebar/work_with_sidebar.md#getting-selected-items) | Learn how to get the selected items |
+| [Removing selection](sidebar/work_with_sidebar.md#selectingunselecting-an-item) | Learn how to remove selection from a selected item ([Example](https://snippet.dhtmlx.com/3odod5v1)) |
## How to work with Sidebar events
@@ -117,7 +117,7 @@ This section explains how to work with Sidebar events.
| Topic | Description |
| :------------------------------------------ | :----------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../events/) | Learn how to attach, detach, or call the Sidebar events ([Example](https://snippet.dhtmlx.com/qfddiu3i)) |
+| [Event handling](sidebar/events.md) | Learn how to attach, detach, or call the Sidebar events ([Example](https://snippet.dhtmlx.com/qfddiu3i)) |
## API reference
@@ -127,21 +127,21 @@ In this section you can find out corresponding references of Sidebar and its con
| Topic | Description |
| ----------------------------------------------------------- | --------------------------------------------------------- |
-| [Sidebar methods](../../category/sidebar-methods/) | Check the list of Sidebar methods |
-| [Sidebar events](../../category/sidebar-events/) | Check the list of Sidebar events |
-| [Sidebar properties](../../category/sidebar-properties/) | Check the list of Sidebar properties |
-| [TreeCollection API](../../tree_collection/) | Check the API of TreeCollection to work with Sidebar data |
+| [Sidebar methods](/category/sidebar-methods/) | Check the list of Sidebar methods |
+| [Sidebar events](/category/sidebar-events/) | Check the list of Sidebar events |
+| [Sidebar properties](/category/sidebar-properties/) | Check the list of Sidebar properties |
+| [TreeCollection API](/tree_collection/) | Check the API of TreeCollection to work with Sidebar data |
### Sidebar controls API
| Topic | Description |
| ----------------------------------------------------------- | --------------------------------------------------------- |
-| [Custom HTML properties](../api/api_customhtml_properties/) | Check the list of properties of the Custom HTML control |
-| [MenuItem properties](../api/api_menuitem_properties/) | Check the list of properties of the MenuItem control |
-| [NavItem properties](../api/api_navitem_properties/) | Check the list of properties of the NavItem control |
-| [Separator properties](../api/api_separator_properties/) | Check the list of properties of the Separator control |
-| [Spacer properties](../api/api_spacer_properties/) | Check the list of properties of the Spacer control |
-| [Title properties](../api/api_title_properties/) | Check the list of properties of the Title control |
+| [Custom HTML properties](sidebar/api/api_customhtml_properties.md) | Check the list of properties of the Custom HTML control |
+| [MenuItem properties](sidebar/api/api_menuitem_properties.md) | Check the list of properties of the MenuItem control |
+| [NavItem properties](sidebar/api/api_navitem_properties.md) | Check the list of properties of the NavItem control |
+| [Separator properties](sidebar/api/api_separator_properties.md) | Check the list of properties of the Separator control |
+| [Spacer properties](sidebar/api/api_spacer_properties.md) | Check the list of properties of the Spacer control |
+| [Title properties](sidebar/api/api_title_properties.md) | Check the list of properties of the Title control |
## Common functionality
@@ -150,10 +150,10 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [Custom scroll](../../common_features/custom_scroll/) | Learn how to enable custom scroll in Sidebar |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [Custom scroll](common_features/custom_scroll.md) | Learn how to enable custom scroll in Sidebar |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/sidebar/index.md b/docs/sidebar/index.md
index 4c68bf01..69353a47 100644
--- a/docs/sidebar/index.md
+++ b/docs/sidebar/index.md
@@ -25,7 +25,7 @@ You can check the following page to learn how to build a full-featured DHTMLX Si
- You can get DHTMLX Sidebar as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml)
- There are also [online samples for DHTMLX Sidebar](https://snippet.dhtmlx.com/3mhhvvcr?tag=sidebar)
-- To work with data of Sidebar check [TreeCollection API](tree_collection.md)
+- To work with data of Sidebar check [TreeCollection API](/tree_collection/)
## Guides
@@ -33,20 +33,20 @@ You can check the following page to learn how to build a full-featured DHTMLX Si
Tells about creation of Sidebar and shows all available ways of data loading, configuring and styling the component, and working with controls.
-- [](initialization.md)
-- [](data_loading.md)
-- [](sidebar_config.md)
-- [](work_with_sidebar.md)
-- [](customization.md)
-- [](events.md)
+- [](sidebar/initialization.md)
+- [](sidebar/data_loading.md)
+- [](sidebar/sidebar_config.md)
+- [](sidebar/work_with_sidebar.md)
+- [](sidebar/customization.md)
+- [](sidebar/events.md)
### Sidebar controls
Dwells on the creation of Sidebar controls and the possibilities of manipulating them.
-- [](customhtmlbutton.md)
-- [](menuitem.md)
-- [](navitem.md)
-- [](separator.md)
-- [](spacer.md)
-- [](title.md)
+- [](sidebar/customhtmlbutton.md)
+- [](sidebar/menuitem.md)
+- [](sidebar/navitem.md)
+- [](sidebar/separator.md)
+- [](sidebar/spacer.md)
+- [](sidebar/title.md)
diff --git a/docs/sidebar/separator.md b/docs/sidebar/separator.md
index 0aeb73dd..62688c93 100644
--- a/docs/sidebar/separator.md
+++ b/docs/sidebar/separator.md
@@ -35,4 +35,4 @@ sidebar.show(id);
sidebar.hide(id);
~~~
-Check the full list of available operations in the [Sidebar API](sidebar/api/api_overview.md) and [Tree Collection API](tree_collection.md).
+Check the full list of available operations in the [Sidebar API](sidebar/api/api_overview.md) and [Tree Collection API](/tree_collection/).
diff --git a/docs/sidebar/spacer.md b/docs/sidebar/spacer.md
index 04ab8890..585313bb 100644
--- a/docs/sidebar/spacer.md
+++ b/docs/sidebar/spacer.md
@@ -35,4 +35,4 @@ sidebar.show(id);
sidebar.hide(id);
~~~
-Check the full list of available operations in the [Sidebar API](sidebar/api/api_overview.md) and [Tree Collection API](tree_collection.md).
+Check the full list of available operations in the [Sidebar API](sidebar/api/api_overview.md) and [Tree Collection API](/tree_collection/).
diff --git a/docs/sidebar/work_with_sidebar.md b/docs/sidebar/work_with_sidebar.md
index dd867e92..e657d50e 100644
--- a/docs/sidebar/work_with_sidebar.md
+++ b/docs/sidebar/work_with_sidebar.md
@@ -167,7 +167,7 @@ sidebar.getSelected(); // -> ["selected_1", "selected_1.1"]
## Using Tree collection API
-You can manipulate the controls of Sidebar with the help of the [Tree collection API](tree_collection.md).
+You can manipulate the controls of Sidebar with the help of the [Tree collection API](/tree_collection/).
### Adding new controls into Sidebar
@@ -252,4 +252,4 @@ You can move menu controls to different positions with the **move()** method of
sidebar.data.move("2",0);
~~~
-{{note Check the full list of [Tree collection API](tree_collection.md).}}
+{{note Check the full list of [Tree collection API](/tree_collection/).}}
diff --git a/docs/slider/api/slider_css_config.md b/docs/slider/api/slider_css_config.md
index 7db9bab0..d5bff670 100644
--- a/docs/slider/api/slider_css_config.md
+++ b/docs/slider/api/slider_css_config.md
@@ -39,4 +39,4 @@ const slider = new dhx.Slider("slider_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/slider/features.md b/docs/slider/features.md
index 9c59242a..e2810f40 100644
--- a/docs/slider/features.md
+++ b/docs/slider/features.md
@@ -16,17 +16,17 @@ In this section you can find out how to initialize Slider in different modes and
| Topic | Description |
| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| [Basic initialization](../initializing_slider/) | Learn how to initialize Slider ([Example](https://snippet.dhtmlx.com/wipdmzbp)) |
-| [Initialization in the range mode](../range_slider/) | Learn how to initialize a Slider in the range mode ([Example](https://snippet.dhtmlx.com/nfdr84oy)) |
-| [Initialization in the inverse mode](../configuring_slider/#inverse-mode) | Learn how to initialize a Slider in the inverse mode ([Example](https://snippet.dhtmlx.com/xm8e84s2)) |
-| [Initialization in the vertical mode](../configuring_slider/#vertical-mode) | Learn how to initialize a Slider in the vertical mode ([Example](https://snippet.dhtmlx.com/rjborkca)) |
+| [Basic initialization](slider/initializing_slider.md) | Learn how to initialize Slider ([Example](https://snippet.dhtmlx.com/wipdmzbp)) |
+| [Initialization in the range mode](slider/range_slider.md) | Learn how to initialize a Slider in the range mode ([Example](https://snippet.dhtmlx.com/nfdr84oy)) |
+| [Initialization in the inverse mode](slider/configuring_slider.md#inverse-mode) | Learn how to initialize a Slider in the inverse mode ([Example](https://snippet.dhtmlx.com/xm8e84s2)) |
+| [Initialization in the vertical mode](slider/configuring_slider.md#vertical-mode) | Learn how to initialize a Slider in the vertical mode ([Example](https://snippet.dhtmlx.com/rjborkca)) |
### Integration
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Slider with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Slider with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Slider with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -37,13 +37,13 @@ In this section you can find out how to set the initial value of Slider, how to
| Topic | Description |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| [Setting initial value](../api/slider_value_config/) | Learn how to specify the initial value of a Slider |
-| [Specifying the min/max values](../configuring_slider/#minimal-and-maximal-values) | Learn how to define the start and end points of a Slider |
-| [Configuring Slider step](../configuring_slider/#step) | Learn how to configure the step the slider thumb will be moved with |
-| [Configuring Slider scale](../configuring_slider/#scale-settings) | Learn how to configure the scale of a Slider ([Example](https://snippet.dhtmlx.com/4a6l7cyy)) |
-| [Configuring Slider label](../configuring_slider/#slider-label) | Learn how to configure the label of a Slider ([Example](https://snippet.dhtmlx.com/4o7yttam)) |
-| [Making a label hidden](../api/slider_hiddenlabel_config/) | Learn how to initialize a Slider with hidden label |
-| [Configuring a tooltip](../configuring_slider/#tooltip) | Learn how to configure the tooltip for a Slider ([Example](https://snippet.dhtmlx.com/sxh66mnu)) |
+| [Setting initial value](slider/api/slider_value_config.md) | Learn how to specify the initial value of a Slider |
+| [Specifying the min/max values](slider/configuring_slider.md#minimal-and-maximal-values) | Learn how to define the start and end points of a Slider |
+| [Configuring Slider step](slider/configuring_slider.md#step) | Learn how to configure the step the slider thumb will be moved with |
+| [Configuring Slider scale](slider/configuring_slider.md#scale-settings) | Learn how to configure the scale of a Slider ([Example](https://snippet.dhtmlx.com/4a6l7cyy)) |
+| [Configuring Slider label](slider/configuring_slider.md#slider-label) | Learn how to configure the label of a Slider ([Example](https://snippet.dhtmlx.com/4o7yttam)) |
+| [Making a label hidden](slider/api/slider_hiddenlabel_config.md) | Learn how to initialize a Slider with hidden label |
+| [Configuring a tooltip](slider/configuring_slider.md#tooltip) | Learn how to configure the tooltip for a Slider ([Example](https://snippet.dhtmlx.com/sxh66mnu)) |
## How to customize Slider
@@ -53,8 +53,8 @@ In this section you can learn how to customize a Slider.
| Topic | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| [Custom scale](https://snippet.dhtmlx.com/jsfxnplp) | The example shows how to customize the Slider scale |
-| [Styling Slider](../customization/) | Learn how to change the look and feel of Slider ([Example](https://snippet.dhtmlx.com/ewizud5e)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Styling Slider](slider/customization.md) | Learn how to change the look and feel of Slider ([Example](https://snippet.dhtmlx.com/ewizud5e)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with Slider
@@ -62,12 +62,12 @@ In this section you can learn how to set, get the value of the Slider, how to di
| Topic | Description |
| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| [Setting the value of Slider](../usage/#setting-value) | Learn how to set the value for Slider dynamically ([Example](https://snippet.dhtmlx.com/shw55sub)) |
-| [Getting the value of Slider](../usage/#getting-value) | Learn how to get the current value of Slider ([Example](https://snippet.dhtmlx.com/xlb8nbdx)) |
-| [Disabling / enabling Slider](../usage/#disablingenabling-slider) | Learn how to disable and enable a Slider on the page ([Example](https://snippet.dhtmlx.com/po9hsc2l)) |
-| [Is disabled](../usage/#checking-if-a-slider-is-disabled) | Learn how to check whether a Slider is disabled ([Example](https://snippet.dhtmlx.com/fbo18fue)) |
-| [Setting focus on a Slider thumb](../api/slider_focus_method/) | Learn how to set focus on a Slider thumb |
-| [Removing focus](../api/slider_blur_method/) | Learn how remove focus from a Slider thumb |
+| [Setting the value of Slider](slider/usage.md#setting-value) | Learn how to set the value for Slider dynamically ([Example](https://snippet.dhtmlx.com/shw55sub)) |
+| [Getting the value of Slider](slider/usage.md#getting-value) | Learn how to get the current value of Slider ([Example](https://snippet.dhtmlx.com/xlb8nbdx)) |
+| [Disabling / enabling Slider](slider/usage.md#disablingenabling-slider) | Learn how to disable and enable a Slider on the page ([Example](https://snippet.dhtmlx.com/po9hsc2l)) |
+| [Is disabled](slider/usage.md#checking-if-a-slider-is-disabled) | Learn how to check whether a Slider is disabled ([Example](https://snippet.dhtmlx.com/fbo18fue)) |
+| [Setting focus on a Slider thumb](slider/api/slider_focus_method.md) | Learn how to set focus on a Slider thumb |
+| [Removing focus](slider/api/slider_blur_method.md) | Learn how remove focus from a Slider thumb |
## How to work with Slider events
@@ -76,7 +76,7 @@ This section explains how to work with Slider events.
| Topic | Description |
| :------------------------------------------ | :----------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../handling_events/) | Learn how to attach, detach, or call the Slider events ([Example](https://snippet.dhtmlx.com/sc7ov54z)) |
+| [Event handling](slider/handling_events.md) | Learn how to attach, detach, or call the Slider events ([Example](https://snippet.dhtmlx.com/sc7ov54z)) |
## API reference
@@ -84,9 +84,9 @@ In this section you can find out corresponding references of Slider API.
| Topic | Description |
| ------------------------------------------------------ | ----------------------------------- |
-| [Slider methods](../../category/slider-methods/) | Check the list of Slider methods |
-| [Slider events](../../category/slider-events/) | Check the list of Slider events |
-| [Slider properties](../../category/slider-properties/) | Check the list of Slider properties |
+| [Slider methods](/category/slider-methods/) | Check the list of Slider methods |
+| [Slider events](/category/slider-events/) | Check the list of Slider events |
+| [Slider properties](/category/slider-properties/) | Check the list of Slider properties |
## Common functionality
@@ -94,9 +94,9 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component's rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component's rendering |
## Any questions left?
diff --git a/docs/slider/index.md b/docs/slider/index.md
index ce785d55..b2a5d73c 100644
--- a/docs/slider/index.md
+++ b/docs/slider/index.md
@@ -29,13 +29,13 @@ You can check the following page to learn how to build a full-featured DHTMLX Sl
## Guides
-- [](initializing_slider.md)
-- [](configuring_slider.md)
-- [](range_slider.md)
-- [](usage.md)
-- [](customization.md)
-- [](handling_events.md)
+- [](slider/initializing_slider.md)
+- [](slider/configuring_slider.md)
+- [](slider/range_slider.md)
+- [](slider/usage.md)
+- [](slider/customization.md)
+- [](slider/handling_events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/tabbar/api/tabbar_css_config.md b/docs/tabbar/api/tabbar_css_config.md
index 5c62d79f..7264d1a5 100644
--- a/docs/tabbar/api/tabbar_css_config.md
+++ b/docs/tabbar/api/tabbar_css_config.md
@@ -48,4 +48,4 @@ const tabbar = new dhx.Tabbar("tabbar_container", {
**Related articles**:
- [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget)
-- [Themes](themes.md)
+- [Themes](/themes/)
diff --git a/docs/tabbar/features.md b/docs/tabbar/features.md
index 84a58d20..acbffb03 100644
--- a/docs/tabbar/features.md
+++ b/docs/tabbar/features.md
@@ -16,15 +16,15 @@ In this section you can find out how to initialize Tabbar, how to attach the nec
| Topic | Description |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| [Basic initialization](../init/) | Learn how to initialize a Tabbar ([Example](https://snippet.dhtmlx.com/uysfjo5z)) |
-| [Attaching widgets](../work_with_tabbar/#attaching-a-component-to-a-cell) | Learn how to attach a DHTMLX component to a Tabbar tab ([Example](https://snippet.dhtmlx.com/o1jwmw1l)) |
+| [Basic initialization](tabbar/init.md) | Learn how to initialize a Tabbar ([Example](https://snippet.dhtmlx.com/uysfjo5z)) |
+| [Attaching widgets](tabbar/work_with_tabbar.md#attaching-a-component-to-a-cell) | Learn how to attach a DHTMLX component to a Tabbar tab ([Example](https://snippet.dhtmlx.com/o1jwmw1l)) |
### Integration
| Topic | Description |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) |
-| [Optimus](optimus_guides.md) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
+| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Tabbar with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) |
| [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Tabbar with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) |
| [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Tabbar with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) |
@@ -35,9 +35,9 @@ In this section you will know how to create a Tabbar with the necessary number o
| Topic | Description |
| ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| [Defining Tabbar structure](../configuring_tabbar/#structure-of-tabs) | Learn how to create a Tabbar of the necessary structure ([Example](https://snippet.dhtmlx.com/uysfjo5z?tag=tabbar)) |
-| [Setting the active tab](../api/tabbar_activetab_config/) | Learn how to specify an active tab on initialization of Tabbar |
-| [Configuring Tabbar position](../configuring_tabbar/#position-of-tabbar) | Learn how to specify where the Tabbar should be displayed on the page ([Example](https://snippet.dhtmlx.com/xq6k0tts)) |
+| [Defining Tabbar structure](tabbar/configuring_tabbar.md#structure-of-tabs) | Learn how to create a Tabbar of the necessary structure ([Example](https://snippet.dhtmlx.com/uysfjo5z?tag=tabbar)) |
+| [Setting the active tab](tabbar/api/tabbar_activetab_config.md) | Learn how to specify an active tab on initialization of Tabbar |
+| [Configuring Tabbar position](tabbar/configuring_tabbar.md#position-of-tabbar) | Learn how to specify where the Tabbar should be displayed on the page ([Example](https://snippet.dhtmlx.com/xq6k0tts)) |
## How to configure Tabbar tabs
@@ -45,10 +45,10 @@ In this section you can find out how to configure the size, alignment and visibi
| Topic | Description |
| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Adding close buttons for tabs](../configuring_tabbar/#close-buttons-for-tabs) | Learn how to equip tabs with close buttons ([Example](https://snippet.dhtmlx.com/xqthiy66)) |
-| [Making tabs disabled](../configuring_tabbar/#disabled-tabs) | Learn how to initialize Tabbar with several disabled tabs ([Example](https://snippet.dhtmlx.com/xqthiy66)) |
-| [Configuring alignment of tabs](../configuring_tabbar/#alignment) | Learn how to configure alignment of tabs in Tabbar ([Example](https://snippet.dhtmlx.com/bctscs71)) |
-| [Rendering tabs without content](../configuring_tabbar/#tabs-without-content) | Learn how to render a tab without any content ([Example](https://snippet.dhtmlx.com/7jzrifql)) |
+| [Adding close buttons for tabs](tabbar/configuring_tabbar.md#close-buttons-for-tabs) | Learn how to equip tabs with close buttons ([Example](https://snippet.dhtmlx.com/xqthiy66)) |
+| [Making tabs disabled](tabbar/configuring_tabbar.md#disabled-tabs) | Learn how to initialize Tabbar with several disabled tabs ([Example](https://snippet.dhtmlx.com/xqthiy66)) |
+| [Configuring alignment of tabs](tabbar/configuring_tabbar.md#alignment) | Learn how to configure alignment of tabs in Tabbar ([Example](https://snippet.dhtmlx.com/bctscs71)) |
+| [Rendering tabs without content](tabbar/configuring_tabbar.md#tabs-without-content) | Learn how to render a tab without any content ([Example](https://snippet.dhtmlx.com/7jzrifql)) |
## How to customize Tabbar and tabs
@@ -57,11 +57,11 @@ In this section you can learn how to customize a Tabbar and configure the size o
| Topic | Description |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| [Width and height of tabs](../configuring_tabbar/#size-of-tabs) | Learn how to configure the width and height for tabs ([Example](https://snippet.dhtmlx.com/yy841z3j)) |
-| [Auto-width and auto-height for tabs](../configuring_tabbar/#autosize-for-tabs) | Learn how to configure autoheight and autowidth for tabs ([Example 1](https://snippet.dhtmlx.com/mlzko8am),[Example 2](https://snippet.dhtmlx.com/pqvycp1c))|
+| [Width and height of tabs](tabbar/configuring_tabbar.md#size-of-tabs) | Learn how to configure the width and height for tabs ([Example](https://snippet.dhtmlx.com/yy841z3j)) |
+| [Auto-width and auto-height for tabs](tabbar/configuring_tabbar.md#autosize-for-tabs) | Learn how to configure autoheight and autowidth for tabs ([Example 1](https://snippet.dhtmlx.com/mlzko8am),[Example 2](https://snippet.dhtmlx.com/pqvycp1c))|
| [Adding tooltips for tabs](https://snippet.dhtmlx.com/o5x1e3i8) | The example shows how to add tooltips for Tabbar tabs |
-| [Styling Tabbar](../customization/#styling-tabbar) | Learn how to change the look and feel of Tabbar ([Example](https://snippet.dhtmlx.com/47en9f0a)) |
-| [List of CSS classes](../../helpers/base_elements/) | A set of CSS classes provided by the DHTMLX library |
+| [Styling Tabbar](tabbar/customization.md#styling-tabbar) | Learn how to change the look and feel of Tabbar ([Example](https://snippet.dhtmlx.com/47en9f0a)) |
+| [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library |
## How to work with tabs
@@ -70,11 +70,11 @@ In this section you will learn how to add or remove, enable or disable a tab, ho
| Topic | Description |
| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| [Adding / removing tabs](../work_with_tabbar/#addingremoving-tabs) | Learn how add or remove tabs of Tabbar dynamically ([Example](https://snippet.dhtmlx.com/z5vjj83y)) |
-| [Enabling / disabling a tab](../work_with_tabbar/#enablingdisabling-a-tab) | Learn how to enable or disable a tab dynamically ([Example](https://snippet.dhtmlx.com/9l3egq3z)) |
-| [Is disabled tab](../work_with_tabbar/#checking-if-a-tab-is-disabled) | Learn how to check whether a tab is disabled on the page ([Example](https://snippet.dhtmlx.com/86er2y7m)) |
-| [Setting the active tab](../work_with_tabbar/#settinggetting-the-active-tab) | Learn how to set the active tab ([Example](https://snippet.dhtmlx.com/u9ryz38f)) |
-| [Getting the active tab](../work_with_tabbar/#settinggetting-the-active-tab) | Learn how get the currently active tab ([Example](https://snippet.dhtmlx.com/xpvkcwiu)) |
+| [Adding / removing tabs](tabbar/work_with_tabbar.md#addingremoving-tabs) | Learn how add or remove tabs of Tabbar dynamically ([Example](https://snippet.dhtmlx.com/z5vjj83y)) |
+| [Enabling / disabling a tab](tabbar/work_with_tabbar.md#enablingdisabling-a-tab) | Learn how to enable or disable a tab dynamically ([Example](https://snippet.dhtmlx.com/9l3egq3z)) |
+| [Is disabled tab](tabbar/work_with_tabbar.md#checking-if-a-tab-is-disabled) | Learn how to check whether a tab is disabled on the page ([Example](https://snippet.dhtmlx.com/86er2y7m)) |
+| [Setting the active tab](tabbar/work_with_tabbar.md#settinggetting-the-active-tab) | Learn how to set the active tab ([Example](https://snippet.dhtmlx.com/u9ryz38f)) |
+| [Getting the active tab](tabbar/work_with_tabbar.md#settinggetting-the-active-tab) | Learn how get the currently active tab ([Example](https://snippet.dhtmlx.com/xpvkcwiu)) |
## How to work with Tabbar events
@@ -83,7 +83,7 @@ This section explains how to work with Tabbar events.
| Topic | Description |
| :------------------------------------------ | :----------------------------------------------------------------------------------------------------- |
| [Event basic rules](guides/events_guide.md) | Learn basic rules on how to work with events |
-| [Event handling](../events/) | Learn how to attach, detach, or call the Tabbar events ([Example](https://snippet.dhtmlx.com/dld2qo1m)) |
+| [Event handling](tabbar/events.md) | Learn how to attach, detach, or call the Tabbar events ([Example](https://snippet.dhtmlx.com/dld2qo1m)) |
## API reference
@@ -91,9 +91,9 @@ In this section you can find out corresponding references of Tabbar API.
| Topic | Description |
| ------------------------------------------------------ | ----------------------------------- |
-| [Tabbar methods](../../category/tabbar-methods/) | Check the list of Tabbar methods |
-| [Tabbar events](../../category/tabbar-events/) | Check the list of Tabbar events |
-| [Tabbar properties](../../category/tabbar-properties/) | Check the list of Tabbar properties |
+| [Tabbar methods](/category/tabbar-methods/) | Check the list of Tabbar methods |
+| [Tabbar events](/category/tabbar-events/) | Check the list of Tabbar events |
+| [Tabbar properties](/category/tabbar-properties/) | Check the list of Tabbar properties |
## Common functionality
@@ -102,10 +102,10 @@ In this section you will learn about common functionality of the library which c
| Topic | Description |
| ------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| [Touch support](../../common_features/touch_support/) | Learn how to work with touch support ([Example](https://snippet.dhtmlx.com/q3cu6x1a)) |
-| [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript |
-| [Custom scroll](../../common_features/custom_scroll/) | Learn how to enable custom scroll in Layout cells |
-| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering |
+| [Touch support](common_features/touch_support.md) | Learn how to work with touch support ([Example](https://snippet.dhtmlx.com/q3cu6x1a)) |
+| [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript |
+| [Custom scroll](common_features/custom_scroll.md) | Learn how to enable custom scroll in Layout cells |
+| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering |
## Any questions left?
diff --git a/docs/tabbar/index.md b/docs/tabbar/index.md
index 1afeac5f..c16a7d9e 100644
--- a/docs/tabbar/index.md
+++ b/docs/tabbar/index.md
@@ -29,12 +29,12 @@ You can check the following page to learn how to build a full-featured DHTMLX Ta
## Guides
-- [](init.md)
-- [](configuring_tabbar.md)
-- [](work_with_tabbar.md)
-- [](customization.md)
-- [](events.md)
+- [](tabbar/init.md)
+- [](tabbar/configuring_tabbar.md)
+- [](tabbar/work_with_tabbar.md)
+- [](tabbar/customization.md)
+- [](tabbar/events.md)
## Other
-- [](../migration.md)
+- [](migration.md)
diff --git a/docs/themes/api/themes_settheme_method.md b/docs/themes/api/themes_settheme_method.md
index c0f8d882..78b921e7 100644
--- a/docs/themes/api/themes_settheme_method.md
+++ b/docs/themes/api/themes_settheme_method.md
@@ -72,7 +72,7 @@ dhx.setTheme("dark"); // apply the "dark" theme to the body
@descr:
-**Related article:** [Themes overview](themes.md)
+**Related article:** [Themes overview](/themes/)
**Related samples:**
diff --git a/docs/themes/change_base_themes.md b/docs/themes/change_base_themes.md
index 4f9ea185..8333e5ff 100644
--- a/docs/themes/change_base_themes.md
+++ b/docs/themes/change_base_themes.md
@@ -62,7 +62,7 @@ In addition, values of variables, which are calculated on the base of the primar
## Changing a separate theme
-If you want to override some color values for a separate [Suite theme](themes.md#suite-themes), you need to do this in the 'data-dhx-theme' attribute:
+If you want to override some color values for a separate [Suite theme](/themes/#suite-themes), you need to do this in the 'data-dhx-theme' attribute:
~~~html {1-27,39}