diff --git a/docs/calendar/configuring.md b/docs/calendar/configuring.md index 6d6eae1d2..35a404202 100644 --- a/docs/calendar/configuring.md +++ b/docs/calendar/configuring.md @@ -16,7 +16,7 @@ There are several modes of displaying Calendar, which are set via the [](calenda const calendar = new dhx.Calendar("calendar_container"); ~~~ -![](../assets/calendar/calendar_mode.png) +![Calendar in default day mode showing the month grid for July 2019 in DHTMLX Suite](/img/calendar/calendar_mode.png) - **"month"** - only months of the current year are shown in the calendar @@ -26,7 +26,7 @@ const calendar = new dhx.Calendar("calendar_container", { }); ~~~ -![](../assets/calendar/month_mode.png) +![Calendar in month mode listing the twelve months of 2019 in DHTMLX Suite](/img/calendar/month_mode.png) - **"year"** - only years are shown, including the current one @@ -36,7 +36,7 @@ const calendar = new dhx.Calendar("calendar_container", { }); ~~~ -![](../assets/calendar/year_mode.png) +![Calendar in year mode showing the years 2016 to 2027 in DHTMLX Suite](/img/calendar/year_mode.png) **Related sample**: [Calendar. Calendar modes](https://snippet.dhtmlx.com/n9q0tc0q) @@ -57,7 +57,7 @@ const calendar = new dhx.Calendar("calendar_container", { ## Disabled dates -![](../assets/calendar/blocked_dates.png) +![Calendar month view with weekend days disabled and dimmed in DHTMLX Suite](/img/calendar/blocked_dates.png) **Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga) @@ -84,7 +84,7 @@ const calendar = new dhx.Calendar("calendar_container", { ## Displaying only current month -![](../assets/calendar/this_month_only.png) +![Calendar showing only the current month days without adjacent month dates in DHTMLX Suite](/img/calendar/this_month_only.png) **Related sample**: [Calendar. The days of this month only](https://snippet.dhtmlx.com/4wi5hbtr) @@ -98,7 +98,7 @@ const calendar = new dhx.Calendar("calendar_container", { ## Highlighted dates -![](../assets/calendar/marked_dates.png) +![Calendar month view with Saturdays highlighted by red circular markers in DHTMLX Suite](/img/calendar/marked_dates.png) **Related sample**: [Calendar. Marked and disabled dates](https://snippet.dhtmlx.com/ic5oeiga) @@ -190,7 +190,7 @@ Please note that the format of date in the Calendar is defined by the dateFormat ## Numbers of weeks -![](../assets/calendar/week_numbers.png) +![Calendar month view with week numbers shown in a left-hand column in DHTMLX Suite](/img/calendar/week_numbers.png) **Related sample**: [Calendar. Numbers of weeks](https://snippet.dhtmlx.com/9692gk6n) @@ -204,7 +204,7 @@ const calendar = new dhx.Calendar("calendar_container", { ## Range mode -![](../assets/calendar/range_mode.png) +![Calendar in range mode with a span of dates highlighted in July 2020 in DHTMLX Suite](/img/calendar/range_mode.png) **Related sample**: [Calendar. Range](https://snippet.dhtmlx.com/2mrj53h0) @@ -224,7 +224,7 @@ The **value** option should have the array type and contain a pair of values (ei ## Start of the week -![](../assets/calendar/weekstart_monday.png) +![Calendar month view with the week starting on Monday in DHTMLX Suite](/img/calendar/weekstart_monday.png) **Related sample**: [Calendar. Week start](https://snippet.dhtmlx.com/kaxmurh9) @@ -248,7 +248,7 @@ const calendar = new dhx.Calendar("calendar_container", { }); ~~~ -![](../assets/calendar/timepicker_format.png) +![Two Calendars comparing 24-hour and 12-hour timepicker formats in DHTMLX Suite](/img/calendar/timepicker_format.png) **Related sample**: [Calendar. Timepicker In Calendar](https://snippet.dhtmlx.com/jkbfb202) @@ -256,7 +256,7 @@ const calendar = new dhx.Calendar("calendar_container", { ## Width of calendar -![](../assets/calendar/calendar_width.png) +![Calendar month view rendered at a wider custom width in DHTMLX Suite](/img/calendar/calendar_width.png) **Related sample**: [Calendar. Calendar width](https://snippet.dhtmlx.com/azm0u5ns) diff --git a/docs/calendar/customization.md b/docs/calendar/customization.md index 1e10d1f56..e4e548084 100644 --- a/docs/calendar/customization.md +++ b/docs/calendar/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Calendar in the documentation There is a possibility to make changes in the look and feel of a calendar. For example, change its background color: -![](../assets/calendar/styled_calendar.png) +![Calendar month view styled with a custom teal primary color in DHTMLX Suite](/img/calendar/styled_calendar.png) **Related sample**: [Calendar. Styling (custom CSS)](https://snippet.dhtmlx.com/2045cbe1) @@ -56,7 +56,7 @@ For example: ## Styling selected dates -![](../assets/calendar/calendar_range_styling.png) +![Two Calendars with a custom red selected date and pink range highlight in DHTMLX Suite](/img/calendar/calendar_range_styling.png) **Related sample**: [Calendar. Custom styles for selected date](https://snippet.dhtmlx.com/9u0ix3na) diff --git a/docs/calendar/datepicker.md b/docs/calendar/datepicker.md index f19adb367..54f0f8ee8 100644 --- a/docs/calendar/datepicker.md +++ b/docs/calendar/datepicker.md @@ -8,7 +8,7 @@ description: You can explore the DatePicker of Calendar in the documentation of You can use DHTMLX Calendar as a date picker by putting it inside a popup. -![Date picker](./../assets/calendar/date_picker.png) +![Calendar used as a date picker popup attached to a date input field in DHTMLX Suite](/img/calendar/date_picker.png) First, you should create a popup and then attach a calendar into it. Follow the steps below: diff --git a/docs/calendar/index.md b/docs/calendar/index.md index d79794b71..83cd2a839 100644 --- a/docs/calendar/index.md +++ b/docs/calendar/index.md @@ -8,7 +8,7 @@ description: You can have an overview of Calendar in the documentation of the DH DHTMLX Calendar is a component that allows users to view and select dates. You can create calendar in one of 4 modes: days, months, years, or as a timepicker. This component is a great date picker solution for your website or application. Check [online samples for DHTMLX Calendar](https://snippet.dhtmlx.com/jkbfb202?tag=calendar). -![DHTMLX Calendar](../assets/calendar/calendar_front.png) +![Calendar month view for April 2019 with the 16th selected and a timepicker in DHTMLX Suite](/img/calendar/calendar_front.png) ## Features diff --git a/docs/calendar/localizing_calendar.md b/docs/calendar/localizing_calendar.md index 711e9b109..6ebf4c7c4 100644 --- a/docs/calendar/localizing_calendar.md +++ b/docs/calendar/localizing_calendar.md @@ -8,7 +8,7 @@ description: You can explore the localization of Calendar in the documentation o You can apply different languages to the interface of dhtmlxCalendar. You just need to translate the corresponding strings for Calendar labels and apply a ready locale to the component. -![](../assets/calendar/locale.png) +![Calendar localized into German with translated month and day names in DHTMLX Suite](/img/calendar/locale.png) ## Default locale diff --git a/docs/calendar/operating_calendar.md b/docs/calendar/operating_calendar.md index ee331bc62..8da5d7a44 100644 --- a/docs/calendar/operating_calendar.md +++ b/docs/calendar/operating_calendar.md @@ -97,7 +97,7 @@ const date = calendar.getValue(); // -> ["03/06/19", "19/06/19"] You can create two calendars and link them to provide the ability of selecting a date range. The first calendar will be used for setting the start date of the range, while the end date of the range will be specified in the second calendar. -![](../assets/calendar/date_range.png) +![Two linked Calendars selecting a date range across July and August in DHTMLX Suite](/img/calendar/date_range.png) Use the [](calendar/api/calendar_link_method.md) method and pass as a parameter the object of the second calendar to link the first calendar to. In the example below the [Change](calendar/api/calendar_change_event.md) event is intended to output the start and end dates of the selected range: @@ -160,7 +160,7 @@ In case a date has been successfully added into the calendar, the method will re You can add tooltips for dates and show them on the [](calendar/api/calendar_datemouseover_event.md) event. For example, you can add tooltips to mark some special days: -![](../assets/calendar/tooltips.png) +![Calendar month view showing a Mum's birthday tooltip on a hovered date in DHTMLX Suite](/img/calendar/tooltips.png) ~~~js const special_days = { diff --git a/docs/chart/charts_overview.md b/docs/chart/charts_overview.md index 658628b7f..2a9a0a948 100644 --- a/docs/chart/charts_overview.md +++ b/docs/chart/charts_overview.md @@ -34,7 +34,7 @@ how the number of staff has increased over several years. Choose this variant wh ### Line chart -![Line chart](../assets/chart/line_overview.png) +![Line chart comparing four company data series over time in DHTMLX Suite](/img/chart/line_overview.png) **Related sample**: [Chart. Line chart initialization](https://snippet.dhtmlx.com/t881qcim) @@ -42,7 +42,7 @@ how the number of staff has increased over several years. Choose this variant wh ### Spline chart -![Spline chart](../assets/chart/spline_overview.png) +![Spline chart with smooth curved lines for three company series in DHTMLX Suite](/img/chart/spline_overview.png) **Related sample**: [Chart. Spline chart initialization](https://snippet.dhtmlx.com/2wvmdm0y) @@ -54,7 +54,7 @@ The same as Line chart it displays data for certain periods. It greatly suits yo ### Bar chart -![Bar chart](../assets/chart/bar_overview.png) +![Vertical bar chart comparing three company series across periods in DHTMLX Suite](/img/chart/bar_overview.png) **Related sample**: [Chart. Bar chart initialization](https://snippet.dhtmlx.com/id9nbujd) @@ -62,7 +62,7 @@ The same as Line chart it displays data for certain periods. It greatly suits yo ### X-Bar chart -![X-Bar chart](../assets/chart/xbar_overview.png) +![Horizontal X-Bar chart comparing two sales series by year in DHTMLX Suite](/img/chart/xbar_overview.png) **Related sample**: [Chart. X-Bar chart initialization](https://snippet.dhtmlx.com/qz80yw84) @@ -74,7 +74,7 @@ Area chart is based on the Line chart. The difference is that areas below lines ### Area chart -![Area chart](../assets/chart/area_overview.png) +![Area chart with color-filled regions for three company series in DHTMLX Suite](/img/chart/area_overview.png) **Related sample**: [Chart. Area chart initialization](https://snippet.dhtmlx.com/nv6t6lvm) @@ -82,7 +82,7 @@ Area chart is based on the Line chart. The difference is that areas below lines ### SplineArea chart -![SplineArea chart](../assets/chart/splinearea_overview.png) +![SplineArea chart with smooth curved filled regions for three series in DHTMLX Suite](/img/chart/splinearea_overview.png) **Related sample**: [Chart. Spline Area chart initialization](https://snippet.dhtmlx.com/bo82km4n) @@ -94,7 +94,7 @@ Pie chart and its variations are the best choice when you deal with proportions ### Pie and Pie 3D chart -![Pie and Pie 3D charts](../assets/chart/pie_overview.png) +![Flat pie chart and 3D pie chart showing monthly category shares in DHTMLX Suite](/img/chart/pie_overview.png) **Related sample**: [Chart. Pie chart initialization](https://snippet.dhtmlx.com/jfbet749) @@ -104,7 +104,7 @@ Pie chart and its variations are the best choice when you deal with proportions ### Donut chart -![Donut chart](../assets/chart/donut_overview.png) +![Donut chart showing monthly category shares as a ring in DHTMLX Suite](/img/chart/donut_overview.png) **Related sample**: [Chart. Donut chart initialization](https://snippet.dhtmlx.com/lobb80ig) @@ -115,7 +115,7 @@ Pie chart and its variations are the best choice when you deal with proportions This one is a two-dimensional chart that allows placing one or several series of values over multiple numerical variables. For example, Radar chart will help you to study how a number of parameters relate to one item (the center point of a chart) and compare their values. -![Radar chart](../assets/chart/radar_overview.png) +![Radar chart plotting two data series across multiple axes in DHTMLX Suite](/img/chart/radar_overview.png) **Related sample**: [Chart. Radar chart initialization](https://snippet.dhtmlx.com/6otf4h0t) @@ -125,7 +125,7 @@ relate to one item (the center point of a chart) and compare their values. The peculiarity of Scatter Chart is that it allows exploring relations between two sets of data in order to find out possible dependencies or patterns. -![Scatter chart](../assets/chart/scatter_overview.png) +![Scatter chart plotting two value series as points on XY axes in DHTMLX Suite](/img/chart/scatter_overview.png) **Related sample**: [Chart. Scatter chart initialization](https://snippet.dhtmlx.com/pkczfmpu) @@ -135,7 +135,7 @@ The peculiarity of Scatter Chart is that it allows exploring relations between t A treemap chart presents a hierarchical visualization of data as a set of rectangular tiles and makes it easy to spot patterns. Several tiles can be collected into a group. The sizes of tiles are proportional to the values of the data items they represent. -![Treemap chart](../assets/chart/treemap.png) +![Treemap chart sizing planets by value with a color legend in DHTMLX Suite](/img/chart/treemap.png) **Related sample**: [Chart. Treemap chart initialization](https://snippet.dhtmlx.com/p31wzm0b) @@ -153,7 +153,7 @@ The calendar heatmap chart is a two dimensional calendar view that uses graduate The chart helps to display and identify daily patterns or anomalies over the necessary period. -![Calendar heatmap chart](../assets/chart/heatmap_overview.png) +![Calendar heatmap chart showing daily profit values by color over a year in DHTMLX Suite](/img/chart/heatmap_overview.png) **Related samples:** diff --git a/docs/chart/customization.md b/docs/chart/customization.md index e9b1bcd0c..9f024b455 100644 --- a/docs/chart/customization.md +++ b/docs/chart/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Chart in the documentation of There is a possibility to make changes in the look and feel of a chart. -![](../assets/chart/custom_style.png) +![Bar chart styled with custom CSS on a dark background and orange bars in DHTMLX Suite](/img/chart/custom_style.png) **Related sample**: [Chart. Styling (custom CSS)](https://snippet.dhtmlx.com/p82iew5s) @@ -81,7 +81,7 @@ For example: ## Adding template to scale labels -![](../assets/chart/text_template.png) +![Line chart with custom scale labels formatted by a text template in DHTMLX Suite](/img/chart/text_template.png) **Related sample**: [Chart. Text template for scale labels](https://snippet.dhtmlx.com/nhm3438n) @@ -112,7 +112,7 @@ const chart = new dhx.Chart("chart_container", { ## Adding color gradient for bars -![](../assets/chart/bar_gradient.png) +![Bar chart with color gradient fill applied to the bars in DHTMLX Suite](/img/chart/bar_gradient.png) **Related sample**: [Chart. Bar chart. Gradient](https://snippet.dhtmlx.com/j3duyn2q) @@ -157,7 +157,7 @@ const chart = new dhx.Chart("chart_container", { ## Adding template to tooltips -![](../assets/chart/show_tooltip.png) +![Scatter chart with a custom tooltip template showing x and y values in DHTMLX Suite](/img/chart/show_tooltip.png) **Related sample**: [Chart. Tooltip template](https://snippet.dhtmlx.com/mbz7dkku) @@ -197,7 +197,7 @@ const chart = new dhx.Chart("chart_container", { ## Adding template to text values of data items in bars -![](../assets/chart/show_text.png) +![Bar chart with formatted dollar value labels shown on each bar in DHTMLX Suite](/img/chart/show_text.png) **Related sample**: [Chart. Show text](https://snippet.dhtmlx.com/o7ke2f1s) @@ -248,7 +248,7 @@ const chart = new dhx.Chart("chart_container", { ## Adding template to values of data items in Pie and Donut charts -![](../assets/chart/show_percent_values.png) +![Pie chart with percentage value labels on each slice in DHTMLX Suite](/img/chart/show_percent_values.png) **Related sample**: [Chart. Value template](https://snippet.dhtmlx.com/o7ke2f1s) diff --git a/docs/chart/index.md b/docs/chart/index.md index c016ab87a..88edc3f56 100644 --- a/docs/chart/index.md +++ b/docs/chart/index.md @@ -10,7 +10,7 @@ DHTMLX Chart is a great tool for creating powerful charts for web applications. both 2D and 3D presentation, different variants of data loading, and a whole kit of configuration settings for all elements of a chart interface. Check [online samples for DHTMLX Chart](https://snippet.dhtmlx.com/bo82km4n?tag=chart). -![](../assets/chart/line_overview.png) +![Line chart comparing four company data series with a values tooltip in DHTMLX Suite](/img/chart/line_overview.png) ## Features diff --git a/docs/colorpicker/configuration.md b/docs/colorpicker/configuration.md index 7caa733b6..4a07a729c 100644 --- a/docs/colorpicker/configuration.md +++ b/docs/colorpicker/configuration.md @@ -25,7 +25,7 @@ const palette = [ ]; ~~~ -![](../assets/colorpicker/default_palette.png) +![ColorPicker default palette of gray shades and color swatches in DHTMLX Suite](/img/colorpicker/default_palette.png) **Related sample**: [Colorpicker. Initialization](https://snippet.dhtmlx.com/ezk8rk4m) @@ -46,7 +46,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", { }); ~~~ -![](../assets/colorpicker/custom_palette.png) +![ColorPicker with a custom redefined palette of colors without gray shades in DHTMLX Suite](/img/colorpicker/custom_palette.png) **Related sample**: [Colorpicker. Custom palette and custom colors](https://snippet.dhtmlx.com/097jjhb8) @@ -54,7 +54,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", { The default configuration of the Colorpicker palette includes a section with gray shades, which is shown at the top of palette. There is a possibility to hide this section showing just main colors: default or custom. -![](../assets/colorpicker/no_shades_palette.png) +![ColorPicker palette with the gray shades section hidden in DHTMLX Suite](/img/colorpicker/no_shades_palette.png) **Related sample**: [Colorpicker. Palette without gray shades](https://snippet.dhtmlx.com/b44fp8q2) @@ -68,7 +68,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", { ## List of custom colors -![](../assets/colorpicker/custom_colors.png) +![ColorPicker palette with preset user-defined colors in the custom colors row in DHTMLX Suite](/img/colorpicker/custom_colors.png) When Colorpicker is rendered on a page, its list of custom (user-defined) colors is empty. You can change this configuration and specify custom colors that should be shown in the related section on initialization of the component via the [](colorpicker/api/colorpicker_customcolors_config.md) configuration option. Colors should be specified as an array of strings in the Hex format: @@ -92,7 +92,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", { In this mode the palette is not available and only the picker is displayed. -![](../assets/colorpicker/picker_only.png) +![ColorPicker in picker-only mode with a color gradient field and hex input in DHTMLX Suite](/img/colorpicker/picker_only.png) **Related sample**: [Colorpicker. Picker only](https://snippet.dhtmlx.com/5zlvvwpl) @@ -104,7 +104,7 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", { }); ~~~ -![](../assets/colorpicker/palette_only.png) +![ColorPicker in palette-only mode without the custom colors panel in DHTMLX Suite](/img/colorpicker/palette_only.png) {{note Note that in the **paletteOnly** mode the palette is displayed without the panel with custom (user-defined) colors.}} @@ -131,6 +131,6 @@ const colorpicker = new dhx.Colorpicker("colorpicker", { }); ~~~ -![](../assets/colorpicker/colorpicker_transparency.png) +![ColorPicker in picker mode with a color transparency slider in DHTMLX Suite](/img/colorpicker/colorpicker_transparency.png) **Related sample**: [Colorpicker. Disable color transparency](https://snippet.dhtmlx.com/ewgu0aps?tag=colorpicker) \ No newline at end of file diff --git a/docs/colorpicker/customization.md b/docs/colorpicker/customization.md index 69906b284..3494203f5 100644 --- a/docs/colorpicker/customization.md +++ b/docs/colorpicker/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Colorpicker in the documentati There is a possibility to make changes in the look and feel of a colorpicker. -![](../assets/colorpicker/colorpicker_css.png) +![ColorPicker palette customized with circular color cells via custom CSS in DHTMLX Suite](/img/colorpicker/colorpicker_css.png) **Related sample**: [Colorpicker. Styling (custom CSS)](https://snippet.dhtmlx.com/mnwi3sp0) diff --git a/docs/colorpicker/index.md b/docs/colorpicker/index.md index 6ec5a89a4..d609477cb 100644 --- a/docs/colorpicker/index.md +++ b/docs/colorpicker/index.md @@ -11,7 +11,7 @@ It possesses easy-to-configure interface that can be simply localized and custom Check [online samples for DHTMLX Colorpicker](https://snippet.dhtmlx.com/097jjhb8?tag=colorpicker). -![DHTMLX Colorpicker](../assets/colorpicker/colorpicker_front.png) +![ColorPicker showing both a color palette and a picker with hex input in DHTMLX Suite](/img/colorpicker/colorpicker_front.png) ## Features diff --git a/docs/combobox/configuration.md b/docs/combobox/configuration.md index 086aa97e1..315fef852 100644 --- a/docs/combobox/configuration.md +++ b/docs/combobox/configuration.md @@ -16,7 +16,7 @@ const combo = new dhx.Combobox("combo_container", { }); ~~~ -![](../assets/combo/disabled.png) +![DHTMLX ComboBox in disabled state shown as a greyed-out empty input in DHTMLX Suite](/img/combo/disabled.png) **Related sample**: [Combobox. Disabled](https://snippet.dhtmlx.com/ductsm0f) @@ -35,7 +35,7 @@ const combo = new dhx.Combobox("combo_container", { ## Height of list of options and its items -![](../assets/combo/height.png) +![DHTMLX ComboBox open dropdown with tall list items showing custom list and item height in DHTMLX Suite](/img/combo/height.png) **Related sample**: [Combobox. List height](https://snippet.dhtmlx.com/vilg4l7w) @@ -103,7 +103,7 @@ const combo = new dhx.Combobox("combo_container",{ }); ~~~ -![](../assets/combo/label_left.png) +![DHTMLX ComboBox with a label positioned to the left of the input in DHTMLX Suite](/img/combo/label_left.png) or @@ -115,13 +115,13 @@ const combo = new dhx.Combobox("combo_container",{ }); ~~~ -![](../assets/combo/label_top.png) +![DHTMLX ComboBox with a label positioned above the input in DHTMLX Suite](/img/combo/label_top.png) **Related sample**: [Combobox. Label position](https://snippet.dhtmlx.com/2936fray) ## Number of selected options -![](../assets/combo/selected_item.png) +![DHTMLX ComboBox input showing the count of selected options as one item selected in DHTMLX Suite](/img/combo/selected_item.png) **Related sample**: [Combobox. Items count](https://snippet.dhtmlx.com/fw2u2bww) @@ -156,7 +156,7 @@ const combo = new dhx.Combobox("combo_container", { ## Placeholder -![](../assets/combo/placeholder.png) +![DHTMLX ComboBox input displaying placeholder text above an open options dropdown in DHTMLX Suite](/img/combo/placeholder.png) **Related sample**: [Combobox. Placeholder](https://snippet.dhtmlx.com/759z23gh) @@ -182,7 +182,7 @@ const combobox = new dhx.Combobox("combo_container", { To add a new item into the list of options, the user needs to type a new value into the input field and either press "Enter" or click on the appeared *Create "newValue"* option in the drop-down list. -![](../assets/combo/new_value.png) +![DHTMLX ComboBox dropdown offering a Create option to add a new typed value in DHTMLX Suite](/img/combo/new_value.png) **Related sample**: [Combobox. Multiselection, add new options (free text), select all button](https://snippet.dhtmlx.com/ui7pi7ty) @@ -199,7 +199,7 @@ You can provide a combobox with the ability to edit/delete items via the user in ## Readonly mode -![](../assets/combo/readonly.png) +![DHTMLX ComboBox in readonly mode with an open dropdown for selecting options only in DHTMLX Suite](/img/combo/readonly.png) **Related sample**: [Combobox. Readonly](https://snippet.dhtmlx.com/igjsuf7y) @@ -239,7 +239,7 @@ const combo = new dhx.Combobox("combo_container", { ## Template for ComboBox options -![](../assets/combo/combo_template.png) +![DHTMLX ComboBox dropdown with custom template options showing country names and flag icons in DHTMLX Suite](/img/combo/combo_template.png) **Related sample**: [Combobox. HTML template](https://snippet.dhtmlx.com/z7cpj76i) diff --git a/docs/combobox/customization.md b/docs/combobox/customization.md index 0c56f1708..2276cf876 100644 --- a/docs/combobox/customization.md +++ b/docs/combobox/customization.md @@ -8,7 +8,7 @@ description: You can explore the customization of Combo Box in the documentation ## Styling -![](../assets/combo/custom_css.png) +![DHTMLX ComboBox with custom CSS styling and a dropdown of country options with flag icons in DHTMLX Suite](/img/combo/custom_css.png) **Related sample**: [Combobox. Styling (custom CSS)](https://snippet.dhtmlx.com/lldd739i) @@ -58,7 +58,7 @@ For example: ## Custom filter for options -![Custom filter](../assets/combo/custom_filter.png) +![DHTMLX ComboBox with a custom fuzzy filter showing options matching the typed letters in DHTMLX Suite](/img/combo/custom_filter.png) It is possible to set a custom filtering function for the options of ComboBox via the [](combobox/api/combobox_filter_config.md) option. A custom function takes two parameters: diff --git a/docs/combobox/index.md b/docs/combobox/index.md index 33702656c..9a1d85ec3 100644 --- a/docs/combobox/index.md +++ b/docs/combobox/index.md @@ -10,7 +10,7 @@ DHTMLX ComboBox is an advanced select box that provides the ability to show sugg displaying options in the list. Among other nice features there are tuning of the list of options and Combo Box input, selection of multiple options and data loading on request. Check [online samples for DHTMLX ComboBox](https://snippet.dhtmlx.com/ui7pi7ty?tag=combobox). -![](../assets/combo/combo_front.png) +![DHTMLX ComboBox with typed text and a dropdown of country options with flag icons in DHTMLX Suite](/img/combo/combo_front.png) ## Features diff --git a/docs/common_features/accessibility_support.md b/docs/common_features/accessibility_support.md index 0ee75fa98..ac6f4f51f 100644 --- a/docs/common_features/accessibility_support.md +++ b/docs/common_features/accessibility_support.md @@ -32,14 +32,18 @@ There are special attributes used in the markup of DHTMLX Suite widgets that mak ### Grid -There are **roles** and **attributes** for elements of grid, sorting, filters, editable cells to enable screen readers to interpret and navigate the columns and rows of the grid (enabled by default). Custom content should be marked manually. +There are **roles** and **attributes** for elements of grid, sorting, filters, editable cells to enable screen readers to interpret and navigate the columns and rows of the grid (enabled by default). The semantics are always present and there is no flag to disable them. Custom content should be marked manually. You can find the following **roles** and **attributes** in the DOM: -- role: *grid*, *rowgroup*, *row*, *columnheader*, *gridcell*, *button* -- aria attributes: *label*, *rowcount*, *colcount*, *rowindex*, *colindex*, *aria-sort*. +- role: *grid* (or *treegrid* in the `type: "tree"` mode), *rowgroup*, *row*, *columnheader*, *gridcell*, *button* +- aria attributes: *label*, *rowcount*, *colcount*, *rowindex*, *colindex*, *aria-sort*, *aria-selected*, *aria-readonly*, *aria-multiselectable*, and — for tree rows — *aria-level* and *aria-expanded*. -Role presentation and aria-hidden are used to hide redundant content from the accessibility tree. +In-place editors and header/footer filters get an accessible name derived from the column header text. Role presentation and aria-hidden are used to hide redundant content (resizers, sort icons, drag ghosts, the selection overlay) from the accessibility tree. + +:::info +For the complete picture — the ARIA model, the keyboard zones (header/body/footer), the focus model, and configuration recipes — see the dedicated [Grid accessibility](grid/accessibility.md) guide. +::: ### Chart @@ -72,10 +76,10 @@ Role presentation and aria-hidden are used to hide redundant markup from the acc All DHTMLX Suite widgets are provided with a keyboard navigation support. It allows using a Suite-based app without a mouse pointer. Basic rules include: -- the "tab" key is used to navigate between widgets and clickable areas of the widgets -- the "esc" key closes windows and editors -- the "enter" is used to open and hide drop-down lists of select controls -- the arrow keys are used to move selection or change active elements within widgets +- the Tab key is used to navigate between widgets and clickable areas of the widgets +- the Esc key closes windows and editors +- the Enter is used to open and hide drop-down lists of select controls +- the Arrow keys are used to move selection or change active elements within widgets :::info For the full list of built-in hotkeys, refer to the **Keyboard Navigation** articles of the following widgets: diff --git a/docs/common_features/custom_scroll.md b/docs/common_features/custom_scroll.md index e9b79a084..ddcc0fa9c 100644 --- a/docs/common_features/custom_scroll.md +++ b/docs/common_features/custom_scroll.md @@ -48,7 +48,7 @@ For more details on the custom scroll configuration, read [this article](helpers You may notice, that all DHTMLX demos built with Optimus have the custom scroll enabled. -![](../assets/integration/custom_scroll_optimus.png) +![Hospital management demo grid with thin custom scrollbars enabled in DHTMLX Suite](/img/integration/custom_scroll_optimus.png) **View the live demos to check the feature:** diff --git a/docs/common_features/using_typescript.md b/docs/common_features/using_typescript.md index 3a049276b..5f35679d9 100644 --- a/docs/common_features/using_typescript.md +++ b/docs/common_features/using_typescript.md @@ -8,7 +8,7 @@ description: You can learn about TypeScript support in the documentation of the The dhtmlxSuite library of version 6.5 and higher lets you work with DHTMLX components faster and more effectively by using TypeScript definitions. -![](../assets/guides/typescript1.png) +![Snippet Tool editor showing TypeScript autocompletion for a Colorpicker in DHTMLX Suite](/img/guides/typescript1.png) The library provides a built-in support of Typescript that should work out of the box. diff --git a/docs/dataview/configuration.md b/docs/dataview/configuration.md index f86c52526..22c7d0336 100644 --- a/docs/dataview/configuration.md +++ b/docs/dataview/configuration.md @@ -8,7 +8,7 @@ description: You can explore the configuration of DataView in the documentation ## Arrow keys navigation -![](../assets/dataview/arrow_navigation.png) +![DHTMLX DataView with animal cards arranged in two rows for arrow key navigation in DHTMLX Suite](/img/dataview/arrow_navigation.png) **Related sample**: [Dataview. Arrow navigation](https://snippet.dhtmlx.com/u7mgoly9) @@ -100,7 +100,7 @@ const target = new dhx.DataView("dataview-target", {dragMode: "target", dragCopy ## Editing items -![](../assets/dataview/editable.png) +![DHTMLX DataView item card with editable text in an inline edit field in DHTMLX Suite](/img/dataview/editable.png) **Related sample**: [Dataview. Inline editing](https://snippet.dhtmlx.com/m8fbqcza) @@ -112,7 +112,7 @@ const dataview = new dhx.DataView("dataview_container", {editable:true}); ## Height of an item -![](../assets/dataview/item_height.png) +![DHTMLX DataView with short name-only item cards in two columns set by item height in DHTMLX Suite](/img/dataview/item_height.png) **Related sample**: [Dataview. Setup Dataview item height](https://snippet.dhtmlx.com/cth9mwrf) @@ -138,7 +138,7 @@ const dataview = new dhx.DataView("dataview_container", { ## Height of the Dataview -![](../assets/dataview/dataview_height.png) +![DHTMLX DataView with a single row of animal cards limited by a fixed widget height in DHTMLX Suite](/img/dataview/dataview_height.png) **Related sample**: [Dataview. Setup Dataview height](https://snippet.dhtmlx.com/g1k2l4q0) @@ -158,7 +158,7 @@ const dataview = new dhx.DataView("dataview_container", {height: "400px"}); ## Margins around DataView items -![](../assets/dataview/gap.png) +![DHTMLX DataView animal cards spaced apart by margins between items in DHTMLX Suite](/img/dataview/gap.png) **Related sample**: [Dataview. Configure gap size](https://snippet.dhtmlx.com/ozsuww1q) @@ -171,7 +171,7 @@ const dataview = new dhx.DataView("dataview_container", {itemsInRow: 4, gap: 20} ## Multiple selection of items -![](../assets/dataview/multiselection.png) +![DHTMLX DataView with several item cards highlighted by multiple selection in DHTMLX Suite](/img/dataview/multiselection.png) By default, you can select only one item in a dataview, since selection of another item resets selection of the previous one. To enable the possbility to select several DataView items, make use of the [](dataview/api/dataview_multiselection_config.md) configuration option: @@ -192,7 +192,7 @@ const dataview = new dhx.DataView("dataview_container", { ## Number of items in a row -![](../assets/dataview/items_in_row.png) +![DHTMLX DataView showing five animal cards per row in a grid in DHTMLX Suite](/img/dataview/items_in_row.png) **Related sample**: [Dataview. Amount items in a row](https://snippet.dhtmlx.com/de4r8km3) @@ -204,7 +204,7 @@ const dataview = new dhx.DataView("dataview_container", {itemsInRow: 5}); ## Selection of items -![](../assets/dataview/disable_selection.png) +![DHTMLX DataView grid of animal cards with no item selected in DHTMLX Suite](/img/dataview/disable_selection.png) The default configuration of DataView provides you with the selection feature that allows highlighting a DataView item. To disable selection in a DataView you need to set the [](dataview/api/dataview_selection_config.md) configuration property to *false*: @@ -216,7 +216,7 @@ const dataview = new dhx.DataView("dataview_container", { ## Template for DataView items -![](../assets/dataview/template.png) +![DHTMLX DataView item cards rendered with a custom template showing photo title and description in DHTMLX Suite](/img/dataview/template.png) **Related sample**: [Dataview. With template](https://snippet.dhtmlx.com/d6l6grr7) diff --git a/docs/dataview/customization.md b/docs/dataview/customization.md index 382042f57..535078a8f 100644 --- a/docs/dataview/customization.md +++ b/docs/dataview/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of DataView in the documentation There is a possibility to make changes in the look and feel of a dataview. -![Custom dataview styles](../assets/dataview/custom_widget_styles.png) +![DHTMLX DataView with a dark custom theme applied to item cards in DHTMLX Suite](/img/dataview/custom_widget_styles.png) **Related sample**: [Dataview. Styling (custom CSS)](https://snippet.dhtmlx.com/j1yv94o8) @@ -87,7 +87,7 @@ You can style particular cells in the dataview. For example, apply some color to The image below and the related sample demonstrate another example of customization of Dataview items: -![Custom items styles](../assets/dataview/custom_items_styles.png) +![DHTMLX DataView with numbered item cards styled with custom green borders in DHTMLX Suite](/img/dataview/custom_items_styles.png) **Related sample**: [Dataview. Styling (custom CSS for item)](https://snippet.dhtmlx.com/kpnzizbf) @@ -110,6 +110,6 @@ additional custom classes. ~~~ -![Custom selection styles](../assets/dataview/custom_selection_styles.png) +![DHTMLX DataView with a selected item card highlighted by a custom blue border in DHTMLX Suite](/img/dataview/custom_selection_styles.png) **Related sample**: [Dataview. Custom selection styles](https://snippet.dhtmlx.com/n98tzmzp) diff --git a/docs/dataview/index.md b/docs/dataview/index.md index bfa89a28e..c9cfb992e 100644 --- a/docs/dataview/index.md +++ b/docs/dataview/index.md @@ -10,7 +10,7 @@ DHTMLX DataView allows rendering a collection of objects according to a specifie This component is especially useful, if you're creating an online store or an image gallery, or just want to display a number of similar objects on a page. Check [online samples for DHTMLX DataView](https://snippet.dhtmlx.com/j1yv94o8?tag=dataview). -![](../assets/dataview/dataview_front.png) +![DHTMLX DataView showing animal cards with photos titles and descriptions in a grid in DHTMLX Suite](/img/dataview/dataview_front.png) ## Features diff --git a/docs/form/avatar.md b/docs/form/avatar.md index 4348dad7a..5a5103c5c 100644 --- a/docs/form/avatar.md +++ b/docs/form/avatar.md @@ -8,7 +8,7 @@ description: You can explore the Avatar of Form in the documentation of the DHTM A compact but useful control for swift uploading of an avatar into a form. -![Avatar control](../assets/form/form_avatar.png) +![Avatar form control with an empty photo placeholder and an Add a photo prompt in DHTMLX Suite](/img/form/form_avatar.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/button.md b/docs/form/button.md index f6302f61a..344cbc1b0 100644 --- a/docs/form/button.md +++ b/docs/form/button.md @@ -8,7 +8,7 @@ description: You can explore the Button of Form in the documentation of the DHTM A simple button that can have an icon. Button can be *twoState* and can have a badge with a number, which can be useful for displaying the number of new messages, etc. -![Button control](../assets/form/form_button.png) +![Button form control styled as a blue flat Send button in DHTMLX Suite](/img/form/form_button.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/calendar.md b/docs/form/calendar.md index 59618625f..7d542721b 100644 --- a/docs/form/calendar.md +++ b/docs/form/calendar.md @@ -8,7 +8,7 @@ description: You can explore the DatePicker of Form in the documentation of the An input with a calendar attached to it for selecting a date. -![DatePicker](../assets/form/form_datepicker.png) +![DatePicker form control with an open calendar for selecting a date in DHTMLX Suite](/img/form/form_datepicker.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/checkbox.md b/docs/form/checkbox.md index 0e667fa29..06a5e660c 100644 --- a/docs/form/checkbox.md +++ b/docs/form/checkbox.md @@ -8,7 +8,7 @@ description: You can explore the Checkbox of Form in the documentation of the DH A control that allows displaying the specified value or change it to the opposite one. -![Checkbox control](../assets/form/form_checkbox.png) +![Checkbox form control shown in unchecked and checked states in DHTMLX Suite](/img/form/form_checkbox.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/checkboxgroup.md b/docs/form/checkboxgroup.md index a3cddf4c1..e9703282d 100644 --- a/docs/form/checkboxgroup.md +++ b/docs/form/checkboxgroup.md @@ -8,7 +8,7 @@ description: You can explore the CheckboxGroup of Form in the documentation of t A control intended for creating groups of checkboxes. -![CheckboxGroup control](../assets/form/form_checkboxgroup.png) +![CheckboxGroup form control with three checkbox options and the first one checked in DHTMLX Suite](/img/form/form_checkboxgroup.png) **Related sample**: [Form. Checkbox groups](https://snippet.dhtmlx.com/p89u4ovb?tag=checkbox_group) diff --git a/docs/form/colorpicker.md b/docs/form/colorpicker.md index 31b26f53e..bb5289961 100644 --- a/docs/form/colorpicker.md +++ b/docs/form/colorpicker.md @@ -8,7 +8,7 @@ description: You can explore the ColorPicker of Form in the documentation of the An input with a color picker attached to it for selecting a color. -![ColorPicker](../assets/form/form_colorpicker.png) +![ColorPicker form control with an open color palette and a hex value input in DHTMLX Suite](/img/form/form_colorpicker.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/combo.md b/docs/form/combo.md index 5f803ce54..892bf494d 100644 --- a/docs/form/combo.md +++ b/docs/form/combo.md @@ -8,7 +8,7 @@ description: You can explore the Combo of Form in the documentation of the DHTML An input that represents an advanced select box with a set of options. It is able to provide suggestions while a user is typing text. -![Combo control](../assets/form/form_combo.png) +![Combo form control with an open dropdown list of numeric options in DHTMLX Suite](/img/form/form_combo.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/configuration.md b/docs/form/configuration.md index f6e87a61a..4253330fb 100644 --- a/docs/form/configuration.md +++ b/docs/form/configuration.md @@ -139,7 +139,7 @@ const form = new dhx.Form("form_container", { ## Making Form disabled -![](../assets/form/disabled.png) +![Disabled Form with greyed-out Name and Email inputs an I agree checkbox and a Send button in DHTMLX Suite](/img/form/disabled.png) **Related sample**: [Form. Disabled](https://snippet.dhtmlx.com/7qjwg2sw) diff --git a/docs/form/customization.md b/docs/form/customization.md index 232d08857..f667c31ee 100644 --- a/docs/form/customization.md +++ b/docs/form/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Form in the documentation of t There is a possibility to make changes in the look and feel of a form. -![Custom style](../assets/form/custom_style.png) +![Form with a custom teal color theme on input fields and a Send button in DHTMLX Suite](/img/form/custom_style.png) **Related sample**: [Form. Styling (custom CSS)](https://snippet.dhtmlx.com/wnscgb50) @@ -74,7 +74,7 @@ For example: ## Styling Form controls -![Styling Form and its controls](../assets/form/custom_styles.png) +![Form with a custom-styled Name input outlined in yellow among teal-themed controls in DHTMLX Suite](/img/form/custom_styles.png) **Related sample**: [Form. Styling (custom CSS)](https://snippet.dhtmlx.com/wnscgb50) diff --git a/docs/form/fieldset.md b/docs/form/fieldset.md index de2c2670c..4aeda496e 100644 --- a/docs/form/fieldset.md +++ b/docs/form/fieldset.md @@ -8,7 +8,7 @@ description: You can explore the Fieldset of Form in the documentation of the DH A control that allows arranging the elements of the form controls into groups. -![Fieldset control](../assets/form/form_fieldset.png) +![Fieldset form control grouping Personal info and Contact info input fields in DHTMLX Suite](/img/form/form_fieldset.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/how_to_start.md b/docs/form/how_to_start.md index 67a2f32e2..6c5555879 100644 --- a/docs/form/how_to_start.md +++ b/docs/form/how_to_start.md @@ -69,7 +69,7 @@ Thus, the structure of your form will look like this: - an Agree checkbox - a Send button -![Form structure](../assets/form/form_init.png) +![Form with Name and Email input fields an I agree checkbox and a Send button in DHTMLX Suite](/img/form/form_init.png) To add controls inside a form, you should put them into a layout, either a vertical one (the **rows** attribute), or a horizontal one (the **cols** attribute). In the example below controls are arranged vertically, one under another: diff --git a/docs/form/index.md b/docs/form/index.md index e422d7c17..2f8625c7d 100644 --- a/docs/form/index.md +++ b/docs/form/index.md @@ -9,7 +9,7 @@ description: You can have an overview of Form in the documentation of the DHTMLX DHTMLX Form is a typical form widget that can contain a number of adjustable and easy-to-use controls, supports data validation and localization of labels. Check [online samples for DHTMLX Form](https://snippet.dhtmlx.com/ikyyekxq?tag=form). -![](../assets/form/form_front.png) +![Form with Name Email and Password input fields a checked I agree checkbox and a Send button in DHTMLX Suite](/img/form/form_front.png) ## Features diff --git a/docs/form/input.md b/docs/form/input.md index d4175ad31..2b8f1c7dc 100644 --- a/docs/form/input.md +++ b/docs/form/input.md @@ -8,7 +8,7 @@ description: You can explore the Input of Form in the documentation of the DHTML An input field for typing some text inside. -![Input control](../assets/form/form_input.png) +![Input form control with a Name label and a placeholder text in DHTMLX Suite](/img/form/form_input.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/radiogroup.md b/docs/form/radiogroup.md index 2a09590fd..4287aa77c 100644 --- a/docs/form/radiogroup.md +++ b/docs/form/radiogroup.md @@ -8,7 +8,7 @@ description: You can explore the RadioGroup of Form in the documentation of the A control intended for creating groups of Radio buttons. -![RadioGroup control](../assets/form/form_radio.png) +![RadioGroup form control with three radio button options and the second one selected in DHTMLX Suite](/img/form/form_radio.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/select.md b/docs/form/select.md index 3f7596bc1..fabe81ebc 100644 --- a/docs/form/select.md +++ b/docs/form/select.md @@ -8,7 +8,7 @@ description: You can explore the Select of Form in the documentation of the DHTM An advanced select box that provides a set of options to choose from. -![Select control](../assets/form/form_select.png) +![Select form control with an open dropdown list of numeric options in DHTMLX Suite](/img/form/form_select.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/simplevault.md b/docs/form/simplevault.md index 86de28f78..ec0c3e3c9 100644 --- a/docs/form/simplevault.md +++ b/docs/form/simplevault.md @@ -8,7 +8,7 @@ description: You can explore the Simple Vault of Form in the documentation of th A handy control for quick and easy uploading of a file or a set of files. -![SimpleVault control](../assets/form/form_simplevault.png) +![SimpleVault form control with a drag and drop upload area and an uploaded file in DHTMLX Suite](/img/form/form_simplevault.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/slider.md b/docs/form/slider.md index 2641184ef..12fa11225 100644 --- a/docs/form/slider.md +++ b/docs/form/slider.md @@ -8,7 +8,7 @@ description: You can explore the Slider of Form in the documentation of the DHTM A control that allows selecting a numeric value by moving a thumb along a line with a fixed set of options. -![Slider control](../assets/form/form_slider.png) +![Slider form control with a thumb and a tooltip showing the selected value 34 in DHTMLX Suite](/img/form/form_slider.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/text.md b/docs/form/text.md index 5f6b7fc84..1347702cb 100644 --- a/docs/form/text.md +++ b/docs/form/text.md @@ -8,7 +8,7 @@ description: You can explore the Text of Form in the documentation of the DHTMLX A control for adding some text. -![Text](../assets/form/form_text.png) +![Text form control displaying a static label and read-only text value in DHTMLX Suite](/img/form/form_text.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/textarea.md b/docs/form/textarea.md index 35fd62a70..248f05a4e 100644 --- a/docs/form/textarea.md +++ b/docs/form/textarea.md @@ -8,7 +8,7 @@ description: You can explore the Textarea of Form in the documentation of the DH A control that allows a user to enter a simple multi-line text. -![Textarea control](../assets/form/form_textarea.png) +![Textarea form control with a label and a multi-line text value in DHTMLX Suite](/img/form/form_textarea.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/timepicker.md b/docs/form/timepicker.md index 6ec4c25a2..ba661651c 100644 --- a/docs/form/timepicker.md +++ b/docs/form/timepicker.md @@ -8,7 +8,7 @@ description: You can explore the TimePicker of Form in the documentation of the A control that allows a user to select time value either by moving handles along track bars or by entering hour and minutes values directly into related inputs. -![TimePicker](../assets/form/form_timepicker.png) +![TimePicker form control with hours and minutes slider track bars for selecting time in DHTMLX Suite](/img/form/form_timepicker.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/toggle.md b/docs/form/toggle.md index 3666cbb38..6ce9461d9 100644 --- a/docs/form/toggle.md +++ b/docs/form/toggle.md @@ -8,7 +8,7 @@ description: You can explore the Toggle of Form in the documentation of the DHTM A special button control that changes its state from pressed to the unpressed one when clicked. -![Toggle button control](../assets/form/form_toggle.png) +![Toggle button form control shown with an eye icon in pressed and unpressed states in DHTMLX Suite](/img/form/form_toggle.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/togglegroup.md b/docs/form/togglegroup.md index 2567dce4e..935821660 100644 --- a/docs/form/togglegroup.md +++ b/docs/form/togglegroup.md @@ -8,7 +8,7 @@ description: You can explore the ToggleGroup of Form in the documentation of the A control intended for creating groups of toggle buttons. -![ToggleGroup control](../assets/form/form_togglegroup.png) +![ToggleGroup form controls with size buttons and text alignment icon buttons in DHTMLX Suite](/img/form/form_togglegroup.png) **Related sample**: [Form. All controls](https://snippet.dhtmlx.com/ikyyekxq) diff --git a/docs/form/work_with_form.md b/docs/form/work_with_form.md index 4cda2a88d..b33648cea 100644 --- a/docs/form/work_with_form.md +++ b/docs/form/work_with_form.md @@ -355,7 +355,7 @@ You can easily specify that an input is obligatory to be treated by a user with While you've set `required:true` for a field, it gets an asterisk next to its label: -![Required fields](../assets/form/required_fields.png) +![Form with required Name Email and I am agree fields marked by asterisks in DHTMLX Suite](/img/form/required_fields.png) **Related sample**: [Form. Required](https://snippet.dhtmlx.com/0pr3var0) @@ -365,7 +365,7 @@ The attribute is applicable to the input fields with the input types: "number", Starting with v7.0, it is possible to add validation for number values entered in the input field. -![Value validate](../assets/form/value_validate.png) +![Form Age inputs showing green valid value and red invalid value validation messages in DHTMLX Suite](/img/form/value_validate.png) You just need to specify the minimum and/or maximum values allowed in the input via the `min` and/or `max` attributes. @@ -387,7 +387,7 @@ The attributes are applicable to the input fields with the input type: "number". Starting from v7.0, you can easily limit the number of characters entered in an input or textarea field. -![Length validate](../assets/form/length_validate.png) +![Form Name inputs showing red invalid and green valid character length validation in DHTMLX Suite](/img/form/length_validate.png) For that, you need to use the `minlength` and (or) `maxlength` attributes that check the length of the given value. Validation is successful if the length is greater than or equal to the `minlength` value and (or) less than or equal to the `maxlength` value. @@ -597,7 +597,7 @@ form.clear(); ## Setting focus to a control -![](../assets/form/set_focus.png) +![Form with various controls and focus set on the Name input field in DHTMLX Suite](/img/form/set_focus.png) Starting from v7.0, you can set focus to a Form control via the [setFocus()](form/api/form_setfocus_method.md) method. It takes either the name of the control or its id (if the name attribute is not defined in the config of the control) as a parameter: diff --git a/docs/grid/accessibility.md b/docs/grid/accessibility.md new file mode 100644 index 000000000..afa742ac3 --- /dev/null +++ b/docs/grid/accessibility.md @@ -0,0 +1,254 @@ +--- +sidebar_label: Accessibility +title: JavaScript Grid - Accessibility +description: You can learn about accessibility and keyboard navigation in DHTMLX Grid in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +--- + +# Accessibility in DHTMLX Grid + +DHTMLX Grid is built to be operated entirely from the keyboard and to expose its structure and state to assistive technology. WAI-ARIA semantics are part of the rendered markup, and a single, coherent focus model spans the header, body, and footer. The semantics are always present — there is **no** configuration flag to disable them. + +## Capabilities + +| Area | Support | +| ---- | ------- | +| Keyboard operation | Full: cell navigation, editing, sorting, range selection, tree expand/collapse, and clipboard all have keyboard equivalents | +| WAI-ARIA semantics | Built-in (`grid` / `treegrid` model), enabled always — no opt-in flag | +| Focus model | A single tab stop per zone; focus moves between header, body, and footer | +| Selection model | Two modes: single-cell/row (`selection`) and spreadsheet-style range (`blockSelection`) | +| High-contrast display | Light and dark high-contrast themes (`contrast-light` / `contrast-dark`) | + +## Covered areas + +This documentation covers the Grid widget: + +- the **data body** — cells and rows, including tree mode (`type: "tree"`) +- the **column header** — sortable headers and in-header filters +- the **footer** — summaries and footer filters +- the **inline editors** +- the keyboard model that connects these zones. + +As with any embeddable component, the accessibility of the final page also depends on the host application (see [Host-page responsibilities](#host-page-responsibilities)). + +## WAI-ARIA support + +WAI-ARIA roles and attributes are added to the component markup automatically and are **on by default** — there is no flag to turn them off. The Grid exposes itself to assistive technology as an interactive grid (or treegrid) of rows and cells, with a separate group for the header and footer. The semantics are applied per structural part of the widget, so each part is announced with the correct role and state. + +### Grid container + +The following table lists the container role and the grid-wide attributes applied to the root grid element, which describe the grid as a whole: + +| Selector | Role / attribute | Purpose | +| -------- | ---------------- | ------- | +| `.dhx_grid` | `role="grid"` | Standard grid | +| `.dhx_grid` | `role="treegrid"` | TreeGrid (`type: "tree"`) | +| `.dhx_grid` | `aria-rowcount` | Total number of data rows | +| `.dhx_grid` | `aria-colcount` | Number of visible columns | +| `.dhx_grid` | `aria-readonly` | `"true"` when the grid is not editable | +| `.dhx_grid` | `aria-multiselectable` | `"true"` when multi-selection is enabled | + +### Rows and cells + +The following table lists the roles and the position and state attributes applied to data rows and cells, which let assistive technology announce where the user is: + +| Selector | Role / attribute | Purpose | +| -------- | ---------------- | ------- | +| Data row | `role="row"` | A row of the grid | +| Data row | `aria-rowindex` | 1-based row position | +| Data cell | `role="gridcell"` | A data cell | +| Data cell | `aria-colindex` | 1-based column position | +| Data cell | `aria-readonly` | `"true"` when the cell is not editable | +| Data cell | `aria-selected` | Selection state of the cell | + +### Tree (TreeGrid) rows + +The following table lists the hierarchy attributes applied to tree rows and the role on the expand/collapse toggle in TreeGrid mode (`type: "tree"`), which convey the row's depth and open/closed state: + +| Selector | Role / attribute | Purpose | +| -------- | ---------------- | ------- | +| Tree row | `aria-level` | Depth of the row in the hierarchy | +| Tree row | `aria-expanded` | Open/closed state of a branch with children | +| Tree row | `aria-selected` | Selection state of the row | +| Expand/collapse toggle | `role="button"` + `aria-label` | `"Expand group"` / `"Collapse group"` | + +### Header and footer + +The following table lists the roles and attributes applied to the header and footer groups, rows, and cells, which expose the column headers, sort state, and filter controls: + +| Selector | Role / attribute | Purpose | +| -------- | ---------------- | ------- | +| Header/footer group | `role="rowgroup"` + `aria-rowcount` | Groups the header or footer rows | +| Header/footer row | `role="row"` + `aria-rowindex` | A header or footer row | +| Header cell | `role="columnheader"` + `aria-sort` | Column header; `aria-sort` is `none` / `ascending` / `descending` | +| Footer cell | `role="gridcell"` + `aria-colindex` | A footer (summary) cell | +| Content (filter) cell | `role="gridcell"` | Header/footer cell hosting a filter control | +| Sort affordance | `role="button"` + `aria-label="Sort by …"` | Keyboard- and pointer-activatable sort trigger | + +### Editors and filters + +In-place editor inputs and header/footer filters receive an accessible name derived from column header text, so screen-reader users hear which column they are editing or filtering. For example, a filter input is labeled `"Filter {column}"` and a date filter `"Filter by date: {column}"`. + +### Hidden and decorative elements + +Resizer grips, sort icons, sort-order counters, drag ghosts, drop indicators, and the selection overlay are removed from the accessibility tree with `aria-hidden="true"` / `role="presentation"`, so screen readers are not cluttered with redundant markup. + +## Selection modes + +The keyboard behavior of the body depends on which selection system is enabled. The two are independent and drive different ARIA output and shortcut semantics. + +### 1. Cell / row selection — selection + +A single active cell (or row) moves with the arrow keys. This populates `aria-selected` on the focused cell or row. Extending the selection with Shift is enabled only when `multiselection: true`; without it, Shift+arrow moves the active cell. + +~~~jsx +// Single active cell, navigable with arrows / Tab / Home / End / Page Up·Down +const grid = new dhx.Grid("grid_container", { + columns: [/* ... */], + data: dataset, + selection: "complex", // "cell" | "row" | "complex" + multiselection: true, // enables Shift+Arrow multi-select + keyNavigation: true // default +}); +~~~ + +| `selection` value | Meaning | +| --- | --- | +| `"cell"` | One active cell; Shift+arrow extends when `multiselection: true` | +| `"row"` | One active row; arrows move the whole row, `aria-selected` is on the row | +| `"complex"` | Cell- and row-style selection combined | +| `true` | Equivalent to cell selection | +| *falsy / unset* | Selection (and `aria-selected`) disabled | + +### 2. Range / block selection — blockSelection + +Spreadsheet-style rectangular ranges. The arrow keys move the range anchor; Shift+arrows grow or shrink the rectangle; Delete clears the range (when editing is enabled). This applies in **"range"** mode. + +~~~jsx +// Google-Sheets-style range selection +const grid = new dhx.Grid("grid_container", { + columns: [/* ... */], + data: dataset, + blockSelection: true, // range mode (Shift+Arrow grows the rectangle) + editable: true, // allows Delete to clear the range + keyNavigation: true +}); +~~~ + +| `blockSelection` value | Mode | Keyboard effect | +| ---------------------- | ---- | --------------- | +| `true` | range | Arrows move the range; Shift+arrows extend the rectangle; Delete clears it | + +Both systems coexist with the same navigation keys; the Grid responds to whichever selection system is active. + +## Keyboard navigation + +Keyboard navigation is on by default (`keyNavigation: true`); set `keyNavigation: false` to opt out. Focus enters the Grid through hidden focus sentinels placed before the header and after the footer, which direct it into the correct zone. Within each zone a single cell is the tab stop, and the arrow keys move between cells from there. + +Shortcuts are organized into **zones** — body, header, footer — and resolved by where focus currently is. The full reference is in the [Keyboard navigation](grid/configuration.md#keyboard-navigation) article; the tables below summarize it. + +### Grid body + +| Keys | Action | Selection mode | +| ---- | ------ | -------------- | +| / / / | Move the selected cell one row/column ( from the first row enters the header; from the last row enters the footer when a footer exists) | both | +| Ctrl + arrow | Jump the selection to the first/last cell in that direction | both | +| Shift + arrow | Extend the selection by one cell | `selection` with `multiselection: true`, or `blockSelection` range | +| Ctrl + Shift + arrow | Extend the selection to the edge | as above | +| Home / End | Move to the first / last column of the current row | both | +| Ctrl + Home / Ctrl + End | Move to the first / last cell of the grid | both | +| Shift + Home / End, Ctrl + Shift + Home / End | Extend the selection to the row/grid extent | extend-capable modes | +| Page Up / Page Down | Move the selected cell up / down by one page of visible rows | both | +| Shift + Page Up / Page Down | Extend the selection by one page | extend-capable modes | +| Enter | Open the editor (or toggle a boolean cell); when editing, commit and close | requires `editable` | +| F2 | Open the editor of the selected cell (non-boolean) | requires `editable` | +| Space | Toggle a boolean cell | requires `editable` | +| Escape | Cancel editing without saving | requires `editable` | +| Tab / Shift + Tab | Move to the next / previous cell, wrapping rows; exits to the footer / header at the ends | both | +| Delete | Clear the selected range | `blockSelection` range mode + `editable` | +| Ctrl + Z / Ctrl + Shift + Z | Undo / Redo | History module | +| Ctrl + Enter | Expand / collapse the row (`type: "tree"`) | TreeGrid | +| / (tree column) | Expand / collapse a branch, or move to first child / parent | TreeGrid | + +### Header + +| Keys | Action | +| ---- | ------ | +| / | Move between header cells (colspan-aware) | +| / | Move between header rows (multi-row header); from the first row has no effect, from the last row moves into the body | +| Enter / Space | Sort by the column; on a filter cell, Enter activates the filter control | +| Shift + Enter | Toggle multi-sort for the column (requires `multiSort`) | +| Tab / Shift + Tab | Move within the header with row wrapping; exits to the body / out of the grid at the ends | +| Escape | Deactivate a filter control (restoring focus to its cell), or return focus to the body | + +### Footer + +| Keys | Action | +| ---- | ------ | +| / | Move between footer cells (colspan-aware) | +| / | Move between footer rows (multi-row footer); from the first row moves into the body, from the last row has no effect | +| Enter | Activate a footer filter control | +| Tab / Shift + Tab | Move within the footer with row wrapping; exits the grid / to the body at the ends | +| Escape | Deactivate a filter control, or return focus to the body | + +:::note +Navigation is **span-aware**: movement across merged (colspan/rowspan) header and footer cells stays predictable, and the logical navigation row is preserved. When focus reaches an off-screen (virtualized) column, the Grid scrolls it into view automatically. +::: + +## Assistive technology + +What the Grid exposes to assistive technology is driven entirely by the ARIA markup above. Rows and cells carry their position (`aria-rowindex` / `aria-colindex`) against the grid totals (`aria-rowcount` / `aria-colcount`), so position is announced even when rows are virtualized. Selection is exposed through `aria-selected`, editability through `aria-readonly`, sort state through `aria-sort`, and — in tree mode (`type: "tree"`) — hierarchy through `aria-level` and `aria-expanded`. + +## High contrast and focus + +- **High-contrast themes.** Light and dark high-contrast themes ship with the library (`contrast-light` and `contrast-dark`), activated by setting `data-dhx-theme="contrast-light"` or `data-dhx-theme="contrast-dark"`. See the [Themes](/themes/) guide and the [Light High Contrast](themes/contrast_light_theme.md) / [Dark High Contrast](themes/contrast_dark_theme.md) pages for details. +- **Visible focus.** Focus is tracked per zone by the roving-tabindex model, so the active cell is the single tab stop and moves predictably with the arrow keys. + +## Configuration recipes + +~~~jsx +// A. Cell navigation (single active cell) +new dhx.Grid("grid_container", { + columns, data, + selection: "complex", + multiselection: true, // Shift+Arrow multi-select + keyNavigation: true, // default + sortable: true // default — keyboard sort in headers +}); + +// B. Spreadsheet-style range selection +new dhx.Grid("grid_container", { + columns, data, + blockSelection: true, // range mode: Shift+Arrow grows the rectangle, Delete clears + editable: true +}); + +// C. TreeGrid (adds role="treegrid", aria-level, aria-expanded, +// and arrow-key expand/collapse) +new dhx.Grid("grid_container", { + columns, data, + type: "tree", + selection: "complex" +}); + +// WAI-ARIA semantics are always emitted — there is no flag to toggle them. +~~~ + +Related articles: + +- [Keyboard navigation](grid/configuration.md#keyboard-navigation) +- [keyNavigation](grid/api/grid_keynavigation_config.md) +- [selection](grid/api/grid_selection_config.md) +- [blockSelection](grid/api/grid_blockselection_config.md) +- [TreeGrid mode](grid/treegrid_mode.md) + +## Host-page responsibilities + +A few accessibility requirements live at the page level, not inside the component. Make sure the host document: + +- sets a document language, e.g. ``; +- provides a page `

` and wraps the grid in an appropriate landmark (e.g. `
`); +- gives the grid container an accessible name where multiple widgets share a page. + +## Reference + +- [WAI-ARIA Authoring Practices: Grid / Treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/) diff --git a/docs/grid/api/grid_editable_config.md b/docs/grid/api/grid_editable_config.md index 896a9f373..66536d144 100644 --- a/docs/grid/api/grid_editable_config.md +++ b/docs/grid/api/grid_editable_config.md @@ -25,6 +25,10 @@ const grid = new dhx.Grid("grid_container", { **Related sample**: [Grid. Editing with different editors (combobox, select, multiselect, boolean, date)](https://snippet.dhtmlx.com/w2cdossn) +**Related articles:** +- [Keyboard navigation](grid/configuration.md#keyboard-navigation) +- [Grid accessibility](grid/accessibility.md) + @changelog: added in v6.4 [comment]: # (@related:grid/initialization.md#initialize-grid grid/configuration.md#editing-grid-and-separate-columns) diff --git a/docs/grid/api/grid_keynavigation_config.md b/docs/grid/api/grid_keynavigation_config.md index 74e239cd5..30eca6530 100644 --- a/docs/grid/api/grid_keynavigation_config.md +++ b/docs/grid/api/grid_keynavigation_config.md @@ -27,8 +27,8 @@ const grid = new dhx.Grid("grid_container", { **Related sample**: [Grid. Key navigation](https://snippet.dhtmlx.com/y9kdk0md) -You need to set the [selection](grid/api/grid_selection_config.md) and [editable](grid/api/grid_editable_config.md) properties in the configuration object of Grid to enable all available shortcut keys. Read the details in the [Key Navigation](grid/configuration.md#keyboard-navigation) article. +You need to set the [selection](grid/api/grid_selection_config.md) and [editable](grid/api/grid_editable_config.md) properties in the configuration object of Grid to enable all available shortcut keys. Read the details in the [Key Navigation](grid/configuration.md#keyboard-navigation) article and in the [Grid accessibility](grid/accessibility.md) guide. -@changelog: added in v6.3 +@changelog: added in v6.3; the keyboard navigation model was extended in v9.3.5 [comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#keyboard-navigation) diff --git a/docs/grid/api/grid_selection_config.md b/docs/grid/api/grid_selection_config.md index 578da658f..d16749acb 100644 --- a/docs/grid/api/grid_selection_config.md +++ b/docs/grid/api/grid_selection_config.md @@ -27,6 +27,7 @@ When you set `selection:true`, the "complex" mode is applied. **Related sample**: [Grid. Selection](https://snippet.dhtmlx.com/ad6roqsx) -**Related articles:** +**Related articles:** - [Selection](grid/configuration.md#selection) - [Work with Selection object](grid/usage_selection.md) +- [Grid accessibility](grid/accessibility.md) diff --git a/docs/grid/api/grid_type_config.md b/docs/grid/api/grid_type_config.md index b92331273..79a25b486 100644 --- a/docs/grid/api/grid_type_config.md +++ b/docs/grid/api/grid_type_config.md @@ -24,4 +24,6 @@ const grid = new dhx.Grid("grid_container", { -**Related article:** [TreeGrid mode](grid/treegrid_mode.md) \ No newline at end of file +**Related articles:** +- [TreeGrid mode](grid/treegrid_mode.md) +- [Grid accessibility](grid/accessibility.md) diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index e7c859570..e4f9cc0aa 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -604,7 +604,7 @@ const grid = new dhx.Grid("grid_container", { - setting HTML content for a particular column -![](../assets/grid/html_content.png) +![Grid with HTML content enabled showing country flag images in the Country column in DHTMLX Suite](/img/grid/html_content.png) If you want to add custom elements into cells of the specified column, you need to set the `htmlEnable:true` property in the [configuration of a column](grid/api/api_gridcolumn_properties.md): @@ -1126,7 +1126,7 @@ const grid = new dhx.Grid("grid", { In case a user enters a value that goes beyond the limits specified by the above settings, the entered value is highlighted in red: -![Validation of columns with the number type](../assets/grid/col_number_validation.png) +![Grid number editor highlighting an out-of-range value in red during cell editing in DHTMLX Suite](/img/grid/col_number_validation.png) If the user ignores the warning and still tries to enter an unallowable value, it will be replaced with the minimum/maximum value defined in the `editorConfig` object by the `min/max` values. Thus, in the above example the entered value `200` will be replaced with `100`, since it is the upper limit set in the editor configuration. @@ -1163,11 +1163,11 @@ From v7.3, you may allow end users to add new options into the combobox editor ( The new option will be added into the combobox after the user types a new value into the input field and either presses "Enter" or clicks on the appeared *Create "newValue"* option in the drop-down list. -![](../assets/grid/combobox_editor.png) +![Grid combobox editor showing a Create new option prompt in the Status column dropdown in DHTMLX Suite](/img/grid/combobox_editor.png) At the same time, the created option will also appear in the drop-down list of the header/footer filters ([content: "selectFilter" | "comboFilter"](#headerfooter-filters)) of the column: -![](../assets/grid/new_combobox_option.png) +![Grid header selectFilter dropdown listing a newly added Verified option in the Status column in DHTMLX Suite](/img/grid/new_combobox_option.png) > To localize the *Create* option, translate the corresponding string and apply a ready locale to the Combobox component: @@ -1623,11 +1623,11 @@ You can define the logic of setting the position of the Grid footer as well as o - `relative` - (default) the footer follows the content immediately. If the number of rows is small and doesn't fill the container, the footer moves up to stay attached with the last row. -![](../assets/grid/footer_relative_position.png) +![Grid with the summary footer following the last row in relative position in DHTMLX Suite](/img/grid/footer_relative_position.png) - `bottom` - the footer and bottom-pinned (frozen) rows are strictly locked to the bottom edge of the container. They remain at the base of the component even if the content takes only a part of the available height. -![](../assets/grid/footer_bottom_position.png) +![Grid with the summary footer and a frozen row locked to the bottom edge of the container in DHTMLX Suite](/img/grid/footer_bottom_position.png) Here is the example of positioning the footer and a frozen row at the bottom of the Grid, as presented in the above image: @@ -2178,7 +2178,7 @@ The row expander functionality allows using nested content in Grid sub-rows. You This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. ::: -![](../assets/grid/row_expander.png) +![Grid with an expanded row revealing a nested subgrid of animal details in DHTMLX Suite](/img/grid/row_expander.png) ### Adding sub-rows @@ -2353,7 +2353,7 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -![](../assets/grid/subgrid_specific_rows.png) +![Grid where only the row with data is expanded to show a nested country subgrid in DHTMLX Suite](/img/grid/subgrid_specific_rows.png) In the above example the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) config set as a callback function defines that sub-rows with the height 250px will be created for rows that have some data. For rows without data the `height:0` setting is specified, so sub-rows won't be created for these rows. @@ -2499,7 +2499,7 @@ const grid = new dhx.Grid("grid_container", { It is possible to create as many levels of nested subgrids, as necessary. -![](../assets/grid/multi_level_nesting.png) +![Grid with multiple levels of nested subgrids expanded from level 1 down to level 4 in DHTMLX Suite](/img/grid/multi_level_nesting.png) To specify the structure of a multi-level Grid nesting, do the following: @@ -2763,7 +2763,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac The [`DragPanel`](grid/usage_dragpanel.md) module allows configuring the drag-n-drop functionality in Grid. It provides settings for adjusting the look and feel of the drag panel that appears when the drag-n-drop functionality is activated. Check the details below. -![](../assets/grid/dragpanel_module.png) +![Grid rows with drag handle panels shown in the leftmost column for row reordering in DHTMLX Suite](/img/grid/dragpanel_module.png) To initialize the `DragPanel` module, you should enable the [`dragPanel`](grid/api/grid_dragpanel_config.md) property in the Grid configuration together with the [row Drag-and-Drop](#drag-n-drop) functionality (e.g. via the `dragItem: "row"` or `dragItem: "both"` properties). For example: @@ -3168,23 +3168,23 @@ The navigation shortcut keys and keys combinations that Grid enables by default - + - + - + - + - + @@ -3226,43 +3226,43 @@ The list of the shortcut keys and their combinations used for moving selection b
PageUpPageUp scrolls Grid up to the height of the visible content (without change of the selected cell)
PageDownPageDown scrolls Grid down to the height of the visible content (without change of the selected cell)
HomeHome navigates to the beginning of the Grid content (without change of the selected cell)
EndEnd navigates to the end of the Grid content (without change of the selected cell)
Ctrl+EnterCtrl+Enter expands/collapses the parent item in the TreeGrid mode
- + - + - + - + - + - + - + - + - + - + @@ -3273,35 +3273,35 @@ The combinations of the shortcut keys listed below do not work when the `selecti
ArrowUpArrowUp moves selection to the previous vertical cell
ArrowDownArrowDown moves selection to the next vertical cell
ArrowLeftArrowLeft moves selection to the previous horizontal cell
ArrowRightArrowRight moves selection to the next horizontal cell
Ctrl+ArrowUpCtrl+ArrowUp moves selection to the first vertical cell
Ctrl+ArrowDownCtrl+ArrowDown moves selection to the last vertical cell
Ctrl+ArrowLeftCtrl+ArrowLeft moves selection to the first horizontal cell
Ctrl+ArrowRightCtrl+ArrowRight moves selection to the last horizontal cell
TabTab moves selection to the next horizontal cell or the first cell of the next row
Shit+TabShift+Tab moves selection to the previous horizontal cell or to the first cell of the previous row
- + - + - + - + - + - + - + - + @@ -3330,15 +3330,15 @@ The list of the shortcut keys for editing is given below:
Shift+ArrowUpShift+ArrowUp moves selection to the previous vertical cell with the change of the selected cells
Shift+ArrowDownShift+ArrowDown moves selection to the next vertical cell with the change of the selected cells
Shift+ArrowLeftShift+ArrowLeft moves selection to the previous horizontal cell with the change of the selected cells
Shift+ArrowRightShift+ArrowRight moves selection to the next horizontal cell with the change of the selected cells
Ctrl+Shift+ArrowUpCtrl+Shift+ArrowUp moves selection to the first vertical cell with the change of the selected cells
Ctrl+Shift+ArrowDownCtrl+Shift+ArrowDown moves selection to the last vertical cell with the change of the selected cells
Ctrl+Shift+ArrowLeftCtrl+Shift+ArrowLeft moves selection to the first horizontal cell with the change of the selected cells
Ctrl+Shift+ArrowRightCtrl+Shift+ArrowRight moves selection to the last horizontal cell with the change of the selected cells
- + - + - + @@ -3357,67 +3357,67 @@ The module supports keyboard navigation for selecting and managing ranges, simil
EnterEnter opens the editor in the selected cell. If the editor is currently opened - closes the editor and saves changes
EscapeEscape closes the editor of the selected cell without saving
DeleteDelete clears data in the selected cells. Works only with the `BlockSelection` module in the "range" mode
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -3428,7 +3428,7 @@ The following shortcut key and mouse combination is available:
ArrowUpArrowUp resets the selected range and moves the focus to the previous vertical cell, setting the initially selected cell if no selection is active
ArrowDownArrowDown resets the selected range and moves the focus to the next vertical cell, setting the initially selected cell if no selection is active
ArrowLeftArrowLeft resets the selected range and moves the focus to the previous horizontal cell, setting the initially selected cell if no selection is active
ArrowRightArrowRight resets the selected range and moves the focus to the next horizontal cell, setting the initially selected cell if no selection is active
Shift+ArrowUpShift+ArrowUp extends the selected range from the current initial cell to the previous vertical cell
Shift+ArrowDownShift+ArrowDown extends the selected range from the current initial cell to the next vertical cell
Shift+ArrowLeftShift+ArrowLeft extends the selected range from the current initial cell to the previous horizontal cell
Shift+ArrowRightShift+ArrowRight extends the selected range from the current initial cell to the next horizontal cell
Ctrl+ArrowUpCtrl+ArrowUp resets the selected range and moves the focus to the first vertical cell
Ctrl+ArrowDownCtrl+ArrowDown resets the selected range and moves the focus to the last vertical cell
Ctrl+ArrowLeftCtrl+ArrowLeft resets the selected range and moves the focus to the first horizontal cell
Ctrl+ArrowRightCtrl+ArrowRight resets the selected range and moves the focus to the last horizontal cell
Ctrl+Shift+ArrowUpCtrl+Shift+ArrowUp extends the selected range to the first vertical cell
Ctrl+Shift+ArrowDownCtrl+Shift+ArrowDown extends the selected range to the last vertical cell
Ctrl+Shift+ArrowLeftCtrl+Shift+ArrowLeft extends the selected range to the first horizontal cell
Ctrl+Shift+ArrowRightCtrl+Shift+ArrowRight extends the selected range to the last horizontal cell
- + @@ -3439,8 +3439,8 @@ The following shortcut key is available when the [`editable` mode](grid/api/grid
Shift + clickShift + click sets the end cell of the range, extending the selection from the current initial cell
- + -
DeleteDelete allows clearing the selected cells
\ No newline at end of file + diff --git a/docs/grid/customization.md b/docs/grid/customization.md index fd7ed8500..063eb3ae6 100644 --- a/docs/grid/customization.md +++ b/docs/grid/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Grid in the documentation of t There is a possibility to make changes in the look and feel of a grid. -![Styling grid](../assets/grid/styling_grid.png) +![Grid styled with a custom dark theme applied to headers and rows in DHTMLX Suite](/img/grid/styling_grid.png) **Related sample**: [Grid. Styling (custom CSS)](https://snippet.dhtmlx.com/c5tr3s5r) @@ -69,7 +69,7 @@ For example: ## Styling selection -![Styling selection](../assets/grid/styling_selection.png) +![Grid with a single cell selected and highlighted by a custom red selection border in DHTMLX Suite](/img/grid/styling_selection.png) **Related sample**: [Grid. Styling selection (custom CSS)](https://snippet.dhtmlx.com/xs7bixmg) @@ -101,7 +101,7 @@ Here is an example of how you can style selection in Grid: ## Styling header cells -![](../assets/grid/styling_header.png) +![Grid with custom styled header cells where the Population header is enlarged and colored in DHTMLX Suite](/img/grid/styling_header.png) You can easily set some styling to the text of header cells by applying some inline style or a CSS class to the **text** property of the header of a column: @@ -175,7 +175,7 @@ You can easily set some styling to the text of footer cells by applying some inl ## Styling rows -![](../assets/grid/rowcss.png) +![Grid with a single row highlighted in orange by a custom CSS class in DHTMLX Suite](/img/grid/rowcss.png) It is possible to change the appearance of grid rows by applying custom CSS styles to them. There are two ways to do it: @@ -235,7 +235,7 @@ where: ## Styling cells -![](../assets/grid/cellcss.png) +![Grid with a single cell highlighted in green by a custom CSS class in DHTMLX Suite](/img/grid/cellcss.png) It is easy to style necessary cells using the **addCellCss()** method. It takes three parameters: @@ -282,7 +282,7 @@ It is easy to style necessary cells using the **addCellCss()** method. It takes ## Adding custom marks to cells -![](../assets/grid/markcells.png) +![Grid with conditionally marked cells in the Population column shaded red in DHTMLX Suite](/img/grid/markcells.png) You can mark particular cells in a grid using the **mark** property of a column configuration. You need to set its value as a function that takes the following parameters: @@ -390,13 +390,13 @@ It is also possible to highlight cells with minimum and (or) maximum values in a ~~~ -![](../assets/grid/mark_cell.png) +![Grid marking the maximum population cell in red and the minimum in green in DHTMLX Suite](/img/grid/mark_cell.png) **Related sample**: [Grid. Mark cells](https://snippet.dhtmlx.com/buirf16n) ## Adding template to cells -![](../assets/grid/cell_templates.png) +![Grid with a custom cell template rendering checkboxes in the Net Change column in DHTMLX Suite](/img/grid/cell_templates.png) It is possible to customize the content of cells of Grid via the **template** property of a [column configuration](grid/api/api_gridcolumn_properties.md). The template option is a function that takes three parameters: @@ -469,7 +469,7 @@ const grid = new dhx.Grid("grid_container", { ## Adding template to tooltip -![](../assets/grid/tooltip_template.png) +![Grid showing a custom rich tooltip with an avatar image and last edit time on cell hover in DHTMLX Suite](/img/grid/tooltip_template.png) Starting with v7.1, you can customize the content of the tooltip of a column via the [tooltipTemplate](grid/api/api_gridcolumn_properties.md) configuration option of the [column](grid/configuration.md#columns). The **tooltipTemplate** function takes three parameters: diff --git a/docs/grid/index.md b/docs/grid/index.md index 6da190f0a..f2d156ae7 100644 --- a/docs/grid/index.md +++ b/docs/grid/index.md @@ -10,7 +10,7 @@ DHTMLX Grid is a flexible, smart, and easy-to-use JavaScript component which all Check [online samples for DHTMLX Grid](https://snippet.dhtmlx.com/1mxmshax?tag=grid). -![](../assets/grid/grid_front.png) +![Grid showing countries with flag images, population, and yearly change columns in DHTMLX Suite](/img/grid/grid_front.png) ## Features diff --git a/docs/grid/treegrid_mode.md b/docs/grid/treegrid_mode.md index e2ce1e879..e11df0b4a 100644 --- a/docs/grid/treegrid_mode.md +++ b/docs/grid/treegrid_mode.md @@ -12,7 +12,7 @@ The TreeGrid mode of the Grid component is available in the **PRO** version only TreeGrid mode of the Grid component allows showing the nested tabular data. -![](../assets/treegrid/treegrid_front.png) +![Grid in TreeGrid mode with expandable hierarchical book categories and nested rows in DHTMLX Suite](/img/treegrid/treegrid_front.png) ## Initialization @@ -217,7 +217,7 @@ The images below show drag-n-drop behaviour of items within a Grid in the TreeGr | Dragging an item | Result | |-----------------------------------------------------------|-----------------------------------------------------------| -|![](../assets/treegrid/dropbehaviour_child.png) | ![](../assets/treegrid/dropbehaviour_child_result.png) | +|![Dragging a TreeGrid row over a target node to drop it as a child in DHTMLX Suite](/img/treegrid/dropbehaviour_child.png) | ![TreeGrid row dropped and nested as a child of the target node in DHTMLX Suite](/img/treegrid/dropbehaviour_child_result.png) | - "sibling" - a dragged item becomes a sibling of the item it is dragged to @@ -225,7 +225,7 @@ The images below show the drag-n-drop behaviour of items within a Grid in the Tr | Dragging an item | Result | |----------------------------------------------------------- |----------------------------------------------------------- | -|![](../assets/treegrid/dropbehaviour_sibling.png) | ![](../assets/treegrid/dropbehaviour_sibling_result.png) | +|![Dragging a TreeGrid row over a target node to drop it as a sibling in DHTMLX Suite](/img/treegrid/dropbehaviour_sibling.png) | ![TreeGrid row dropped as a sibling next to the target node in DHTMLX Suite](/img/treegrid/dropbehaviour_sibling_result.png) | - "complex" - a dragged item can become both a child or a sibling of a target item, depending on the position specified by highlighting diff --git a/docs/grid/usage.md b/docs/grid/usage.md index 74c99588a..a4596ec6a 100644 --- a/docs/grid/usage.md +++ b/docs/grid/usage.md @@ -349,7 +349,7 @@ The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX S You can sort Grid by multiple columns simultaneously. -![](../assets/grid/multisorting_data.png) +![Grid data sorted by multiple columns at once with numbered sort indicators in column headers in DHTMLX Suite](/img/grid/multisorting_data.png) **Related sample**: [Grid. Sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/4ej0i3qi) @@ -373,7 +373,7 @@ grid.data.sort({ by: "task_status", dir: "asc" }); grid.data.sort({ by: "animal_type", dir: "asc" }); ~~~ -![](../assets/grid/multisort_grouped_data.png) +![Grid with grouped rows and multi-column sorting shown in a group panel and column headers in DHTMLX Suite](/img/grid/multisort_grouped_data.png) **Related sample**: [Grid. Grouping with sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/786zr190) diff --git a/docs/grid/usage_blockselection.md b/docs/grid/usage_blockselection.md index 1c8eae3db..2450a139c 100644 --- a/docs/grid/usage_blockselection.md +++ b/docs/grid/usage_blockselection.md @@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac You can manage block selection within a grid via the API of the [`BlockSelection`](grid/configuration.md#managing-block-selection-in-grid) module. It allows selecting ranges of cells using the mouse pointer, touch input, or keyboard navigation, visualizing the selection, and controlling behavior through various modes and handlers. It also supports an [event system](grid/api/api_overview.md#blockselection-events) to track user actions, including keyboard and mouse combinations. -![](../assets/grid/blockselection_module.png) +![Grid with a rectangular block of product cells selected and highlighted with a fill handle in DHTMLX Suite](/img/grid/blockselection_module.png) ## Initializing the BlockSelection module diff --git a/docs/grid/usage_dragpanel.md b/docs/grid/usage_dragpanel.md index 3f536a3c3..70bd4b755 100644 --- a/docs/grid/usage_dragpanel.md +++ b/docs/grid/usage_dragpanel.md @@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac The `DragPanel` module provides auxiliary functionality for moving rows in the **dhx.Grid** component. -![](../assets/grid/dragpanel_module.png) +![Grid rows with drag handle panels shown in the leftmost column for row reordering in DHTMLX Suite](/img/grid/dragpanel_module.png) The module is automatically activated when the [Drag-and-Drop functionality](grid/configuration.md#drag-n-drop) for rows is enabled and conflicting configurations, such as the [`BlockSelection`](grid/usage_blockselection.md) or [`Clipboard`](grid/usage_clipboard.md) modules, are used. diff --git a/docs/grid/usage_selection.md b/docs/grid/usage_selection.md index 329b2d40b..c0026a3f9 100644 --- a/docs/grid/usage_selection.md +++ b/docs/grid/usage_selection.md @@ -49,7 +49,7 @@ You can set selection to one or more rows or cells using the [`setCell()`](grid/ ### Setting selection to a cell -![](../assets/grid/set_cell.png) +![Grid with a single cell selected and highlighted in the Yearly Change column in DHTMLX Suite](/img/grid/set_cell.png) The example below shows how to highlight the first cell in the "Yearly Change" column: @@ -78,7 +78,7 @@ The `multiselection` property is disabled. You can highlight the desired cells when the [`multiselection:true`](grid/api/grid_multiselection_config.md) and the [`selection:"cell"`](grid/api/grid_selection_config.md) properties are set: -![](../assets/grid/desired_setcell.png) +![Grid with multiple non-adjacent cells selected and highlighted using multiselection in DHTMLX Suite](/img/grid/desired_setcell.png) ~~~jsx {5,6} const grid = new dhx.Grid("grid_container", { @@ -99,7 +99,7 @@ grid.selection.setCell(grid.data.getId(3),"netChange", true, false); It is also possible to select a range of cells at once: -![](../assets/grid/range_setcell.png) +![Grid with a continuous range of cells selected and highlighted across several rows in DHTMLX Suite](/img/grid/range_setcell.png) For that, manipulate the `ctrlUp` and `shiftUp` parameters accordingly: diff --git a/docs/integration/suite_and_backend.md b/docs/integration/suite_and_backend.md index 1afbfeb7a..4d6065c72 100644 --- a/docs/integration/suite_and_backend.md +++ b/docs/integration/suite_and_backend.md @@ -6,7 +6,7 @@ description: You can explore how to connect DHTMLX Suite to a backend. Browse de # How to connect DHTMLX Suite to a backend -![](../assets/integration/work_with_backend.png) +![Grid, DataView contact cards, donut chart, form, and tree widgets connected to a backend in DHTMLX Suite](/img/integration/work_with_backend.png) DHTMLX Suite 9 or DHTMLX components don't have any special requirements for the backend. They can be easily connected with any backend platform which supports the REST API (RESTful API). Besides, the DHTMLX library allows providing a [multi-user backend](#multiuser-real-time-updated-backend-save-method-getting-editing-deleting-and-sending-data) for any Suite component. @@ -34,7 +34,7 @@ In the examples pack, you will find: ### Form. Sending data -![](../assets/integration/work_with_backend_form.png) +![Form with name, email, and password fields and a Send button for sending data in DHTMLX Suite](/img/integration/work_with_backend_form.png) A nice Form to collect data. Easy to use and modify. @@ -42,7 +42,7 @@ The following request method is used in this example: `POST`. ### Simple Vault. Sending data -![](../assets/integration/work_with_backend_simplevault.png) +![Simple Vault file uploader with a drag and drop area and a Send button in DHTMLX Suite](/img/integration/work_with_backend_simplevault.png) Ready to use. The Simple Vault for files and folders. @@ -50,7 +50,7 @@ The following request method is used in this example: `POST`. ### DataView. Getting data -![](../assets/integration/work_with_backend_dataview.png) +![DataView showing contact cards with photos, names, positions, and contact details in DHTMLX Suite](/img/integration/work_with_backend_dataview.png) One of the best ways to organize and display objects with similar information. @@ -58,7 +58,7 @@ The following request method is used in this example: `GET`. ### List. Getting data -![](../assets/integration/work_with_backend_list.png) +![List displaying employee records with name, post, phone, and birthday details in DHTMLX Suite](/img/integration/work_with_backend_list.png) A List is another convenient way to organize information. @@ -66,7 +66,7 @@ The following request method is used in this example: `GET`. ### Chart. Getting data -![](../assets/integration/work_with_backend_chart.png) +![Donut chart visualizing staff distribution by medical role with a legend in DHTMLX Suite](/img/integration/work_with_backend_chart.png) The Chart can help you visualize your data. It is interactive and useful for comparing the data you need. @@ -74,7 +74,7 @@ The following request method is used in this example: `GET`. ### Grid. Getting data, inline editing, and sending data -![](../assets/integration/work_with_backend_grid.png) +![Grid with project rows and columns for status, paid checkbox, owner, hours, and dates in DHTMLX Suite](/img/integration/work_with_backend_grid.png) Sorting and searching options are shown in the Grid example. You can also check how selection of rows and cells works. @@ -82,7 +82,7 @@ The following request methods are used in this example: `GET`, `PUT`. ### Tree. Getting data, inline editing, and sending data -![](../assets/integration/work_with_backend_tree.png) +![Tree organizing books and magazines into expandable category folders in DHTMLX Suite](/img/integration/work_with_backend_tree.png) The sample of a Tree widget shows you the way to organize the information in a tree-like structure. You can drag-and-drop the items, rename them, and change the current example's structure. @@ -90,9 +90,9 @@ The following request methods are used in this example: `GET`, `PUT`. ### DataView with Form and Window. Getting, editing, deleting, and sending data -![](../assets/integration/work_with_backend_dataview_and_form.png) +![DataView of contact cards with an Add new card button for editing data in DHTMLX Suite](/img/integration/work_with_backend_dataview_and_form.png) -![](../assets/integration/work_with_backend_dataview_card.png) +![DataView listing employee text cards with name, position, phone, and birthday in DHTMLX Suite](/img/integration/work_with_backend_dataview_card.png) This example of DataView shows you more opportunities to manipulate the widget. Click the card to edit or delete it. Add a new card with the help of the corresponding button. @@ -100,9 +100,9 @@ The following request methods are used in this example: `GET`, `PUT`, `POST`, `D ### List with Form and Window. Getting, editing, deleting, and sending data -![](../assets/integration/work_with_backend_list_and_form.png) +![List of employee records with an Add new card button for editing data in DHTMLX Suite](/img/integration/work_with_backend_list_and_form.png) -![](../assets/integration/work_with_backend_list_card.png) +![Window form to add a new card with name, position, phone, and date fields in DHTMLX Suite](/img/integration/work_with_backend_list_card.png) The example of an interactive List shows you the opportunities to delete and edit cards, add a new card. @@ -110,9 +110,9 @@ The following request methods are used in this example: `GET`, `PUT`, `POST`, `D ### Grid with Form and Window. Getting, editing, deleting, and sending data -![](../assets/integration/work_with_backend_grid_and_form.png) +![Grid of project rows with an Add new card button and filter inputs in DHTMLX Suite](/img/integration/work_with_backend_grid_and_form.png) -![](../assets/integration/work_with_backend_grid_card.png) +![Window form to add a new card with project, status, owner, dates, and paid fields in DHTMLX Suite](/img/integration/work_with_backend_grid_card.png) The interactive Grid example helps you understand how simple you can manipulate the widget. You can also easily use this example in your own project. @@ -120,7 +120,7 @@ The following request methods are used in this example: `GET`, `PUT`, `POST`, `D ### Save method. Getting, editing, deleting, and sending data -![](../assets/integration/work_with_backend_save.png) +![Editable Grid with a new project row being added inline and Delete and Add card buttons in DHTMLX Suite](/img/integration/work_with_backend_save.png) The example is created to show you how to save the changes made in data to the backend via the `save()` method of DataCollection. diff --git a/docs/layout/cell_configuration.md b/docs/layout/cell_configuration.md index a39201930..bf890d15a 100644 --- a/docs/layout/cell_configuration.md +++ b/docs/layout/cell_configuration.md @@ -259,4 +259,4 @@ The available values of the option are "line", "wide", "space", "none". | type:"line" | type:"wide" | type:"space" | type:"none" | | ----------------------------------- | ----------------------------------- | ------------------------------------ | ----------------------------------------- | -| ![](../assets/layout/line_type.png) | ![](../assets/layout/wide_type.png) | ![](../assets/layout/space_type.png) | ![](../assets/layout/without_borders.png) | +| ![Layout cells with thin line borders between three stacked rows in DHTMLX Suite](/img/layout/line_type.png) | ![Layout cells separated by wide gray borders between three stacked rows in DHTMLX Suite](/img/layout/wide_type.png) | ![Layout cells separated by blank space between three stacked rows in DHTMLX Suite](/img/layout/space_type.png) | ![Layout cells merged without borders or space between three stacked rows in DHTMLX Suite](/img/layout/without_borders.png) | diff --git a/docs/layout/customization.md b/docs/layout/customization.md index 55b75dc6a..3169dc655 100644 --- a/docs/layout/customization.md +++ b/docs/layout/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Layout in the documentation of There is a possibility to make changes in the look and feel of a layout by styling its cells. -![Styling cells](../assets/layout/custom_css.png) +![Layout styled with custom CSS showing a dark header and pink, teal, and orange colored cells in DHTMLX Suite](/img/layout/custom_css.png) **Related sample**: [Layout. Styling (custom CSS)](https://snippet.dhtmlx.com/pwxmf0lx) diff --git a/docs/layout/index.md b/docs/layout/index.md index 740ae6c4e..d1067608c 100644 --- a/docs/layout/index.md +++ b/docs/layout/index.md @@ -9,7 +9,7 @@ description: You can have an overview of Layout in the documentation of the DHTM DHTMLX Layout component lets you specify the main scheme of your application or web page, as it defines the arrangement of blocks with content. Layout helps blend diverse types of data representation on one page.
Check [online samples for DHTMLX Layout](https://snippet.dhtmlx.com/f1f49n35?tag=layout). -![](../assets/layout/layout.png) +![Layout structure with a header, sidebar, content, aside columns, and a footer in DHTMLX Suite](/img/layout/layout.png) ## Features diff --git a/docs/layout/layout_patterns.md b/docs/layout/layout_patterns.md index 5dfd2de05..e086102b5 100644 --- a/docs/layout/layout_patterns.md +++ b/docs/layout/layout_patterns.md @@ -10,36 +10,36 @@ DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/ **Click on the desired pattern to see its example in Snippet Tool.** -[![](../assets/layout/1c.png)](https://snippet.dhtmlx.com/mzlodj28) -[![](../assets/layout/2e.png)](https://snippet.dhtmlx.com/1oqx20ve) -[![](../assets/layout/2u.png)](https://snippet.dhtmlx.com/yr9mapji) +[![1C layout pattern with a single cell in DHTMLX Suite](/img/layout/1c.png)](https://snippet.dhtmlx.com/mzlodj28) +[![2E layout pattern with two stacked rows in DHTMLX Suite](/img/layout/2e.png)](https://snippet.dhtmlx.com/1oqx20ve) +[![2U layout pattern with two side-by-side columns in DHTMLX Suite](/img/layout/2u.png)](https://snippet.dhtmlx.com/yr9mapji) -[![](../assets/layout/3e.png)](https://snippet.dhtmlx.com/v0w2p60c) -[![](../assets/layout/3w.png)](https://snippet.dhtmlx.com/ag01de2d) -[![](../assets/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) -[![](../assets/layout/3l.png)](https://snippet.dhtmlx.com/bozlxz69) -[![](../assets/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) -[![](../assets/layout/3u.png)](https://snippet.dhtmlx.com/678w7hgb) +[![3E layout pattern with three stacked rows in DHTMLX Suite](/img/layout/3e.png)](https://snippet.dhtmlx.com/v0w2p60c) +[![3W layout pattern with three side-by-side columns in DHTMLX Suite](/img/layout/3w.png)](https://snippet.dhtmlx.com/ag01de2d) +[![3J layout pattern with a full-width top row over two columns in DHTMLX Suite](/img/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) +[![3L layout pattern with a left sidebar and two stacked cells on the right in DHTMLX Suite](/img/layout/3l.png)](https://snippet.dhtmlx.com/bozlxz69) +[![3T layout pattern with two top columns over a full-width bottom row in DHTMLX Suite](/img/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) +[![3U layout pattern with two top columns over a full-width bottom row in DHTMLX Suite](/img/layout/3u.png)](https://snippet.dhtmlx.com/678w7hgb) -[![](../assets/layout/4e.png)](https://snippet.dhtmlx.com/m6nlb0bf) -[![](../assets/layout/4w.png)](https://snippet.dhtmlx.com/uwb6hql7) -[![](../assets/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) -[![](../assets/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) -[![](../assets/layout/4h.png)](https://snippet.dhtmlx.com/5ekykk2n) -[![](../assets/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) -[![](../assets/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) -[![](../assets/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) -[![](../assets/layout/4j.png)](https://snippet.dhtmlx.com/8km3g1k2) -[![](../assets/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) -[![](../assets/layout/4g.png)](https://snippet.dhtmlx.com/mwrfozsu) -[![](../assets/layout/4c.png)](https://snippet.dhtmlx.com/ww1qk9u7) +[![4E layout pattern with four stacked rows in DHTMLX Suite](/img/layout/4e.png)](https://snippet.dhtmlx.com/m6nlb0bf) +[![4W layout pattern with four side-by-side columns in DHTMLX Suite](/img/layout/4w.png)](https://snippet.dhtmlx.com/uwb6hql7) +[![4T layout pattern with three top columns over a full-width bottom row in DHTMLX Suite](/img/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) +[![4U layout pattern with a full-width top row over three columns in DHTMLX Suite](/img/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) +[![4H layout pattern with side columns around a stacked center column in DHTMLX Suite](/img/layout/4h.png)](https://snippet.dhtmlx.com/5ekykk2n) +[![4I layout pattern with two full-width rows over two bottom columns in DHTMLX Suite](/img/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) +[![4A layout pattern with two outer columns around two stacked center rows in DHTMLX Suite](/img/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) +[![4L layout pattern with a left column beside three cells on the right in DHTMLX Suite](/img/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) +[![4J layout pattern with two full-width top rows over two bottom columns in DHTMLX Suite](/img/layout/4j.png)](https://snippet.dhtmlx.com/8km3g1k2) +[![4F layout pattern with a full-width top row over a column and stacked cells in DHTMLX Suite](/img/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) +[![4G layout pattern with three stacked rows beside a right column in DHTMLX Suite](/img/layout/4g.png)](https://snippet.dhtmlx.com/mwrfozsu) +[![4C layout pattern with a left column beside three stacked rows on the right in DHTMLX Suite](/img/layout/4c.png)](https://snippet.dhtmlx.com/ww1qk9u7) -[![](../assets/layout/5e.png)](https://snippet.dhtmlx.com/wnn4xfu4) -[![](../assets/layout/5w.png)](https://snippet.dhtmlx.com/jo5z28kr) -[![](../assets/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) -[![](../assets/layout/5h.png)](https://snippet.dhtmlx.com/xr6jv9kk) -[![](../assets/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) -[![](../assets/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) -[![](../assets/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) -[![](../assets/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) -[![](../assets/layout/5c.png)](https://snippet.dhtmlx.com/rkpj3k4h) +[![5E layout pattern with five stacked rows in DHTMLX Suite](/img/layout/5e.png)](https://snippet.dhtmlx.com/wnn4xfu4) +[![5W layout pattern with five side-by-side columns in DHTMLX Suite](/img/layout/5w.png)](https://snippet.dhtmlx.com/jo5z28kr) +[![5U layout pattern with a full-width top row over four columns in DHTMLX Suite](/img/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) +[![5H layout pattern with side columns around three stacked center rows in DHTMLX Suite](/img/layout/5h.png)](https://snippet.dhtmlx.com/xr6jv9kk) +[![5I layout pattern with a full-width top row over two rows and bottom columns in DHTMLX Suite](/img/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) +[![5K layout pattern with two stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) +[![5S layout pattern with two stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) +[![5G layout pattern with three stacked left rows beside a right column in DHTMLX Suite](/img/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) +[![5C layout pattern with a left column beside stacked rows on the right in DHTMLX Suite](/img/layout/5c.png)](https://snippet.dhtmlx.com/rkpj3k4h) diff --git a/docs/list/configuration.md b/docs/list/configuration.md index 764a6df0e..d9c5a08c5 100644 --- a/docs/list/configuration.md +++ b/docs/list/configuration.md @@ -87,7 +87,7 @@ const list = new dhx.List("list_container", { ## Editing items -![](../assets/list/editable.png) +![List with an item being edited inline showing selected highlighted text in DHTMLX Suite](/img/list/editable.png) **Related sample**: [List. Inline editing](https://snippet.dhtmlx.com/f26lfcai) @@ -99,7 +99,7 @@ const list = new dhx.List("list_container", {editable:true}); ## Height of an item -![](../assets/list/item_height.png) +![List with increased item height showing book titles and categories in DHTMLX Suite](/img/list/item_height.png) **Related sample**: [List. Setup list item height](https://snippet.dhtmlx.com/89buovn2) @@ -127,7 +127,7 @@ When the [virtual](list/api/list_virtual_config.md) property is set to *true*, t ## Height of the List -![](../assets/list/list_height.png) +![Scrollable List with a fixed height showing book titles and categories in DHTMLX Suite](/img/list/list_height.png) **Related sample**: [List. Setup list height](https://snippet.dhtmlx.com/k2mj2sz7) @@ -147,7 +147,7 @@ const list = new dhx.List("list_container", {height: "700px"}); ## Multiple selection of items -![](../assets/list/multiselection.png) +![List with multiple selected book items highlighted at once in DHTMLX Suite](/img/list/multiselection.png) **Related sample**: [List. Multiselection](https://snippet.dhtmlx.com/0sorkczm) @@ -169,7 +169,7 @@ const list = new dhx.List("list_container", { ## Selection of items -![](../assets/list/disable_selection.png) +![List of books with titles, authors and categories without selection in DHTMLX Suite](/img/list/disable_selection.png) **Related sample**: [List. Disable selection](https://snippet.dhtmlx.com/dk4czs1z) @@ -181,7 +181,7 @@ const list = new dhx.List("list_container", {selection: false}); ## Template for List items -![](../assets/list/list_template.png) +![List rendered with a custom HTML template showing book titles, authors and categories in DHTMLX Suite](/img/list/list_template.png) **Related sample**: [List. HTML template for item](https://snippet.dhtmlx.com/gtzdwpj4) diff --git a/docs/list/customization.md b/docs/list/customization.md index ce7248612..fe80389dc 100644 --- a/docs/list/customization.md +++ b/docs/list/customization.md @@ -8,7 +8,7 @@ description: You can explore the customization of List in the documentation of t ## Styling -![Styling List](../assets/list/custom_style.png) +![List styled with custom CSS showing colored book titles and authors in DHTMLX Suite](/img/list/custom_style.png) **Related sample**: [List. Styling (custom CSS)](https://snippet.dhtmlx.com/s461f09w) @@ -61,7 +61,7 @@ For example: You can style particular cells in the list. -![Styling items](../assets/list/custom_css.png) +![List with custom CSS applied to alternating numbered book items in DHTMLX Suite](/img/list/custom_css.png) **Related sample**: [List. Styling (custom CSS for item)](https://snippet.dhtmlx.com/ipu9yshl) @@ -90,7 +90,7 @@ For example, apply some color to each even item, as in: It is also possible to customize selection of an item. -![Custom selection](../assets/list/custom_selection.png) +![List with a custom highlighted selected book item in DHTMLX Suite](/img/list/custom_selection.png) **Related sample**: [List. Styling selection with CSS](https://snippet.dhtmlx.com/6hss19d3) diff --git a/docs/list/index.md b/docs/list/index.md index 198b9df7f..a099a2ba4 100644 --- a/docs/list/index.md +++ b/docs/list/index.md @@ -9,7 +9,7 @@ description: You can have an overview of List in the documentation of the DHTMLX DHTMLX List is a client-side JavaScript component that displays a collection of objects in a list according to a user-defined template. It allows you to arrange multiple objects with similar properties within a single container and make your data organized. Check [online samples for DHTMLX List](https://snippet.dhtmlx.com/0sorkczm?tag=list). -![](../assets/list/list_front.png) +![List of books with titles, authors and category labels in DHTMLX Suite](/img/list/list_front.png) ## Features diff --git a/docs/menu/configuring_menu_items.md b/docs/menu/configuring_menu_items.md index 80052a5b2..dd30313f1 100644 --- a/docs/menu/configuring_menu_items.md +++ b/docs/menu/configuring_menu_items.md @@ -14,7 +14,7 @@ To operate Menu controls, you can use Menu API and [Tree Collection API](/tree_c MenuItem is a drop-down list of options. -![Menu Item](../assets/menu/menu_item.png) +![Menu item with an open dropdown list of options in DHTMLX Suite](/img/menu/menu_item.png) ### Adding menuItem @@ -41,7 +41,7 @@ See [the full list of properties](menu/api/api_menuitem_properties.md) that you This is an item that contains any custom HTML content (for example, an image, icon or other element). -![](../assets/menu/htmlcontent.png) +![Menu with a custom HTML item containing a text input and icon options in DHTMLX Suite](/img/menu/htmlcontent.png) ### Adding Custom HTML @@ -67,7 +67,7 @@ See [the full list of properties](menu/api/api_customhtml_properties.md) that yo This is a horizontal (between menu options) or vertical (between menu items) line separating items/groups of items from each other. -![](../assets/menu/separator.png) +![Menu dropdown with a horizontal separator line between options in DHTMLX Suite](/img/menu/separator.png) ### Adding Separator @@ -89,7 +89,7 @@ See [the full list of properties](menu/api/api_separator_properties.md) that you This item takes space on the toolbar and is used for aligning controls. -![DHX Toolbar spacer](../assets/menu/spacer.png) +![Menu bar with a spacer pushing the Edit item and its dropdown to the right in DHTMLX Suite](/img/menu/spacer.png) ### Adding Spacer diff --git a/docs/menu/creating_context_menu.md b/docs/menu/creating_context_menu.md index 3db94f181..facc56d9d 100644 --- a/docs/menu/creating_context_menu.md +++ b/docs/menu/creating_context_menu.md @@ -8,7 +8,7 @@ description: You can explore the Context Menu in the documentation of the DHTMLX dhtmlxContextMenu is a component that provides an easy way to add a contextual menu to projects. It will be of great help for frequently used actions in web sites, help systems, etc. -![DHX Context Menu](../assets/menu/context_menu.png) +![Context menu with Add, Rename, Delete options and a nested submenu in DHTMLX Suite](/img/menu/context_menu.png) **Related sample**: [Menu. Context menu initialization with config.data](https://snippet.dhtmlx.com/mgya9p1l) diff --git a/docs/menu/customization.md b/docs/menu/customization.md index 70554d8e4..a5e50a05e 100644 --- a/docs/menu/customization.md +++ b/docs/menu/customization.md @@ -40,7 +40,7 @@ const dataset = [ ]; ~~~ -![](../assets/menu/custom_icons.png) +![Menu with an open Edit dropdown showing custom Font Awesome icons in DHTMLX Suite](/img/menu/custom_icons.png) **Related sample**: [Menu. Custom icons](https://snippet.dhtmlx.com/nkmz6ilv) @@ -50,7 +50,7 @@ const dataset = [ There is a possibility to make changes in the look and feel of a menu. -![](../assets/menu/custom_menu.png) +![Dark-themed menu with a custom-styled File dropdown of file options in DHTMLX Suite](/img/menu/custom_menu.png) **Related sample**: [Menu. Styling (custom CSS)](https://snippet.dhtmlx.com/kfy2th5n) diff --git a/docs/menu/index.md b/docs/menu/index.md index 464b8c2b8..a2bf1b48d 100644 --- a/docs/menu/index.md +++ b/docs/menu/index.md @@ -8,7 +8,7 @@ description: You can have an overview of Menu in the documentation of the DHTMLX DHTMLX Menu is a component that provides an easy way to add a drop down menu to user's projects. This component is highly customizable and supports a wide range of features. DHTMLX Menu component can be a good navigation aid to web sites, help systems, etc. Check [online samples for DHTMLX Menu](https://snippet.dhtmlx.com/nk65jfmx?tag=menu). -![](../assets/menu/menu_front.png) +![Horizontal menu bar with an open Format dropdown and Align submenu in DHTMLX Suite](/img/menu/menu_front.png) ## Features diff --git a/docs/message/configuration.md b/docs/message/configuration.md index 619d0d37e..fde489344 100644 --- a/docs/message/configuration.md +++ b/docs/message/configuration.md @@ -10,7 +10,7 @@ In this article you will find the detailed list of properties that you can use i ## Message box -![](../assets/message/show_message.png) +![Notification message box with text and a close icon in DHTMLX Suite](/img/message/show_message.png) **Related sample**: [Message. Show Message](https://snippet.dhtmlx.com/rsxdlicg) @@ -54,7 +54,7 @@ From v8.0, you can close a message box via the [close()](message/api/message_clo ## Alert box -![](../assets/message/show_alert.png) +![Modal alert box with a header, body text and an OK button in DHTMLX Suite](/img/message/show_alert.png) **Related sample**: [Message. Show Alert](https://snippet.dhtmlx.com/m4xka888) @@ -74,7 +74,7 @@ dhx.alert({ ## Confirm box -![](../assets/message/show_confirm.png) +![Modal confirm box with header, text and Reject and Apply buttons in DHTMLX Suite](/img/message/show_confirm.png) **Related sample**: [Message. Show Confirm](https://snippet.dhtmlx.com/iss7twe6) @@ -114,7 +114,7 @@ dhx.confirm({ ## Tooltip -![](../assets/message/show_tooltip.png) +![Dark tooltip shown when hovering over an element in DHTMLX Suite](/img/message/show_tooltip.png) **Related sample**: [Message. Show Tooltip](https://snippet.dhtmlx.com/c6jm8if6) @@ -141,7 +141,7 @@ dhx.tooltip("Tooltip From Right", { In the image below the target is adjacent to the right side of screen. Its tooltip that has the *position:"right"* attribute in the config object appears from the left side of the target. -![Smart positioning](../assets/message/smart_tooltip.png) +![Tooltip with smart positioning appearing to the left of an edge element in DHTMLX Suite](/img/message/smart_tooltip.png) ### Tooltip API diff --git a/docs/message/customization.md b/docs/message/customization.md index 30ef5b811..1cf0f1c30 100644 --- a/docs/message/customization.md +++ b/docs/message/customization.md @@ -10,7 +10,7 @@ There is a possibility to make changes in the look and feel of a message box or ## Using new CSS classes -![](../assets/message/custom_style.png) +![Notification message box with a blue custom CSS style and close icon in DHTMLX Suite](/img/message/custom_style.png) To use a new CSS class you need to take the following steps: diff --git a/docs/message/index.md b/docs/message/index.md index d92ab7779..52ffec695 100644 --- a/docs/message/index.md +++ b/docs/message/index.md @@ -10,7 +10,7 @@ DHTMLX Message is a tiny but useful component that helps you to interact with a Check [online samples for DHTMLX Message](https://snippet.dhtmlx.com/tfiqt79l?tag=message). -![](../assets/message/dhx_confirm.png) +![Modal confirm box with a question and Decline and Accept buttons in DHTMLX Suite](/img/message/dhx_confirm.png) ## Features diff --git a/docs/message/overview.md b/docs/message/overview.md index 13bf9e7cd..7a48d3033 100644 --- a/docs/message/overview.md +++ b/docs/message/overview.md @@ -11,24 +11,24 @@ interaction with the users of your app or web-site. ## Message -![DHTMLX Message](../assets/message/message.png) +![Notification message box with the dhtmlxMessage logo and text in DHTMLX Suite](/img/message/message.png) A simple message box to inform a user about processes occurring in the application in this or that moment. ## Alert -![DHX Alert](../assets/message/dhx_alert.png) +![Modal alert box with a warning message and an OK button in DHTMLX Suite](/img/message/dhx_alert.png) This type of message box allows warning a user against taking some steps that may lead to unexpected or undesirable result. ## Confirm -![DHX Confirm](../assets/message/dhx_confirm.png) +![Modal confirm box with a question and Decline and Accept buttons in DHTMLX Suite](/img/message/dhx_confirm.png) This type of message box is useful when you need to ask a user to confirm some action to proceed to next steps. ## Tooltip -![DHX Tooltip](../assets/message/show_tooltip.png) +![Dark tooltip displayed when hovering over an element in DHTMLX Suite](/img/message/show_tooltip.png) Tooltip is a great helper for giving information about an element a user is hovering over. diff --git a/docs/migration.md b/docs/migration.md index 809bb96b0..f161d0505 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -584,7 +584,7 @@ form.getItem("button_id").setValue("button_value"); ### Confirm message box -10) Before v7.0, the *Space* and *Enter* key were used to confirm the Reject button. Starting with v7.0, the keys confirm the Apply button. The *Esc* key confirms the Reject button. +10) Before v7.0, the Space and Enter key were used to confirm the Reject button. Starting with v7.0, the keys confirm the Apply button. The Esc key confirms the Reject button. Also note, that before v7.0, the confirm buttons were displayed in the following order: "Apply" and "Reject". In the version 7.0, the order has been changed to "Reject" and "Apply". diff --git a/docs/optimus_guides/dashboard_demo.md b/docs/optimus_guides/dashboard_demo.md index cfbc991bf..20fa680a0 100644 --- a/docs/optimus_guides/dashboard_demo.md +++ b/docs/optimus_guides/dashboard_demo.md @@ -8,7 +8,7 @@ description: You can explore how to work with UI Dashboard Demo using Optimus Fr [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](../assets/optimus/demo/dashboard_demo.png) +![UI dashboard demo with sales area chart, donut chart, ticket cards and notifications panel in DHTMLX Suite](/img/optimus/demo/dashboard_demo.png) This demo application shows how to create a dashboard for a ticketing system based on DHTMLX Suite widgets: Layout, Grid, DataView, Toolbar, Chart, Window, and Form. diff --git a/docs/optimus_guides/exam_demo.md b/docs/optimus_guides/exam_demo.md index e5c838f0a..6968710a3 100644 --- a/docs/optimus_guides/exam_demo.md +++ b/docs/optimus_guides/exam_demo.md @@ -8,7 +8,7 @@ description: You can explore how to work with Online Exam Demo using Optimus Fra [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](../assets/optimus/demo/examsystem_demo.png) +![Online Exam System demo showing an exams TreeGrid grouped by subject with filters and sidebar in DHTMLX Suite](/img/optimus/demo/examsystem_demo.png) This demo application shows how to create an online examination system for an educational project with subjects, exams, and students' results. It is developed using DHTMLX Suite widgets: Grid in the TreeGrid mode, Form, Sidebar, and Toolbar. diff --git a/docs/optimus_guides/filemanager_demo.md b/docs/optimus_guides/filemanager_demo.md index c1b9daf63..6b1d85eee 100644 --- a/docs/optimus_guides/filemanager_demo.md +++ b/docs/optimus_guides/filemanager_demo.md @@ -8,7 +8,7 @@ description: You can explore how to work with File Manager Demo using Optimus Fr [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](../assets/optimus/demo/filemanager_demo.png) +![File Explorer demo app showing a file list grid with folder tree and details panel in DHTMLX Suite](/img/optimus/demo/filemanager_demo.png) This demo application shows how to create a Material-style file manager app based on DHTMLX Suite widgets: Grid, Tree, Layout, DataView, Toolbar, Sidebar, Menu, Form, and Tabbar. diff --git a/docs/optimus_guides/geotracking_demo.md b/docs/optimus_guides/geotracking_demo.md index ebecf4237..8bf11bf5a 100644 --- a/docs/optimus_guides/geotracking_demo.md +++ b/docs/optimus_guides/geotracking_demo.md @@ -8,7 +8,7 @@ description: You can explore how to work with Geo Tracking Demo using Optimus Fr [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](../assets/optimus/demo/geotracking_demo.png) +![Geo tracking demo app showing courier cards beside a city map with delivery locations in DHTMLX Suite](/img/optimus/demo/geotracking_demo.png) This demo shows how to create a geo tracking application for delivery management. It is developed using DHTMLX Suite widgets: Layout, Sidebar, Tabbar, Form, and Dataview. diff --git a/docs/optimus_guides/hospital_demo.md b/docs/optimus_guides/hospital_demo.md index 78aee57e4..1d08ef020 100644 --- a/docs/optimus_guides/hospital_demo.md +++ b/docs/optimus_guides/hospital_demo.md @@ -8,7 +8,7 @@ description: You can explore how to work with Hospital Management Demo using Opt [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](../assets/optimus/demo/hospital_demo.png) +![Hospital Management System demo with a patients TreeGrid grouped by rooms and filter sidebar in DHTMLX Suite](/img/optimus/demo/hospital_demo.png) This demo application shows how to create a hospital management system with a clear and accurate UI based on DHTMLX Diagram and DHTMLX Suite widgets: Sidebar, Grid in the TreeGrid mode, Tabbar, Dataview, Window, Toolbar, and Form. diff --git a/docs/optimus_guides/hotel_demo.md b/docs/optimus_guides/hotel_demo.md index d79bd01e1..22a845443 100644 --- a/docs/optimus_guides/hotel_demo.md +++ b/docs/optimus_guides/hotel_demo.md @@ -8,7 +8,7 @@ description: description [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](../assets/optimus/demo/hotel_demo.png) +![Hotel Management System demo showing a room timeline grid, sidebar menu and booking requests panel in DHTMLX Suite](/img/optimus/demo/hotel_demo.png) This demo shows how to create a hotel management system based on DHTMLX Suite widgets: Layout, Grid, List, Toolbar, Sidebar, and Calendar. diff --git a/docs/optimus_guides/how_to_start_optimus.md b/docs/optimus_guides/how_to_start_optimus.md index cdcbed5c6..af9e5bab9 100644 --- a/docs/optimus_guides/how_to_start_optimus.md +++ b/docs/optimus_guides/how_to_start_optimus.md @@ -67,7 +67,7 @@ Step 1. Initialize an application After running the project on the local server and opening `http://localhost:8080/` in your browser, you will see the following result: -![](../assets/optimus/start_optimus.png) +![Browser showing the Hello Optimus starter app running on localhost in DHTMLX Suite](/img/optimus/start_optimus.png) Let's consider how we've initialized our starter application: @@ -330,11 +330,11 @@ Now, we'll follow the changes in the global event bus. Each time the user clicks Let's take a look at the result: -![](../assets/optimus/empty_view.png) +![Starter app with a First, Second, Third toolbar showing the empty view in DHTMLX Suite](/img/optimus/empty_view.png) After clicking on the "Second" button you should see the view, as in: -![](../assets/optimus/second_view.png) +![Starter app with the Second toolbar button selected showing the second view in DHTMLX Suite](/img/optimus/second_view.png) You can also learn more details about how to: @@ -475,7 +475,7 @@ The above code sample shows that we won't render the default view in the "conten Let's run the application now. You will see that the first view is active by default: -![](../assets/optimus/first_view.png) +![Starter app with the First toolbar button active by default showing the first view in DHTMLX Suite](/img/optimus/first_view.png) It means, that the id of the button that should be active by default is passed to the state manager on initialization of the application. @@ -698,15 +698,15 @@ As a result, when the active state is changed, the related component will be ren Once you are done with it, run the application now. You will see the DataView widget on the first page: -![](../assets/optimus/dataview.png) +![DataView widget displaying employee cards with names and positions on the first page in DHTMLX Suite](/img/optimus/dataview.png) the Chart widget on the second page: -![](../assets/optimus/chart.png) +![Donut chart showing the number of employees by position on the second page in DHTMLX Suite](/img/optimus/chart.png) and the Grid widget on the third page: -![](../assets/optimus/grid.png) +![Grid listing employees with name, post, phone, mail and dates on the third page in DHTMLX Suite](/img/optimus/grid.png) Step 5. Provide editing data -------------- @@ -948,15 +948,15 @@ export const emptyItem = { That's all. Open *http://localhost:8080/* and you'll see the dataview like the one shown here: -![](../assets/optimus/edit_dataview.png) +![DataView of employee cards with a toolbar offering add and remove actions in DHTMLX Suite](/img/optimus/edit_dataview.png) Click the second button to see the chart view, as in: -![](../assets/optimus/edit_chart.png) +![Donut chart of employees by position shown on the second page of the demo in DHTMLX Suite](/img/optimus/edit_chart.png) To see the grid view, click the third button. You can try to edit a cell in the grid by double-click on the cell. -![](../assets/optimus/edit_grid.png) +![Editable employee grid with a mail cell being edited inline in DHTMLX Suite](/img/optimus/edit_grid.png) You could also note, that changing data in one of the widgets will change the data in the other widgets. diff --git a/docs/optimus_guides/index.md b/docs/optimus_guides/index.md index e85678bb8..1c8dac6a1 100644 --- a/docs/optimus_guides/index.md +++ b/docs/optimus_guides/index.md @@ -71,7 +71,7 @@ DHTMLX Optimus requires the files of the DHTMLX Suite library as dependencies. T After running the project on the local server and opening `http://localhost:8080/` in your browser, you will see the following result: -![](../assets/optimus/start_optimus.png) +![Browser showing the Hello Optimus starter app running on localhost in DHTMLX Suite](/img/optimus/start_optimus.png) Let's consider how we've created our demo application: diff --git a/docs/optimus_guides/kpi_demo.md b/docs/optimus_guides/kpi_demo.md index 7d23ab000..f4d55bdfd 100644 --- a/docs/optimus_guides/kpi_demo.md +++ b/docs/optimus_guides/kpi_demo.md @@ -8,7 +8,7 @@ description: You can explore how to work with Sales KPI Tracking Demo using Opti [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](../assets/optimus/demo/kpi_demo.png) +![Sales KPI tracking demo with donut, bar and area charts and a sales reps list in DHTMLX Suite](/img/optimus/demo/kpi_demo.png) This demo application shows how to create a Sales KPI tracking system based on the DHTMLX Suite widgets: Layout, List, Toolbar, and Charts. diff --git a/docs/pagination/configuration.md b/docs/pagination/configuration.md index 608f01058..db8c51e1a 100644 --- a/docs/pagination/configuration.md +++ b/docs/pagination/configuration.md @@ -8,7 +8,7 @@ description: You can explore the configuration of Pagination in the documentatio ## Input width -![](../assets/pagination/combo_width.png) +![DHTMLX Pagination control with a widened page number input and navigation arrows in DHTMLX Suite](/img/pagination/combo_width.png) By default, the input of a pagination takes the auto-width that fits its maximum content. You can change the input width and set any other value via the [inputWidth](pagination/api/pagination_inputwidth_config.md) property, for example: @@ -36,7 +36,7 @@ The default value of the attribute is 0. ## Number of items per page -![](../assets/pagination/page_size.png) +![DHTMLX Pagination showing nine items per page in a grid above the navigation bar in DHTMLX Suite](/img/pagination/page_size.png) You can define the number of items that should be displayed per page of the related widget with the help of the [pageSize](pagination/api/pagination_pagesize_config.md) configuration property. The default value is 10. This is how you can change the default settings: diff --git a/docs/pagination/customization.md b/docs/pagination/customization.md index cf9d82028..39dbf7223 100644 --- a/docs/pagination/customization.md +++ b/docs/pagination/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Pagination in the documentatio There is a possibility to make changes in the look and feel of a pagination. -![Styling Pagination](../assets/pagination/styling.png) +![DHTMLX Pagination with a purple custom-styled navigation bar below a grid of sections in DHTMLX Suite](/img/pagination/styling.png) **Related sample**: [Pagination. Styling (custom CSS)](https://snippet.dhtmlx.com/e7bujtsu) diff --git a/docs/pagination/index.md b/docs/pagination/index.md index 30e0d93e5..a71876d22 100644 --- a/docs/pagination/index.md +++ b/docs/pagination/index.md @@ -13,7 +13,7 @@ The Pagination component is available in the **PRO** version only. DHTMLX Pagination helps to divide large amount of data into groups and display them on discrete pages. The component is easy-to-use and provides handy navigation that allows you to quickly jump to a desired page. DHTMLX Pagination is available in combination with data components like DataView, List, Grid, Tree, Grid in the TreeGrid mode. Check [online samples for DHTMLX Pagination](https://snippet.dhtmlx.com/05r4s63b?tag=pagination). -![](../assets/pagination/init.png) +![DHTMLX Pagination navigation bar with page input and arrows below a list of items in DHTMLX Suite](/img/pagination/init.png) ## Features diff --git a/docs/popup/customization.md b/docs/popup/customization.md index 0384fc9d8..e26ce9f64 100644 --- a/docs/popup/customization.md +++ b/docs/popup/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Popup in the documentation of There is a possibility to make changes in the look and feel of a popup. -![Styling Popup](../assets/popup/custom_css.png) +![Popup styled with custom CSS showing a blue welcome message under a button in DHTMLX Suite](/img/popup/custom_css.png) **Related sample**: [Popup. Styling (custom CSS)](https://snippet.dhtmlx.com/rd8zfw5h) diff --git a/docs/popup/index.md b/docs/popup/index.md index 3bde9ee66..51b30e19a 100644 --- a/docs/popup/index.md +++ b/docs/popup/index.md @@ -10,7 +10,7 @@ DHTMLX Popup is a pop-up window that can contain various content. It allows atta Mainly, the component is applied for showing a pop-up content on some action, such as a button click. Check [online samples for DHTMLX Popup](https://snippet.dhtmlx.com/bz1ekc71?tag=popup). -![](../assets/popup/popup_front.png) +![Popup with a welcome message opened below a Show Popup button in DHTMLX Suite](/img/popup/popup_front.png) ## Features diff --git a/docs/ribbon/block.md b/docs/ribbon/block.md index c78feed18..5856bc640 100644 --- a/docs/ribbon/block.md +++ b/docs/ribbon/block.md @@ -8,7 +8,7 @@ description: You can explore the Block of Ribbon in the documentation of the DHT The Block control is used for grouping related controls. -![DHX Ribbon Block groups controls](../assets/ribbon/ribbon_block.png) +![Ribbon with color-highlighted blocks grouping related buttons in DHTMLX Suite](/img/ribbon/ribbon_block.png) ## Creating a Block diff --git a/docs/ribbon/button.md b/docs/ribbon/button.md index c2aac8a4d..5819bbe93 100644 --- a/docs/ribbon/button.md +++ b/docs/ribbon/button.md @@ -8,7 +8,7 @@ description: You can explore the Button of Ribbon in the documentation of the DH This is a simple button that can have an icon. Button can be *twoState* and can have a badge with a number, which can be useful for displaying the number of new messages, etc. -![](../assets/ribbon/ribbon_button.png) +![Ribbon with File, folder, cloud and Save buttons with icons in DHTMLX Suite](/img/ribbon/ribbon_button.png) **Related sample**: [Ribbon. Group buttons](https://snippet.dhtmlx.com/nlviu82g) diff --git a/docs/ribbon/customhtmlbutton.md b/docs/ribbon/customhtmlbutton.md index c74a33dad..1328d74e3 100644 --- a/docs/ribbon/customhtmlbutton.md +++ b/docs/ribbon/customhtmlbutton.md @@ -8,7 +8,7 @@ description: You can explore the custom HTML button of Ribbon in the documentati This is an item that contains any custom HTML content (for example, an image, icon or other element). -![](../assets/ribbon/custom_html.png) +![Ribbon custom HTML item showing a user avatar and name label in DHTMLX Suite](/img/ribbon/custom_html.png) **Related sample**: [Ribbon. Custom HTML](https://snippet.dhtmlx.com/c0i0q3cu) diff --git a/docs/ribbon/customization.md b/docs/ribbon/customization.md index fdc4d1ec1..3d0f7321c 100644 --- a/docs/ribbon/customization.md +++ b/docs/ribbon/customization.md @@ -24,7 +24,7 @@ after the source files of DHTMLX Ribbon as follows: Then you can use the name of the icon as the value of the **icon** property in the [object with the control parameters](ribbon/data_loading.md#json-format-templates) for ribbon: -![](../assets/ribbon/fa_icons.png) +![Ribbon buttons with custom icon font showing New, Add and Remove in DHTMLX Suite](/img/ribbon/fa_icons.png) ~~~js const data = [ @@ -70,7 +70,7 @@ const data = [ There is a possibility to make changes in the look and feel of a ribbon. -![Styling Ribbon](../assets/ribbon/custom_style.png) +![Ribbon with a highlighted Left button showing custom CSS styling in DHTMLX Suite](/img/ribbon/custom_style.png) **Related sample**: [Ribbon. Styling (custom CSS)](https://snippet.dhtmlx.com/9ckg47ro) diff --git a/docs/ribbon/image_button.md b/docs/ribbon/image_button.md index 3f40942ce..e3a364472 100644 --- a/docs/ribbon/image_button.md +++ b/docs/ribbon/image_button.md @@ -8,7 +8,7 @@ description: You can explore the ImageButton of Ribbon in the documentation of t This is a button with an image. Unlike a [button](ribbon/button.md), it does not have a text label, but can also have a badge with a number and can be *twoState*. -![DHX Ribbon imageButton](../assets/ribbon/image_button.png) +![Ribbon image button showing a round user avatar with a name label in DHTMLX Suite](/img/ribbon/image_button.png) ## Adding ImageButton diff --git a/docs/ribbon/index.md b/docs/ribbon/index.md index 36f9b134b..8e0d0e2c9 100644 --- a/docs/ribbon/index.md +++ b/docs/ribbon/index.md @@ -8,7 +8,7 @@ description: You can have an overview of Ribbon in the documentation of the DHTM DHTMLX Ribbon is an advanced version of DHTMLX Toolbar. It aggregates commands and tools used in an application or in a website into logical blocks thus providing a handy navigation bar. Check [online samples for DHTMLX Ribbon](https://snippet.dhtmlx.com/3djaib6o?tag=ribbon). -![](../assets/ribbon/ribbon_front.png) +![Ribbon toolbar with grouped File, Action, Text and Output buttons in DHTMLX Suite](/img/ribbon/ribbon_front.png) ## Features diff --git a/docs/ribbon/input.md b/docs/ribbon/input.md index 54eb7cc24..0e77576f4 100644 --- a/docs/ribbon/input.md +++ b/docs/ribbon/input.md @@ -8,7 +8,7 @@ description: You can explore the Input of Ribbon in the documentation of the DHT A text input field with an icon. -![](../assets/ribbon/input.png) +![Ribbon search input field with a magnifier icon and placeholder text in DHTMLX Suite](/img/ribbon/input.png) ## Adding Input diff --git a/docs/ribbon/navitem.md b/docs/ribbon/navitem.md index 694435076..44fe7f79a 100644 --- a/docs/ribbon/navitem.md +++ b/docs/ribbon/navitem.md @@ -8,7 +8,7 @@ description: You can explore the NavItem of Ribbon in the documentation of the D This is a default control for navigation-related components, can contain any other controls as nested items. -![](../assets/ribbon/navitem.png) +![Ribbon nav item with a save icon and a red counter badge in DHTMLX Suite](/img/ribbon/navitem.png) ## Adding NavItem diff --git a/docs/ribbon/selectbutton.md b/docs/ribbon/selectbutton.md index 6a4d5f292..d96bcd2ce 100644 --- a/docs/ribbon/selectbutton.md +++ b/docs/ribbon/selectbutton.md @@ -8,7 +8,7 @@ description: You can explore the SelectButton of Ribbon in the documentation of This is a button that contains a drop-down list of options. -![DHX Select Button](../assets/ribbon/select_button.png) +![Ribbon select button with a dropdown list of file format options in DHTMLX Suite](/img/ribbon/select_button.png) ## Adding SelectButton diff --git a/docs/ribbon/separator.md b/docs/ribbon/separator.md index 8f261da3c..0e3c25165 100644 --- a/docs/ribbon/separator.md +++ b/docs/ribbon/separator.md @@ -8,7 +8,7 @@ description: You can explore the Separator of Ribbon in the documentation of the This is a control that adds a line separating items/groups of items from each other. -![DHX Ribbon with separators](../assets/ribbon/separator.png) +![Ribbon with vertical separators dividing grouped button sections in DHTMLX Suite](/img/ribbon/separator.png) ## Adding Separator diff --git a/docs/ribbon/spacer.md b/docs/ribbon/spacer.md index 39f0a2d6d..e7cba46c5 100644 --- a/docs/ribbon/spacer.md +++ b/docs/ribbon/spacer.md @@ -8,7 +8,7 @@ description: You can explore the Spacer of Ribbon in the documentation of the DH This item takes space on the ribbon and is used for aligning controls. -![DHX Ribbon spacer](../assets/ribbon/spacer.png) +![Ribbon with a spacer adding empty space between button groups in DHTMLX Suite](/img/ribbon/spacer.png) ## Adding Spacer diff --git a/docs/sidebar/customhtmlbutton.md b/docs/sidebar/customhtmlbutton.md index 3b91e0313..b73f935f3 100644 --- a/docs/sidebar/customhtmlbutton.md +++ b/docs/sidebar/customhtmlbutton.md @@ -8,7 +8,7 @@ description: You can explore the custom HTML button of Sidebar in the documentat This is an item that contains any custom HTML content (for example, an image, icon or other element). -![](../assets/sidebar/htmlcontent.png) +![Sidebar Custom HTML item showing a user avatar, name and handle in DHTMLX Suite](/img/sidebar/htmlcontent.png) **Related sample**: [Sidebar. Custom HTML](https://snippet.dhtmlx.com/26ds0gxp) diff --git a/docs/sidebar/customization.md b/docs/sidebar/customization.md index 94988edfc..f0ca2638f 100644 --- a/docs/sidebar/customization.md +++ b/docs/sidebar/customization.md @@ -49,7 +49,7 @@ const sidebarData = [ ]; ~~~ -![](../assets/sidebar/fa_icons.png) +![Sidebar items using Font Awesome icons for Bold, Underline, Italic and Strikethrough in DHTMLX Suite](/img/sidebar/fa_icons.png) {{note You can use the [Material Design](https://pictogrammers.com/library/mdi/?welcome) icon pack by including [link to its CDN](https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.5.94/css/materialdesignicons.css) in the same way.}} @@ -57,7 +57,7 @@ const sidebarData = [ There is a possibility to make changes in the look and feel of a sidebar. -![Styling Sidebar](../assets/sidebar/custom_style.png) +![Dark themed Sidebar styled with custom CSS showing navigation items, badges and a submenu in DHTMLX Suite](/img/sidebar/custom_style.png) **Related sample**: [Sidebar. Styling (custom CSS)](https://snippet.dhtmlx.com/3mhhvvcr) diff --git a/docs/sidebar/index.md b/docs/sidebar/index.md index 69353a47a..621682de8 100644 --- a/docs/sidebar/index.md +++ b/docs/sidebar/index.md @@ -9,7 +9,7 @@ description: You can have an overview of Sidebar in the documentation of the DHT DHTMLX Sidebar is a component that provides means for comfy vertical navigation. Sidebar can contain any Toolbar controls that can be controlled via a handy API. Check [online samples for DHTMLX Sidebar](https://snippet.dhtmlx.com/3mhhvvcr?tag=sidebar). -![](../assets/sidebar/sidebar_front.png) +![Sidebar with navigation items, icons, badges and an open submenu beside page content in DHTMLX Suite](/img/sidebar/sidebar_front.png) ## Features diff --git a/docs/sidebar/menuitem.md b/docs/sidebar/menuitem.md index 2949e074c..0c16ceeda 100644 --- a/docs/sidebar/menuitem.md +++ b/docs/sidebar/menuitem.md @@ -8,7 +8,7 @@ description: You can explore the MenuItem of Sidebar in the documentation of the MenuItem is a drop-down list of options, can contain its own sub-menu. -![](../assets/sidebar/menuitem.png) +![Sidebar MenuItem with an expanded drop-down list of options in DHTMLX Suite](/img/sidebar/menuitem.png) ## Adding MenuItem diff --git a/docs/sidebar/navitem.md b/docs/sidebar/navitem.md index e3e9ea9a9..231fbe8cd 100644 --- a/docs/sidebar/navitem.md +++ b/docs/sidebar/navitem.md @@ -8,7 +8,7 @@ description: You can explore the NavItem of Sidebar in the documentation of the This is a default control for navigation-related components, can contain any other controls as nested items. -![](../assets/sidebar/navitem.png) +![Sidebar NavItem with an icon, text label and a number badge in DHTMLX Suite](/img/sidebar/navitem.png) ## Adding NavItem diff --git a/docs/sidebar/separator.md b/docs/sidebar/separator.md index 62688c93c..450baba7a 100644 --- a/docs/sidebar/separator.md +++ b/docs/sidebar/separator.md @@ -8,7 +8,7 @@ description: You can explore the Separator of Sidebar in the documentation of th This is a line separating items/groups of items from each other. -![](../assets/sidebar/separator.png) +![Sidebar Separator lines dividing navigation items with icons in DHTMLX Suite](/img/sidebar/separator.png) ## Adding Separator diff --git a/docs/sidebar/spacer.md b/docs/sidebar/spacer.md index 585313bb7..cc6c0bc3a 100644 --- a/docs/sidebar/spacer.md +++ b/docs/sidebar/spacer.md @@ -8,7 +8,7 @@ description: You can explore the Spacer of Sidebar in the documentation of the D This item takes space on the sidebar and is used for aligning controls. -![](../assets/sidebar/spacer.png) +![Sidebar Spacer adding empty space between navigation items in DHTMLX Suite](/img/sidebar/spacer.png) ## Adding Spacer diff --git a/docs/sidebar/title.md b/docs/sidebar/title.md index b67575bbf..8097b6cd6 100644 --- a/docs/sidebar/title.md +++ b/docs/sidebar/title.md @@ -8,7 +8,7 @@ description: You can explore the Title of Sidebar in the documentation of the DH This is an item that contains some text. -![](../assets/sidebar/title.png) +![Sidebar Title control displaying an app name text label in DHTMLX Suite](/img/sidebar/title.png) ## Adding Title control diff --git a/docs/slider/configuring_slider.md b/docs/slider/configuring_slider.md index d1b897cc5..a1c2b5b19 100644 --- a/docs/slider/configuring_slider.md +++ b/docs/slider/configuring_slider.md @@ -20,7 +20,7 @@ const slider = new dhx.Slider("slider_container", { You can adjust the configuration of Slider so that its scale would render values in the reverse order, i.e. from the maximal value to the minimal one. -![](../assets/slider/inverse_mode.png) +![Inverse mode slider with the thumb near the right end showing tooltip value 86 in DHTMLX Suite](/img/slider/inverse_mode.png) To launch this mode, make use of the [](slider/api/slider_inverse_config.md) property set to *true*: @@ -74,7 +74,7 @@ You can configure the look and feel of the Slider scale via the corresponding pr - [](slider/api/slider_majortick_config.md) - (number) sets interval of rendering numeric values on the slider scale - [](slider/api/slider_ticktemplate_config.md) - (function) sets a template for rendering values on the slider scale -![](../assets/slider/scale.png) +![Slider with a scale of ticks and degree labels at 0, 50 and 100 in DHTMLX Suite](/img/slider/scale.png) ~~~js const slider = new dhx.Slider("slider_container", { @@ -97,7 +97,7 @@ In case you want to mark just the minimal and maximal values with ticks, you nee - set the value of the [](slider/api/slider_tick_config.md) property equal to the value of the [](slider/api/slider_max_config.md) property - set the [](slider/api/slider_majortick_config.md) property to 1 -![](../assets/slider/min_max_ticks_only.png) +![Slider showing only the first and last ticks labeled 0 and 100 in DHTMLX Suite](/img/slider/min_max_ticks_only.png) ~~~js const slider = new dhx.Slider("slider_container", { @@ -109,7 +109,7 @@ const slider = new dhx.Slider("slider_container", { There is a possibility to show a label next to the slider. -![](../assets/slider/slider_label.png) +![Slider with a Volume label placed to the left of the trackbar in DHTMLX Suite](/img/slider/slider_label.png) There are two properties that allow manipulating the label of the slider: @@ -140,7 +140,7 @@ const slider = new dhx.Slider("slider_container", { You can specify a tooltip that will display changeable values of the slider when the user moves the slider's thumb. -![](../assets/slider/tooltip.png) +![Slider showing a tooltip with the value 0 above the dragged thumb in DHTMLX Suite](/img/slider/tooltip.png) There is the [](slider/api/slider_tooltip_config.md) property that enables rendering the slider value over the thumb: diff --git a/docs/slider/customization.md b/docs/slider/customization.md index fc8475b21..de111af81 100644 --- a/docs/slider/customization.md +++ b/docs/slider/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Slider in the documentation of There is a possibility to make changes in the look and feel of a slider. -![Styling Slider](../assets/slider/custom_style.png) +![Custom styled slider with a teal trackbar and tooltip value 33 in DHTMLX Suite](/img/slider/custom_style.png) **Related sample**: [Slider. Styling (custom CSS)](https://snippet.dhtmlx.com/ewizud5e) diff --git a/docs/slider/index.md b/docs/slider/index.md index b2a5d73c1..9cbbccac0 100644 --- a/docs/slider/index.md +++ b/docs/slider/index.md @@ -10,7 +10,7 @@ DHTMLX Slider allows adding handy slider bars into web pages and applications. T Check [online samples for DHTMLX Slider](https://snippet.dhtmlx.com/jsfxnplp?tag=slider). -![](../assets/slider/slider_front.png) +![Horizontal slider with a thumb at 50 and a numbered scale from 0 to 100 in DHTMLX Suite](/img/slider/slider_front.png) ## Features diff --git a/docs/slider/range_slider.md b/docs/slider/range_slider.md index 96ec4f62c..632e1dc24 100644 --- a/docs/slider/range_slider.md +++ b/docs/slider/range_slider.md @@ -8,7 +8,7 @@ description: You can explore the range mode of Slider in the documentation of th The range mode of slider presupposes the usage of two thumbs for selecting the starting and ending values of a range. -![](../assets/slider/range_mode.png) +![Range slider with two thumbs labeled 25 and 75 selecting a value interval in DHTMLX Suite](/img/slider/range_mode.png) To enable the range mode, you need to set the [](slider/api/slider_range_config.md) property to *true* and specify an array of two values - min and max values of the range: diff --git a/docs/tabbar/configuring_tabbar.md b/docs/tabbar/configuring_tabbar.md index fccb8054c..d9a12d4f8 100644 --- a/docs/tabbar/configuring_tabbar.md +++ b/docs/tabbar/configuring_tabbar.md @@ -8,7 +8,7 @@ description: You can explore the configuration of Tabbar in the documentation of ## Close buttons for tabs -![](../assets/tabbar/close_button.png) +![Tabbar with a close button next to each tab and the active Paris tab in DHTMLX Suite](/img/tabbar/close_button.png) **Related sample**: [Tabbar. Close button](https://snippet.dhtmlx.com/cysre4v8) @@ -31,7 +31,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", { ## Disabled tabs -![](../assets/tabbar/disabled_tab.png) +![Tabbar with grayed out disabled Paris and Rome tabs and active London tab in DHTMLX Suite](/img/tabbar/disabled_tab.png) By default, all tabs in Tabbar are enabled. It is possible to make one or several tabs disabled using the [](tabbar/api/tabbar_disabled_config.md) configuration property: @@ -51,7 +51,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", { ## Position of tabbar -![](../assets/tabbar/mode.png) +![Tabbar in left mode with tabs stacked vertically beside the content in DHTMLX Suite](/img/tabbar/mode.png) **Related sample**: [Tabbar. Mode: top, left, right, bottom](https://snippet.dhtmlx.com/xq6k0tts) @@ -130,7 +130,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", { ## Tabs without content -![](../assets/tabbar/no_content.png) +![Tabbar rendered with tabs only and an empty content area below in DHTMLX Suite](/img/tabbar/no_content.png) It is possible to render a tabbar without any content. Use the [noContent](tabbar/api/tabbar_nocontent_config.md) option for this purpose: @@ -144,7 +144,7 @@ const tabbar = new dhx.Tabbar("tabbar_container", { ## Alignment -![](../assets/tabbar/tabbar_align.png) +![Tabbar with center aligned tabs and the active VILNIUS tab showing content in DHTMLX Suite](/img/tabbar/tabbar_align.png) Starting from v7.0, there is the ability to set alignment for tabs via the [tabAlign](tabbar/api/tabbar_tabalign_config.md) configuration option of Tabbar: diff --git a/docs/tabbar/customization.md b/docs/tabbar/customization.md index d0e1e1cd1..6f8d41fd0 100644 --- a/docs/tabbar/customization.md +++ b/docs/tabbar/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Tabbar in the documentation of There is a possibility to make changes in the look and feel of a tabbar. -![Styling Tabbar](../assets/tabbar/custom_style.png) +![Custom styled Tabbar with a red active VILNIUS tab and city tabs in DHTMLX Suite](/img/tabbar/custom_style.png) **Related sample**: [Tabbar. Styling (custom CSS)](https://snippet.dhtmlx.com/47en9f0a) diff --git a/docs/tabbar/index.md b/docs/tabbar/index.md index c16a7d9e4..c62a5e330 100644 --- a/docs/tabbar/index.md +++ b/docs/tabbar/index.md @@ -10,7 +10,7 @@ DHTMLX Tabbar component allows a user to keep several groups of content together Being highly configurable, the component can be easily adjusted to your requirements and will provide quick switching between parts of your app. Check [online samples for DHTMLX Tabbar](https://snippet.dhtmlx.com/xq6k0tts?tag=tabbar). -![](../assets/tabbar/tabbar_front.png) +![Tabbar with three tabs and the active Dynamic Interface tab showing its content in DHTMLX Suite](/img/tabbar/tabbar_front.png) ## Features diff --git a/docs/themes/contrast_dark_theme.md b/docs/themes/contrast_dark_theme.md index 710e1681a..77aeab959 100644 --- a/docs/themes/contrast_dark_theme.md +++ b/docs/themes/contrast_dark_theme.md @@ -6,7 +6,7 @@ description: You can explore the dark high contrast theme of DHTMLX Suite in the # Dark high contrast theme -![dark high contrast theme](../assets/themes/contrastdark_theme.png) +![Sidebar, toolbar and grid widgets rendered with the dark high contrast theme in DHTMLX Suite](/img/themes/contrastdark_theme.png) The ["contrast-dark"](/themes/#suite-themes) theme is configured both on the base of the [root CSS variables](themes/default_theme.md) and variables which are listed below: diff --git a/docs/themes/contrast_light_theme.md b/docs/themes/contrast_light_theme.md index bcc8e2acc..62e2638e0 100644 --- a/docs/themes/contrast_light_theme.md +++ b/docs/themes/contrast_light_theme.md @@ -6,7 +6,7 @@ description: You can explore the light high contrast theme of DHTMLX Suite in th # Light high contrast theme -![light high contrast theme](../assets/themes/contrastlight_theme.png) +![Sidebar, toolbar and grid widgets rendered with the light high contrast theme in DHTMLX Suite](/img/themes/contrastlight_theme.png) The ["contrast-light"](/themes/#suite-themes) theme is configured both on the base of the [root CSS variables](themes/default_theme.md) and variables which are listed below: diff --git a/docs/themes/dark_theme.md b/docs/themes/dark_theme.md index a9de98e67..1b5ef1f4c 100644 --- a/docs/themes/dark_theme.md +++ b/docs/themes/dark_theme.md @@ -6,7 +6,7 @@ description: You can explore the dark theme of DHTMLX Suite in the documentation # Dark theme -![dark theme](../assets/themes/dark_theme.png) +![Sidebar, toolbar and grid widgets rendered with the dark theme in DHTMLX Suite](/img/themes/dark_theme.png) The ["dark"](/themes/#suite-themes) theme is configured both on the base of the [root CSS variables](themes/default_theme.md) and variables which are listed below: diff --git a/docs/themes/default_theme.md b/docs/themes/default_theme.md index 495d2b832..2882175f2 100644 --- a/docs/themes/default_theme.md +++ b/docs/themes/default_theme.md @@ -6,7 +6,7 @@ description: You can explore the default theme of DHTMLX Suite in the documentat # Default theme -![light theme](../assets/themes/light_theme.png) +![Sidebar, toolbar and grid widgets rendered with the default light theme in DHTMLX Suite](/img/themes/light_theme.png) The [default ("light")](/themes/#suite-themes) theme is configured on the base of the CSS variables which are listed below: diff --git a/docs/timepicker/configuration.md b/docs/timepicker/configuration.md index ded79a8b5..576fd036a 100644 --- a/docs/timepicker/configuration.md +++ b/docs/timepicker/configuration.md @@ -11,7 +11,7 @@ description: You can explore the configuration of Timepicker in the documentatio The default TimePicker doesn't have any buttons. However, you can add two buttons that will allow you to close the timepicker after selecting necessary time or save the values selected for hour and minutes. These controls are helpful if you attach TimePicker to an input or a calendar, for example. -![Actions buttons](../assets/timepicker/dhx_timepicker.png) +![TimePicker with Save and Close action buttons enabled in DHTMLX Suite](/img/timepicker/dhx_timepicker.png) There's the [](timepicker/api/timepicker_controls_config.md) property in the timepicker configuration that while set to *true* enables rendering of the Save button and the Close icon button in the top right corner of the component. @@ -31,7 +31,7 @@ In this mode the clock inside the timepicker will be shown together with the AM/ - 24-hour clock: -![24-hour clock](../assets/timepicker/amdm_false.png) +![TimePicker in 24-hour format showing 20:33 with hour and minute sliders in DHTMLX Suite](/img/timepicker/amdm_false.png) ~~~js const timepicker = new dhx.Timepicker("timepicker_container"); @@ -39,7 +39,7 @@ const timepicker = new dhx.Timepicker("timepicker_container"); - 12-hour clock: -![12-hour clock](../assets/timepicker/amdm_true.png) +![TimePicker in 12-hour format showing 08:33 PM with hour and minute sliders in DHTMLX Suite](/img/timepicker/amdm_true.png) ~~~js {2} const timepicker = new dhx.Timepicker("timepicker_container",{ diff --git a/docs/timepicker/customization.md b/docs/timepicker/customization.md index 5b9f3702a..a59370991 100644 --- a/docs/timepicker/customization.md +++ b/docs/timepicker/customization.md @@ -10,7 +10,7 @@ description: You can explore the customization of Timepicker in the documentatio There is a possibility to make changes in the look and feel of a timepicker. -![Styling Timepicker](../assets/timepicker/custom_style.png) +![TimePicker styled with custom red color showing hours and minutes sliders in DHTMLX Suite](/img/timepicker/custom_style.png) **Related sample**: [Timepicker. Styling (custom CSS)](https://snippet.dhtmlx.com/n4xfu4e9) diff --git a/docs/timepicker/index.md b/docs/timepicker/index.md index 490025085..eb80ccd9f 100644 --- a/docs/timepicker/index.md +++ b/docs/timepicker/index.md @@ -9,7 +9,7 @@ description: You can have an overview of Timepicker in the documentation of the DHTMLX TimePicker is a useful component for selecting time in both 12-hour and 24-hour clock format. Based on Layout and Slider components, it will work smoothly as a part of any DHTMLX-based application.
Check [online samples for DHTMLX TimePicker](https://snippet.dhtmlx.com/u9ge1a4z?tag=timepicker). -![](../assets/timepicker/dhx_timepicker.png) +![TimePicker showing 12:18 PM with hour and minute sliders and a Save button in DHTMLX Suite](/img/timepicker/dhx_timepicker.png) ## Features diff --git a/docs/toolbar/button.md b/docs/toolbar/button.md index a089924a9..ca1c8f1c0 100644 --- a/docs/toolbar/button.md +++ b/docs/toolbar/button.md @@ -8,7 +8,7 @@ description: You can explore the Button of Toolbar in the documentation of the D This is a simple button that can have an icon. Button can have two states and a badge with a number, which can be useful for displaying the number of new messages, etc. -![](../assets/toolbar/buttons.png) +![Toolbar button with an icon, label, and a number badge in DHTMLX Suite](/img/toolbar/buttons.png) **Related sample**: [Toolbar. Button](https://snippet.dhtmlx.com/7aysw3gb) diff --git a/docs/toolbar/customhtmlbutton.md b/docs/toolbar/customhtmlbutton.md index 1b9fbbbe1..6283f6c7a 100644 --- a/docs/toolbar/customhtmlbutton.md +++ b/docs/toolbar/customhtmlbutton.md @@ -8,7 +8,7 @@ description: You can explore the Custom HTML of Toolbar in the documentation of This is an item that contains any custom HTML content (for example, an image, icon or other element). -![](../assets/toolbar/htmlcontent.png) +![Toolbar custom HTML item displaying a DHX logo image in DHTMLX Suite](/img/toolbar/htmlcontent.png) **Related sample**: [Toolbar. Custom HTML](https://snippet.dhtmlx.com/rv3gq5qe) diff --git a/docs/toolbar/customization.md b/docs/toolbar/customization.md index db656fc2f..cb3949603 100644 --- a/docs/toolbar/customization.md +++ b/docs/toolbar/customization.md @@ -33,7 +33,7 @@ const toolbarData = [ ]; ~~~ -![](../assets/toolbar/fa_icons.png) +![Toolbar with Font Awesome bold, underline, italic, and strikethrough two-state buttons in DHTMLX Suite](/img/toolbar/fa_icons.png) **Related sample**: [Toolbar. Custom icons](https://snippet.dhtmlx.com/4aiwvow7) @@ -43,7 +43,7 @@ const toolbarData = [ There is a possibility to make changes in the look and feel of a toolbar. -![Styling Toolbar](../assets/toolbar/custom_style.png) +![Dark-themed Toolbar with custom CSS styling for buttons, search, and login links in DHTMLX Suite](/img/toolbar/custom_style.png) **Related sample**: [Toolbar. Styling (custom CSS)](https://snippet.dhtmlx.com/uekgjwsi) diff --git a/docs/toolbar/image_button.md b/docs/toolbar/image_button.md index 3cfd3f536..887be7bf8 100644 --- a/docs/toolbar/image_button.md +++ b/docs/toolbar/image_button.md @@ -8,7 +8,7 @@ description: You can explore the ImageButton of Toolbar in the documentation of This is a button with an image. Unlike a [button](toolbar/button.md), it does not have a text label, but can also have a badge with a number and can be two state. -![](../assets/toolbar/image_button.png) +![Toolbar image button showing a round avatar photo with a number badge in DHTMLX Suite](/img/toolbar/image_button.png) **Related sample**: [Toolbar. ImageButton](https://snippet.dhtmlx.com/vdiha09g) diff --git a/docs/toolbar/index.md b/docs/toolbar/index.md index c0bd7ca79..510cc3c98 100644 --- a/docs/toolbar/index.md +++ b/docs/toolbar/index.md @@ -9,7 +9,7 @@ description: You can have an overview of Toolbar in the documentation of the DHT DHTMLX Toolbar is a JavaScript component that allows you to keep all main commands and tools of the app in one place and define their look and feel. Being a great tool for fast and handy navigation, it will make work with your app or website clear and easy. Check [online samples for DHTMLX Toolbar](https://snippet.dhtmlx.com/nie9tuks?tag=toolbar). -![](../assets/toolbar/toolbar_front.png) +![Toolbar with New dropdown, undo and redo, print, search input, login links, and an avatar badge in DHTMLX Suite](/img/toolbar/toolbar_front.png) ## Features diff --git a/docs/toolbar/input.md b/docs/toolbar/input.md index 533dcae9f..9bec0ded3 100644 --- a/docs/toolbar/input.md +++ b/docs/toolbar/input.md @@ -8,7 +8,7 @@ description: You can explore the Input of Toolbar in the documentation of the DH This is an input field for entering some text. -![](../assets/toolbar/input.png) +![Toolbar input field with a type to search placeholder and a search icon in DHTMLX Suite](/img/toolbar/input.png) **Related sample**: [Toolbar. Input](https://snippet.dhtmlx.com/ykd0uii1) diff --git a/docs/toolbar/menuitem.md b/docs/toolbar/menuitem.md index ffe71767d..52bf51e63 100644 --- a/docs/toolbar/menuitem.md +++ b/docs/toolbar/menuitem.md @@ -8,7 +8,7 @@ description: You can explore the MenuItem of Toolbar in the documentation of the MenuItem is a drop-down list of options, can contain its own sub-menu. -![](../assets/toolbar/menuitem.png) +![Toolbar menuItem with an expanded dropdown list of options in DHTMLX Suite](/img/toolbar/menuitem.png) ## Adding MenuItem diff --git a/docs/toolbar/navitem.md b/docs/toolbar/navitem.md index 6d8b89598..ff75274a7 100644 --- a/docs/toolbar/navitem.md +++ b/docs/toolbar/navitem.md @@ -8,7 +8,7 @@ description: You can explore the NavItem of Toolbar in the documentation of the This is a default control for navigation-related components, can contain any other controls as nested items. -![](../assets/toolbar/navitem.png) +![Toolbar navItem with an icon, NAV ITEM label, and a number badge in DHTMLX Suite](/img/toolbar/navitem.png) **Related sample**: [Toolbar. NavItem](https://snippet.dhtmlx.com/os48cj6x) diff --git a/docs/toolbar/selectbutton.md b/docs/toolbar/selectbutton.md index 24ccb9cfb..a8016be52 100644 --- a/docs/toolbar/selectbutton.md +++ b/docs/toolbar/selectbutton.md @@ -8,7 +8,7 @@ description: You can explore the SelectButton of Toolbar in the documentation of This is a button that contains a drop-down list of options. -![](../assets/toolbar/selectbutton.png) +![Toolbar select button with an expanded dropdown of options and hotkeys in DHTMLX Suite](/img/toolbar/selectbutton.png) **Related sample**: [Toolbar. SelectButton](https://snippet.dhtmlx.com/nqq5ej8w) diff --git a/docs/toolbar/separator.md b/docs/toolbar/separator.md index 5b7c5439c..7d0a54952 100644 --- a/docs/toolbar/separator.md +++ b/docs/toolbar/separator.md @@ -8,7 +8,7 @@ description: You can explore the Separator of Toolbar in the documentation of th This is a horizontal (between menu options) or vertical (between toolbar controls) line separating items/groups of items from each other. -![](../assets/toolbar/separator.png) +![Toolbar with vertical separator lines dividing groups of controls in DHTMLX Suite](/img/toolbar/separator.png) **Related sample**: [Toolbar. Separator](https://snippet.dhtmlx.com/sguwr3m9) diff --git a/docs/toolbar/spacer.md b/docs/toolbar/spacer.md index 00946c07f..12ebcd8a9 100644 --- a/docs/toolbar/spacer.md +++ b/docs/toolbar/spacer.md @@ -8,7 +8,7 @@ description: You can explore the Spacer of Toolbar in the documentation of the D This item takes space on the toolbar and is used for aligning controls. -![](../assets/toolbar/spacer.png) +![Toolbar using a spacer to align controls to the left and right sides in DHTMLX Suite](/img/toolbar/spacer.png) **Related sample**: [Toolbar. Spacer](https://snippet.dhtmlx.com/0wt6z7sc) diff --git a/docs/toolbar/title.md b/docs/toolbar/title.md index 3db4744ff..f83b0a0e7 100644 --- a/docs/toolbar/title.md +++ b/docs/toolbar/title.md @@ -8,7 +8,7 @@ description: You can explore the Title of Toolbar in the documentation of the DH This is an item that contains some text. -![](../assets/toolbar/title.png) +![Toolbar title text controls showing My profile and a welcome label with badges in DHTMLX Suite](/img/toolbar/title.png) **Related sample**: [Toolbar. Title](https://snippet.dhtmlx.com/dwynhb7o) diff --git a/docs/tree/api/tree_dropbehaviour_config.md b/docs/tree/api/tree_dropbehaviour_config.md index 853d5a8b3..c342214bc 100644 --- a/docs/tree/api/tree_dropbehaviour_config.md +++ b/docs/tree/api/tree_dropbehaviour_config.md @@ -26,11 +26,11 @@ There are three modes of behaviour of a dragged tree item, depending on the valu - "child" - a dragged item becomes a child of the item it is dragged to -![](../../assets/tree/drag_behaviour_child.png) +![Tree drag-and-drop dropping an item as a child of the target folder in DHTMLX Suite](/img/tree/drag_behaviour_child.png) - "sibling" - a dragged item becomes a sibling of the item it is dragged to -![](../../assets/tree/drag_behaviour_sibling.png) +![Tree drag-and-drop dropping an item as a sibling of the target item in DHTMLX Suite](/img/tree/drag_behaviour_sibling.png) - "complex" - a dragged item can become both a child or a sibling of a target item, depending on the position specified by highlighting (check the above images) diff --git a/docs/tree/configuration.md b/docs/tree/configuration.md index 55ed93309..a567ecb46 100644 --- a/docs/tree/configuration.md +++ b/docs/tree/configuration.md @@ -8,7 +8,7 @@ description: You can explore the configuration of Tree in the documentation of t ## Checkboxes for items -![](../assets/tree/checkbox.png) +![Tree with three-state checkboxes showing checked and intermediate states in DHTMLX Suite](/img/tree/checkbox.png) DHTMLX Tree provides enhanced system of checkbox manipulations. In addition to standard two-state checkboxes that allow check/uncheck tree items, it also uses three-state checkboxes that include an intermediate state, when just some children of a parent item are checked. @@ -35,7 +35,7 @@ const tree = new dhx.Tree("tree_container", { ## Editing of items -![](../assets/tree/editable.png) +![Tree item being edited inline with an active text editor in DHTMLX Suite](/img/tree/editable.png) It is possible to enable editing of the text of Tree items before initialization of the component using the [`editable`](tree/api/tree_editable_config.md) configuration property: @@ -80,7 +80,7 @@ After that you need to select any item and then apply the Arrow keys: ## Selection of items -![](../assets/tree/disable_selection.png) +![Tree with a highlighted selected item among folders and files in DHTMLX Suite](/img/tree/disable_selection.png) **Related sample**: [Tree. Disable selection](https://snippet.dhtmlx.com/2x9htpke) diff --git a/docs/tree/drag_and_drop_handling.md b/docs/tree/drag_and_drop_handling.md index e1be516f8..ec6d99fed 100644 --- a/docs/tree/drag_and_drop_handling.md +++ b/docs/tree/drag_and_drop_handling.md @@ -43,11 +43,11 @@ There are three modes of behaviour of a dragged tree item: - "child" - a dragged item becomes a child of the item it is dragged to -![Child](../assets/tree/drag_behaviour_child.png) +![Tree drag-and-drop dropping an item as a child of the target folder in DHTMLX Suite](/img/tree/drag_behaviour_child.png) - "sibling" - a dragged item becomes a sibling of the item it is dragged to -![Sibling](../assets/tree/drag_behaviour_sibling.png) +![Tree drag-and-drop dropping an item as a sibling of the target item in DHTMLX Suite](/img/tree/drag_behaviour_sibling.png) - "complex" - a dragged item can become both a child and a sibling of a target item, depending on the position specified by highlighting (check the above images) diff --git a/docs/tree/index.md b/docs/tree/index.md index 0571ceade..945cee00c 100644 --- a/docs/tree/index.md +++ b/docs/tree/index.md @@ -10,7 +10,7 @@ DHTMLX Tree is a nice JavaScript tree component intended for making intuitive hi The component provides smart drag-and-drop, dynamic rendering of items, handy key navigation, customizable appearance, and other useful features. Check [online samples for DHTMLX Tree](https://snippet.dhtmlx.com/hg3f50td?tag=tree). -![](../assets/tree/tree_front.png) +![DHTMLX Tree with expandable folders and nested file items in DHTMLX Suite](/img/tree/tree_front.png) ## Features diff --git a/docs/tree/setting_tree_appearance.md b/docs/tree/setting_tree_appearance.md index 803e879c5..77d8c7e66 100644 --- a/docs/tree/setting_tree_appearance.md +++ b/docs/tree/setting_tree_appearance.md @@ -10,7 +10,7 @@ description: You can explore the customization of Tree in the documentation of t There is a possibility to make changes in the look and feel of a tree. -![Styling Tree](../assets/tree/custom_style.png) +![Tree styled with custom CSS using colored folders and item text in DHTMLX Suite](/img/tree/custom_style.png) **Related sample**: [Tree. Styling (custom CSS)](https://snippet.dhtmlx.com/ocv4p7zg) @@ -62,7 +62,7 @@ For example: ## Changing icons -![](../assets/tree/custom_icons.png) +![Tree with custom book icons for folders and file items in DHTMLX Suite](/img/tree/custom_icons.png) **Related sample**: [Tree. Custom icons](https://snippet.dhtmlx.com/lpsgn3j7) diff --git a/docs/tutorial/basic_application/index.md b/docs/tutorial/basic_application/index.md index 71a4a0133..4c9d94df3 100644 --- a/docs/tutorial/basic_application/index.md +++ b/docs/tutorial/basic_application/index.md @@ -2,6 +2,9 @@ sidebar_label: Basic application title: Basic Application --- + +import styles from '@site/src/css/tutorial.module.scss'; + This tutorial describes how to create a basic application and helps to understand the main principles of working with DHTMLX components. It covers a number of issues related to adding components on a page, displaying data on a page, interaction of components with each other. @@ -20,7 +23,11 @@ After you finish this tutorial, you'll have a simple app consisting of: Download the demo app [here](https://dhtmlx.com/x/download/docs/basic_application.zip). ::: - +
+ +![Contact manager app with a users grid, toolbar and Default vs Premium pie chart in DHTMLX Suite](/img/tutorial/basic_application/basic_initialization.png) + +
diff --git a/docs/tutorial/basic_application/step1.md b/docs/tutorial/basic_application/step1.md index 28dc65b5a..81115c9db 100644 --- a/docs/tutorial/basic_application/step1.md +++ b/docs/tutorial/basic_application/step1.md @@ -3,13 +3,19 @@ sidebar_label: Step 1. Include DHTMLX files title: Step 1. Include DHTMLX Files --- +import styles from '@site/src/css/tutorial.module.scss'; + Let's start our tutorial with preparing a file for our future app: 1\. Create a folder with the name "contact_manager" in the root directory of your local web server. 2\. Create the "index.html" file in the "contact_manager" folder. - +
+ +![File explorer showing the contact_manager folder with an index file in DHTMLX Suite](/img/tutorial/basic_application/file.png) + +
Now we need to include ".js" and ".css" files of the DHTMLX Suite library to the main file of our future app. You can use CDN links to do this. diff --git a/docs/tutorial/basic_application/step2.md b/docs/tutorial/basic_application/step2.md index 1bc86f4c1..037043bcd 100644 --- a/docs/tutorial/basic_application/step2.md +++ b/docs/tutorial/basic_application/step2.md @@ -3,13 +3,19 @@ sidebar_label: Step 2. Specify the Layout title: Step 2. Specify the Layout --- +import styles from '@site/src/css/tutorial.module.scss'; + Our application will have the following structure: - Toolbar - Grid with a list of users - Chart - +
+ +![Layout scheme with a toolbar row above grid and chart cells in DHTMLX Suite](/img/tutorial/basic_application/layout_002.png) + +
To set the main scheme of our app we should start by initializing the Layout. Later we will attach the rest of the components to it. diff --git a/docs/tutorial/basic_application/step3.md b/docs/tutorial/basic_application/step3.md index a9cb482a6..33625a4c8 100644 --- a/docs/tutorial/basic_application/step3.md +++ b/docs/tutorial/basic_application/step3.md @@ -3,6 +3,8 @@ sidebar_label: Step 3. Add a Toolbar title: Step 3. Add a Toolbar --- +import styles from '@site/src/css/tutorial.module.scss'; + To present Toolbar on the page we should take 3 simple steps: 1\. To add a toolbar on the page we need to use the constructor, like this: @@ -45,7 +47,11 @@ You can add other buttons in a similar manner. layout.cell("toolbar-cell").attach(toolbar); ~~~ - +
+ +![Toolbar with Load and Clear buttons attached above empty grid and chart cells in DHTMLX Suite](/img/tutorial/basic_application/toolbar_003.png) + +
diff --git a/docs/tutorial/basic_application/step4.md b/docs/tutorial/basic_application/step4.md index 4e41cee07..32d9d70dd 100644 --- a/docs/tutorial/basic_application/step4.md +++ b/docs/tutorial/basic_application/step4.md @@ -3,6 +3,8 @@ sidebar_label: Step 4. Add a Grid title: Step 4. Add a Grid --- +import styles from '@site/src/css/tutorial.module.scss'; + ``` todo страница не нужна Now let’s consider how start to work with such DHTMLX component as Grid. @@ -47,7 +49,11 @@ You can read more about Grid properties in the [API](grid/api/refs/grid.md) and layout.cell("grid-cell").attach(grid); ~~~ - +
+ +![](/img/tutorial/basic_application/grid_003.png) + +
3\. Also we need to prepare a data set that will be loaded into the Grid later. An example of a Grid data set is given below: diff --git a/docs/tutorial/basic_application/step5.md b/docs/tutorial/basic_application/step5.md index dd8170efe..d69944597 100644 --- a/docs/tutorial/basic_application/step5.md +++ b/docs/tutorial/basic_application/step5.md @@ -3,6 +3,8 @@ sidebar_label: Step 5. Bind Toolbar to Grid title: Step 5. Bind Toolbar to Grid --- +import styles from '@site/src/css/tutorial.module.scss'; + At this step we will discuss how to fill and clear the Grid with the help of Toolbar buttons. For this purpose we will use the Click event of the Toolbar: ~~~js @@ -25,7 +27,11 @@ toolbar.events.on("Click", function(id,e){ If you click on the "Clear" icon, all items will be deleted from the grid through the removeAll() method. - +
+ +![Contacts grid filled with user data after clicking the Load toolbar button in DHTMLX Suite](/img/tutorial/basic_application/bind_toolbar_grid.png) + +
For more information about working with the Toolbar events, see the [](toolbar/handling_events.md) article. The methods used to work with data are described in data_collection/api/refs/datacollection.md. diff --git a/docs/tutorial/basic_application/step7.md b/docs/tutorial/basic_application/step7.md index 9f422a5f3..35abb19ba 100644 --- a/docs/tutorial/basic_application/step7.md +++ b/docs/tutorial/basic_application/step7.md @@ -3,6 +3,8 @@ sidebar_label: Step 7. Display Data in the Chart title: Step 7. Display Data in the Chart --- +import styles from '@site/src/css/tutorial.module.scss'; + Before displaying data in the chart we need to process grid data. ## Process grid data @@ -87,7 +89,11 @@ grid.data.events.on("Change", function(id,status,updatedItem){ After finishing all the steps described in the tutorial, you get a mini app that looks like this: - +
+ +![Contacts grid beside a pie chart showing default versus premium users in DHTMLX Suite](/img/tutorial/basic_application/chart.png) + +
diff --git a/docs/tutorial/binding_components/index.md b/docs/tutorial/binding_components/index.md index d7dbf3460..8cd84f84e 100644 --- a/docs/tutorial/binding_components/index.md +++ b/docs/tutorial/binding_components/index.md @@ -3,13 +3,19 @@ sidebar_label: Binding components title: Binding Components --- +import styles from '@site/src/css/tutorial.module.scss'; + In the [previous tutorial](/tutorial/basic_application/) we've considered how to add a Layout, a Grid, a Toolbar and a Chart on the page. We've also shown you how to load the data into the Grid and the Chart and remove it. We suggest that you won't stop at the basic lesson and will learn more about the work of individual components, such as a Window, a Form, a Context menu. Besides, this tutorial will help you to learn how to edit data in the Grid, add or delete them. - +
+ +![Contact manager app with an Editing item window over the users grid and pie chart in DHTMLX Suite](/img/tutorial/binding_components/binding_components.png) + +
If you are ready to move on, [download the demo app](https://dhtmlx.com/x/download/docs/binding_components.zip) of the "binding_components" tutorial and continue exploring the possibilities of the DHTMLX Suite library with us. diff --git a/docs/tutorial/binding_components/step1.md b/docs/tutorial/binding_components/step1.md index c0117288b..360c888d2 100644 --- a/docs/tutorial/binding_components/step1.md +++ b/docs/tutorial/binding_components/step1.md @@ -3,6 +3,8 @@ sidebar_label: Step 1. Add a Window title: Step 1. Add a Window --- +import styles from '@site/src/css/tutorial.module.scss'; + Let’s see how to add a window on the page in two steps: 1\. At first, we need to initialize a Window with the dhx.Window object constructor: @@ -40,7 +42,11 @@ We pass two parameters to the method: - the first is an array of item objects, - the second is the index of the position starting from which new items will be added - +
+ +![Empty modal window titled Editing item with Cancel and Apply footer buttons in DHTMLX Suite](/img/tutorial/binding_components/window.png) + +
You can find out more about Window properties in the [Configuration](window/configuration.md) article. The possibilities of adjusting the look and feel of the Window header and footer are described in the [Customization](window/customization.md) article. diff --git a/docs/tutorial/binding_components/step3.md b/docs/tutorial/binding_components/step3.md index e26aa69e6..c191b3cd2 100644 --- a/docs/tutorial/binding_components/step3.md +++ b/docs/tutorial/binding_components/step3.md @@ -4,6 +4,8 @@ title: Step 3. Add Form into Window description: description --- +import styles from '@site/src/css/tutorial.module.scss'; + ``` todo страница не нужна In this step we describe how to add a form on the page. The form will contain fields displaying the content of the selected grid row and will allow you to edit the data in the grid. @@ -104,7 +106,11 @@ Finally, we use the attach() method of a window to attach a form to the w dhxWindow.attach(form); ~~~~ - +
+ +![](/img/tutorial/binding_components/form.png) + +
diff --git a/docs/tutorial/binding_components/step4.md b/docs/tutorial/binding_components/step4.md index 832cecb40..f5da19678 100644 --- a/docs/tutorial/binding_components/step4.md +++ b/docs/tutorial/binding_components/step4.md @@ -2,6 +2,9 @@ sidebar_label: Step 4. Add a ContextMenu title: Step 4. Add a ContextMenu --- + +import styles from '@site/src/css/tutorial.module.scss'; + In this step we consider how to add and display a context menu on the page. ##Adding ContextMenu on the page @@ -78,7 +81,11 @@ grid.events.on("CellRightClick", function(row,column,e){ After that a right-click on a grid cell will call a context menu we have specified. - +
+ +![Context menu with Edit and Delete items opened on a grid row beside a pie chart in DHTMLX Suite](/img/tutorial/binding_components/context_menu.png) + +
diff --git a/docs/tutorial/binding_components/step5.md b/docs/tutorial/binding_components/step5.md index 27efc9c23..20f0e5d17 100644 --- a/docs/tutorial/binding_components/step5.md +++ b/docs/tutorial/binding_components/step5.md @@ -3,6 +3,8 @@ sidebar_label: Step 5. Add buttons to Toolbar title: Step 5. Add buttons to Toolbar --- +import styles from '@site/src/css/tutorial.module.scss'; + We've already placed the "Load" and "Clear" buttons into Toolbar in the [previous tutorial](tutorial/basic_application/step3.md). Now we need to add other buttons to Toolbar in order to edit, add or delete rows in the grid. This is how we add them: @@ -28,7 +30,11 @@ toolbar.data.parse([ ]); ~~~ - +
+ +![Toolbar with Load, Clear, Add, Edit and Delete buttons above the contacts grid in DHTMLX Suite](/img/tutorial/binding_components/toolbar.png) + +
diff --git a/docs/tutorial/binding_components/step6.md b/docs/tutorial/binding_components/step6.md index 605b899ac..ac1472fff 100644 --- a/docs/tutorial/binding_components/step6.md +++ b/docs/tutorial/binding_components/step6.md @@ -3,6 +3,8 @@ sidebar_label: Step 6. Edit data in the Grid title: Step 6. Edit data in the Grid --- +import styles from '@site/src/css/tutorial.module.scss'; + We've already studied how to add and display components on the page. The last part of this tutorial will teach you how to bind Grid to Toolbar, Window and ContextMenu to make it possible to edit data of the grid. @@ -29,7 +31,11 @@ function openAddWindow(){ }; ~~~ - +
+ +![Adding item window with empty form fields for name, email, country and a premium checkbox in DHTMLX Suite](/img/tutorial/binding_components/adding_item.png) + +
### openEditWindow() function @@ -41,7 +47,11 @@ In our app we consider several ways to open the editing window. They are: In all these cases we'll call the **openEditWindow** function to display the edit window on the page. - +
+ +![Editing item window with form fields prefilled from the selected grid row in DHTMLX Suite](/img/tutorial/binding_components/editing_item.png) + +
All fields of the form inside the window will be filled with data from a selected grid row. If no row is selected in the grid, all data for the window will be selected from the 1st row of the grid. @@ -156,7 +166,11 @@ Getting the result When you complete the steps described in this tutorial, you'll get an advanced demo application that allows editing data in the grid in several ways. This is how the ready app looks like: - +
+ +![Contact manager app with an Editing item window over the users grid and pie chart in DHTMLX Suite](/img/tutorial/binding_components/binding_components.png) + +
diff --git a/docs/whatsnew.md b/docs/whatsnew.md index 0a991234d..4d2437701 100644 --- a/docs/whatsnew.md +++ b/docs/whatsnew.md @@ -8,6 +8,31 @@ description: You can explore what's new in DHTMLX Suite and its release history Before updating DHTMLX to the latest version, please check the [Migration to Newer Versions](migration.md) guide to avoid possible breakdowns. +## Version 9.3.5 + +Released on July 1, 2026 + +### Updates + +- Grid. Full WAI-ARIA accessibility support: implemented proper ARIA roles, states (selection, expansion), and accessible labels for editors and filters to support screen readers (WCAG 2.2 compliance) +- Grid. Advanced Keyboard Navigation: + - Added navigation for Headers, Footers, and Grouping panel + - Added support for sorting via keyboard (Enter/Space) + - Added support for PageUp/PageDown, Home/End, and Ctrl+Home/End for cell focus movement + - Added F2 shortcut to enter edit mode +- Grid. Added standard keyboard patterns: ArrowRight/ArrowLeft for expanding and collapsing rows +- Grid. Improved performance of rendering and selection state tracking in large datasets + +For additional information, refer to [Grid accessibility](grid/accessibility.md) and [Keyboard navigation](grid/configuration.md#keyboard-navigation) guides. + +### Fixes + +- Grid. Fixed clipboard operations (copy/paste) for frozen columns (`leftSplit`/`rightSplit`) +- Grid. Fixed focus restoration to the cell after closing an editor +- Grid. Fixed row highlighting and dropdown behavior in the `bottomSplit` area. +- Tree. Fixed an error when removing items in autoload mode +- Window. Fixed drag/resize positioning issues on scrolled pages + ## Version 9.3.3 Released on June 2, 2026 diff --git a/docs/window/configuration.md b/docs/window/configuration.md index debff3334..b23d4e043 100644 --- a/docs/window/configuration.md +++ b/docs/window/configuration.md @@ -11,7 +11,7 @@ specify the sizes of a window and decide whether it should be resizable, movable ## Closability -![](../assets/window/closable.png) +![Closable Window with a header, Close button, text and an illustration in DHTMLX Suite](/img/window/closable.png) There is the [](window/api/window_closable_config.md) property that adds a Close button into the right top part of a window to allow a user to close a window on clicking it. This option is set to *true* by default. @@ -39,7 +39,7 @@ const dhxWindow = new dhx.Window({ ## Footer -![](../assets/window/with_footer.png) +![Window with a footer holding Decline and Accept buttons below the content in DHTMLX Suite](/img/window/with_footer.png) You can provide a window with a footer that will include some additional controls for manipulating the content. @@ -55,7 +55,7 @@ By default a footer is initialized with no controls. To add a control into the f ## Modality -![](../assets/window/modal_window.png) +![Modal Window over a grayed out blocked background page in DHTMLX Suite](/img/window/modal_window.png) It is possible to make a window modal, if there's a necessity. Use the [](window/api/window_modal_config.md) property to turn this functionality on: @@ -71,7 +71,7 @@ A modal window blocks the main window on its calling. It means that only the mod ## Movability -![](../assets/window/movable.png) +![Movable Window with a drag move cursor icon above its header in DHTMLX Suite](/img/window/movable.png) To equip a window with the ability to be moved around the screen, you should set the [](window/api/window_movable_config.md) property to *true*: @@ -99,7 +99,7 @@ const dhxWindow = new dhx.Window({ ## Resizing -![](../assets/window/resizable.png) +![Resizable Window with a diagonal resize handle in the top right corner in DHTMLX Suite](/img/window/resizable.png) The default window has fixed sizes with no possibility to change them from UI. You can switch on the corresponding configuration option to make a window resizable. diff --git a/docs/window/customization.md b/docs/window/customization.md index 0c9a6ee61..27c35563d 100644 --- a/docs/window/customization.md +++ b/docs/window/customization.md @@ -37,7 +37,7 @@ You can work with controls in the header/footer of a window in the same way as w Besides initial controls, you can add other controls into the header/footer on the fly. -![](../assets/window/custom_buttons.png) +![Window with custom thumb up and thumb down buttons added to the footer in DHTMLX Suite](/img/window/custom_buttons.png) For this, you should apply the [](data_collection/api/datacollection_add_method.md) method of Data Collection. It takes the parameters below: @@ -96,7 +96,7 @@ dhxWindow.footer.data.remove("accept"); There is a possibility to make changes in the look and feel of a window. -![](../assets/window/custom_style.png) +![Custom styled Window with fullscreen and Close header buttons and footer icons in DHTMLX Suite](/img/window/custom_style.png) **Related sample**: [Window. Styling (custom CSS)](https://snippet.dhtmlx.com/t5mvhwx8) diff --git a/docs/window/index.md b/docs/window/index.md index 73eb7ff71..73f1bd033 100644 --- a/docs/window/index.md +++ b/docs/window/index.md @@ -10,7 +10,7 @@ DHTMLX Window allows working with several windows and their content at the same such as moving/resizing a window, sending a window to the foreground/background, making a window modal, changing position and size of a window, setting content inside a window, etc. Check [online samples for DHTMLX Window](https://snippet.dhtmlx.com/nthbfzfr?tag=window). -![](../assets/window/window_front.png) +![DHTMLX Window titled WINDOW showing a scrollable list of dhtmlx components in DHTMLX Suite](/img/window/window_front.png) ## Features diff --git a/docusaurus.config.js b/docusaurus.config.js index 8c9cd8a28..128bc7094 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -284,7 +284,7 @@ module.exports = { docs: { sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. - editUrl: 'https://github.com/DHTMLX/docs-suite/edit/master/', + //editUrl: 'https://github.com/DHTMLX/docs-suite/edit/master/', routeBasePath: '/' }, theme: { diff --git a/sidebars.js b/sidebars.js index c16901370..8c31662ab 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2988,6 +2988,7 @@ module.exports = { "grid/usage_dragpanel", "grid/usage_history", "grid/customization", + "grid/accessibility", "grid/events" ], }, diff --git a/src/css/tutorial.module.scss b/src/css/tutorial.module.scss new file mode 100644 index 000000000..7033236de --- /dev/null +++ b/src/css/tutorial.module.scss @@ -0,0 +1,7 @@ +.image { + margin: 12px 0; + + img { + display: block; + } +} diff --git a/docs/assets/api/toc/accordion.png b/static/img/api/toc/accordion.png similarity index 100% rename from docs/assets/api/toc/accordion.png rename to static/img/api/toc/accordion.png diff --git a/docs/assets/api/toc/ajax.png b/static/img/api/toc/ajax.png similarity index 100% rename from docs/assets/api/toc/ajax.png rename to static/img/api/toc/ajax.png diff --git a/docs/assets/api/toc/calendar.png b/static/img/api/toc/calendar.png similarity index 100% rename from docs/assets/api/toc/calendar.png rename to static/img/api/toc/calendar.png diff --git a/docs/assets/api/toc/carousel.png b/static/img/api/toc/carousel.png similarity index 100% rename from docs/assets/api/toc/carousel.png rename to static/img/api/toc/carousel.png diff --git a/docs/assets/api/toc/chart.png b/static/img/api/toc/chart.png similarity index 100% rename from docs/assets/api/toc/chart.png rename to static/img/api/toc/chart.png diff --git a/docs/assets/api/toc/colorpicker.png b/static/img/api/toc/colorpicker.png similarity index 100% rename from docs/assets/api/toc/colorpicker.png rename to static/img/api/toc/colorpicker.png diff --git a/docs/assets/api/toc/combo.png b/static/img/api/toc/combo.png similarity index 100% rename from docs/assets/api/toc/combo.png rename to static/img/api/toc/combo.png diff --git a/docs/assets/api/toc/dataprocessor.png b/static/img/api/toc/dataprocessor.png similarity index 100% rename from docs/assets/api/toc/dataprocessor.png rename to static/img/api/toc/dataprocessor.png diff --git a/docs/assets/api/toc/dataselector.png b/static/img/api/toc/dataselector.png similarity index 100% rename from docs/assets/api/toc/dataselector.png rename to static/img/api/toc/dataselector.png diff --git a/docs/assets/api/toc/datastore.png b/static/img/api/toc/datastore.png similarity index 100% rename from docs/assets/api/toc/datastore.png rename to static/img/api/toc/datastore.png diff --git a/docs/assets/api/toc/dataview.png b/static/img/api/toc/dataview.png similarity index 100% rename from docs/assets/api/toc/dataview.png rename to static/img/api/toc/dataview.png diff --git a/docs/assets/api/toc/designer.png b/static/img/api/toc/designer.png similarity index 100% rename from docs/assets/api/toc/designer.png rename to static/img/api/toc/designer.png diff --git a/docs/assets/api/toc/editor.png b/static/img/api/toc/editor.png similarity index 100% rename from docs/assets/api/toc/editor.png rename to static/img/api/toc/editor.png diff --git a/docs/assets/api/toc/fileselector.png b/static/img/api/toc/fileselector.png similarity index 100% rename from docs/assets/api/toc/fileselector.png rename to static/img/api/toc/fileselector.png diff --git a/docs/assets/api/toc/form.png b/static/img/api/toc/form.png similarity index 100% rename from docs/assets/api/toc/form.png rename to static/img/api/toc/form.png diff --git a/docs/assets/api/toc/gantt.png b/static/img/api/toc/gantt.png similarity index 100% rename from docs/assets/api/toc/gantt.png rename to static/img/api/toc/gantt.png diff --git a/docs/assets/api/toc/grid.png b/static/img/api/toc/grid.png similarity index 100% rename from docs/assets/api/toc/grid.png rename to static/img/api/toc/grid.png diff --git a/docs/assets/api/toc/layout.png b/static/img/api/toc/layout.png similarity index 100% rename from docs/assets/api/toc/layout.png rename to static/img/api/toc/layout.png diff --git a/docs/assets/api/toc/list.png b/static/img/api/toc/list.png similarity index 100% rename from docs/assets/api/toc/list.png rename to static/img/api/toc/list.png diff --git a/docs/assets/api/toc/menu.png b/static/img/api/toc/menu.png similarity index 100% rename from docs/assets/api/toc/menu.png rename to static/img/api/toc/menu.png diff --git a/docs/assets/api/toc/popup.png b/static/img/api/toc/popup.png similarity index 100% rename from docs/assets/api/toc/popup.png rename to static/img/api/toc/popup.png diff --git a/docs/assets/api/toc/ribbon.png b/static/img/api/toc/ribbon.png similarity index 100% rename from docs/assets/api/toc/ribbon.png rename to static/img/api/toc/ribbon.png diff --git a/docs/assets/api/toc/scheduler.png b/static/img/api/toc/scheduler.png similarity index 100% rename from docs/assets/api/toc/scheduler.png rename to static/img/api/toc/scheduler.png diff --git a/docs/assets/api/toc/sidebar.png b/static/img/api/toc/sidebar.png similarity index 100% rename from docs/assets/api/toc/sidebar.png rename to static/img/api/toc/sidebar.png diff --git a/docs/assets/api/toc/skinbuilder.png b/static/img/api/toc/skinbuilder.png similarity index 100% rename from docs/assets/api/toc/skinbuilder.png rename to static/img/api/toc/skinbuilder.png diff --git a/docs/assets/api/toc/slider.png b/static/img/api/toc/slider.png similarity index 100% rename from docs/assets/api/toc/slider.png rename to static/img/api/toc/slider.png diff --git a/docs/assets/api/toc/spreadsheet.png b/static/img/api/toc/spreadsheet.png similarity index 100% rename from docs/assets/api/toc/spreadsheet.png rename to static/img/api/toc/spreadsheet.png diff --git a/docs/assets/api/toc/tabbar.png b/static/img/api/toc/tabbar.png similarity index 100% rename from docs/assets/api/toc/tabbar.png rename to static/img/api/toc/tabbar.png diff --git a/docs/assets/api/toc/toolbar.png b/static/img/api/toc/toolbar.png similarity index 100% rename from docs/assets/api/toc/toolbar.png rename to static/img/api/toc/toolbar.png diff --git a/docs/assets/api/toc/tree.png b/static/img/api/toc/tree.png similarity index 100% rename from docs/assets/api/toc/tree.png rename to static/img/api/toc/tree.png diff --git a/docs/assets/api/toc/treegrid.png b/static/img/api/toc/treegrid.png similarity index 100% rename from docs/assets/api/toc/treegrid.png rename to static/img/api/toc/treegrid.png diff --git a/docs/assets/api/toc/vault.png b/static/img/api/toc/vault.png similarity index 100% rename from docs/assets/api/toc/vault.png rename to static/img/api/toc/vault.png diff --git a/docs/assets/api/toc/windows.png b/static/img/api/toc/windows.png similarity index 100% rename from docs/assets/api/toc/windows.png rename to static/img/api/toc/windows.png diff --git a/docs/assets/base_icons/dxi_icons.png b/static/img/base_icons/dxi_icons.png similarity index 100% rename from docs/assets/base_icons/dxi_icons.png rename to static/img/base_icons/dxi_icons.png diff --git a/docs/assets/calendar/blocked_dates.png b/static/img/calendar/blocked_dates.png similarity index 100% rename from docs/assets/calendar/blocked_dates.png rename to static/img/calendar/blocked_dates.png diff --git a/docs/assets/calendar/calendar_blocked_days.png b/static/img/calendar/calendar_blocked_days.png similarity index 100% rename from docs/assets/calendar/calendar_blocked_days.png rename to static/img/calendar/calendar_blocked_days.png diff --git a/docs/assets/calendar/calendar_calendar_mode.png b/static/img/calendar/calendar_calendar_mode.png similarity index 100% rename from docs/assets/calendar/calendar_calendar_mode.png rename to static/img/calendar/calendar_calendar_mode.png diff --git a/docs/assets/calendar/calendar_front.png b/static/img/calendar/calendar_front.png similarity index 100% rename from docs/assets/calendar/calendar_front.png rename to static/img/calendar/calendar_front.png diff --git a/docs/assets/calendar/calendar_in_div.png b/static/img/calendar/calendar_in_div.png similarity index 100% rename from docs/assets/calendar/calendar_in_div.png rename to static/img/calendar/calendar_in_div.png diff --git a/docs/assets/calendar/calendar_locale_rus.png b/static/img/calendar/calendar_locale_rus.png similarity index 100% rename from docs/assets/calendar/calendar_locale_rus.png rename to static/img/calendar/calendar_locale_rus.png diff --git a/docs/assets/calendar/calendar_marked.png b/static/img/calendar/calendar_marked.png similarity index 100% rename from docs/assets/calendar/calendar_marked.png rename to static/img/calendar/calendar_marked.png diff --git a/docs/assets/calendar/calendar_material.png b/static/img/calendar/calendar_material.png similarity index 100% rename from docs/assets/calendar/calendar_material.png rename to static/img/calendar/calendar_material.png diff --git a/docs/assets/calendar/calendar_mode.png b/static/img/calendar/calendar_mode.png similarity index 100% rename from docs/assets/calendar/calendar_mode.png rename to static/img/calendar/calendar_mode.png diff --git a/docs/assets/calendar/calendar_month_mode.png b/static/img/calendar/calendar_month_mode.png similarity index 100% rename from docs/assets/calendar/calendar_month_mode.png rename to static/img/calendar/calendar_month_mode.png diff --git a/docs/assets/calendar/calendar_range_styling.png b/static/img/calendar/calendar_range_styling.png similarity index 100% rename from docs/assets/calendar/calendar_range_styling.png rename to static/img/calendar/calendar_range_styling.png diff --git a/docs/assets/calendar/calendar_start_sunday.png b/static/img/calendar/calendar_start_sunday.png similarity index 100% rename from docs/assets/calendar/calendar_start_sunday.png rename to static/img/calendar/calendar_start_sunday.png diff --git a/docs/assets/calendar/calendar_width.png b/static/img/calendar/calendar_width.png similarity index 100% rename from docs/assets/calendar/calendar_width.png rename to static/img/calendar/calendar_width.png diff --git a/docs/assets/calendar/calendar_year_mode.png b/static/img/calendar/calendar_year_mode.png similarity index 100% rename from docs/assets/calendar/calendar_year_mode.png rename to static/img/calendar/calendar_year_mode.png diff --git a/docs/assets/calendar/date_picker.png b/static/img/calendar/date_picker.png similarity index 100% rename from docs/assets/calendar/date_picker.png rename to static/img/calendar/date_picker.png diff --git a/docs/assets/calendar/date_range.png b/static/img/calendar/date_range.png similarity index 100% rename from docs/assets/calendar/date_range.png rename to static/img/calendar/date_range.png diff --git a/docs/assets/calendar/locale.png b/static/img/calendar/locale.png similarity index 100% rename from docs/assets/calendar/locale.png rename to static/img/calendar/locale.png diff --git a/docs/assets/calendar/marked_dates.png b/static/img/calendar/marked_dates.png similarity index 100% rename from docs/assets/calendar/marked_dates.png rename to static/img/calendar/marked_dates.png diff --git a/docs/assets/calendar/month_mode.png b/static/img/calendar/month_mode.png similarity index 100% rename from docs/assets/calendar/month_mode.png rename to static/img/calendar/month_mode.png diff --git a/docs/assets/calendar/range_mode.png b/static/img/calendar/range_mode.png similarity index 100% rename from docs/assets/calendar/range_mode.png rename to static/img/calendar/range_mode.png diff --git a/docs/assets/calendar/styled_calendar.png b/static/img/calendar/styled_calendar.png similarity index 100% rename from docs/assets/calendar/styled_calendar.png rename to static/img/calendar/styled_calendar.png diff --git a/docs/assets/calendar/this_month_only.png b/static/img/calendar/this_month_only.png similarity index 100% rename from docs/assets/calendar/this_month_only.png rename to static/img/calendar/this_month_only.png diff --git a/docs/assets/calendar/timepicker_format.png b/static/img/calendar/timepicker_format.png similarity index 100% rename from docs/assets/calendar/timepicker_format.png rename to static/img/calendar/timepicker_format.png diff --git a/docs/assets/calendar/tooltips.png b/static/img/calendar/tooltips.png similarity index 100% rename from docs/assets/calendar/tooltips.png rename to static/img/calendar/tooltips.png diff --git a/docs/assets/calendar/week_number_column.png b/static/img/calendar/week_number_column.png similarity index 100% rename from docs/assets/calendar/week_number_column.png rename to static/img/calendar/week_number_column.png diff --git a/docs/assets/calendar/week_numbers.png b/static/img/calendar/week_numbers.png similarity index 100% rename from docs/assets/calendar/week_numbers.png rename to static/img/calendar/week_numbers.png diff --git a/docs/assets/calendar/weekstart_monday.png b/static/img/calendar/weekstart_monday.png similarity index 100% rename from docs/assets/calendar/weekstart_monday.png rename to static/img/calendar/weekstart_monday.png diff --git a/docs/assets/calendar/year_mode.png b/static/img/calendar/year_mode.png similarity index 100% rename from docs/assets/calendar/year_mode.png rename to static/img/calendar/year_mode.png diff --git a/docs/assets/chart/area_overview.png b/static/img/chart/area_overview.png similarity index 100% rename from docs/assets/chart/area_overview.png rename to static/img/chart/area_overview.png diff --git a/docs/assets/chart/bar_gradient.png b/static/img/chart/bar_gradient.png similarity index 100% rename from docs/assets/chart/bar_gradient.png rename to static/img/chart/bar_gradient.png diff --git a/docs/assets/chart/bar_overview.png b/static/img/chart/bar_overview.png similarity index 100% rename from docs/assets/chart/bar_overview.png rename to static/img/chart/bar_overview.png diff --git a/docs/assets/chart/custom_style.png b/static/img/chart/custom_style.png similarity index 100% rename from docs/assets/chart/custom_style.png rename to static/img/chart/custom_style.png diff --git a/docs/assets/chart/donut_overview.png b/static/img/chart/donut_overview.png similarity index 100% rename from docs/assets/chart/donut_overview.png rename to static/img/chart/donut_overview.png diff --git a/docs/assets/chart/heatmap_overview.png b/static/img/chart/heatmap_overview.png similarity index 100% rename from docs/assets/chart/heatmap_overview.png rename to static/img/chart/heatmap_overview.png diff --git a/docs/assets/chart/line_overview.png b/static/img/chart/line_overview.png similarity index 100% rename from docs/assets/chart/line_overview.png rename to static/img/chart/line_overview.png diff --git a/docs/assets/chart/pie_overview.png b/static/img/chart/pie_overview.png similarity index 100% rename from docs/assets/chart/pie_overview.png rename to static/img/chart/pie_overview.png diff --git a/docs/assets/chart/radar_overview.png b/static/img/chart/radar_overview.png similarity index 100% rename from docs/assets/chart/radar_overview.png rename to static/img/chart/radar_overview.png diff --git a/docs/assets/chart/scatter_overview.png b/static/img/chart/scatter_overview.png similarity index 100% rename from docs/assets/chart/scatter_overview.png rename to static/img/chart/scatter_overview.png diff --git a/docs/assets/chart/show_percent_values.png b/static/img/chart/show_percent_values.png similarity index 100% rename from docs/assets/chart/show_percent_values.png rename to static/img/chart/show_percent_values.png diff --git a/docs/assets/chart/show_text.png b/static/img/chart/show_text.png similarity index 100% rename from docs/assets/chart/show_text.png rename to static/img/chart/show_text.png diff --git a/docs/assets/chart/show_tooltip.png b/static/img/chart/show_tooltip.png similarity index 100% rename from docs/assets/chart/show_tooltip.png rename to static/img/chart/show_tooltip.png diff --git a/docs/assets/chart/spline_overview.png b/static/img/chart/spline_overview.png similarity index 100% rename from docs/assets/chart/spline_overview.png rename to static/img/chart/spline_overview.png diff --git a/docs/assets/chart/splinearea_overview.png b/static/img/chart/splinearea_overview.png similarity index 100% rename from docs/assets/chart/splinearea_overview.png rename to static/img/chart/splinearea_overview.png diff --git a/docs/assets/chart/text_template.png b/static/img/chart/text_template.png similarity index 100% rename from docs/assets/chart/text_template.png rename to static/img/chart/text_template.png diff --git a/docs/assets/chart/treemap.png b/static/img/chart/treemap.png similarity index 100% rename from docs/assets/chart/treemap.png rename to static/img/chart/treemap.png diff --git a/docs/assets/chart/xbar_overview.png b/static/img/chart/xbar_overview.png similarity index 100% rename from docs/assets/chart/xbar_overview.png rename to static/img/chart/xbar_overview.png diff --git a/docs/assets/colorpicker/colorpicker_css.png b/static/img/colorpicker/colorpicker_css.png similarity index 100% rename from docs/assets/colorpicker/colorpicker_css.png rename to static/img/colorpicker/colorpicker_css.png diff --git a/docs/assets/colorpicker/colorpicker_front.png b/static/img/colorpicker/colorpicker_front.png similarity index 100% rename from docs/assets/colorpicker/colorpicker_front.png rename to static/img/colorpicker/colorpicker_front.png diff --git a/docs/assets/colorpicker/colorpicker_transparency.png b/static/img/colorpicker/colorpicker_transparency.png similarity index 100% rename from docs/assets/colorpicker/colorpicker_transparency.png rename to static/img/colorpicker/colorpicker_transparency.png diff --git a/docs/assets/colorpicker/custom_colors.png b/static/img/colorpicker/custom_colors.png similarity index 100% rename from docs/assets/colorpicker/custom_colors.png rename to static/img/colorpicker/custom_colors.png diff --git a/docs/assets/colorpicker/custom_palette.png b/static/img/colorpicker/custom_palette.png similarity index 100% rename from docs/assets/colorpicker/custom_palette.png rename to static/img/colorpicker/custom_palette.png diff --git a/docs/assets/colorpicker/default_palette.png b/static/img/colorpicker/default_palette.png similarity index 100% rename from docs/assets/colorpicker/default_palette.png rename to static/img/colorpicker/default_palette.png diff --git a/docs/assets/colorpicker/no_shades_palette.png b/static/img/colorpicker/no_shades_palette.png similarity index 100% rename from docs/assets/colorpicker/no_shades_palette.png rename to static/img/colorpicker/no_shades_palette.png diff --git a/docs/assets/colorpicker/palette_only.png b/static/img/colorpicker/palette_only.png similarity index 100% rename from docs/assets/colorpicker/palette_only.png rename to static/img/colorpicker/palette_only.png diff --git a/docs/assets/colorpicker/picker_only.png b/static/img/colorpicker/picker_only.png similarity index 100% rename from docs/assets/colorpicker/picker_only.png rename to static/img/colorpicker/picker_only.png diff --git a/docs/assets/combo/combo_front.png b/static/img/combo/combo_front.png similarity index 100% rename from docs/assets/combo/combo_front.png rename to static/img/combo/combo_front.png diff --git a/docs/assets/combo/combo_template.png b/static/img/combo/combo_template.png similarity index 100% rename from docs/assets/combo/combo_template.png rename to static/img/combo/combo_template.png diff --git a/docs/assets/combo/custom_css.png b/static/img/combo/custom_css.png similarity index 100% rename from docs/assets/combo/custom_css.png rename to static/img/combo/custom_css.png diff --git a/docs/assets/combo/custom_filter.png b/static/img/combo/custom_filter.png similarity index 100% rename from docs/assets/combo/custom_filter.png rename to static/img/combo/custom_filter.png diff --git a/docs/assets/combo/disabled.png b/static/img/combo/disabled.png similarity index 100% rename from docs/assets/combo/disabled.png rename to static/img/combo/disabled.png diff --git a/docs/assets/combo/height.png b/static/img/combo/height.png similarity index 100% rename from docs/assets/combo/height.png rename to static/img/combo/height.png diff --git a/docs/assets/combo/label_left.png b/static/img/combo/label_left.png similarity index 100% rename from docs/assets/combo/label_left.png rename to static/img/combo/label_left.png diff --git a/docs/assets/combo/label_top.png b/static/img/combo/label_top.png similarity index 100% rename from docs/assets/combo/label_top.png rename to static/img/combo/label_top.png diff --git a/docs/assets/combo/new_value.png b/static/img/combo/new_value.png similarity index 100% rename from docs/assets/combo/new_value.png rename to static/img/combo/new_value.png diff --git a/docs/assets/combo/options_group.png b/static/img/combo/options_group.png similarity index 100% rename from docs/assets/combo/options_group.png rename to static/img/combo/options_group.png diff --git a/docs/assets/combo/placeholder.png b/static/img/combo/placeholder.png similarity index 100% rename from docs/assets/combo/placeholder.png rename to static/img/combo/placeholder.png diff --git a/docs/assets/combo/readonly.png b/static/img/combo/readonly.png similarity index 100% rename from docs/assets/combo/readonly.png rename to static/img/combo/readonly.png diff --git a/docs/assets/combo/selected_item.png b/static/img/combo/selected_item.png similarity index 100% rename from docs/assets/combo/selected_item.png rename to static/img/combo/selected_item.png diff --git a/docs/assets/dataview/arrow_navigation.png b/static/img/dataview/arrow_navigation.png similarity index 100% rename from docs/assets/dataview/arrow_navigation.png rename to static/img/dataview/arrow_navigation.png diff --git a/docs/assets/dataview/custom_items_styles.png b/static/img/dataview/custom_items_styles.png similarity index 100% rename from docs/assets/dataview/custom_items_styles.png rename to static/img/dataview/custom_items_styles.png diff --git a/docs/assets/dataview/custom_selection_styles.png b/static/img/dataview/custom_selection_styles.png similarity index 100% rename from docs/assets/dataview/custom_selection_styles.png rename to static/img/dataview/custom_selection_styles.png diff --git a/docs/assets/dataview/custom_widget_styles.png b/static/img/dataview/custom_widget_styles.png similarity index 100% rename from docs/assets/dataview/custom_widget_styles.png rename to static/img/dataview/custom_widget_styles.png diff --git a/docs/assets/dataview/dataview_front.png b/static/img/dataview/dataview_front.png similarity index 100% rename from docs/assets/dataview/dataview_front.png rename to static/img/dataview/dataview_front.png diff --git a/docs/assets/dataview/dataview_height.png b/static/img/dataview/dataview_height.png similarity index 100% rename from docs/assets/dataview/dataview_height.png rename to static/img/dataview/dataview_height.png diff --git a/docs/assets/dataview/disable_selection.png b/static/img/dataview/disable_selection.png similarity index 100% rename from docs/assets/dataview/disable_selection.png rename to static/img/dataview/disable_selection.png diff --git a/docs/assets/dataview/editable.png b/static/img/dataview/editable.png similarity index 100% rename from docs/assets/dataview/editable.png rename to static/img/dataview/editable.png diff --git a/docs/assets/dataview/gap.png b/static/img/dataview/gap.png similarity index 100% rename from docs/assets/dataview/gap.png rename to static/img/dataview/gap.png diff --git a/docs/assets/dataview/item_height.png b/static/img/dataview/item_height.png similarity index 100% rename from docs/assets/dataview/item_height.png rename to static/img/dataview/item_height.png diff --git a/docs/assets/dataview/items_in_row.png b/static/img/dataview/items_in_row.png similarity index 100% rename from docs/assets/dataview/items_in_row.png rename to static/img/dataview/items_in_row.png diff --git a/docs/assets/dataview/multiselection.png b/static/img/dataview/multiselection.png similarity index 100% rename from docs/assets/dataview/multiselection.png rename to static/img/dataview/multiselection.png diff --git a/docs/assets/dataview/template.png b/static/img/dataview/template.png similarity index 100% rename from docs/assets/dataview/template.png rename to static/img/dataview/template.png diff --git a/docs/assets/form/alignment_around.png b/static/img/form/alignment_around.png similarity index 100% rename from docs/assets/form/alignment_around.png rename to static/img/form/alignment_around.png diff --git a/docs/assets/form/alignment_between.png b/static/img/form/alignment_between.png similarity index 100% rename from docs/assets/form/alignment_between.png rename to static/img/form/alignment_between.png diff --git a/docs/assets/form/alignment_center.png b/static/img/form/alignment_center.png similarity index 100% rename from docs/assets/form/alignment_center.png rename to static/img/form/alignment_center.png diff --git a/docs/assets/form/alignment_end.png b/static/img/form/alignment_end.png similarity index 100% rename from docs/assets/form/alignment_end.png rename to static/img/form/alignment_end.png diff --git a/docs/assets/form/alignment_evenly.png b/static/img/form/alignment_evenly.png similarity index 100% rename from docs/assets/form/alignment_evenly.png rename to static/img/form/alignment_evenly.png diff --git a/docs/assets/form/alignment_start.png b/static/img/form/alignment_start.png similarity index 100% rename from docs/assets/form/alignment_start.png rename to static/img/form/alignment_start.png diff --git a/docs/assets/form/blocks.png b/static/img/form/blocks.png similarity index 100% rename from docs/assets/form/blocks.png rename to static/img/form/blocks.png diff --git a/docs/assets/form/custom_style.png b/static/img/form/custom_style.png similarity index 100% rename from docs/assets/form/custom_style.png rename to static/img/form/custom_style.png diff --git a/docs/assets/form/custom_styles.png b/static/img/form/custom_styles.png similarity index 100% rename from docs/assets/form/custom_styles.png rename to static/img/form/custom_styles.png diff --git a/docs/assets/form/disabled.png b/static/img/form/disabled.png similarity index 100% rename from docs/assets/form/disabled.png rename to static/img/form/disabled.png diff --git a/docs/assets/form/form_avatar.png b/static/img/form/form_avatar.png similarity index 100% rename from docs/assets/form/form_avatar.png rename to static/img/form/form_avatar.png diff --git a/docs/assets/form/form_block.png b/static/img/form/form_block.png similarity index 100% rename from docs/assets/form/form_block.png rename to static/img/form/form_block.png diff --git a/docs/assets/form/form_button.png b/static/img/form/form_button.png similarity index 100% rename from docs/assets/form/form_button.png rename to static/img/form/form_button.png diff --git a/docs/assets/form/form_checkbox.png b/static/img/form/form_checkbox.png similarity index 100% rename from docs/assets/form/form_checkbox.png rename to static/img/form/form_checkbox.png diff --git a/docs/assets/form/form_checkboxgroup.png b/static/img/form/form_checkboxgroup.png similarity index 100% rename from docs/assets/form/form_checkboxgroup.png rename to static/img/form/form_checkboxgroup.png diff --git a/docs/assets/form/form_colorpicker.png b/static/img/form/form_colorpicker.png similarity index 100% rename from docs/assets/form/form_colorpicker.png rename to static/img/form/form_colorpicker.png diff --git a/docs/assets/form/form_combo.png b/static/img/form/form_combo.png similarity index 100% rename from docs/assets/form/form_combo.png rename to static/img/form/form_combo.png diff --git a/docs/assets/form/form_datepicker.png b/static/img/form/form_datepicker.png similarity index 100% rename from docs/assets/form/form_datepicker.png rename to static/img/form/form_datepicker.png diff --git a/docs/assets/form/form_fieldset.png b/static/img/form/form_fieldset.png similarity index 100% rename from docs/assets/form/form_fieldset.png rename to static/img/form/form_fieldset.png diff --git a/docs/assets/form/form_front.png b/static/img/form/form_front.png similarity index 100% rename from docs/assets/form/form_front.png rename to static/img/form/form_front.png diff --git a/docs/assets/form/form_init.png b/static/img/form/form_init.png similarity index 100% rename from docs/assets/form/form_init.png rename to static/img/form/form_init.png diff --git a/docs/assets/form/form_input.png b/static/img/form/form_input.png similarity index 100% rename from docs/assets/form/form_input.png rename to static/img/form/form_input.png diff --git a/docs/assets/form/form_radio.png b/static/img/form/form_radio.png similarity index 100% rename from docs/assets/form/form_radio.png rename to static/img/form/form_radio.png diff --git a/docs/assets/form/form_select.png b/static/img/form/form_select.png similarity index 100% rename from docs/assets/form/form_select.png rename to static/img/form/form_select.png diff --git a/docs/assets/form/form_simplevault.png b/static/img/form/form_simplevault.png similarity index 100% rename from docs/assets/form/form_simplevault.png rename to static/img/form/form_simplevault.png diff --git a/docs/assets/form/form_slider.png b/static/img/form/form_slider.png similarity index 100% rename from docs/assets/form/form_slider.png rename to static/img/form/form_slider.png diff --git a/docs/assets/form/form_text.png b/static/img/form/form_text.png similarity index 100% rename from docs/assets/form/form_text.png rename to static/img/form/form_text.png diff --git a/docs/assets/form/form_textarea.png b/static/img/form/form_textarea.png similarity index 100% rename from docs/assets/form/form_textarea.png rename to static/img/form/form_textarea.png diff --git a/docs/assets/form/form_timepicker.png b/static/img/form/form_timepicker.png similarity index 100% rename from docs/assets/form/form_timepicker.png rename to static/img/form/form_timepicker.png diff --git a/docs/assets/form/form_toggle.png b/static/img/form/form_toggle.png similarity index 100% rename from docs/assets/form/form_toggle.png rename to static/img/form/form_toggle.png diff --git a/docs/assets/form/form_togglegroup.png b/static/img/form/form_togglegroup.png similarity index 100% rename from docs/assets/form/form_togglegroup.png rename to static/img/form/form_togglegroup.png diff --git a/docs/assets/form/length_validate.png b/static/img/form/length_validate.png similarity index 100% rename from docs/assets/form/length_validate.png rename to static/img/form/length_validate.png diff --git a/docs/assets/form/required_fields.png b/static/img/form/required_fields.png similarity index 100% rename from docs/assets/form/required_fields.png rename to static/img/form/required_fields.png diff --git a/docs/assets/form/set_focus.png b/static/img/form/set_focus.png similarity index 100% rename from docs/assets/form/set_focus.png rename to static/img/form/set_focus.png diff --git a/docs/assets/form/value_validate.png b/static/img/form/value_validate.png similarity index 100% rename from docs/assets/form/value_validate.png rename to static/img/form/value_validate.png diff --git a/docs/assets/grid/blockselection_module.png b/static/img/grid/blockselection_module.png similarity index 100% rename from docs/assets/grid/blockselection_module.png rename to static/img/grid/blockselection_module.png diff --git a/docs/assets/grid/cell_templates.png b/static/img/grid/cell_templates.png similarity index 100% rename from docs/assets/grid/cell_templates.png rename to static/img/grid/cell_templates.png diff --git a/docs/assets/grid/cellcss.png b/static/img/grid/cellcss.png similarity index 100% rename from docs/assets/grid/cellcss.png rename to static/img/grid/cellcss.png diff --git a/docs/assets/grid/col_number_validation.png b/static/img/grid/col_number_validation.png similarity index 100% rename from docs/assets/grid/col_number_validation.png rename to static/img/grid/col_number_validation.png diff --git a/docs/assets/grid/combobox_editor.png b/static/img/grid/combobox_editor.png similarity index 100% rename from docs/assets/grid/combobox_editor.png rename to static/img/grid/combobox_editor.png diff --git a/docs/assets/grid/desired_setcell.png b/static/img/grid/desired_setcell.png similarity index 100% rename from docs/assets/grid/desired_setcell.png rename to static/img/grid/desired_setcell.png diff --git a/docs/assets/grid/dragpanel_module.png b/static/img/grid/dragpanel_module.png similarity index 100% rename from docs/assets/grid/dragpanel_module.png rename to static/img/grid/dragpanel_module.png diff --git a/docs/assets/grid/footer_bottom_position.png b/static/img/grid/footer_bottom_position.png similarity index 100% rename from docs/assets/grid/footer_bottom_position.png rename to static/img/grid/footer_bottom_position.png diff --git a/docs/assets/grid/footer_relative_position.png b/static/img/grid/footer_relative_position.png similarity index 100% rename from docs/assets/grid/footer_relative_position.png rename to static/img/grid/footer_relative_position.png diff --git a/docs/assets/grid/grid_front.png b/static/img/grid/grid_front.png similarity index 100% rename from docs/assets/grid/grid_front.png rename to static/img/grid/grid_front.png diff --git a/docs/assets/grid/html_content.png b/static/img/grid/html_content.png similarity index 100% rename from docs/assets/grid/html_content.png rename to static/img/grid/html_content.png diff --git a/docs/assets/grid/mark_cell.png b/static/img/grid/mark_cell.png similarity index 100% rename from docs/assets/grid/mark_cell.png rename to static/img/grid/mark_cell.png diff --git a/docs/assets/grid/markcells.png b/static/img/grid/markcells.png similarity index 100% rename from docs/assets/grid/markcells.png rename to static/img/grid/markcells.png diff --git a/docs/assets/grid/multi_level_nesting.png b/static/img/grid/multi_level_nesting.png similarity index 100% rename from docs/assets/grid/multi_level_nesting.png rename to static/img/grid/multi_level_nesting.png diff --git a/docs/assets/grid/multisort_grouped_data.png b/static/img/grid/multisort_grouped_data.png similarity index 100% rename from docs/assets/grid/multisort_grouped_data.png rename to static/img/grid/multisort_grouped_data.png diff --git a/docs/assets/grid/multisorting_data.png b/static/img/grid/multisorting_data.png similarity index 100% rename from docs/assets/grid/multisorting_data.png rename to static/img/grid/multisorting_data.png diff --git a/docs/assets/grid/new_combobox_option.png b/static/img/grid/new_combobox_option.png similarity index 100% rename from docs/assets/grid/new_combobox_option.png rename to static/img/grid/new_combobox_option.png diff --git a/docs/assets/grid/range_setcell.png b/static/img/grid/range_setcell.png similarity index 100% rename from docs/assets/grid/range_setcell.png rename to static/img/grid/range_setcell.png diff --git a/docs/assets/grid/row_expander.png b/static/img/grid/row_expander.png similarity index 100% rename from docs/assets/grid/row_expander.png rename to static/img/grid/row_expander.png diff --git a/docs/assets/grid/rowcss.png b/static/img/grid/rowcss.png similarity index 100% rename from docs/assets/grid/rowcss.png rename to static/img/grid/rowcss.png diff --git a/docs/assets/grid/set_cell.png b/static/img/grid/set_cell.png similarity index 100% rename from docs/assets/grid/set_cell.png rename to static/img/grid/set_cell.png diff --git a/docs/assets/grid/styling_grid.png b/static/img/grid/styling_grid.png similarity index 100% rename from docs/assets/grid/styling_grid.png rename to static/img/grid/styling_grid.png diff --git a/docs/assets/grid/styling_header.png b/static/img/grid/styling_header.png similarity index 100% rename from docs/assets/grid/styling_header.png rename to static/img/grid/styling_header.png diff --git a/docs/assets/grid/styling_selection.png b/static/img/grid/styling_selection.png similarity index 100% rename from docs/assets/grid/styling_selection.png rename to static/img/grid/styling_selection.png diff --git a/docs/assets/grid/subgrid_specific_rows.png b/static/img/grid/subgrid_specific_rows.png similarity index 100% rename from docs/assets/grid/subgrid_specific_rows.png rename to static/img/grid/subgrid_specific_rows.png diff --git a/docs/assets/grid/tooltip_template.png b/static/img/grid/tooltip_template.png similarity index 100% rename from docs/assets/grid/tooltip_template.png rename to static/img/grid/tooltip_template.png diff --git a/docs/assets/guides/dhx_typescript.png b/static/img/guides/dhx_typescript.png similarity index 100% rename from docs/assets/guides/dhx_typescript.png rename to static/img/guides/dhx_typescript.png diff --git a/docs/assets/guides/typescript.png b/static/img/guides/typescript.png similarity index 100% rename from docs/assets/guides/typescript.png rename to static/img/guides/typescript.png diff --git a/docs/assets/guides/typescript1.png b/static/img/guides/typescript1.png similarity index 100% rename from docs/assets/guides/typescript1.png rename to static/img/guides/typescript1.png diff --git a/docs/assets/icons/calendar.svg b/static/img/icons/calendar.svg similarity index 100% rename from docs/assets/icons/calendar.svg rename to static/img/icons/calendar.svg diff --git a/docs/assets/icons/chart.svg b/static/img/icons/chart.svg similarity index 100% rename from docs/assets/icons/chart.svg rename to static/img/icons/chart.svg diff --git a/docs/assets/icons/colorpicker.svg b/static/img/icons/colorpicker.svg similarity index 100% rename from docs/assets/icons/colorpicker.svg rename to static/img/icons/colorpicker.svg diff --git a/docs/assets/icons/combo.svg b/static/img/icons/combo.svg similarity index 100% rename from docs/assets/icons/combo.svg rename to static/img/icons/combo.svg diff --git a/docs/assets/icons/contextmenu.svg b/static/img/icons/contextmenu.svg similarity index 100% rename from docs/assets/icons/contextmenu.svg rename to static/img/icons/contextmenu.svg diff --git a/docs/assets/icons/dataview.svg b/static/img/icons/dataview.svg similarity index 100% rename from docs/assets/icons/dataview.svg rename to static/img/icons/dataview.svg diff --git a/docs/assets/icons/diagram.svg b/static/img/icons/diagram.svg similarity index 100% rename from docs/assets/icons/diagram.svg rename to static/img/icons/diagram.svg diff --git a/docs/assets/icons/editor.svg b/static/img/icons/editor.svg similarity index 100% rename from docs/assets/icons/editor.svg rename to static/img/icons/editor.svg diff --git a/docs/assets/icons/form.svg b/static/img/icons/form.svg similarity index 100% rename from docs/assets/icons/form.svg rename to static/img/icons/form.svg diff --git a/docs/assets/icons/gantt.svg b/static/img/icons/gantt.svg similarity index 100% rename from docs/assets/icons/gantt.svg rename to static/img/icons/gantt.svg diff --git a/docs/assets/icons/grid.svg b/static/img/icons/grid.svg similarity index 100% rename from docs/assets/icons/grid.svg rename to static/img/icons/grid.svg diff --git a/docs/assets/icons/layout.svg b/static/img/icons/layout.svg similarity index 100% rename from docs/assets/icons/layout.svg rename to static/img/icons/layout.svg diff --git a/docs/assets/icons/list.svg b/static/img/icons/list.svg similarity index 100% rename from docs/assets/icons/list.svg rename to static/img/icons/list.svg diff --git a/docs/assets/icons/menu.svg b/static/img/icons/menu.svg similarity index 100% rename from docs/assets/icons/menu.svg rename to static/img/icons/menu.svg diff --git a/docs/assets/icons/message.svg b/static/img/icons/message.svg similarity index 100% rename from docs/assets/icons/message.svg rename to static/img/icons/message.svg diff --git a/docs/assets/icons/pivot.svg b/static/img/icons/pivot.svg similarity index 100% rename from docs/assets/icons/pivot.svg rename to static/img/icons/pivot.svg diff --git a/docs/assets/icons/popup.svg b/static/img/icons/popup.svg similarity index 100% rename from docs/assets/icons/popup.svg rename to static/img/icons/popup.svg diff --git a/docs/assets/icons/ribbon.svg b/static/img/icons/ribbon.svg similarity index 100% rename from docs/assets/icons/ribbon.svg rename to static/img/icons/ribbon.svg diff --git a/docs/assets/icons/scheduler.svg b/static/img/icons/scheduler.svg similarity index 100% rename from docs/assets/icons/scheduler.svg rename to static/img/icons/scheduler.svg diff --git a/docs/assets/icons/sidebar.svg b/static/img/icons/sidebar.svg similarity index 100% rename from docs/assets/icons/sidebar.svg rename to static/img/icons/sidebar.svg diff --git a/docs/assets/icons/slider.svg b/static/img/icons/slider.svg similarity index 100% rename from docs/assets/icons/slider.svg rename to static/img/icons/slider.svg diff --git a/docs/assets/icons/spreadsheet.svg b/static/img/icons/spreadsheet.svg similarity index 100% rename from docs/assets/icons/spreadsheet.svg rename to static/img/icons/spreadsheet.svg diff --git a/docs/assets/icons/tabbar.svg b/static/img/icons/tabbar.svg similarity index 100% rename from docs/assets/icons/tabbar.svg rename to static/img/icons/tabbar.svg diff --git a/docs/assets/icons/timepicker.svg b/static/img/icons/timepicker.svg similarity index 100% rename from docs/assets/icons/timepicker.svg rename to static/img/icons/timepicker.svg diff --git a/docs/assets/icons/toolbar.svg b/static/img/icons/toolbar.svg similarity index 100% rename from docs/assets/icons/toolbar.svg rename to static/img/icons/toolbar.svg diff --git a/docs/assets/icons/tooltip.svg b/static/img/icons/tooltip.svg similarity index 100% rename from docs/assets/icons/tooltip.svg rename to static/img/icons/tooltip.svg diff --git a/docs/assets/icons/tree.svg b/static/img/icons/tree.svg similarity index 100% rename from docs/assets/icons/tree.svg rename to static/img/icons/tree.svg diff --git a/docs/assets/icons/vault.svg b/static/img/icons/vault.svg similarity index 100% rename from docs/assets/icons/vault.svg rename to static/img/icons/vault.svg diff --git a/docs/assets/icons/window.svg b/static/img/icons/window.svg similarity index 100% rename from docs/assets/icons/window.svg rename to static/img/icons/window.svg diff --git a/docs/assets/integration/custom_scroll_optimus.png b/static/img/integration/custom_scroll_optimus.png similarity index 100% rename from docs/assets/integration/custom_scroll_optimus.png rename to static/img/integration/custom_scroll_optimus.png diff --git a/docs/assets/integration/work_with_backend.png b/static/img/integration/work_with_backend.png similarity index 100% rename from docs/assets/integration/work_with_backend.png rename to static/img/integration/work_with_backend.png diff --git a/docs/assets/integration/work_with_backend_chart.png b/static/img/integration/work_with_backend_chart.png similarity index 100% rename from docs/assets/integration/work_with_backend_chart.png rename to static/img/integration/work_with_backend_chart.png diff --git a/docs/assets/integration/work_with_backend_dataview.png b/static/img/integration/work_with_backend_dataview.png similarity index 100% rename from docs/assets/integration/work_with_backend_dataview.png rename to static/img/integration/work_with_backend_dataview.png diff --git a/docs/assets/integration/work_with_backend_dataview_and_form.png b/static/img/integration/work_with_backend_dataview_and_form.png similarity index 100% rename from docs/assets/integration/work_with_backend_dataview_and_form.png rename to static/img/integration/work_with_backend_dataview_and_form.png diff --git a/docs/assets/integration/work_with_backend_dataview_card.png b/static/img/integration/work_with_backend_dataview_card.png similarity index 100% rename from docs/assets/integration/work_with_backend_dataview_card.png rename to static/img/integration/work_with_backend_dataview_card.png diff --git a/docs/assets/integration/work_with_backend_form.png b/static/img/integration/work_with_backend_form.png similarity index 100% rename from docs/assets/integration/work_with_backend_form.png rename to static/img/integration/work_with_backend_form.png diff --git a/docs/assets/integration/work_with_backend_grid.png b/static/img/integration/work_with_backend_grid.png similarity index 100% rename from docs/assets/integration/work_with_backend_grid.png rename to static/img/integration/work_with_backend_grid.png diff --git a/docs/assets/integration/work_with_backend_grid_and_form.png b/static/img/integration/work_with_backend_grid_and_form.png similarity index 100% rename from docs/assets/integration/work_with_backend_grid_and_form.png rename to static/img/integration/work_with_backend_grid_and_form.png diff --git a/docs/assets/integration/work_with_backend_grid_card.png b/static/img/integration/work_with_backend_grid_card.png similarity index 100% rename from docs/assets/integration/work_with_backend_grid_card.png rename to static/img/integration/work_with_backend_grid_card.png diff --git a/docs/assets/integration/work_with_backend_list.png b/static/img/integration/work_with_backend_list.png similarity index 100% rename from docs/assets/integration/work_with_backend_list.png rename to static/img/integration/work_with_backend_list.png diff --git a/docs/assets/integration/work_with_backend_list_and_form.png b/static/img/integration/work_with_backend_list_and_form.png similarity index 100% rename from docs/assets/integration/work_with_backend_list_and_form.png rename to static/img/integration/work_with_backend_list_and_form.png diff --git a/docs/assets/integration/work_with_backend_list_card.png b/static/img/integration/work_with_backend_list_card.png similarity index 100% rename from docs/assets/integration/work_with_backend_list_card.png rename to static/img/integration/work_with_backend_list_card.png diff --git a/docs/assets/integration/work_with_backend_save.png b/static/img/integration/work_with_backend_save.png similarity index 100% rename from docs/assets/integration/work_with_backend_save.png rename to static/img/integration/work_with_backend_save.png diff --git a/docs/assets/integration/work_with_backend_simplevault.png b/static/img/integration/work_with_backend_simplevault.png similarity index 100% rename from docs/assets/integration/work_with_backend_simplevault.png rename to static/img/integration/work_with_backend_simplevault.png diff --git a/docs/assets/integration/work_with_backend_tree.png b/static/img/integration/work_with_backend_tree.png similarity index 100% rename from docs/assets/integration/work_with_backend_tree.png rename to static/img/integration/work_with_backend_tree.png diff --git a/docs/assets/integration/work_with_frameworks.png b/static/img/integration/work_with_frameworks.png similarity index 100% rename from docs/assets/integration/work_with_frameworks.png rename to static/img/integration/work_with_frameworks.png diff --git a/docs/assets/layout/1c.png b/static/img/layout/1c.png similarity index 100% rename from docs/assets/layout/1c.png rename to static/img/layout/1c.png diff --git a/docs/assets/layout/2e.png b/static/img/layout/2e.png similarity index 100% rename from docs/assets/layout/2e.png rename to static/img/layout/2e.png diff --git a/docs/assets/layout/2u.png b/static/img/layout/2u.png similarity index 100% rename from docs/assets/layout/2u.png rename to static/img/layout/2u.png diff --git a/docs/assets/layout/3e.png b/static/img/layout/3e.png similarity index 100% rename from docs/assets/layout/3e.png rename to static/img/layout/3e.png diff --git a/docs/assets/layout/3j.png b/static/img/layout/3j.png similarity index 100% rename from docs/assets/layout/3j.png rename to static/img/layout/3j.png diff --git a/docs/assets/layout/3l.png b/static/img/layout/3l.png similarity index 100% rename from docs/assets/layout/3l.png rename to static/img/layout/3l.png diff --git a/docs/assets/layout/3t.png b/static/img/layout/3t.png similarity index 100% rename from docs/assets/layout/3t.png rename to static/img/layout/3t.png diff --git a/docs/assets/layout/3u.png b/static/img/layout/3u.png similarity index 100% rename from docs/assets/layout/3u.png rename to static/img/layout/3u.png diff --git a/docs/assets/layout/3w.png b/static/img/layout/3w.png similarity index 100% rename from docs/assets/layout/3w.png rename to static/img/layout/3w.png diff --git a/docs/assets/layout/4a.png b/static/img/layout/4a.png similarity index 100% rename from docs/assets/layout/4a.png rename to static/img/layout/4a.png diff --git a/docs/assets/layout/4c.png b/static/img/layout/4c.png similarity index 100% rename from docs/assets/layout/4c.png rename to static/img/layout/4c.png diff --git a/docs/assets/layout/4e.png b/static/img/layout/4e.png similarity index 100% rename from docs/assets/layout/4e.png rename to static/img/layout/4e.png diff --git a/docs/assets/layout/4f.png b/static/img/layout/4f.png similarity index 100% rename from docs/assets/layout/4f.png rename to static/img/layout/4f.png diff --git a/docs/assets/layout/4g.png b/static/img/layout/4g.png similarity index 100% rename from docs/assets/layout/4g.png rename to static/img/layout/4g.png diff --git a/docs/assets/layout/4h.png b/static/img/layout/4h.png similarity index 100% rename from docs/assets/layout/4h.png rename to static/img/layout/4h.png diff --git a/docs/assets/layout/4i.png b/static/img/layout/4i.png similarity index 100% rename from docs/assets/layout/4i.png rename to static/img/layout/4i.png diff --git a/docs/assets/layout/4j.png b/static/img/layout/4j.png similarity index 100% rename from docs/assets/layout/4j.png rename to static/img/layout/4j.png diff --git a/docs/assets/layout/4l.png b/static/img/layout/4l.png similarity index 100% rename from docs/assets/layout/4l.png rename to static/img/layout/4l.png diff --git a/docs/assets/layout/4t.png b/static/img/layout/4t.png similarity index 100% rename from docs/assets/layout/4t.png rename to static/img/layout/4t.png diff --git a/docs/assets/layout/4u.png b/static/img/layout/4u.png similarity index 100% rename from docs/assets/layout/4u.png rename to static/img/layout/4u.png diff --git a/docs/assets/layout/4w.png b/static/img/layout/4w.png similarity index 100% rename from docs/assets/layout/4w.png rename to static/img/layout/4w.png diff --git a/docs/assets/layout/5c.png b/static/img/layout/5c.png similarity index 100% rename from docs/assets/layout/5c.png rename to static/img/layout/5c.png diff --git a/docs/assets/layout/5e.png b/static/img/layout/5e.png similarity index 100% rename from docs/assets/layout/5e.png rename to static/img/layout/5e.png diff --git a/docs/assets/layout/5g.png b/static/img/layout/5g.png similarity index 100% rename from docs/assets/layout/5g.png rename to static/img/layout/5g.png diff --git a/docs/assets/layout/5h.png b/static/img/layout/5h.png similarity index 100% rename from docs/assets/layout/5h.png rename to static/img/layout/5h.png diff --git a/docs/assets/layout/5i.png b/static/img/layout/5i.png similarity index 100% rename from docs/assets/layout/5i.png rename to static/img/layout/5i.png diff --git a/docs/assets/layout/5k.png b/static/img/layout/5k.png similarity index 100% rename from docs/assets/layout/5k.png rename to static/img/layout/5k.png diff --git a/docs/assets/layout/5s.png b/static/img/layout/5s.png similarity index 100% rename from docs/assets/layout/5s.png rename to static/img/layout/5s.png diff --git a/docs/assets/layout/5u.png b/static/img/layout/5u.png similarity index 100% rename from docs/assets/layout/5u.png rename to static/img/layout/5u.png diff --git a/docs/assets/layout/5w.png b/static/img/layout/5w.png similarity index 100% rename from docs/assets/layout/5w.png rename to static/img/layout/5w.png diff --git a/docs/assets/layout/6a.png b/static/img/layout/6a.png similarity index 100% rename from docs/assets/layout/6a.png rename to static/img/layout/6a.png diff --git a/docs/assets/layout/6c.png b/static/img/layout/6c.png similarity index 100% rename from docs/assets/layout/6c.png rename to static/img/layout/6c.png diff --git a/docs/assets/layout/6e.png b/static/img/layout/6e.png similarity index 100% rename from docs/assets/layout/6e.png rename to static/img/layout/6e.png diff --git a/docs/assets/layout/6h.png b/static/img/layout/6h.png similarity index 100% rename from docs/assets/layout/6h.png rename to static/img/layout/6h.png diff --git a/docs/assets/layout/6i.png b/static/img/layout/6i.png similarity index 100% rename from docs/assets/layout/6i.png rename to static/img/layout/6i.png diff --git a/docs/assets/layout/6j.png b/static/img/layout/6j.png similarity index 100% rename from docs/assets/layout/6j.png rename to static/img/layout/6j.png diff --git a/docs/assets/layout/6w.png b/static/img/layout/6w.png similarity index 100% rename from docs/assets/layout/6w.png rename to static/img/layout/6w.png diff --git a/docs/assets/layout/7h.png b/static/img/layout/7h.png similarity index 100% rename from docs/assets/layout/7h.png rename to static/img/layout/7h.png diff --git a/docs/assets/layout/7i.png b/static/img/layout/7i.png similarity index 100% rename from docs/assets/layout/7i.png rename to static/img/layout/7i.png diff --git a/docs/assets/layout/custom_css.png b/static/img/layout/custom_css.png similarity index 100% rename from docs/assets/layout/custom_css.png rename to static/img/layout/custom_css.png diff --git a/docs/assets/layout/layout.png b/static/img/layout/layout.png similarity index 100% rename from docs/assets/layout/layout.png rename to static/img/layout/layout.png diff --git a/docs/assets/layout/layout_front.png b/static/img/layout/layout_front.png similarity index 100% rename from docs/assets/layout/layout_front.png rename to static/img/layout/layout_front.png diff --git a/docs/assets/layout/line_type.png b/static/img/layout/line_type.png similarity index 100% rename from docs/assets/layout/line_type.png rename to static/img/layout/line_type.png diff --git a/docs/assets/layout/mixed_types.png b/static/img/layout/mixed_types.png similarity index 100% rename from docs/assets/layout/mixed_types.png rename to static/img/layout/mixed_types.png diff --git a/docs/assets/layout/space_type.png b/static/img/layout/space_type.png similarity index 100% rename from docs/assets/layout/space_type.png rename to static/img/layout/space_type.png diff --git a/docs/assets/layout/wide_type.png b/static/img/layout/wide_type.png similarity index 100% rename from docs/assets/layout/wide_type.png rename to static/img/layout/wide_type.png diff --git a/docs/assets/layout/without_borders.png b/static/img/layout/without_borders.png similarity index 100% rename from docs/assets/layout/without_borders.png rename to static/img/layout/without_borders.png diff --git a/docs/assets/list/custom_css.png b/static/img/list/custom_css.png similarity index 100% rename from docs/assets/list/custom_css.png rename to static/img/list/custom_css.png diff --git a/docs/assets/list/custom_selection.png b/static/img/list/custom_selection.png similarity index 100% rename from docs/assets/list/custom_selection.png rename to static/img/list/custom_selection.png diff --git a/docs/assets/list/custom_style.png b/static/img/list/custom_style.png similarity index 100% rename from docs/assets/list/custom_style.png rename to static/img/list/custom_style.png diff --git a/docs/assets/list/disable_selection.png b/static/img/list/disable_selection.png similarity index 100% rename from docs/assets/list/disable_selection.png rename to static/img/list/disable_selection.png diff --git a/docs/assets/list/editable.png b/static/img/list/editable.png similarity index 100% rename from docs/assets/list/editable.png rename to static/img/list/editable.png diff --git a/docs/assets/list/item_height.png b/static/img/list/item_height.png similarity index 100% rename from docs/assets/list/item_height.png rename to static/img/list/item_height.png diff --git a/docs/assets/list/list_front.png b/static/img/list/list_front.png similarity index 100% rename from docs/assets/list/list_front.png rename to static/img/list/list_front.png diff --git a/docs/assets/list/list_height.png b/static/img/list/list_height.png similarity index 100% rename from docs/assets/list/list_height.png rename to static/img/list/list_height.png diff --git a/docs/assets/list/list_template.png b/static/img/list/list_template.png similarity index 100% rename from docs/assets/list/list_template.png rename to static/img/list/list_template.png diff --git a/docs/assets/list/multiselection.png b/static/img/list/multiselection.png similarity index 100% rename from docs/assets/list/multiselection.png rename to static/img/list/multiselection.png diff --git a/docs/assets/menu/bottom.png b/static/img/menu/bottom.png similarity index 100% rename from docs/assets/menu/bottom.png rename to static/img/menu/bottom.png diff --git a/docs/assets/menu/context.png b/static/img/menu/context.png similarity index 100% rename from docs/assets/menu/context.png rename to static/img/menu/context.png diff --git a/docs/assets/menu/context_menu.png b/static/img/menu/context_menu.png similarity index 100% rename from docs/assets/menu/context_menu.png rename to static/img/menu/context_menu.png diff --git a/docs/assets/menu/context_right.png b/static/img/menu/context_right.png similarity index 100% rename from docs/assets/menu/context_right.png rename to static/img/menu/context_right.png diff --git a/docs/assets/menu/custom_icons.png b/static/img/menu/custom_icons.png similarity index 100% rename from docs/assets/menu/custom_icons.png rename to static/img/menu/custom_icons.png diff --git a/docs/assets/menu/custom_menu.png b/static/img/menu/custom_menu.png similarity index 100% rename from docs/assets/menu/custom_menu.png rename to static/img/menu/custom_menu.png diff --git a/docs/assets/menu/hotkeys.png b/static/img/menu/hotkeys.png similarity index 100% rename from docs/assets/menu/hotkeys.png rename to static/img/menu/hotkeys.png diff --git a/docs/assets/menu/htmlcontent.png b/static/img/menu/htmlcontent.png similarity index 100% rename from docs/assets/menu/htmlcontent.png rename to static/img/menu/htmlcontent.png diff --git a/docs/assets/menu/menu.png b/static/img/menu/menu.png similarity index 100% rename from docs/assets/menu/menu.png rename to static/img/menu/menu.png diff --git a/docs/assets/menu/menu_front.png b/static/img/menu/menu_front.png similarity index 100% rename from docs/assets/menu/menu_front.png rename to static/img/menu/menu_front.png diff --git a/docs/assets/menu/menu_item.png b/static/img/menu/menu_item.png similarity index 100% rename from docs/assets/menu/menu_item.png rename to static/img/menu/menu_item.png diff --git a/docs/assets/menu/separator.png b/static/img/menu/separator.png similarity index 100% rename from docs/assets/menu/separator.png rename to static/img/menu/separator.png diff --git a/docs/assets/menu/separators.png b/static/img/menu/separators.png similarity index 100% rename from docs/assets/menu/separators.png rename to static/img/menu/separators.png diff --git a/docs/assets/menu/spacer.png b/static/img/menu/spacer.png similarity index 100% rename from docs/assets/menu/spacer.png rename to static/img/menu/spacer.png diff --git a/docs/assets/message/custom_style.png b/static/img/message/custom_style.png similarity index 100% rename from docs/assets/message/custom_style.png rename to static/img/message/custom_style.png diff --git a/docs/assets/message/dhx_alert.png b/static/img/message/dhx_alert.png similarity index 100% rename from docs/assets/message/dhx_alert.png rename to static/img/message/dhx_alert.png diff --git a/docs/assets/message/dhx_confirm.png b/static/img/message/dhx_confirm.png similarity index 100% rename from docs/assets/message/dhx_confirm.png rename to static/img/message/dhx_confirm.png diff --git a/docs/assets/message/dhx_message.png b/static/img/message/dhx_message.png similarity index 100% rename from docs/assets/message/dhx_message.png rename to static/img/message/dhx_message.png diff --git a/docs/assets/message/dhx_tooltip.png b/static/img/message/dhx_tooltip.png similarity index 100% rename from docs/assets/message/dhx_tooltip.png rename to static/img/message/dhx_tooltip.png diff --git a/docs/assets/message/message.png b/static/img/message/message.png similarity index 100% rename from docs/assets/message/message.png rename to static/img/message/message.png diff --git a/docs/assets/message/show_alert.png b/static/img/message/show_alert.png similarity index 100% rename from docs/assets/message/show_alert.png rename to static/img/message/show_alert.png diff --git a/docs/assets/message/show_confirm.png b/static/img/message/show_confirm.png similarity index 100% rename from docs/assets/message/show_confirm.png rename to static/img/message/show_confirm.png diff --git a/docs/assets/message/show_message.png b/static/img/message/show_message.png similarity index 100% rename from docs/assets/message/show_message.png rename to static/img/message/show_message.png diff --git a/docs/assets/message/show_tooltip.png b/static/img/message/show_tooltip.png similarity index 100% rename from docs/assets/message/show_tooltip.png rename to static/img/message/show_tooltip.png diff --git a/docs/assets/message/smart_tooltip.png b/static/img/message/smart_tooltip.png similarity index 100% rename from docs/assets/message/smart_tooltip.png rename to static/img/message/smart_tooltip.png diff --git a/docs/assets/message/temp_dhxtooltip_image.png b/static/img/message/temp_dhxtooltip_image.png similarity index 100% rename from docs/assets/message/temp_dhxtooltip_image.png rename to static/img/message/temp_dhxtooltip_image.png diff --git a/docs/assets/optimus/active_view.png b/static/img/optimus/active_view.png similarity index 100% rename from docs/assets/optimus/active_view.png rename to static/img/optimus/active_view.png diff --git a/docs/assets/optimus/chart.png b/static/img/optimus/chart.png similarity index 100% rename from docs/assets/optimus/chart.png rename to static/img/optimus/chart.png diff --git a/docs/assets/optimus/dataview.png b/static/img/optimus/dataview.png similarity index 100% rename from docs/assets/optimus/dataview.png rename to static/img/optimus/dataview.png diff --git a/docs/assets/optimus/demo/dashboard_demo.png b/static/img/optimus/demo/dashboard_demo.png similarity index 100% rename from docs/assets/optimus/demo/dashboard_demo.png rename to static/img/optimus/demo/dashboard_demo.png diff --git a/docs/assets/optimus/demo/examsystem_demo.png b/static/img/optimus/demo/examsystem_demo.png similarity index 100% rename from docs/assets/optimus/demo/examsystem_demo.png rename to static/img/optimus/demo/examsystem_demo.png diff --git a/docs/assets/optimus/demo/filemanager_demo.png b/static/img/optimus/demo/filemanager_demo.png similarity index 100% rename from docs/assets/optimus/demo/filemanager_demo.png rename to static/img/optimus/demo/filemanager_demo.png diff --git a/docs/assets/optimus/demo/geotracking_demo.png b/static/img/optimus/demo/geotracking_demo.png similarity index 100% rename from docs/assets/optimus/demo/geotracking_demo.png rename to static/img/optimus/demo/geotracking_demo.png diff --git a/docs/assets/optimus/demo/hospital_demo.png b/static/img/optimus/demo/hospital_demo.png similarity index 100% rename from docs/assets/optimus/demo/hospital_demo.png rename to static/img/optimus/demo/hospital_demo.png diff --git a/docs/assets/optimus/demo/hotel_demo.png b/static/img/optimus/demo/hotel_demo.png similarity index 100% rename from docs/assets/optimus/demo/hotel_demo.png rename to static/img/optimus/demo/hotel_demo.png diff --git a/docs/assets/optimus/demo/kpi_demo.png b/static/img/optimus/demo/kpi_demo.png similarity index 100% rename from docs/assets/optimus/demo/kpi_demo.png rename to static/img/optimus/demo/kpi_demo.png diff --git a/docs/assets/optimus/edit_chart.png b/static/img/optimus/edit_chart.png similarity index 100% rename from docs/assets/optimus/edit_chart.png rename to static/img/optimus/edit_chart.png diff --git a/docs/assets/optimus/edit_dataview.png b/static/img/optimus/edit_dataview.png similarity index 100% rename from docs/assets/optimus/edit_dataview.png rename to static/img/optimus/edit_dataview.png diff --git a/docs/assets/optimus/edit_grid.png b/static/img/optimus/edit_grid.png similarity index 100% rename from docs/assets/optimus/edit_grid.png rename to static/img/optimus/edit_grid.png diff --git a/docs/assets/optimus/empty_view.png b/static/img/optimus/empty_view.png similarity index 100% rename from docs/assets/optimus/empty_view.png rename to static/img/optimus/empty_view.png diff --git a/docs/assets/optimus/first_view.png b/static/img/optimus/first_view.png similarity index 100% rename from docs/assets/optimus/first_view.png rename to static/img/optimus/first_view.png diff --git a/docs/assets/optimus/grid.png b/static/img/optimus/grid.png similarity index 100% rename from docs/assets/optimus/grid.png rename to static/img/optimus/grid.png diff --git a/docs/assets/optimus/second_view.png b/static/img/optimus/second_view.png similarity index 100% rename from docs/assets/optimus/second_view.png rename to static/img/optimus/second_view.png diff --git a/docs/assets/optimus/start_optimus.png b/static/img/optimus/start_optimus.png similarity index 100% rename from docs/assets/optimus/start_optimus.png rename to static/img/optimus/start_optimus.png diff --git a/docs/assets/pager/center_align.png b/static/img/pager/center_align.png similarity index 100% rename from docs/assets/pager/center_align.png rename to static/img/pager/center_align.png diff --git a/docs/assets/pager/combo_width.png b/static/img/pager/combo_width.png similarity index 100% rename from docs/assets/pager/combo_width.png rename to static/img/pager/combo_width.png diff --git a/docs/assets/pager/init.png b/static/img/pager/init.png similarity index 100% rename from docs/assets/pager/init.png rename to static/img/pager/init.png diff --git a/docs/assets/pager/page_size.png b/static/img/pager/page_size.png similarity index 100% rename from docs/assets/pager/page_size.png rename to static/img/pager/page_size.png diff --git a/docs/assets/pager/styling.png b/static/img/pager/styling.png similarity index 100% rename from docs/assets/pager/styling.png rename to static/img/pager/styling.png diff --git a/docs/assets/pagination/center_align.png b/static/img/pagination/center_align.png similarity index 100% rename from docs/assets/pagination/center_align.png rename to static/img/pagination/center_align.png diff --git a/docs/assets/pagination/combo_width.png b/static/img/pagination/combo_width.png similarity index 100% rename from docs/assets/pagination/combo_width.png rename to static/img/pagination/combo_width.png diff --git a/docs/assets/pagination/init.png b/static/img/pagination/init.png similarity index 100% rename from docs/assets/pagination/init.png rename to static/img/pagination/init.png diff --git a/docs/assets/pagination/page_size.png b/static/img/pagination/page_size.png similarity index 100% rename from docs/assets/pagination/page_size.png rename to static/img/pagination/page_size.png diff --git a/docs/assets/pagination/styling.png b/static/img/pagination/styling.png similarity index 100% rename from docs/assets/pagination/styling.png rename to static/img/pagination/styling.png diff --git a/docs/assets/popup/custom_css.png b/static/img/popup/custom_css.png similarity index 100% rename from docs/assets/popup/custom_css.png rename to static/img/popup/custom_css.png diff --git a/docs/assets/popup/popup_front.png b/static/img/popup/popup_front.png similarity index 100% rename from docs/assets/popup/popup_front.png rename to static/img/popup/popup_front.png diff --git a/docs/assets/ribbon/block.png b/static/img/ribbon/block.png similarity index 100% rename from docs/assets/ribbon/block.png rename to static/img/ribbon/block.png diff --git a/docs/assets/ribbon/button.png b/static/img/ribbon/button.png similarity index 100% rename from docs/assets/ribbon/button.png rename to static/img/ribbon/button.png diff --git a/docs/assets/ribbon/button_ribbon.png b/static/img/ribbon/button_ribbon.png similarity index 100% rename from docs/assets/ribbon/button_ribbon.png rename to static/img/ribbon/button_ribbon.png diff --git a/docs/assets/ribbon/custom_html.png b/static/img/ribbon/custom_html.png similarity index 100% rename from docs/assets/ribbon/custom_html.png rename to static/img/ribbon/custom_html.png diff --git a/docs/assets/ribbon/custom_html_button.png b/static/img/ribbon/custom_html_button.png similarity index 100% rename from docs/assets/ribbon/custom_html_button.png rename to static/img/ribbon/custom_html_button.png diff --git a/docs/assets/ribbon/custom_style.png b/static/img/ribbon/custom_style.png similarity index 100% rename from docs/assets/ribbon/custom_style.png rename to static/img/ribbon/custom_style.png diff --git a/docs/assets/ribbon/fa_icons.png b/static/img/ribbon/fa_icons.png similarity index 100% rename from docs/assets/ribbon/fa_icons.png rename to static/img/ribbon/fa_icons.png diff --git a/docs/assets/ribbon/front_ribbon.png b/static/img/ribbon/front_ribbon.png similarity index 100% rename from docs/assets/ribbon/front_ribbon.png rename to static/img/ribbon/front_ribbon.png diff --git a/docs/assets/ribbon/icon_button.png b/static/img/ribbon/icon_button.png similarity index 100% rename from docs/assets/ribbon/icon_button.png rename to static/img/ribbon/icon_button.png diff --git a/docs/assets/ribbon/image_button.png b/static/img/ribbon/image_button.png similarity index 100% rename from docs/assets/ribbon/image_button.png rename to static/img/ribbon/image_button.png diff --git a/docs/assets/ribbon/image_button_text.png b/static/img/ribbon/image_button_text.png similarity index 100% rename from docs/assets/ribbon/image_button_text.png rename to static/img/ribbon/image_button_text.png diff --git a/docs/assets/ribbon/input.png b/static/img/ribbon/input.png similarity index 100% rename from docs/assets/ribbon/input.png rename to static/img/ribbon/input.png diff --git a/docs/assets/ribbon/navitem.png b/static/img/ribbon/navitem.png similarity index 100% rename from docs/assets/ribbon/navitem.png rename to static/img/ribbon/navitem.png diff --git a/docs/assets/ribbon/regular_button.png b/static/img/ribbon/regular_button.png similarity index 100% rename from docs/assets/ribbon/regular_button.png rename to static/img/ribbon/regular_button.png diff --git a/docs/assets/ribbon/ribbon_block.png b/static/img/ribbon/ribbon_block.png similarity index 100% rename from docs/assets/ribbon/ribbon_block.png rename to static/img/ribbon/ribbon_block.png diff --git a/docs/assets/ribbon/ribbon_button.png b/static/img/ribbon/ribbon_button.png similarity index 100% rename from docs/assets/ribbon/ribbon_button.png rename to static/img/ribbon/ribbon_button.png diff --git a/docs/assets/ribbon/ribbon_front.png b/static/img/ribbon/ribbon_front.png similarity index 100% rename from docs/assets/ribbon/ribbon_front.png rename to static/img/ribbon/ribbon_front.png diff --git a/docs/assets/ribbon/select_button.png b/static/img/ribbon/select_button.png similarity index 100% rename from docs/assets/ribbon/select_button.png rename to static/img/ribbon/select_button.png diff --git a/docs/assets/ribbon/separator.png b/static/img/ribbon/separator.png similarity index 100% rename from docs/assets/ribbon/separator.png rename to static/img/ribbon/separator.png diff --git a/docs/assets/ribbon/spacer.png b/static/img/ribbon/spacer.png similarity index 100% rename from docs/assets/ribbon/spacer.png rename to static/img/ribbon/spacer.png diff --git a/docs/assets/ribbon/title.png b/static/img/ribbon/title.png similarity index 100% rename from docs/assets/ribbon/title.png rename to static/img/ribbon/title.png diff --git a/docs/assets/sidebar/collapsed_sidebar.png b/static/img/sidebar/collapsed_sidebar.png similarity index 100% rename from docs/assets/sidebar/collapsed_sidebar.png rename to static/img/sidebar/collapsed_sidebar.png diff --git a/docs/assets/sidebar/custom_style.png b/static/img/sidebar/custom_style.png similarity index 100% rename from docs/assets/sidebar/custom_style.png rename to static/img/sidebar/custom_style.png diff --git a/docs/assets/sidebar/fa_icons.png b/static/img/sidebar/fa_icons.png similarity index 100% rename from docs/assets/sidebar/fa_icons.png rename to static/img/sidebar/fa_icons.png diff --git a/docs/assets/sidebar/htmlcontent.png b/static/img/sidebar/htmlcontent.png similarity index 100% rename from docs/assets/sidebar/htmlcontent.png rename to static/img/sidebar/htmlcontent.png diff --git a/docs/assets/sidebar/menuitem.png b/static/img/sidebar/menuitem.png similarity index 100% rename from docs/assets/sidebar/menuitem.png rename to static/img/sidebar/menuitem.png diff --git a/docs/assets/sidebar/navitem.png b/static/img/sidebar/navitem.png similarity index 100% rename from docs/assets/sidebar/navitem.png rename to static/img/sidebar/navitem.png diff --git a/docs/assets/sidebar/separator.png b/static/img/sidebar/separator.png similarity index 100% rename from docs/assets/sidebar/separator.png rename to static/img/sidebar/separator.png diff --git a/docs/assets/sidebar/sidebar_front.png b/static/img/sidebar/sidebar_front.png similarity index 100% rename from docs/assets/sidebar/sidebar_front.png rename to static/img/sidebar/sidebar_front.png diff --git a/docs/assets/sidebar/spacer.png b/static/img/sidebar/spacer.png similarity index 100% rename from docs/assets/sidebar/spacer.png rename to static/img/sidebar/spacer.png diff --git a/docs/assets/sidebar/title.png b/static/img/sidebar/title.png similarity index 100% rename from docs/assets/sidebar/title.png rename to static/img/sidebar/title.png diff --git a/docs/assets/slider/custom_style.png b/static/img/slider/custom_style.png similarity index 100% rename from docs/assets/slider/custom_style.png rename to static/img/slider/custom_style.png diff --git a/docs/assets/slider/inverse_mode.png b/static/img/slider/inverse_mode.png similarity index 100% rename from docs/assets/slider/inverse_mode.png rename to static/img/slider/inverse_mode.png diff --git a/docs/assets/slider/min_max_ticks_only.png b/static/img/slider/min_max_ticks_only.png similarity index 100% rename from docs/assets/slider/min_max_ticks_only.png rename to static/img/slider/min_max_ticks_only.png diff --git a/docs/assets/slider/range_mode.png b/static/img/slider/range_mode.png similarity index 100% rename from docs/assets/slider/range_mode.png rename to static/img/slider/range_mode.png diff --git a/docs/assets/slider/scale.png b/static/img/slider/scale.png similarity index 100% rename from docs/assets/slider/scale.png rename to static/img/slider/scale.png diff --git a/docs/assets/slider/slider_front.png b/static/img/slider/slider_front.png similarity index 100% rename from docs/assets/slider/slider_front.png rename to static/img/slider/slider_front.png diff --git a/docs/assets/slider/slider_label.png b/static/img/slider/slider_label.png similarity index 100% rename from docs/assets/slider/slider_label.png rename to static/img/slider/slider_label.png diff --git a/docs/assets/slider/tooltip.png b/static/img/slider/tooltip.png similarity index 100% rename from docs/assets/slider/tooltip.png rename to static/img/slider/tooltip.png diff --git a/docs/assets/tabbar/active_tab.png b/static/img/tabbar/active_tab.png similarity index 100% rename from docs/assets/tabbar/active_tab.png rename to static/img/tabbar/active_tab.png diff --git a/docs/assets/tabbar/close_button.png b/static/img/tabbar/close_button.png similarity index 100% rename from docs/assets/tabbar/close_button.png rename to static/img/tabbar/close_button.png diff --git a/docs/assets/tabbar/custom_style.png b/static/img/tabbar/custom_style.png similarity index 100% rename from docs/assets/tabbar/custom_style.png rename to static/img/tabbar/custom_style.png diff --git a/docs/assets/tabbar/disabled_tab.png b/static/img/tabbar/disabled_tab.png similarity index 100% rename from docs/assets/tabbar/disabled_tab.png rename to static/img/tabbar/disabled_tab.png diff --git a/docs/assets/tabbar/mode.png b/static/img/tabbar/mode.png similarity index 100% rename from docs/assets/tabbar/mode.png rename to static/img/tabbar/mode.png diff --git a/docs/assets/tabbar/no_content.png b/static/img/tabbar/no_content.png similarity index 100% rename from docs/assets/tabbar/no_content.png rename to static/img/tabbar/no_content.png diff --git a/docs/assets/tabbar/tabbar_align.png b/static/img/tabbar/tabbar_align.png similarity index 100% rename from docs/assets/tabbar/tabbar_align.png rename to static/img/tabbar/tabbar_align.png diff --git a/docs/assets/tabbar/tabbar_front.png b/static/img/tabbar/tabbar_front.png similarity index 100% rename from docs/assets/tabbar/tabbar_front.png rename to static/img/tabbar/tabbar_front.png diff --git a/docs/assets/tabbar/tabs_tooltips.png b/static/img/tabbar/tabs_tooltips.png similarity index 100% rename from docs/assets/tabbar/tabs_tooltips.png rename to static/img/tabbar/tabs_tooltips.png diff --git a/docs/assets/themes/contrastdark_theme.png b/static/img/themes/contrastdark_theme.png similarity index 100% rename from docs/assets/themes/contrastdark_theme.png rename to static/img/themes/contrastdark_theme.png diff --git a/docs/assets/themes/contrastlight_theme.png b/static/img/themes/contrastlight_theme.png similarity index 100% rename from docs/assets/themes/contrastlight_theme.png rename to static/img/themes/contrastlight_theme.png diff --git a/docs/assets/themes/dark_theme.png b/static/img/themes/dark_theme.png similarity index 100% rename from docs/assets/themes/dark_theme.png rename to static/img/themes/dark_theme.png diff --git a/docs/assets/themes/light_theme.png b/static/img/themes/light_theme.png similarity index 100% rename from docs/assets/themes/light_theme.png rename to static/img/themes/light_theme.png diff --git a/docs/assets/timepicker/amdm_false.png b/static/img/timepicker/amdm_false.png similarity index 100% rename from docs/assets/timepicker/amdm_false.png rename to static/img/timepicker/amdm_false.png diff --git a/docs/assets/timepicker/amdm_true.png b/static/img/timepicker/amdm_true.png similarity index 100% rename from docs/assets/timepicker/amdm_true.png rename to static/img/timepicker/amdm_true.png diff --git a/docs/assets/timepicker/custom_style.png b/static/img/timepicker/custom_style.png similarity index 100% rename from docs/assets/timepicker/custom_style.png rename to static/img/timepicker/custom_style.png diff --git a/docs/assets/timepicker/dhx_timepicker.png b/static/img/timepicker/dhx_timepicker.png similarity index 100% rename from docs/assets/timepicker/dhx_timepicker.png rename to static/img/timepicker/dhx_timepicker.png diff --git a/docs/assets/toolbar/button.png b/static/img/toolbar/button.png similarity index 100% rename from docs/assets/toolbar/button.png rename to static/img/toolbar/button.png diff --git a/docs/assets/toolbar/buttons.png b/static/img/toolbar/buttons.png similarity index 100% rename from docs/assets/toolbar/buttons.png rename to static/img/toolbar/buttons.png diff --git a/docs/assets/toolbar/custom_style.png b/static/img/toolbar/custom_style.png similarity index 100% rename from docs/assets/toolbar/custom_style.png rename to static/img/toolbar/custom_style.png diff --git a/docs/assets/toolbar/disabled.png b/static/img/toolbar/disabled.png similarity index 100% rename from docs/assets/toolbar/disabled.png rename to static/img/toolbar/disabled.png diff --git a/docs/assets/toolbar/fa_icons.png b/static/img/toolbar/fa_icons.png similarity index 100% rename from docs/assets/toolbar/fa_icons.png rename to static/img/toolbar/fa_icons.png diff --git a/docs/assets/toolbar/front_toolbar.png b/static/img/toolbar/front_toolbar.png similarity index 100% rename from docs/assets/toolbar/front_toolbar.png rename to static/img/toolbar/front_toolbar.png diff --git a/docs/assets/toolbar/html_button.png b/static/img/toolbar/html_button.png similarity index 100% rename from docs/assets/toolbar/html_button.png rename to static/img/toolbar/html_button.png diff --git a/docs/assets/toolbar/htmlcontent.png b/static/img/toolbar/htmlcontent.png similarity index 100% rename from docs/assets/toolbar/htmlcontent.png rename to static/img/toolbar/htmlcontent.png diff --git a/docs/assets/toolbar/icon_button.png b/static/img/toolbar/icon_button.png similarity index 100% rename from docs/assets/toolbar/icon_button.png rename to static/img/toolbar/icon_button.png diff --git a/docs/assets/toolbar/image_button.png b/static/img/toolbar/image_button.png similarity index 100% rename from docs/assets/toolbar/image_button.png rename to static/img/toolbar/image_button.png diff --git a/docs/assets/toolbar/image_button_text.png b/static/img/toolbar/image_button_text.png similarity index 100% rename from docs/assets/toolbar/image_button_text.png rename to static/img/toolbar/image_button_text.png diff --git a/docs/assets/toolbar/input.png b/static/img/toolbar/input.png similarity index 100% rename from docs/assets/toolbar/input.png rename to static/img/toolbar/input.png diff --git a/docs/assets/toolbar/input_item.png b/static/img/toolbar/input_item.png similarity index 100% rename from docs/assets/toolbar/input_item.png rename to static/img/toolbar/input_item.png diff --git a/docs/assets/toolbar/menuitem.png b/static/img/toolbar/menuitem.png similarity index 100% rename from docs/assets/toolbar/menuitem.png rename to static/img/toolbar/menuitem.png diff --git a/docs/assets/toolbar/navitem.png b/static/img/toolbar/navitem.png similarity index 100% rename from docs/assets/toolbar/navitem.png rename to static/img/toolbar/navitem.png diff --git a/docs/assets/toolbar/regular_button.png b/static/img/toolbar/regular_button.png similarity index 100% rename from docs/assets/toolbar/regular_button.png rename to static/img/toolbar/regular_button.png diff --git a/docs/assets/toolbar/select_button.png b/static/img/toolbar/select_button.png similarity index 100% rename from docs/assets/toolbar/select_button.png rename to static/img/toolbar/select_button.png diff --git a/docs/assets/toolbar/selectbutton.png b/static/img/toolbar/selectbutton.png similarity index 100% rename from docs/assets/toolbar/selectbutton.png rename to static/img/toolbar/selectbutton.png diff --git a/docs/assets/toolbar/separator.png b/static/img/toolbar/separator.png similarity index 100% rename from docs/assets/toolbar/separator.png rename to static/img/toolbar/separator.png diff --git a/docs/assets/toolbar/spacer.png b/static/img/toolbar/spacer.png similarity index 100% rename from docs/assets/toolbar/spacer.png rename to static/img/toolbar/spacer.png diff --git a/docs/assets/toolbar/text_item.png b/static/img/toolbar/text_item.png similarity index 100% rename from docs/assets/toolbar/text_item.png rename to static/img/toolbar/text_item.png diff --git a/docs/assets/toolbar/title.png b/static/img/toolbar/title.png similarity index 100% rename from docs/assets/toolbar/title.png rename to static/img/toolbar/title.png diff --git a/docs/assets/toolbar/toolbar_front.png b/static/img/toolbar/toolbar_front.png similarity index 100% rename from docs/assets/toolbar/toolbar_front.png rename to static/img/toolbar/toolbar_front.png diff --git a/docs/assets/toolbar/tooltip.png b/static/img/toolbar/tooltip.png similarity index 100% rename from docs/assets/toolbar/tooltip.png rename to static/img/toolbar/tooltip.png diff --git a/docs/assets/toolbar/two_state_button.png b/static/img/toolbar/two_state_button.png similarity index 100% rename from docs/assets/toolbar/two_state_button.png rename to static/img/toolbar/two_state_button.png diff --git a/docs/assets/tree/checkbox.png b/static/img/tree/checkbox.png similarity index 100% rename from docs/assets/tree/checkbox.png rename to static/img/tree/checkbox.png diff --git a/docs/assets/tree/custom_icons.png b/static/img/tree/custom_icons.png similarity index 100% rename from docs/assets/tree/custom_icons.png rename to static/img/tree/custom_icons.png diff --git a/docs/assets/tree/custom_style.png b/static/img/tree/custom_style.png similarity index 100% rename from docs/assets/tree/custom_style.png rename to static/img/tree/custom_style.png diff --git a/docs/assets/tree/disable_selection.png b/static/img/tree/disable_selection.png similarity index 100% rename from docs/assets/tree/disable_selection.png rename to static/img/tree/disable_selection.png diff --git a/docs/assets/tree/drag_behaviour_child.png b/static/img/tree/drag_behaviour_child.png similarity index 100% rename from docs/assets/tree/drag_behaviour_child.png rename to static/img/tree/drag_behaviour_child.png diff --git a/docs/assets/tree/drag_behaviour_sibling.png b/static/img/tree/drag_behaviour_sibling.png similarity index 100% rename from docs/assets/tree/drag_behaviour_sibling.png rename to static/img/tree/drag_behaviour_sibling.png diff --git a/docs/assets/tree/editable.png b/static/img/tree/editable.png similarity index 100% rename from docs/assets/tree/editable.png rename to static/img/tree/editable.png diff --git a/docs/assets/tree/tree_front.png b/static/img/tree/tree_front.png similarity index 100% rename from docs/assets/tree/tree_front.png rename to static/img/tree/tree_front.png diff --git a/docs/assets/treegrid/cell_css.png b/static/img/treegrid/cell_css.png similarity index 100% rename from docs/assets/treegrid/cell_css.png rename to static/img/treegrid/cell_css.png diff --git a/docs/assets/treegrid/cell_templates.png b/static/img/treegrid/cell_templates.png similarity index 100% rename from docs/assets/treegrid/cell_templates.png rename to static/img/treegrid/cell_templates.png diff --git a/docs/assets/treegrid/combobox_editor.png b/static/img/treegrid/combobox_editor.png similarity index 100% rename from docs/assets/treegrid/combobox_editor.png rename to static/img/treegrid/combobox_editor.png diff --git a/docs/assets/treegrid/custom_style.png b/static/img/treegrid/custom_style.png similarity index 100% rename from docs/assets/treegrid/custom_style.png rename to static/img/treegrid/custom_style.png diff --git a/docs/assets/treegrid/dropbehaviour_child.png b/static/img/treegrid/dropbehaviour_child.png similarity index 100% rename from docs/assets/treegrid/dropbehaviour_child.png rename to static/img/treegrid/dropbehaviour_child.png diff --git a/docs/assets/treegrid/dropbehaviour_child_result.png b/static/img/treegrid/dropbehaviour_child_result.png similarity index 100% rename from docs/assets/treegrid/dropbehaviour_child_result.png rename to static/img/treegrid/dropbehaviour_child_result.png diff --git a/docs/assets/treegrid/dropbehaviour_sibling.png b/static/img/treegrid/dropbehaviour_sibling.png similarity index 100% rename from docs/assets/treegrid/dropbehaviour_sibling.png rename to static/img/treegrid/dropbehaviour_sibling.png diff --git a/docs/assets/treegrid/dropbehaviour_sibling_result.png b/static/img/treegrid/dropbehaviour_sibling_result.png similarity index 100% rename from docs/assets/treegrid/dropbehaviour_sibling_result.png rename to static/img/treegrid/dropbehaviour_sibling_result.png diff --git a/docs/assets/treegrid/html_content.png b/static/img/treegrid/html_content.png similarity index 100% rename from docs/assets/treegrid/html_content.png rename to static/img/treegrid/html_content.png diff --git a/docs/assets/treegrid/mark_cell.png b/static/img/treegrid/mark_cell.png similarity index 100% rename from docs/assets/treegrid/mark_cell.png rename to static/img/treegrid/mark_cell.png diff --git a/docs/assets/treegrid/min_max_mark.png b/static/img/treegrid/min_max_mark.png similarity index 100% rename from docs/assets/treegrid/min_max_mark.png rename to static/img/treegrid/min_max_mark.png diff --git a/docs/assets/treegrid/new_combobox_option.png b/static/img/treegrid/new_combobox_option.png similarity index 100% rename from docs/assets/treegrid/new_combobox_option.png rename to static/img/treegrid/new_combobox_option.png diff --git a/docs/assets/treegrid/row_css.png b/static/img/treegrid/row_css.png similarity index 100% rename from docs/assets/treegrid/row_css.png rename to static/img/treegrid/row_css.png diff --git a/docs/assets/treegrid/styling_footer.png b/static/img/treegrid/styling_footer.png similarity index 100% rename from docs/assets/treegrid/styling_footer.png rename to static/img/treegrid/styling_footer.png diff --git a/docs/assets/treegrid/styling_header.png b/static/img/treegrid/styling_header.png similarity index 100% rename from docs/assets/treegrid/styling_header.png rename to static/img/treegrid/styling_header.png diff --git a/docs/assets/treegrid/styling_selection.png b/static/img/treegrid/styling_selection.png similarity index 100% rename from docs/assets/treegrid/styling_selection.png rename to static/img/treegrid/styling_selection.png diff --git a/docs/assets/treegrid/tooltip_template.png b/static/img/treegrid/tooltip_template.png similarity index 100% rename from docs/assets/treegrid/tooltip_template.png rename to static/img/treegrid/tooltip_template.png diff --git a/docs/assets/treegrid/treegrid_front.png b/static/img/treegrid/treegrid_front.png similarity index 100% rename from docs/assets/treegrid/treegrid_front.png rename to static/img/treegrid/treegrid_front.png diff --git a/docs/assets/tutorial/basic_application/basic_initialization.png b/static/img/tutorial/basic_application/basic_initialization.png similarity index 100% rename from docs/assets/tutorial/basic_application/basic_initialization.png rename to static/img/tutorial/basic_application/basic_initialization.png diff --git a/docs/assets/tutorial/basic_application/bind_toolbar_grid.png b/static/img/tutorial/basic_application/bind_toolbar_grid.png similarity index 100% rename from docs/assets/tutorial/basic_application/bind_toolbar_grid.png rename to static/img/tutorial/basic_application/bind_toolbar_grid.png diff --git a/docs/assets/tutorial/basic_application/chart.png b/static/img/tutorial/basic_application/chart.png similarity index 100% rename from docs/assets/tutorial/basic_application/chart.png rename to static/img/tutorial/basic_application/chart.png diff --git a/docs/assets/tutorial/basic_application/file.png b/static/img/tutorial/basic_application/file.png similarity index 100% rename from docs/assets/tutorial/basic_application/file.png rename to static/img/tutorial/basic_application/file.png diff --git a/docs/assets/tutorial/basic_application/grid_003.png b/static/img/tutorial/basic_application/grid_003.png similarity index 100% rename from docs/assets/tutorial/basic_application/grid_003.png rename to static/img/tutorial/basic_application/grid_003.png diff --git a/docs/assets/tutorial/basic_application/layout_002.png b/static/img/tutorial/basic_application/layout_002.png similarity index 100% rename from docs/assets/tutorial/basic_application/layout_002.png rename to static/img/tutorial/basic_application/layout_002.png diff --git a/docs/assets/tutorial/basic_application/toolbar_003.png b/static/img/tutorial/basic_application/toolbar_003.png similarity index 100% rename from docs/assets/tutorial/basic_application/toolbar_003.png rename to static/img/tutorial/basic_application/toolbar_003.png diff --git a/docs/assets/tutorial/binding_components/add_window.png b/static/img/tutorial/binding_components/add_window.png similarity index 100% rename from docs/assets/tutorial/binding_components/add_window.png rename to static/img/tutorial/binding_components/add_window.png diff --git a/docs/assets/tutorial/binding_components/adding_item.png b/static/img/tutorial/binding_components/adding_item.png similarity index 100% rename from docs/assets/tutorial/binding_components/adding_item.png rename to static/img/tutorial/binding_components/adding_item.png diff --git a/docs/assets/tutorial/binding_components/binding_components.png b/static/img/tutorial/binding_components/binding_components.png similarity index 100% rename from docs/assets/tutorial/binding_components/binding_components.png rename to static/img/tutorial/binding_components/binding_components.png diff --git a/docs/assets/tutorial/binding_components/context_menu.png b/static/img/tutorial/binding_components/context_menu.png similarity index 100% rename from docs/assets/tutorial/binding_components/context_menu.png rename to static/img/tutorial/binding_components/context_menu.png diff --git a/docs/assets/tutorial/binding_components/editing_item.png b/static/img/tutorial/binding_components/editing_item.png similarity index 100% rename from docs/assets/tutorial/binding_components/editing_item.png rename to static/img/tutorial/binding_components/editing_item.png diff --git a/docs/assets/tutorial/binding_components/form.png b/static/img/tutorial/binding_components/form.png similarity index 100% rename from docs/assets/tutorial/binding_components/form.png rename to static/img/tutorial/binding_components/form.png diff --git a/docs/assets/tutorial/binding_components/toolbar.png b/static/img/tutorial/binding_components/toolbar.png similarity index 100% rename from docs/assets/tutorial/binding_components/toolbar.png rename to static/img/tutorial/binding_components/toolbar.png diff --git a/docs/assets/tutorial/binding_components/window.png b/static/img/tutorial/binding_components/window.png similarity index 100% rename from docs/assets/tutorial/binding_components/window.png rename to static/img/tutorial/binding_components/window.png diff --git a/docs/assets/window/closable.png b/static/img/window/closable.png similarity index 100% rename from docs/assets/window/closable.png rename to static/img/window/closable.png diff --git a/docs/assets/window/custom_buttons.png b/static/img/window/custom_buttons.png similarity index 100% rename from docs/assets/window/custom_buttons.png rename to static/img/window/custom_buttons.png diff --git a/docs/assets/window/custom_style.png b/static/img/window/custom_style.png similarity index 100% rename from docs/assets/window/custom_style.png rename to static/img/window/custom_style.png diff --git a/docs/assets/window/modal_window.png b/static/img/window/modal_window.png similarity index 100% rename from docs/assets/window/modal_window.png rename to static/img/window/modal_window.png diff --git a/docs/assets/window/movable.png b/static/img/window/movable.png similarity index 100% rename from docs/assets/window/movable.png rename to static/img/window/movable.png diff --git a/docs/assets/window/resizable.png b/static/img/window/resizable.png similarity index 100% rename from docs/assets/window/resizable.png rename to static/img/window/resizable.png diff --git a/docs/assets/window/window_front.png b/static/img/window/window_front.png similarity index 100% rename from docs/assets/window/window_front.png rename to static/img/window/window_front.png diff --git a/docs/assets/window/with_footer.png b/static/img/window/with_footer.png similarity index 100% rename from docs/assets/window/with_footer.png rename to static/img/window/with_footer.png