From 5dcc4f7476c93cc234d65234f661259989fdd1ca Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 26 Jun 2026 13:24:58 +0300 Subject: [PATCH 1/5] [update] migrate doc images to static/img - move docs/assets/** image files to Docusaurus static/img/** - rewrite image links ![](../assets/...) -> ![](/img/...) across 147 docs - add src/css/tutorial.module.scss; wrap tutorial images in styled
--- docs/calendar/configuring.md | 22 +++---- docs/calendar/customization.md | 4 +- docs/calendar/datepicker.md | 2 +- docs/calendar/index.md | 2 +- docs/calendar/localizing_calendar.md | 2 +- docs/calendar/operating_calendar.md | 4 +- docs/chart/charts_overview.md | 24 +++---- docs/chart/customization.md | 12 ++-- docs/chart/index.md | 2 +- docs/colorpicker/configuration.md | 14 ++-- docs/colorpicker/customization.md | 2 +- docs/colorpicker/index.md | 2 +- docs/combobox/configuration.md | 18 +++--- docs/combobox/customization.md | 4 +- docs/combobox/index.md | 2 +- docs/common_features/custom_scroll.md | 2 +- docs/common_features/using_typescript.md | 2 +- docs/dataview/configuration.md | 18 +++--- docs/dataview/customization.md | 6 +- docs/dataview/index.md | 2 +- docs/form/avatar.md | 2 +- docs/form/button.md | 2 +- docs/form/calendar.md | 2 +- docs/form/checkbox.md | 2 +- docs/form/checkboxgroup.md | 2 +- docs/form/colorpicker.md | 2 +- docs/form/combo.md | 2 +- docs/form/configuration.md | 2 +- docs/form/customization.md | 4 +- docs/form/fieldset.md | 2 +- docs/form/how_to_start.md | 2 +- docs/form/index.md | 2 +- docs/form/input.md | 2 +- docs/form/radiogroup.md | 2 +- docs/form/select.md | 2 +- docs/form/simplevault.md | 2 +- docs/form/slider.md | 2 +- docs/form/text.md | 2 +- docs/form/textarea.md | 2 +- docs/form/timepicker.md | 2 +- docs/form/toggle.md | 2 +- docs/form/togglegroup.md | 2 +- docs/form/work_with_form.md | 8 +-- docs/grid/configuration.md | 20 +++--- docs/grid/customization.md | 18 +++--- docs/grid/index.md | 2 +- docs/grid/treegrid_mode.md | 6 +- docs/grid/usage.md | 4 +- docs/grid/usage_blockselection.md | 2 +- docs/grid/usage_dragpanel.md | 2 +- docs/grid/usage_selection.md | 6 +- docs/integration/suite_and_backend.md | 30 ++++----- docs/layout/cell_configuration.md | 2 +- docs/layout/customization.md | 2 +- docs/layout/index.md | 2 +- docs/layout/layout_patterns.md | 60 +++++++++--------- docs/list/configuration.md | 12 ++-- docs/list/customization.md | 6 +- docs/list/index.md | 2 +- docs/menu/configuring_menu_items.md | 8 +-- docs/menu/creating_context_menu.md | 2 +- docs/menu/customization.md | 4 +- docs/menu/index.md | 2 +- docs/message/configuration.md | 10 +-- docs/message/customization.md | 2 +- docs/message/index.md | 2 +- docs/message/overview.md | 8 +-- docs/optimus_guides/dashboard_demo.md | 2 +- docs/optimus_guides/exam_demo.md | 2 +- docs/optimus_guides/filemanager_demo.md | 2 +- docs/optimus_guides/geotracking_demo.md | 2 +- docs/optimus_guides/hospital_demo.md | 2 +- docs/optimus_guides/hotel_demo.md | 2 +- docs/optimus_guides/how_to_start_optimus.md | 20 +++--- docs/optimus_guides/index.md | 2 +- docs/optimus_guides/kpi_demo.md | 2 +- docs/pagination/configuration.md | 4 +- docs/pagination/customization.md | 2 +- docs/pagination/index.md | 2 +- docs/popup/customization.md | 2 +- docs/popup/index.md | 2 +- docs/ribbon/block.md | 2 +- docs/ribbon/button.md | 2 +- docs/ribbon/customhtmlbutton.md | 2 +- docs/ribbon/customization.md | 4 +- docs/ribbon/image_button.md | 2 +- docs/ribbon/index.md | 2 +- docs/ribbon/input.md | 2 +- docs/ribbon/navitem.md | 2 +- docs/ribbon/selectbutton.md | 2 +- docs/ribbon/separator.md | 2 +- docs/ribbon/spacer.md | 2 +- docs/sidebar/customhtmlbutton.md | 2 +- docs/sidebar/customization.md | 4 +- docs/sidebar/index.md | 2 +- docs/sidebar/menuitem.md | 2 +- docs/sidebar/navitem.md | 2 +- docs/sidebar/separator.md | 2 +- docs/sidebar/spacer.md | 2 +- docs/sidebar/title.md | 2 +- docs/slider/configuring_slider.md | 10 +-- docs/slider/customization.md | 2 +- docs/slider/index.md | 2 +- docs/slider/range_slider.md | 2 +- docs/tabbar/configuring_tabbar.md | 10 +-- docs/tabbar/customization.md | 2 +- docs/tabbar/index.md | 2 +- docs/themes/contrast_dark_theme.md | 2 +- docs/themes/contrast_light_theme.md | 2 +- docs/themes/dark_theme.md | 2 +- docs/themes/default_theme.md | 2 +- docs/timepicker/configuration.md | 6 +- docs/timepicker/customization.md | 2 +- docs/timepicker/index.md | 2 +- docs/toolbar/button.md | 2 +- docs/toolbar/customhtmlbutton.md | 2 +- docs/toolbar/customization.md | 4 +- docs/toolbar/image_button.md | 2 +- docs/toolbar/index.md | 2 +- docs/toolbar/input.md | 2 +- docs/toolbar/menuitem.md | 2 +- docs/toolbar/navitem.md | 2 +- docs/toolbar/selectbutton.md | 2 +- docs/toolbar/separator.md | 2 +- docs/toolbar/spacer.md | 2 +- docs/toolbar/title.md | 2 +- docs/tree/api/tree_dropbehaviour_config.md | 4 +- docs/tree/configuration.md | 6 +- docs/tree/drag_and_drop_handling.md | 4 +- docs/tree/index.md | 2 +- docs/tree/setting_tree_appearance.md | 4 +- docs/tutorial/basic_application/index.md | 9 ++- docs/tutorial/basic_application/step1.md | 8 ++- docs/tutorial/basic_application/step2.md | 8 ++- docs/tutorial/basic_application/step3.md | 8 ++- docs/tutorial/basic_application/step4.md | 8 ++- docs/tutorial/basic_application/step5.md | 8 ++- docs/tutorial/basic_application/step7.md | 8 ++- docs/tutorial/binding_components/index.md | 8 ++- docs/tutorial/binding_components/step1.md | 8 ++- docs/tutorial/binding_components/step3.md | 8 ++- docs/tutorial/binding_components/step4.md | 9 ++- docs/tutorial/binding_components/step5.md | 8 ++- docs/tutorial/binding_components/step6.md | 20 +++++- docs/window/configuration.md | 10 +-- docs/window/customization.md | 4 +- docs/window/index.md | 2 +- src/css/tutorial.module.scss | 7 ++ .../img}/api/toc/accordion.png | Bin {docs/assets => static/img}/api/toc/ajax.png | Bin .../img}/api/toc/calendar.png | Bin .../img}/api/toc/carousel.png | Bin {docs/assets => static/img}/api/toc/chart.png | Bin .../img}/api/toc/colorpicker.png | Bin {docs/assets => static/img}/api/toc/combo.png | Bin .../img}/api/toc/dataprocessor.png | Bin .../img}/api/toc/dataselector.png | Bin .../img}/api/toc/datastore.png | Bin .../img}/api/toc/dataview.png | Bin .../img}/api/toc/designer.png | Bin .../assets => static/img}/api/toc/editor.png | Bin .../img}/api/toc/fileselector.png | Bin {docs/assets => static/img}/api/toc/form.png | Bin {docs/assets => static/img}/api/toc/gantt.png | Bin {docs/assets => static/img}/api/toc/grid.png | Bin .../assets => static/img}/api/toc/layout.png | Bin {docs/assets => static/img}/api/toc/list.png | Bin {docs/assets => static/img}/api/toc/menu.png | Bin {docs/assets => static/img}/api/toc/popup.png | Bin .../assets => static/img}/api/toc/ribbon.png | Bin .../img}/api/toc/scheduler.png | Bin .../assets => static/img}/api/toc/sidebar.png | Bin .../img}/api/toc/skinbuilder.png | Bin .../assets => static/img}/api/toc/slider.png | Bin .../img}/api/toc/spreadsheet.png | Bin .../assets => static/img}/api/toc/tabbar.png | Bin .../assets => static/img}/api/toc/toolbar.png | Bin {docs/assets => static/img}/api/toc/tree.png | Bin .../img}/api/toc/treegrid.png | Bin {docs/assets => static/img}/api/toc/vault.png | Bin .../assets => static/img}/api/toc/windows.png | Bin .../img}/base_icons/dxi_icons.png | Bin .../img}/calendar/blocked_dates.png | Bin .../img}/calendar/calendar_blocked_days.png | Bin .../img}/calendar/calendar_calendar_mode.png | Bin .../img}/calendar/calendar_front.png | Bin .../img}/calendar/calendar_in_div.png | Bin .../img}/calendar/calendar_locale_rus.png | Bin .../img}/calendar/calendar_marked.png | Bin .../img}/calendar/calendar_material.png | Bin .../img}/calendar/calendar_mode.png | Bin .../img}/calendar/calendar_month_mode.png | Bin .../img}/calendar/calendar_range_styling.png | Bin .../img}/calendar/calendar_start_sunday.png | Bin .../img}/calendar/calendar_width.png | Bin .../img}/calendar/calendar_year_mode.png | Bin .../img}/calendar/date_picker.png | Bin .../img}/calendar/date_range.png | Bin .../assets => static/img}/calendar/locale.png | Bin .../img}/calendar/marked_dates.png | Bin .../img}/calendar/month_mode.png | Bin .../img}/calendar/range_mode.png | Bin .../img}/calendar/styled_calendar.png | Bin .../img}/calendar/this_month_only.png | Bin .../img}/calendar/timepicker_format.png | Bin .../img}/calendar/tooltips.png | Bin .../img}/calendar/week_number_column.png | Bin .../img}/calendar/week_numbers.png | Bin .../img}/calendar/weekstart_monday.png | Bin .../img}/calendar/year_mode.png | Bin .../img}/chart/area_overview.png | Bin .../img}/chart/bar_gradient.png | Bin .../img}/chart/bar_overview.png | Bin .../img}/chart/custom_style.png | Bin .../img}/chart/donut_overview.png | Bin .../img}/chart/heatmap_overview.png | Bin .../img}/chart/line_overview.png | Bin .../img}/chart/pie_overview.png | Bin .../img}/chart/radar_overview.png | Bin .../img}/chart/scatter_overview.png | Bin .../img}/chart/show_percent_values.png | Bin .../assets => static/img}/chart/show_text.png | Bin .../img}/chart/show_tooltip.png | Bin .../img}/chart/spline_overview.png | Bin .../img}/chart/splinearea_overview.png | Bin .../img}/chart/text_template.png | Bin {docs/assets => static/img}/chart/treemap.png | Bin .../img}/chart/xbar_overview.png | Bin .../img}/colorpicker/colorpicker_css.png | Bin .../img}/colorpicker/colorpicker_front.png | Bin .../colorpicker/colorpicker_transparency.png | Bin .../img}/colorpicker/custom_colors.png | Bin .../img}/colorpicker/custom_palette.png | Bin .../img}/colorpicker/default_palette.png | Bin .../img}/colorpicker/no_shades_palette.png | Bin .../img}/colorpicker/palette_only.png | Bin .../img}/colorpicker/picker_only.png | Bin .../img}/combo/combo_front.png | Bin .../img}/combo/combo_template.png | Bin .../img}/combo/custom_css.png | Bin .../img}/combo/custom_filter.png | Bin .../assets => static/img}/combo/disabled.png | Bin {docs/assets => static/img}/combo/height.png | Bin .../img}/combo/label_left.png | Bin .../assets => static/img}/combo/label_top.png | Bin .../assets => static/img}/combo/new_value.png | Bin .../img}/combo/options_group.png | Bin .../img}/combo/placeholder.png | Bin .../assets => static/img}/combo/readonly.png | Bin .../img}/combo/selected_item.png | Bin .../img}/dataview/arrow_navigation.png | Bin .../img}/dataview/custom_items_styles.png | Bin .../img}/dataview/custom_selection_styles.png | Bin .../img}/dataview/custom_widget_styles.png | Bin .../img}/dataview/dataview_front.png | Bin .../img}/dataview/dataview_height.png | Bin .../img}/dataview/disable_selection.png | Bin .../img}/dataview/editable.png | Bin {docs/assets => static/img}/dataview/gap.png | Bin .../img}/dataview/item_height.png | Bin .../img}/dataview/items_in_row.png | Bin .../img}/dataview/multiselection.png | Bin .../img}/dataview/template.png | Bin .../img}/form/alignment_around.png | Bin .../img}/form/alignment_between.png | Bin .../img}/form/alignment_center.png | Bin .../img}/form/alignment_end.png | Bin .../img}/form/alignment_evenly.png | Bin .../img}/form/alignment_start.png | Bin {docs/assets => static/img}/form/blocks.png | Bin .../img}/form/custom_style.png | Bin .../img}/form/custom_styles.png | Bin {docs/assets => static/img}/form/disabled.png | Bin .../img}/form/form_avatar.png | Bin .../assets => static/img}/form/form_block.png | Bin .../img}/form/form_button.png | Bin .../img}/form/form_checkbox.png | Bin .../img}/form/form_checkboxgroup.png | Bin .../img}/form/form_colorpicker.png | Bin .../assets => static/img}/form/form_combo.png | Bin .../img}/form/form_datepicker.png | Bin .../img}/form/form_fieldset.png | Bin .../assets => static/img}/form/form_front.png | Bin .../assets => static/img}/form/form_init.png | Bin .../assets => static/img}/form/form_input.png | Bin .../assets => static/img}/form/form_radio.png | Bin .../img}/form/form_select.png | Bin .../img}/form/form_simplevault.png | Bin .../img}/form/form_slider.png | Bin .../assets => static/img}/form/form_text.png | Bin .../img}/form/form_textarea.png | Bin .../img}/form/form_timepicker.png | Bin .../img}/form/form_toggle.png | Bin .../img}/form/form_togglegroup.png | Bin .../img}/form/length_validate.png | Bin .../img}/form/required_fields.png | Bin .../assets => static/img}/form/set_focus.png | Bin .../img}/form/value_validate.png | Bin .../img}/grid/blockselection_module.png | Bin .../img}/grid/cell_templates.png | Bin {docs/assets => static/img}/grid/cellcss.png | Bin .../img}/grid/col_number_validation.png | Bin .../img}/grid/combobox_editor.png | Bin .../img}/grid/desired_setcell.png | Bin .../img}/grid/dragpanel_module.png | Bin .../img}/grid/footer_bottom_position.png | Bin .../img}/grid/footer_relative_position.png | Bin .../assets => static/img}/grid/grid_front.png | Bin .../img}/grid/html_content.png | Bin .../assets => static/img}/grid/mark_cell.png | Bin .../assets => static/img}/grid/markcells.png | Bin .../img}/grid/multi_level_nesting.png | Bin .../img}/grid/multisort_grouped_data.png | Bin .../img}/grid/multisorting_data.png | Bin .../img}/grid/new_combobox_option.png | Bin .../img}/grid/range_setcell.png | Bin .../img}/grid/row_expander.png | Bin {docs/assets => static/img}/grid/rowcss.png | Bin {docs/assets => static/img}/grid/set_cell.png | Bin .../img}/grid/styling_grid.png | Bin .../img}/grid/styling_header.png | Bin .../img}/grid/styling_selection.png | Bin .../img}/grid/subgrid_specific_rows.png | Bin .../img}/grid/tooltip_template.png | Bin .../img}/guides/dhx_typescript.png | Bin .../img}/guides/typescript.png | Bin .../img}/guides/typescript1.png | Bin .../assets => static/img}/icons/calendar.svg | 0 {docs/assets => static/img}/icons/chart.svg | 0 .../img}/icons/colorpicker.svg | 0 {docs/assets => static/img}/icons/combo.svg | 0 .../img}/icons/contextmenu.svg | 0 .../assets => static/img}/icons/dataview.svg | 0 {docs/assets => static/img}/icons/diagram.svg | 0 {docs/assets => static/img}/icons/editor.svg | 0 {docs/assets => static/img}/icons/form.svg | 0 {docs/assets => static/img}/icons/gantt.svg | 0 {docs/assets => static/img}/icons/grid.svg | 0 {docs/assets => static/img}/icons/layout.svg | 0 {docs/assets => static/img}/icons/list.svg | 0 {docs/assets => static/img}/icons/menu.svg | 0 {docs/assets => static/img}/icons/message.svg | 0 {docs/assets => static/img}/icons/pivot.svg | 0 {docs/assets => static/img}/icons/popup.svg | 0 {docs/assets => static/img}/icons/ribbon.svg | 0 .../assets => static/img}/icons/scheduler.svg | 0 {docs/assets => static/img}/icons/sidebar.svg | 0 {docs/assets => static/img}/icons/slider.svg | 0 .../img}/icons/spreadsheet.svg | 0 {docs/assets => static/img}/icons/tabbar.svg | 0 .../img}/icons/timepicker.svg | 0 {docs/assets => static/img}/icons/toolbar.svg | 0 {docs/assets => static/img}/icons/tooltip.svg | 0 {docs/assets => static/img}/icons/tree.svg | 0 {docs/assets => static/img}/icons/vault.svg | 0 {docs/assets => static/img}/icons/window.svg | 0 .../integration/custom_scroll_optimus.png | Bin .../img}/integration/work_with_backend.png | Bin .../integration/work_with_backend_chart.png | Bin .../work_with_backend_dataview.png | Bin .../work_with_backend_dataview_and_form.png | Bin .../work_with_backend_dataview_card.png | Bin .../integration/work_with_backend_form.png | Bin .../integration/work_with_backend_grid.png | Bin .../work_with_backend_grid_and_form.png | Bin .../work_with_backend_grid_card.png | Bin .../integration/work_with_backend_list.png | Bin .../work_with_backend_list_and_form.png | Bin .../work_with_backend_list_card.png | Bin .../integration/work_with_backend_save.png | Bin .../work_with_backend_simplevault.png | Bin .../integration/work_with_backend_tree.png | Bin .../img}/integration/work_with_frameworks.png | Bin {docs/assets => static/img}/layout/1c.png | Bin {docs/assets => static/img}/layout/2e.png | Bin {docs/assets => static/img}/layout/2u.png | Bin {docs/assets => static/img}/layout/3e.png | Bin {docs/assets => static/img}/layout/3j.png | Bin {docs/assets => static/img}/layout/3l.png | Bin {docs/assets => static/img}/layout/3t.png | Bin {docs/assets => static/img}/layout/3u.png | Bin {docs/assets => static/img}/layout/3w.png | Bin {docs/assets => static/img}/layout/4a.png | Bin {docs/assets => static/img}/layout/4c.png | Bin {docs/assets => static/img}/layout/4e.png | Bin {docs/assets => static/img}/layout/4f.png | Bin {docs/assets => static/img}/layout/4g.png | Bin {docs/assets => static/img}/layout/4h.png | Bin {docs/assets => static/img}/layout/4i.png | Bin {docs/assets => static/img}/layout/4j.png | Bin {docs/assets => static/img}/layout/4l.png | Bin {docs/assets => static/img}/layout/4t.png | Bin {docs/assets => static/img}/layout/4u.png | Bin {docs/assets => static/img}/layout/4w.png | Bin {docs/assets => static/img}/layout/5c.png | Bin {docs/assets => static/img}/layout/5e.png | Bin {docs/assets => static/img}/layout/5g.png | Bin {docs/assets => static/img}/layout/5h.png | Bin {docs/assets => static/img}/layout/5i.png | Bin {docs/assets => static/img}/layout/5k.png | Bin {docs/assets => static/img}/layout/5s.png | Bin {docs/assets => static/img}/layout/5u.png | Bin {docs/assets => static/img}/layout/5w.png | Bin {docs/assets => static/img}/layout/6a.png | Bin {docs/assets => static/img}/layout/6c.png | Bin {docs/assets => static/img}/layout/6e.png | Bin {docs/assets => static/img}/layout/6h.png | Bin {docs/assets => static/img}/layout/6i.png | Bin {docs/assets => static/img}/layout/6j.png | Bin {docs/assets => static/img}/layout/6w.png | Bin {docs/assets => static/img}/layout/7h.png | Bin {docs/assets => static/img}/layout/7i.png | Bin .../img}/layout/custom_css.png | Bin {docs/assets => static/img}/layout/layout.png | Bin .../img}/layout/layout_front.png | Bin .../img}/layout/line_type.png | Bin .../img}/layout/mixed_types.png | Bin .../img}/layout/space_type.png | Bin .../img}/layout/wide_type.png | Bin .../img}/layout/without_borders.png | Bin .../assets => static/img}/list/custom_css.png | Bin .../img}/list/custom_selection.png | Bin .../img}/list/custom_style.png | Bin .../img}/list/disable_selection.png | Bin {docs/assets => static/img}/list/editable.png | Bin .../img}/list/item_height.png | Bin .../assets => static/img}/list/list_front.png | Bin .../img}/list/list_height.png | Bin .../img}/list/list_template.png | Bin .../img}/list/multiselection.png | Bin {docs/assets => static/img}/menu/bottom.png | Bin {docs/assets => static/img}/menu/context.png | Bin .../img}/menu/context_menu.png | Bin .../img}/menu/context_right.png | Bin .../img}/menu/custom_icons.png | Bin .../img}/menu/custom_menu.png | Bin {docs/assets => static/img}/menu/hotkeys.png | Bin .../img}/menu/htmlcontent.png | Bin {docs/assets => static/img}/menu/menu.png | Bin .../assets => static/img}/menu/menu_front.png | Bin .../assets => static/img}/menu/menu_item.png | Bin .../assets => static/img}/menu/separator.png | Bin .../assets => static/img}/menu/separators.png | Bin {docs/assets => static/img}/menu/spacer.png | Bin .../img}/message/custom_style.png | Bin .../img}/message/dhx_alert.png | Bin .../img}/message/dhx_confirm.png | Bin .../img}/message/dhx_message.png | Bin .../img}/message/dhx_tooltip.png | Bin .../assets => static/img}/message/message.png | Bin .../img}/message/show_alert.png | Bin .../img}/message/show_confirm.png | Bin .../img}/message/show_message.png | Bin .../img}/message/show_tooltip.png | Bin .../img}/message/smart_tooltip.png | Bin .../img}/message/temp_dhxtooltip_image.png | Bin .../img}/optimus/active_view.png | Bin {docs/assets => static/img}/optimus/chart.png | Bin .../img}/optimus/dataview.png | Bin .../img}/optimus/demo/dashboard_demo.png | Bin .../img}/optimus/demo/examsystem_demo.png | Bin .../img}/optimus/demo/filemanager_demo.png | Bin .../img}/optimus/demo/geotracking_demo.png | Bin .../img}/optimus/demo/hospital_demo.png | Bin .../img}/optimus/demo/hotel_demo.png | Bin .../img}/optimus/demo/kpi_demo.png | Bin .../img}/optimus/edit_chart.png | Bin .../img}/optimus/edit_dataview.png | Bin .../img}/optimus/edit_grid.png | Bin .../img}/optimus/empty_view.png | Bin .../img}/optimus/first_view.png | Bin {docs/assets => static/img}/optimus/grid.png | Bin .../img}/optimus/second_view.png | Bin .../img}/optimus/start_optimus.png | Bin .../img}/pager/center_align.png | Bin .../img}/pager/combo_width.png | Bin {docs/assets => static/img}/pager/init.png | Bin .../assets => static/img}/pager/page_size.png | Bin {docs/assets => static/img}/pager/styling.png | Bin .../img}/pagination/center_align.png | Bin .../img}/pagination/combo_width.png | Bin .../assets => static/img}/pagination/init.png | Bin .../img}/pagination/page_size.png | Bin .../img}/pagination/styling.png | Bin .../img}/popup/custom_css.png | Bin .../img}/popup/popup_front.png | Bin {docs/assets => static/img}/ribbon/block.png | Bin {docs/assets => static/img}/ribbon/button.png | Bin .../img}/ribbon/button_ribbon.png | Bin .../img}/ribbon/custom_html.png | Bin .../img}/ribbon/custom_html_button.png | Bin .../img}/ribbon/custom_style.png | Bin .../assets => static/img}/ribbon/fa_icons.png | Bin .../img}/ribbon/front_ribbon.png | Bin .../img}/ribbon/icon_button.png | Bin .../img}/ribbon/image_button.png | Bin .../img}/ribbon/image_button_text.png | Bin {docs/assets => static/img}/ribbon/input.png | Bin .../assets => static/img}/ribbon/navitem.png | Bin .../img}/ribbon/regular_button.png | Bin .../img}/ribbon/ribbon_block.png | Bin .../img}/ribbon/ribbon_button.png | Bin .../img}/ribbon/ribbon_front.png | Bin .../img}/ribbon/select_button.png | Bin .../img}/ribbon/separator.png | Bin {docs/assets => static/img}/ribbon/spacer.png | Bin {docs/assets => static/img}/ribbon/title.png | Bin .../img}/sidebar/collapsed_sidebar.png | Bin .../img}/sidebar/custom_style.png | Bin .../img}/sidebar/fa_icons.png | Bin .../img}/sidebar/htmlcontent.png | Bin .../img}/sidebar/menuitem.png | Bin .../assets => static/img}/sidebar/navitem.png | Bin .../img}/sidebar/separator.png | Bin .../img}/sidebar/sidebar_front.png | Bin .../assets => static/img}/sidebar/spacer.png | Bin {docs/assets => static/img}/sidebar/title.png | Bin .../img}/slider/custom_style.png | Bin .../img}/slider/inverse_mode.png | Bin .../img}/slider/min_max_ticks_only.png | Bin .../img}/slider/range_mode.png | Bin {docs/assets => static/img}/slider/scale.png | Bin .../img}/slider/slider_front.png | Bin .../img}/slider/slider_label.png | Bin .../assets => static/img}/slider/tooltip.png | Bin .../img}/tabbar/active_tab.png | Bin .../img}/tabbar/close_button.png | Bin .../img}/tabbar/custom_style.png | Bin .../img}/tabbar/disabled_tab.png | Bin {docs/assets => static/img}/tabbar/mode.png | Bin .../img}/tabbar/no_content.png | Bin .../img}/tabbar/tabbar_align.png | Bin .../img}/tabbar/tabbar_front.png | Bin .../img}/tabbar/tabs_tooltips.png | Bin .../img}/themes/contrastdark_theme.png | Bin .../img}/themes/contrastlight_theme.png | Bin .../img}/themes/dark_theme.png | Bin .../img}/themes/light_theme.png | Bin .../img}/timepicker/amdm_false.png | Bin .../img}/timepicker/amdm_true.png | Bin .../img}/timepicker/custom_style.png | Bin .../img}/timepicker/dhx_timepicker.png | Bin .../assets => static/img}/toolbar/button.png | Bin .../assets => static/img}/toolbar/buttons.png | Bin .../img}/toolbar/custom_style.png | Bin .../img}/toolbar/disabled.png | Bin .../img}/toolbar/fa_icons.png | Bin .../img}/toolbar/front_toolbar.png | Bin .../img}/toolbar/html_button.png | Bin .../img}/toolbar/htmlcontent.png | Bin .../img}/toolbar/icon_button.png | Bin .../img}/toolbar/image_button.png | Bin .../img}/toolbar/image_button_text.png | Bin {docs/assets => static/img}/toolbar/input.png | Bin .../img}/toolbar/input_item.png | Bin .../img}/toolbar/menuitem.png | Bin .../assets => static/img}/toolbar/navitem.png | Bin .../img}/toolbar/regular_button.png | Bin .../img}/toolbar/select_button.png | Bin .../img}/toolbar/selectbutton.png | Bin .../img}/toolbar/separator.png | Bin .../assets => static/img}/toolbar/spacer.png | Bin .../img}/toolbar/text_item.png | Bin {docs/assets => static/img}/toolbar/title.png | Bin .../img}/toolbar/toolbar_front.png | Bin .../assets => static/img}/toolbar/tooltip.png | Bin .../img}/toolbar/two_state_button.png | Bin {docs/assets => static/img}/tree/checkbox.png | Bin .../img}/tree/custom_icons.png | Bin .../img}/tree/custom_style.png | Bin .../img}/tree/disable_selection.png | Bin .../img}/tree/drag_behaviour_child.png | Bin .../img}/tree/drag_behaviour_sibling.png | Bin {docs/assets => static/img}/tree/editable.png | Bin .../assets => static/img}/tree/tree_front.png | Bin .../img}/treegrid/cell_css.png | Bin .../img}/treegrid/cell_templates.png | Bin .../img}/treegrid/combobox_editor.png | Bin .../img}/treegrid/custom_style.png | Bin .../img}/treegrid/dropbehaviour_child.png | Bin .../treegrid/dropbehaviour_child_result.png | Bin .../img}/treegrid/dropbehaviour_sibling.png | Bin .../treegrid/dropbehaviour_sibling_result.png | Bin .../img}/treegrid/html_content.png | Bin .../img}/treegrid/mark_cell.png | Bin .../img}/treegrid/min_max_mark.png | Bin .../img}/treegrid/new_combobox_option.png | Bin .../img}/treegrid/row_css.png | Bin .../img}/treegrid/styling_footer.png | Bin .../img}/treegrid/styling_header.png | Bin .../img}/treegrid/styling_selection.png | Bin .../img}/treegrid/tooltip_template.png | Bin .../img}/treegrid/treegrid_front.png | Bin .../basic_initialization.png | Bin .../basic_application/bind_toolbar_grid.png | Bin .../img}/tutorial/basic_application/chart.png | Bin .../img}/tutorial/basic_application/file.png | Bin .../tutorial/basic_application/grid_003.png | Bin .../tutorial/basic_application/layout_002.png | Bin .../basic_application/toolbar_003.png | Bin .../binding_components/add_window.png | Bin .../binding_components/adding_item.png | Bin .../binding_components/binding_components.png | Bin .../binding_components/context_menu.png | Bin .../binding_components/editing_item.png | Bin .../img}/tutorial/binding_components/form.png | Bin .../tutorial/binding_components/toolbar.png | Bin .../tutorial/binding_components/window.png | Bin .../assets => static/img}/window/closable.png | Bin .../img}/window/custom_buttons.png | Bin .../img}/window/custom_style.png | Bin .../img}/window/modal_window.png | Bin .../assets => static/img}/window/movable.png | Bin .../img}/window/resizable.png | Bin .../img}/window/window_front.png | Bin .../img}/window/with_footer.png | Bin 616 files changed, 417 insertions(+), 322 deletions(-) create mode 100644 src/css/tutorial.module.scss rename {docs/assets => static/img}/api/toc/accordion.png (100%) rename {docs/assets => static/img}/api/toc/ajax.png (100%) rename {docs/assets => static/img}/api/toc/calendar.png (100%) rename {docs/assets => static/img}/api/toc/carousel.png (100%) rename {docs/assets => static/img}/api/toc/chart.png (100%) rename {docs/assets => static/img}/api/toc/colorpicker.png (100%) rename {docs/assets => static/img}/api/toc/combo.png (100%) rename {docs/assets => static/img}/api/toc/dataprocessor.png (100%) rename {docs/assets => static/img}/api/toc/dataselector.png (100%) rename {docs/assets => static/img}/api/toc/datastore.png (100%) rename {docs/assets => static/img}/api/toc/dataview.png (100%) rename {docs/assets => static/img}/api/toc/designer.png (100%) rename {docs/assets => static/img}/api/toc/editor.png (100%) rename {docs/assets => static/img}/api/toc/fileselector.png (100%) rename {docs/assets => static/img}/api/toc/form.png (100%) rename {docs/assets => static/img}/api/toc/gantt.png (100%) rename {docs/assets => static/img}/api/toc/grid.png (100%) rename {docs/assets => static/img}/api/toc/layout.png (100%) rename {docs/assets => static/img}/api/toc/list.png (100%) rename {docs/assets => static/img}/api/toc/menu.png (100%) rename {docs/assets => static/img}/api/toc/popup.png (100%) rename {docs/assets => static/img}/api/toc/ribbon.png (100%) rename {docs/assets => static/img}/api/toc/scheduler.png (100%) rename {docs/assets => static/img}/api/toc/sidebar.png (100%) rename {docs/assets => static/img}/api/toc/skinbuilder.png (100%) rename {docs/assets => static/img}/api/toc/slider.png (100%) rename {docs/assets => static/img}/api/toc/spreadsheet.png (100%) rename {docs/assets => static/img}/api/toc/tabbar.png (100%) rename {docs/assets => static/img}/api/toc/toolbar.png (100%) rename {docs/assets => static/img}/api/toc/tree.png (100%) rename {docs/assets => static/img}/api/toc/treegrid.png (100%) rename {docs/assets => static/img}/api/toc/vault.png (100%) rename {docs/assets => static/img}/api/toc/windows.png (100%) rename {docs/assets => static/img}/base_icons/dxi_icons.png (100%) rename {docs/assets => static/img}/calendar/blocked_dates.png (100%) rename {docs/assets => static/img}/calendar/calendar_blocked_days.png (100%) rename {docs/assets => static/img}/calendar/calendar_calendar_mode.png (100%) rename {docs/assets => static/img}/calendar/calendar_front.png (100%) rename {docs/assets => static/img}/calendar/calendar_in_div.png (100%) rename {docs/assets => static/img}/calendar/calendar_locale_rus.png (100%) rename {docs/assets => static/img}/calendar/calendar_marked.png (100%) rename {docs/assets => static/img}/calendar/calendar_material.png (100%) rename {docs/assets => static/img}/calendar/calendar_mode.png (100%) rename {docs/assets => static/img}/calendar/calendar_month_mode.png (100%) rename {docs/assets => static/img}/calendar/calendar_range_styling.png (100%) rename {docs/assets => static/img}/calendar/calendar_start_sunday.png (100%) rename {docs/assets => static/img}/calendar/calendar_width.png (100%) rename {docs/assets => static/img}/calendar/calendar_year_mode.png (100%) rename {docs/assets => static/img}/calendar/date_picker.png (100%) rename {docs/assets => static/img}/calendar/date_range.png (100%) rename {docs/assets => static/img}/calendar/locale.png (100%) rename {docs/assets => static/img}/calendar/marked_dates.png (100%) rename {docs/assets => static/img}/calendar/month_mode.png (100%) rename {docs/assets => static/img}/calendar/range_mode.png (100%) rename {docs/assets => static/img}/calendar/styled_calendar.png (100%) rename {docs/assets => static/img}/calendar/this_month_only.png (100%) rename {docs/assets => static/img}/calendar/timepicker_format.png (100%) rename {docs/assets => static/img}/calendar/tooltips.png (100%) rename {docs/assets => static/img}/calendar/week_number_column.png (100%) rename {docs/assets => static/img}/calendar/week_numbers.png (100%) rename {docs/assets => static/img}/calendar/weekstart_monday.png (100%) rename {docs/assets => static/img}/calendar/year_mode.png (100%) rename {docs/assets => static/img}/chart/area_overview.png (100%) rename {docs/assets => static/img}/chart/bar_gradient.png (100%) rename {docs/assets => static/img}/chart/bar_overview.png (100%) rename {docs/assets => static/img}/chart/custom_style.png (100%) rename {docs/assets => static/img}/chart/donut_overview.png (100%) rename {docs/assets => static/img}/chart/heatmap_overview.png (100%) rename {docs/assets => static/img}/chart/line_overview.png (100%) rename {docs/assets => static/img}/chart/pie_overview.png (100%) rename {docs/assets => static/img}/chart/radar_overview.png (100%) rename {docs/assets => static/img}/chart/scatter_overview.png (100%) rename {docs/assets => static/img}/chart/show_percent_values.png (100%) rename {docs/assets => static/img}/chart/show_text.png (100%) rename {docs/assets => static/img}/chart/show_tooltip.png (100%) rename {docs/assets => static/img}/chart/spline_overview.png (100%) rename {docs/assets => static/img}/chart/splinearea_overview.png (100%) rename {docs/assets => static/img}/chart/text_template.png (100%) rename {docs/assets => static/img}/chart/treemap.png (100%) rename {docs/assets => static/img}/chart/xbar_overview.png (100%) rename {docs/assets => static/img}/colorpicker/colorpicker_css.png (100%) rename {docs/assets => static/img}/colorpicker/colorpicker_front.png (100%) rename {docs/assets => static/img}/colorpicker/colorpicker_transparency.png (100%) rename {docs/assets => static/img}/colorpicker/custom_colors.png (100%) rename {docs/assets => static/img}/colorpicker/custom_palette.png (100%) rename {docs/assets => static/img}/colorpicker/default_palette.png (100%) rename {docs/assets => static/img}/colorpicker/no_shades_palette.png (100%) rename {docs/assets => static/img}/colorpicker/palette_only.png (100%) rename {docs/assets => static/img}/colorpicker/picker_only.png (100%) rename {docs/assets => static/img}/combo/combo_front.png (100%) rename {docs/assets => static/img}/combo/combo_template.png (100%) rename {docs/assets => static/img}/combo/custom_css.png (100%) rename {docs/assets => static/img}/combo/custom_filter.png (100%) rename {docs/assets => static/img}/combo/disabled.png (100%) rename {docs/assets => static/img}/combo/height.png (100%) rename {docs/assets => static/img}/combo/label_left.png (100%) rename {docs/assets => static/img}/combo/label_top.png (100%) rename {docs/assets => static/img}/combo/new_value.png (100%) rename {docs/assets => static/img}/combo/options_group.png (100%) rename {docs/assets => static/img}/combo/placeholder.png (100%) rename {docs/assets => static/img}/combo/readonly.png (100%) rename {docs/assets => static/img}/combo/selected_item.png (100%) rename {docs/assets => static/img}/dataview/arrow_navigation.png (100%) rename {docs/assets => static/img}/dataview/custom_items_styles.png (100%) rename {docs/assets => static/img}/dataview/custom_selection_styles.png (100%) rename {docs/assets => static/img}/dataview/custom_widget_styles.png (100%) rename {docs/assets => static/img}/dataview/dataview_front.png (100%) rename {docs/assets => static/img}/dataview/dataview_height.png (100%) rename {docs/assets => static/img}/dataview/disable_selection.png (100%) rename {docs/assets => static/img}/dataview/editable.png (100%) rename {docs/assets => static/img}/dataview/gap.png (100%) rename {docs/assets => static/img}/dataview/item_height.png (100%) rename {docs/assets => static/img}/dataview/items_in_row.png (100%) rename {docs/assets => static/img}/dataview/multiselection.png (100%) rename {docs/assets => static/img}/dataview/template.png (100%) rename {docs/assets => static/img}/form/alignment_around.png (100%) rename {docs/assets => static/img}/form/alignment_between.png (100%) rename {docs/assets => static/img}/form/alignment_center.png (100%) rename {docs/assets => static/img}/form/alignment_end.png (100%) rename {docs/assets => static/img}/form/alignment_evenly.png (100%) rename {docs/assets => static/img}/form/alignment_start.png (100%) rename {docs/assets => static/img}/form/blocks.png (100%) rename {docs/assets => static/img}/form/custom_style.png (100%) rename {docs/assets => static/img}/form/custom_styles.png (100%) rename {docs/assets => static/img}/form/disabled.png (100%) rename {docs/assets => static/img}/form/form_avatar.png (100%) rename {docs/assets => static/img}/form/form_block.png (100%) rename {docs/assets => static/img}/form/form_button.png (100%) rename {docs/assets => static/img}/form/form_checkbox.png (100%) rename {docs/assets => static/img}/form/form_checkboxgroup.png (100%) rename {docs/assets => static/img}/form/form_colorpicker.png (100%) rename {docs/assets => static/img}/form/form_combo.png (100%) rename {docs/assets => static/img}/form/form_datepicker.png (100%) rename {docs/assets => static/img}/form/form_fieldset.png (100%) rename {docs/assets => static/img}/form/form_front.png (100%) rename {docs/assets => static/img}/form/form_init.png (100%) rename {docs/assets => static/img}/form/form_input.png (100%) rename {docs/assets => static/img}/form/form_radio.png (100%) rename {docs/assets => static/img}/form/form_select.png (100%) rename {docs/assets => static/img}/form/form_simplevault.png (100%) rename {docs/assets => static/img}/form/form_slider.png (100%) rename {docs/assets => static/img}/form/form_text.png (100%) rename {docs/assets => static/img}/form/form_textarea.png (100%) rename {docs/assets => static/img}/form/form_timepicker.png (100%) rename {docs/assets => static/img}/form/form_toggle.png (100%) rename {docs/assets => static/img}/form/form_togglegroup.png (100%) rename {docs/assets => static/img}/form/length_validate.png (100%) rename {docs/assets => static/img}/form/required_fields.png (100%) rename {docs/assets => static/img}/form/set_focus.png (100%) rename {docs/assets => static/img}/form/value_validate.png (100%) rename {docs/assets => static/img}/grid/blockselection_module.png (100%) rename {docs/assets => static/img}/grid/cell_templates.png (100%) rename {docs/assets => static/img}/grid/cellcss.png (100%) rename {docs/assets => static/img}/grid/col_number_validation.png (100%) rename {docs/assets => static/img}/grid/combobox_editor.png (100%) rename {docs/assets => static/img}/grid/desired_setcell.png (100%) rename {docs/assets => static/img}/grid/dragpanel_module.png (100%) rename {docs/assets => static/img}/grid/footer_bottom_position.png (100%) rename {docs/assets => static/img}/grid/footer_relative_position.png (100%) rename {docs/assets => static/img}/grid/grid_front.png (100%) rename {docs/assets => static/img}/grid/html_content.png (100%) rename {docs/assets => static/img}/grid/mark_cell.png (100%) rename {docs/assets => static/img}/grid/markcells.png (100%) rename {docs/assets => static/img}/grid/multi_level_nesting.png (100%) rename {docs/assets => static/img}/grid/multisort_grouped_data.png (100%) rename {docs/assets => static/img}/grid/multisorting_data.png (100%) rename {docs/assets => static/img}/grid/new_combobox_option.png (100%) rename {docs/assets => static/img}/grid/range_setcell.png (100%) rename {docs/assets => static/img}/grid/row_expander.png (100%) rename {docs/assets => static/img}/grid/rowcss.png (100%) rename {docs/assets => static/img}/grid/set_cell.png (100%) rename {docs/assets => static/img}/grid/styling_grid.png (100%) rename {docs/assets => static/img}/grid/styling_header.png (100%) rename {docs/assets => static/img}/grid/styling_selection.png (100%) rename {docs/assets => static/img}/grid/subgrid_specific_rows.png (100%) rename {docs/assets => static/img}/grid/tooltip_template.png (100%) rename {docs/assets => static/img}/guides/dhx_typescript.png (100%) rename {docs/assets => static/img}/guides/typescript.png (100%) rename {docs/assets => static/img}/guides/typescript1.png (100%) rename {docs/assets => static/img}/icons/calendar.svg (100%) rename {docs/assets => static/img}/icons/chart.svg (100%) rename {docs/assets => static/img}/icons/colorpicker.svg (100%) rename {docs/assets => static/img}/icons/combo.svg (100%) rename {docs/assets => static/img}/icons/contextmenu.svg (100%) rename {docs/assets => static/img}/icons/dataview.svg (100%) rename {docs/assets => static/img}/icons/diagram.svg (100%) rename {docs/assets => static/img}/icons/editor.svg (100%) rename {docs/assets => static/img}/icons/form.svg (100%) rename {docs/assets => static/img}/icons/gantt.svg (100%) rename {docs/assets => static/img}/icons/grid.svg (100%) rename {docs/assets => static/img}/icons/layout.svg (100%) rename {docs/assets => static/img}/icons/list.svg (100%) rename {docs/assets => static/img}/icons/menu.svg (100%) rename {docs/assets => static/img}/icons/message.svg (100%) rename {docs/assets => static/img}/icons/pivot.svg (100%) rename {docs/assets => static/img}/icons/popup.svg (100%) rename {docs/assets => static/img}/icons/ribbon.svg (100%) rename {docs/assets => static/img}/icons/scheduler.svg (100%) rename {docs/assets => static/img}/icons/sidebar.svg (100%) rename {docs/assets => static/img}/icons/slider.svg (100%) rename {docs/assets => static/img}/icons/spreadsheet.svg (100%) rename {docs/assets => static/img}/icons/tabbar.svg (100%) rename {docs/assets => static/img}/icons/timepicker.svg (100%) rename {docs/assets => static/img}/icons/toolbar.svg (100%) rename {docs/assets => static/img}/icons/tooltip.svg (100%) rename {docs/assets => static/img}/icons/tree.svg (100%) rename {docs/assets => static/img}/icons/vault.svg (100%) rename {docs/assets => static/img}/icons/window.svg (100%) rename {docs/assets => static/img}/integration/custom_scroll_optimus.png (100%) rename {docs/assets => static/img}/integration/work_with_backend.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_chart.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_dataview.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_dataview_and_form.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_dataview_card.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_form.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_grid.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_grid_and_form.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_grid_card.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_list.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_list_and_form.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_list_card.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_save.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_simplevault.png (100%) rename {docs/assets => static/img}/integration/work_with_backend_tree.png (100%) rename {docs/assets => static/img}/integration/work_with_frameworks.png (100%) rename {docs/assets => static/img}/layout/1c.png (100%) rename {docs/assets => static/img}/layout/2e.png (100%) rename {docs/assets => static/img}/layout/2u.png (100%) rename {docs/assets => static/img}/layout/3e.png (100%) rename {docs/assets => static/img}/layout/3j.png (100%) rename {docs/assets => static/img}/layout/3l.png (100%) rename {docs/assets => static/img}/layout/3t.png (100%) rename {docs/assets => static/img}/layout/3u.png (100%) rename {docs/assets => static/img}/layout/3w.png (100%) rename {docs/assets => static/img}/layout/4a.png (100%) rename {docs/assets => static/img}/layout/4c.png (100%) rename {docs/assets => static/img}/layout/4e.png (100%) rename {docs/assets => static/img}/layout/4f.png (100%) rename {docs/assets => static/img}/layout/4g.png (100%) rename {docs/assets => static/img}/layout/4h.png (100%) rename {docs/assets => static/img}/layout/4i.png (100%) rename {docs/assets => static/img}/layout/4j.png (100%) rename {docs/assets => static/img}/layout/4l.png (100%) rename {docs/assets => static/img}/layout/4t.png (100%) rename {docs/assets => static/img}/layout/4u.png (100%) rename {docs/assets => static/img}/layout/4w.png (100%) rename {docs/assets => static/img}/layout/5c.png (100%) rename {docs/assets => static/img}/layout/5e.png (100%) rename {docs/assets => static/img}/layout/5g.png (100%) rename {docs/assets => static/img}/layout/5h.png (100%) rename {docs/assets => static/img}/layout/5i.png (100%) rename {docs/assets => static/img}/layout/5k.png (100%) rename {docs/assets => static/img}/layout/5s.png (100%) rename {docs/assets => static/img}/layout/5u.png (100%) rename {docs/assets => static/img}/layout/5w.png (100%) rename {docs/assets => static/img}/layout/6a.png (100%) rename {docs/assets => static/img}/layout/6c.png (100%) rename {docs/assets => static/img}/layout/6e.png (100%) rename {docs/assets => static/img}/layout/6h.png (100%) rename {docs/assets => static/img}/layout/6i.png (100%) rename {docs/assets => static/img}/layout/6j.png (100%) rename {docs/assets => static/img}/layout/6w.png (100%) rename {docs/assets => static/img}/layout/7h.png (100%) rename {docs/assets => static/img}/layout/7i.png (100%) rename {docs/assets => static/img}/layout/custom_css.png (100%) rename {docs/assets => static/img}/layout/layout.png (100%) rename {docs/assets => static/img}/layout/layout_front.png (100%) rename {docs/assets => static/img}/layout/line_type.png (100%) rename {docs/assets => static/img}/layout/mixed_types.png (100%) rename {docs/assets => static/img}/layout/space_type.png (100%) rename {docs/assets => static/img}/layout/wide_type.png (100%) rename {docs/assets => static/img}/layout/without_borders.png (100%) rename {docs/assets => static/img}/list/custom_css.png (100%) rename {docs/assets => static/img}/list/custom_selection.png (100%) rename {docs/assets => static/img}/list/custom_style.png (100%) rename {docs/assets => static/img}/list/disable_selection.png (100%) rename {docs/assets => static/img}/list/editable.png (100%) rename {docs/assets => static/img}/list/item_height.png (100%) rename {docs/assets => static/img}/list/list_front.png (100%) rename {docs/assets => static/img}/list/list_height.png (100%) rename {docs/assets => static/img}/list/list_template.png (100%) rename {docs/assets => static/img}/list/multiselection.png (100%) rename {docs/assets => static/img}/menu/bottom.png (100%) rename {docs/assets => static/img}/menu/context.png (100%) rename {docs/assets => static/img}/menu/context_menu.png (100%) rename {docs/assets => static/img}/menu/context_right.png (100%) rename {docs/assets => static/img}/menu/custom_icons.png (100%) rename {docs/assets => static/img}/menu/custom_menu.png (100%) rename {docs/assets => static/img}/menu/hotkeys.png (100%) rename {docs/assets => static/img}/menu/htmlcontent.png (100%) rename {docs/assets => static/img}/menu/menu.png (100%) rename {docs/assets => static/img}/menu/menu_front.png (100%) rename {docs/assets => static/img}/menu/menu_item.png (100%) rename {docs/assets => static/img}/menu/separator.png (100%) rename {docs/assets => static/img}/menu/separators.png (100%) rename {docs/assets => static/img}/menu/spacer.png (100%) rename {docs/assets => static/img}/message/custom_style.png (100%) rename {docs/assets => static/img}/message/dhx_alert.png (100%) rename {docs/assets => static/img}/message/dhx_confirm.png (100%) rename {docs/assets => static/img}/message/dhx_message.png (100%) rename {docs/assets => static/img}/message/dhx_tooltip.png (100%) rename {docs/assets => static/img}/message/message.png (100%) rename {docs/assets => static/img}/message/show_alert.png (100%) rename {docs/assets => static/img}/message/show_confirm.png (100%) rename {docs/assets => static/img}/message/show_message.png (100%) rename {docs/assets => static/img}/message/show_tooltip.png (100%) rename {docs/assets => static/img}/message/smart_tooltip.png (100%) rename {docs/assets => static/img}/message/temp_dhxtooltip_image.png (100%) rename {docs/assets => static/img}/optimus/active_view.png (100%) rename {docs/assets => static/img}/optimus/chart.png (100%) rename {docs/assets => static/img}/optimus/dataview.png (100%) rename {docs/assets => static/img}/optimus/demo/dashboard_demo.png (100%) rename {docs/assets => static/img}/optimus/demo/examsystem_demo.png (100%) rename {docs/assets => static/img}/optimus/demo/filemanager_demo.png (100%) rename {docs/assets => static/img}/optimus/demo/geotracking_demo.png (100%) rename {docs/assets => static/img}/optimus/demo/hospital_demo.png (100%) rename {docs/assets => static/img}/optimus/demo/hotel_demo.png (100%) rename {docs/assets => static/img}/optimus/demo/kpi_demo.png (100%) rename {docs/assets => static/img}/optimus/edit_chart.png (100%) rename {docs/assets => static/img}/optimus/edit_dataview.png (100%) rename {docs/assets => static/img}/optimus/edit_grid.png (100%) rename {docs/assets => static/img}/optimus/empty_view.png (100%) rename {docs/assets => static/img}/optimus/first_view.png (100%) rename {docs/assets => static/img}/optimus/grid.png (100%) rename {docs/assets => static/img}/optimus/second_view.png (100%) rename {docs/assets => static/img}/optimus/start_optimus.png (100%) rename {docs/assets => static/img}/pager/center_align.png (100%) rename {docs/assets => static/img}/pager/combo_width.png (100%) rename {docs/assets => static/img}/pager/init.png (100%) rename {docs/assets => static/img}/pager/page_size.png (100%) rename {docs/assets => static/img}/pager/styling.png (100%) rename {docs/assets => static/img}/pagination/center_align.png (100%) rename {docs/assets => static/img}/pagination/combo_width.png (100%) rename {docs/assets => static/img}/pagination/init.png (100%) rename {docs/assets => static/img}/pagination/page_size.png (100%) rename {docs/assets => static/img}/pagination/styling.png (100%) rename {docs/assets => static/img}/popup/custom_css.png (100%) rename {docs/assets => static/img}/popup/popup_front.png (100%) rename {docs/assets => static/img}/ribbon/block.png (100%) rename {docs/assets => static/img}/ribbon/button.png (100%) rename {docs/assets => static/img}/ribbon/button_ribbon.png (100%) rename {docs/assets => static/img}/ribbon/custom_html.png (100%) rename {docs/assets => static/img}/ribbon/custom_html_button.png (100%) rename {docs/assets => static/img}/ribbon/custom_style.png (100%) rename {docs/assets => static/img}/ribbon/fa_icons.png (100%) rename {docs/assets => static/img}/ribbon/front_ribbon.png (100%) rename {docs/assets => static/img}/ribbon/icon_button.png (100%) rename {docs/assets => static/img}/ribbon/image_button.png (100%) rename {docs/assets => static/img}/ribbon/image_button_text.png (100%) rename {docs/assets => static/img}/ribbon/input.png (100%) rename {docs/assets => static/img}/ribbon/navitem.png (100%) rename {docs/assets => static/img}/ribbon/regular_button.png (100%) rename {docs/assets => static/img}/ribbon/ribbon_block.png (100%) rename {docs/assets => static/img}/ribbon/ribbon_button.png (100%) rename {docs/assets => static/img}/ribbon/ribbon_front.png (100%) rename {docs/assets => static/img}/ribbon/select_button.png (100%) rename {docs/assets => static/img}/ribbon/separator.png (100%) rename {docs/assets => static/img}/ribbon/spacer.png (100%) rename {docs/assets => static/img}/ribbon/title.png (100%) rename {docs/assets => static/img}/sidebar/collapsed_sidebar.png (100%) rename {docs/assets => static/img}/sidebar/custom_style.png (100%) rename {docs/assets => static/img}/sidebar/fa_icons.png (100%) rename {docs/assets => static/img}/sidebar/htmlcontent.png (100%) rename {docs/assets => static/img}/sidebar/menuitem.png (100%) rename {docs/assets => static/img}/sidebar/navitem.png (100%) rename {docs/assets => static/img}/sidebar/separator.png (100%) rename {docs/assets => static/img}/sidebar/sidebar_front.png (100%) rename {docs/assets => static/img}/sidebar/spacer.png (100%) rename {docs/assets => static/img}/sidebar/title.png (100%) rename {docs/assets => static/img}/slider/custom_style.png (100%) rename {docs/assets => static/img}/slider/inverse_mode.png (100%) rename {docs/assets => static/img}/slider/min_max_ticks_only.png (100%) rename {docs/assets => static/img}/slider/range_mode.png (100%) rename {docs/assets => static/img}/slider/scale.png (100%) rename {docs/assets => static/img}/slider/slider_front.png (100%) rename {docs/assets => static/img}/slider/slider_label.png (100%) rename {docs/assets => static/img}/slider/tooltip.png (100%) rename {docs/assets => static/img}/tabbar/active_tab.png (100%) rename {docs/assets => static/img}/tabbar/close_button.png (100%) rename {docs/assets => static/img}/tabbar/custom_style.png (100%) rename {docs/assets => static/img}/tabbar/disabled_tab.png (100%) rename {docs/assets => static/img}/tabbar/mode.png (100%) rename {docs/assets => static/img}/tabbar/no_content.png (100%) rename {docs/assets => static/img}/tabbar/tabbar_align.png (100%) rename {docs/assets => static/img}/tabbar/tabbar_front.png (100%) rename {docs/assets => static/img}/tabbar/tabs_tooltips.png (100%) rename {docs/assets => static/img}/themes/contrastdark_theme.png (100%) rename {docs/assets => static/img}/themes/contrastlight_theme.png (100%) rename {docs/assets => static/img}/themes/dark_theme.png (100%) rename {docs/assets => static/img}/themes/light_theme.png (100%) rename {docs/assets => static/img}/timepicker/amdm_false.png (100%) rename {docs/assets => static/img}/timepicker/amdm_true.png (100%) rename {docs/assets => static/img}/timepicker/custom_style.png (100%) rename {docs/assets => static/img}/timepicker/dhx_timepicker.png (100%) rename {docs/assets => static/img}/toolbar/button.png (100%) rename {docs/assets => static/img}/toolbar/buttons.png (100%) rename {docs/assets => static/img}/toolbar/custom_style.png (100%) rename {docs/assets => static/img}/toolbar/disabled.png (100%) rename {docs/assets => static/img}/toolbar/fa_icons.png (100%) rename {docs/assets => static/img}/toolbar/front_toolbar.png (100%) rename {docs/assets => static/img}/toolbar/html_button.png (100%) rename {docs/assets => static/img}/toolbar/htmlcontent.png (100%) rename {docs/assets => static/img}/toolbar/icon_button.png (100%) rename {docs/assets => static/img}/toolbar/image_button.png (100%) rename {docs/assets => static/img}/toolbar/image_button_text.png (100%) rename {docs/assets => static/img}/toolbar/input.png (100%) rename {docs/assets => static/img}/toolbar/input_item.png (100%) rename {docs/assets => static/img}/toolbar/menuitem.png (100%) rename {docs/assets => static/img}/toolbar/navitem.png (100%) rename {docs/assets => static/img}/toolbar/regular_button.png (100%) rename {docs/assets => static/img}/toolbar/select_button.png (100%) rename {docs/assets => static/img}/toolbar/selectbutton.png (100%) rename {docs/assets => static/img}/toolbar/separator.png (100%) rename {docs/assets => static/img}/toolbar/spacer.png (100%) rename {docs/assets => static/img}/toolbar/text_item.png (100%) rename {docs/assets => static/img}/toolbar/title.png (100%) rename {docs/assets => static/img}/toolbar/toolbar_front.png (100%) rename {docs/assets => static/img}/toolbar/tooltip.png (100%) rename {docs/assets => static/img}/toolbar/two_state_button.png (100%) rename {docs/assets => static/img}/tree/checkbox.png (100%) rename {docs/assets => static/img}/tree/custom_icons.png (100%) rename {docs/assets => static/img}/tree/custom_style.png (100%) rename {docs/assets => static/img}/tree/disable_selection.png (100%) rename {docs/assets => static/img}/tree/drag_behaviour_child.png (100%) rename {docs/assets => static/img}/tree/drag_behaviour_sibling.png (100%) rename {docs/assets => static/img}/tree/editable.png (100%) rename {docs/assets => static/img}/tree/tree_front.png (100%) rename {docs/assets => static/img}/treegrid/cell_css.png (100%) rename {docs/assets => static/img}/treegrid/cell_templates.png (100%) rename {docs/assets => static/img}/treegrid/combobox_editor.png (100%) rename {docs/assets => static/img}/treegrid/custom_style.png (100%) rename {docs/assets => static/img}/treegrid/dropbehaviour_child.png (100%) rename {docs/assets => static/img}/treegrid/dropbehaviour_child_result.png (100%) rename {docs/assets => static/img}/treegrid/dropbehaviour_sibling.png (100%) rename {docs/assets => static/img}/treegrid/dropbehaviour_sibling_result.png (100%) rename {docs/assets => static/img}/treegrid/html_content.png (100%) rename {docs/assets => static/img}/treegrid/mark_cell.png (100%) rename {docs/assets => static/img}/treegrid/min_max_mark.png (100%) rename {docs/assets => static/img}/treegrid/new_combobox_option.png (100%) rename {docs/assets => static/img}/treegrid/row_css.png (100%) rename {docs/assets => static/img}/treegrid/styling_footer.png (100%) rename {docs/assets => static/img}/treegrid/styling_header.png (100%) rename {docs/assets => static/img}/treegrid/styling_selection.png (100%) rename {docs/assets => static/img}/treegrid/tooltip_template.png (100%) rename {docs/assets => static/img}/treegrid/treegrid_front.png (100%) rename {docs/assets => static/img}/tutorial/basic_application/basic_initialization.png (100%) rename {docs/assets => static/img}/tutorial/basic_application/bind_toolbar_grid.png (100%) rename {docs/assets => static/img}/tutorial/basic_application/chart.png (100%) rename {docs/assets => static/img}/tutorial/basic_application/file.png (100%) rename {docs/assets => static/img}/tutorial/basic_application/grid_003.png (100%) rename {docs/assets => static/img}/tutorial/basic_application/layout_002.png (100%) rename {docs/assets => static/img}/tutorial/basic_application/toolbar_003.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/add_window.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/adding_item.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/binding_components.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/context_menu.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/editing_item.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/form.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/toolbar.png (100%) rename {docs/assets => static/img}/tutorial/binding_components/window.png (100%) rename {docs/assets => static/img}/window/closable.png (100%) rename {docs/assets => static/img}/window/custom_buttons.png (100%) rename {docs/assets => static/img}/window/custom_style.png (100%) rename {docs/assets => static/img}/window/modal_window.png (100%) rename {docs/assets => static/img}/window/movable.png (100%) rename {docs/assets => static/img}/window/resizable.png (100%) rename {docs/assets => static/img}/window/window_front.png (100%) rename {docs/assets => static/img}/window/with_footer.png (100%) diff --git a/docs/calendar/configuring.md b/docs/calendar/configuring.md index 6d6eae1d2..0c826c355 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..1ee24a66e 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) +![](/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) +![](/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..96a24b93d 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) +![Date picker](/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..e28cfd2fa 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) +![DHTMLX Calendar](/img/calendar/calendar_front.png) ## Features diff --git a/docs/calendar/localizing_calendar.md b/docs/calendar/localizing_calendar.md index 711e9b109..51fe16c1c 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) +![](/img/calendar/locale.png) ## Default locale diff --git a/docs/calendar/operating_calendar.md b/docs/calendar/operating_calendar.md index ee331bc62..f6cb687d0 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) +![](/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) +![](/img/calendar/tooltips.png) ~~~js const special_days = { diff --git a/docs/chart/charts_overview.md b/docs/chart/charts_overview.md index 658628b7f..03183f367 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](/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](/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) +![Bar chart](/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) +![X-Bar chart](/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](/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](/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) +![Pie and Pie 3D charts](/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](/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](/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](/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](/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](/img/chart/heatmap_overview.png) **Related samples:** diff --git a/docs/chart/customization.md b/docs/chart/customization.md index e9b1bcd0c..41219c455 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..83412d091 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) +![](/img/chart/line_overview.png) ## Features diff --git a/docs/colorpicker/configuration.md b/docs/colorpicker/configuration.md index 7caa733b6..5494bd9cb 100644 --- a/docs/colorpicker/configuration.md +++ b/docs/colorpicker/configuration.md @@ -25,7 +25,7 @@ const palette = [ ]; ~~~ -![](../assets/colorpicker/default_palette.png) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..ba5bfb309 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) +![](/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..62fd4536c 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) +![DHTMLX Colorpicker](/img/colorpicker/colorpicker_front.png) ## Features diff --git a/docs/combobox/configuration.md b/docs/combobox/configuration.md index 086aa97e1..507adf05f 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) +![](/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) +![](/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) +![](/img/combo/label_left.png) or @@ -115,13 +115,13 @@ const combo = new dhx.Combobox("combo_container",{ }); ~~~ -![](../assets/combo/label_top.png) +![](/img/combo/label_top.png) **Related sample**: [Combobox. Label position](https://snippet.dhtmlx.com/2936fray) ## Number of selected options -![](../assets/combo/selected_item.png) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..97f23f5a6 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) +![](/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) +![Custom filter](/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..66bcf8ff7 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) +![](/img/combo/combo_front.png) ## Features diff --git a/docs/common_features/custom_scroll.md b/docs/common_features/custom_scroll.md index e9b79a084..f4eb1838a 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) +![](/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..923d02bda 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) +![](/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..1f5c0d5bd 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..bd327f2ed 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) +![Custom dataview styles](/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) +![Custom items styles](/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) +![Custom selection styles](/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..05d5c2817 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) +![](/img/dataview/dataview_front.png) ## Features diff --git a/docs/form/avatar.md b/docs/form/avatar.md index 4348dad7a..92d192c3e 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 control](/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..d6f0fbacd 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 control](/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..c1ccd95c4 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](/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..ee3eedd58 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 control](/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..7ebfadf2c 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 control](/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..5da31063c 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](/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..1cfd3ef9b 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 control](/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..636ddf566 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) +![](/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..5dd23c2af 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) +![Custom style](/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) +![Styling Form and its controls](/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..28b9f933a 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 control](/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..e28da4667 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 structure](/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..084aa398e 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) +![](/img/form/form_front.png) ## Features diff --git a/docs/form/input.md b/docs/form/input.md index d4175ad31..937ff26a1 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 control](/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..4fb62ebac 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 control](/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..1a2672a52 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 control](/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..1c4897e92 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 control](/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..ea6bd5a1d 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 control](/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..80b009817 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](/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..ffb2d7a78 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 control](/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..c40f6d400 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](/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..17a3477c2 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 control](/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..02b9a00af 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 control](/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..59559ac7d 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) +![Required fields](/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) +![Value validate](/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) +![Length validate](/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) +![](/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/configuration.md b/docs/grid/configuration.md index e7c859570..7cc9a7c36 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) +![](/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) +![Validation of columns with the number type](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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: diff --git a/docs/grid/customization.md b/docs/grid/customization.md index fd7ed8500..ae6e0104d 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) +![Styling grid](/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) +![Styling selection](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/img/grid/mark_cell.png) **Related sample**: [Grid. Mark cells](https://snippet.dhtmlx.com/buirf16n) ## Adding template to cells -![](../assets/grid/cell_templates.png) +![](/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) +![](/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..4a63def91 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) +![](/img/grid/grid_front.png) ## Features diff --git a/docs/grid/treegrid_mode.md b/docs/grid/treegrid_mode.md index e2ce1e879..82f18d357 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) +![](/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) | +|![](/img/treegrid/dropbehaviour_child.png) | ![](/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) | +|![](/img/treegrid/dropbehaviour_sibling.png) | ![](/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..0f622e786 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) +![](/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) +![](/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..fc8bbd79a 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) +![](/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..d59a6586e 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) +![](/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..b819f2487 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) +![](/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) +![](/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) +![](/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..46e0a9c3e 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/img/integration/work_with_backend_dataview_and_form.png) -![](../assets/integration/work_with_backend_dataview_card.png) +![](/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) +![](/img/integration/work_with_backend_list_and_form.png) -![](../assets/integration/work_with_backend_list_card.png) +![](/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) +![](/img/integration/work_with_backend_grid_and_form.png) -![](../assets/integration/work_with_backend_grid_card.png) +![](/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) +![](/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..bcc756bb7 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) | +| ![](/img/layout/line_type.png) | ![](/img/layout/wide_type.png) | ![](/img/layout/space_type.png) | ![](/img/layout/without_borders.png) | diff --git a/docs/layout/customization.md b/docs/layout/customization.md index 55b75dc6a..7f4c3854a 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) +![Styling cells](/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..f88549bea 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) +![](/img/layout/layout.png) ## Features diff --git a/docs/layout/layout_patterns.md b/docs/layout/layout_patterns.md index 5dfd2de05..07c2bd949 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) +[![](/img/layout/1c.png)](https://snippet.dhtmlx.com/mzlodj28) +[![](/img/layout/2e.png)](https://snippet.dhtmlx.com/1oqx20ve) +[![](/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) +[![](/img/layout/3e.png)](https://snippet.dhtmlx.com/v0w2p60c) +[![](/img/layout/3w.png)](https://snippet.dhtmlx.com/ag01de2d) +[![](/img/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) +[![](/img/layout/3l.png)](https://snippet.dhtmlx.com/bozlxz69) +[![](/img/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) +[![](/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) +[![](/img/layout/4e.png)](https://snippet.dhtmlx.com/m6nlb0bf) +[![](/img/layout/4w.png)](https://snippet.dhtmlx.com/uwb6hql7) +[![](/img/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) +[![](/img/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) +[![](/img/layout/4h.png)](https://snippet.dhtmlx.com/5ekykk2n) +[![](/img/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) +[![](/img/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) +[![](/img/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) +[![](/img/layout/4j.png)](https://snippet.dhtmlx.com/8km3g1k2) +[![](/img/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) +[![](/img/layout/4g.png)](https://snippet.dhtmlx.com/mwrfozsu) +[![](/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) +[![](/img/layout/5e.png)](https://snippet.dhtmlx.com/wnn4xfu4) +[![](/img/layout/5w.png)](https://snippet.dhtmlx.com/jo5z28kr) +[![](/img/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) +[![](/img/layout/5h.png)](https://snippet.dhtmlx.com/xr6jv9kk) +[![](/img/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) +[![](/img/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) +[![](/img/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) +[![](/img/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) +[![](/img/layout/5c.png)](https://snippet.dhtmlx.com/rkpj3k4h) diff --git a/docs/list/configuration.md b/docs/list/configuration.md index 764a6df0e..b2a616d06 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..e3e9c4a39 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) +![Styling List](/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) +![Styling items](/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) +![Custom selection](/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..ffecb7617 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) +![](/img/list/list_front.png) ## Features diff --git a/docs/menu/configuring_menu_items.md b/docs/menu/configuring_menu_items.md index 80052a5b2..de98dc089 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](/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) +![](/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) +![](/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) +![DHX Toolbar spacer](/img/menu/spacer.png) ### Adding Spacer diff --git a/docs/menu/creating_context_menu.md b/docs/menu/creating_context_menu.md index 3db94f181..c0ddc5682 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) +![DHX Context Menu](/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..64f06c16a 100644 --- a/docs/menu/customization.md +++ b/docs/menu/customization.md @@ -40,7 +40,7 @@ const dataset = [ ]; ~~~ -![](../assets/menu/custom_icons.png) +![](/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) +![](/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..a0c026a13 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) +![](/img/menu/menu_front.png) ## Features diff --git a/docs/message/configuration.md b/docs/message/configuration.md index 619d0d37e..a245e1928 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) +![](/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) +![](/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) +![](/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) +![](/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) +![Smart positioning](/img/message/smart_tooltip.png) ### Tooltip API diff --git a/docs/message/customization.md b/docs/message/customization.md index 30ef5b811..9636c7fdf 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) +![](/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..36038c041 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) +![](/img/message/dhx_confirm.png) ## Features diff --git a/docs/message/overview.md b/docs/message/overview.md index 13bf9e7cd..a8dc05b7a 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) +![DHTMLX Message](/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) +![DHX Alert](/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) +![DHX Confirm](/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) +![DHX Tooltip](/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/optimus_guides/dashboard_demo.md b/docs/optimus_guides/dashboard_demo.md index cfbc991bf..ad675b973 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) +![](/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..9c5f7f65c 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) +![](/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..1b4e34219 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) +![](/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..4164cdba1 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) +![](/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..f5fd86e8d 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) +![](/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..e073e6c90 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) +![](/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..db4de0436 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) +![](/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) +![](/img/optimus/empty_view.png) After clicking on the "Second" button you should see the view, as in: -![](../assets/optimus/second_view.png) +![](/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) +![](/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) +![](/img/optimus/dataview.png) the Chart widget on the second page: -![](../assets/optimus/chart.png) +![](/img/optimus/chart.png) and the Grid widget on the third page: -![](../assets/optimus/grid.png) +![](/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) +![](/img/optimus/edit_dataview.png) Click the second button to see the chart view, as in: -![](../assets/optimus/edit_chart.png) +![](/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) +![](/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..8edf952b4 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) +![](/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..2f618de18 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) +![](/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..3b52eaffa 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) +![](/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) +![](/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..fdfe3b0ea 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) +![Styling Pagination](/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..fa7f4f064 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) +![](/img/pagination/init.png) ## Features diff --git a/docs/popup/customization.md b/docs/popup/customization.md index 0384fc9d8..05d3260e7 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) +![Styling Popup](/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..45af5f579 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) +![](/img/popup/popup_front.png) ## Features diff --git a/docs/ribbon/block.md b/docs/ribbon/block.md index c78feed18..f6bfdc8b6 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) +![DHX Ribbon Block groups controls](/img/ribbon/ribbon_block.png) ## Creating a Block diff --git a/docs/ribbon/button.md b/docs/ribbon/button.md index c2aac8a4d..03c5554ad 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) +![](/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..62dfc7179 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) +![](/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..4884935b0 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) +![](/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) +![Styling Ribbon](/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..1eb4482b9 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) +![DHX Ribbon imageButton](/img/ribbon/image_button.png) ## Adding ImageButton diff --git a/docs/ribbon/index.md b/docs/ribbon/index.md index 36f9b134b..c1a0a7d4d 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) +![](/img/ribbon/ribbon_front.png) ## Features diff --git a/docs/ribbon/input.md b/docs/ribbon/input.md index 54eb7cc24..9c007e829 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) +![](/img/ribbon/input.png) ## Adding Input diff --git a/docs/ribbon/navitem.md b/docs/ribbon/navitem.md index 694435076..d21f765f1 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) +![](/img/ribbon/navitem.png) ## Adding NavItem diff --git a/docs/ribbon/selectbutton.md b/docs/ribbon/selectbutton.md index 6a4d5f292..5738d2367 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) +![DHX Select Button](/img/ribbon/select_button.png) ## Adding SelectButton diff --git a/docs/ribbon/separator.md b/docs/ribbon/separator.md index 8f261da3c..c868de873 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) +![DHX Ribbon with separators](/img/ribbon/separator.png) ## Adding Separator diff --git a/docs/ribbon/spacer.md b/docs/ribbon/spacer.md index 39f0a2d6d..243b4ed7a 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) +![DHX Ribbon spacer](/img/ribbon/spacer.png) ## Adding Spacer diff --git a/docs/sidebar/customhtmlbutton.md b/docs/sidebar/customhtmlbutton.md index 3b91e0313..af8d4d3da 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) +![](/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..41573c1a9 100644 --- a/docs/sidebar/customization.md +++ b/docs/sidebar/customization.md @@ -49,7 +49,7 @@ const sidebarData = [ ]; ~~~ -![](../assets/sidebar/fa_icons.png) +![](/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) +![Styling Sidebar](/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..c91378f64 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) +![](/img/sidebar/sidebar_front.png) ## Features diff --git a/docs/sidebar/menuitem.md b/docs/sidebar/menuitem.md index 2949e074c..9cebb7569 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) +![](/img/sidebar/menuitem.png) ## Adding MenuItem diff --git a/docs/sidebar/navitem.md b/docs/sidebar/navitem.md index e3e9ea9a9..c1b07893d 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) +![](/img/sidebar/navitem.png) ## Adding NavItem diff --git a/docs/sidebar/separator.md b/docs/sidebar/separator.md index 62688c93c..acf9f9a9b 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) +![](/img/sidebar/separator.png) ## Adding Separator diff --git a/docs/sidebar/spacer.md b/docs/sidebar/spacer.md index 585313bb7..fb8cd3b4f 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) +![](/img/sidebar/spacer.png) ## Adding Spacer diff --git a/docs/sidebar/title.md b/docs/sidebar/title.md index b67575bbf..75123d510 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) +![](/img/sidebar/title.png) ## Adding Title control diff --git a/docs/slider/configuring_slider.md b/docs/slider/configuring_slider.md index d1b897cc5..960bf363a 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..7f6814d1e 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) +![Styling Slider](/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..337c9dce4 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) +![](/img/slider/slider_front.png) ## Features diff --git a/docs/slider/range_slider.md b/docs/slider/range_slider.md index 96ec4f62c..fe6baf3ac 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) +![](/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..ec42ffbd3 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..5bd632bc9 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) +![Styling Tabbar](/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..7e3c2e29a 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) +![](/img/tabbar/tabbar_front.png) ## Features diff --git a/docs/themes/contrast_dark_theme.md b/docs/themes/contrast_dark_theme.md index 710e1681a..9a5f4af79 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) +![dark high contrast theme](/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..d33f8fd6b 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) +![light high contrast theme](/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..7973b6f0b 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) +![dark theme](/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..5a8cc4104 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) +![light theme](/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..e127a2951 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) +![Actions buttons](/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) +![24-hour clock](/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) +![12-hour clock](/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..7a4c88d57 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) +![Styling Timepicker](/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..4e914a6ff 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) +![](/img/timepicker/dhx_timepicker.png) ## Features diff --git a/docs/toolbar/button.md b/docs/toolbar/button.md index a089924a9..516a2d602 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) +![](/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..17722cabf 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) +![](/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..e3d14c365 100644 --- a/docs/toolbar/customization.md +++ b/docs/toolbar/customization.md @@ -33,7 +33,7 @@ const toolbarData = [ ]; ~~~ -![](../assets/toolbar/fa_icons.png) +![](/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) +![Styling Toolbar](/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..48678ff21 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) +![](/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..270e03cb8 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) +![](/img/toolbar/toolbar_front.png) ## Features diff --git a/docs/toolbar/input.md b/docs/toolbar/input.md index 533dcae9f..57f10ca19 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) +![](/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..e08f55d0a 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) +![](/img/toolbar/menuitem.png) ## Adding MenuItem diff --git a/docs/toolbar/navitem.md b/docs/toolbar/navitem.md index 6d8b89598..ee09d2bc2 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) +![](/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..7a6e17dd3 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) +![](/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..04d7be568 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) +![](/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..e39237530 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) +![](/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..c842630f7 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) +![](/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..e3b6d7fdd 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) +![](/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) +![](/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..695616aee 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) +![](/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) +![](/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) +![](/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..e9a51d376 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) +![Child](/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) +![Sibling](/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..1ea729339 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) +![](/img/tree/tree_front.png) ## Features diff --git a/docs/tree/setting_tree_appearance.md b/docs/tree/setting_tree_appearance.md index 803e879c5..f6efc0f73 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) +![Styling Tree](/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) +![](/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..6868b13ee 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). ::: - +
+ +![](/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..92049071d 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. - +
+ +![](/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..d51aea30f 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 - +
+ +![](/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..a6360b2e3 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); ~~~ - +
+ +![](/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..16a383a90 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. - +
+ +![](/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..a1126f1b9 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: - +
+ +![](/img/tutorial/basic_application/chart.png) + +
diff --git a/docs/tutorial/binding_components/index.md b/docs/tutorial/binding_components/index.md index d7dbf3460..8f61a57b4 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. - +
+ +![](/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..0f0691028 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 - +
+ +![](/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..b044a2bb2 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. - +
+ +![](/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..588401732 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([ ]); ~~~ - +
+ +![](/img/tutorial/binding_components/toolbar.png) + +
diff --git a/docs/tutorial/binding_components/step6.md b/docs/tutorial/binding_components/step6.md index 605b899ac..3096abf5e 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(){ }; ~~~ - +
+ +![](/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. - +
+ +![](/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: - +
+ +![](/img/tutorial/binding_components/binding_components.png) + +
diff --git a/docs/window/configuration.md b/docs/window/configuration.md index debff3334..8155fb1c1 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) +![](/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) +![](/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) +![](/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) +![](/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) +![](/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..6275c925f 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) +![](/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) +![](/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..116280f28 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) +![](/img/window/window_front.png) ## Features 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 From 5a2c62b8ef3387b525d1de7f0a710c6214c2cf72 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Fri, 26 Jun 2026 14:22:05 +0300 Subject: [PATCH 2/5] [update] add descriptive alt text to doc images - rewrite alt text for all 320 Markdown images across docs to be descriptive and SEO-friendly, ending with "in DHTMLX Suite" - replaces empty and generic alts (e.g. ![], ![Line chart]) with text describing the actual screenshot content, written by viewing each image - only the [...] alt portion changed; image paths, indentation and surrounding text untouched; tags and external images not affected --- docs/calendar/configuring.md | 22 ++++---- docs/calendar/customization.md | 4 +- docs/calendar/datepicker.md | 2 +- docs/calendar/index.md | 2 +- docs/calendar/localizing_calendar.md | 2 +- docs/calendar/operating_calendar.md | 4 +- docs/chart/charts_overview.md | 24 ++++----- docs/chart/customization.md | 12 ++--- docs/chart/index.md | 2 +- docs/colorpicker/configuration.md | 14 ++--- docs/colorpicker/customization.md | 2 +- docs/colorpicker/index.md | 2 +- docs/combobox/configuration.md | 18 +++---- docs/combobox/customization.md | 4 +- docs/combobox/index.md | 2 +- docs/common_features/custom_scroll.md | 2 +- docs/common_features/using_typescript.md | 2 +- docs/dataview/configuration.md | 18 +++---- docs/dataview/customization.md | 6 +-- docs/dataview/index.md | 2 +- docs/form/avatar.md | 2 +- docs/form/button.md | 2 +- docs/form/calendar.md | 2 +- docs/form/checkbox.md | 2 +- docs/form/checkboxgroup.md | 2 +- docs/form/colorpicker.md | 2 +- docs/form/combo.md | 2 +- docs/form/configuration.md | 2 +- docs/form/customization.md | 4 +- docs/form/fieldset.md | 2 +- docs/form/how_to_start.md | 2 +- docs/form/index.md | 2 +- docs/form/input.md | 2 +- docs/form/radiogroup.md | 2 +- docs/form/select.md | 2 +- docs/form/simplevault.md | 2 +- docs/form/slider.md | 2 +- docs/form/text.md | 2 +- docs/form/textarea.md | 2 +- docs/form/timepicker.md | 2 +- docs/form/toggle.md | 2 +- docs/form/togglegroup.md | 2 +- docs/form/work_with_form.md | 8 +-- docs/grid/configuration.md | 20 +++---- docs/grid/customization.md | 18 +++---- docs/grid/index.md | 2 +- docs/grid/treegrid_mode.md | 6 +-- docs/grid/usage.md | 4 +- docs/grid/usage_blockselection.md | 2 +- docs/grid/usage_dragpanel.md | 2 +- docs/grid/usage_selection.md | 6 +-- docs/integration/suite_and_backend.md | 30 +++++------ docs/layout/cell_configuration.md | 2 +- docs/layout/customization.md | 2 +- docs/layout/index.md | 2 +- docs/layout/layout_patterns.md | 60 ++++++++++----------- docs/list/configuration.md | 12 ++--- docs/list/customization.md | 6 +-- docs/list/index.md | 2 +- docs/menu/configuring_menu_items.md | 8 +-- docs/menu/creating_context_menu.md | 2 +- docs/menu/customization.md | 4 +- docs/menu/index.md | 2 +- docs/message/configuration.md | 10 ++-- docs/message/customization.md | 2 +- docs/message/index.md | 2 +- docs/message/overview.md | 8 +-- docs/optimus_guides/dashboard_demo.md | 2 +- docs/optimus_guides/exam_demo.md | 2 +- docs/optimus_guides/filemanager_demo.md | 2 +- docs/optimus_guides/geotracking_demo.md | 2 +- docs/optimus_guides/hospital_demo.md | 2 +- docs/optimus_guides/hotel_demo.md | 2 +- docs/optimus_guides/how_to_start_optimus.md | 20 +++---- docs/optimus_guides/index.md | 2 +- docs/optimus_guides/kpi_demo.md | 2 +- docs/pagination/configuration.md | 4 +- docs/pagination/customization.md | 2 +- docs/pagination/index.md | 2 +- docs/popup/customization.md | 2 +- docs/popup/index.md | 2 +- docs/ribbon/block.md | 2 +- docs/ribbon/button.md | 2 +- docs/ribbon/customhtmlbutton.md | 2 +- docs/ribbon/customization.md | 4 +- docs/ribbon/image_button.md | 2 +- docs/ribbon/index.md | 2 +- docs/ribbon/input.md | 2 +- docs/ribbon/navitem.md | 2 +- docs/ribbon/selectbutton.md | 2 +- docs/ribbon/separator.md | 2 +- docs/ribbon/spacer.md | 2 +- docs/sidebar/customhtmlbutton.md | 2 +- docs/sidebar/customization.md | 4 +- docs/sidebar/index.md | 2 +- docs/sidebar/menuitem.md | 2 +- docs/sidebar/navitem.md | 2 +- docs/sidebar/separator.md | 2 +- docs/sidebar/spacer.md | 2 +- docs/sidebar/title.md | 2 +- docs/slider/configuring_slider.md | 10 ++-- docs/slider/customization.md | 2 +- docs/slider/index.md | 2 +- docs/slider/range_slider.md | 2 +- docs/tabbar/configuring_tabbar.md | 10 ++-- docs/tabbar/customization.md | 2 +- docs/tabbar/index.md | 2 +- docs/themes/contrast_dark_theme.md | 2 +- docs/themes/contrast_light_theme.md | 2 +- docs/themes/dark_theme.md | 2 +- docs/themes/default_theme.md | 2 +- docs/timepicker/configuration.md | 6 +-- docs/timepicker/customization.md | 2 +- docs/timepicker/index.md | 2 +- docs/toolbar/button.md | 2 +- docs/toolbar/customhtmlbutton.md | 2 +- docs/toolbar/customization.md | 4 +- docs/toolbar/image_button.md | 2 +- docs/toolbar/index.md | 2 +- docs/toolbar/input.md | 2 +- docs/toolbar/menuitem.md | 2 +- docs/toolbar/navitem.md | 2 +- docs/toolbar/selectbutton.md | 2 +- docs/toolbar/separator.md | 2 +- docs/toolbar/spacer.md | 2 +- docs/toolbar/title.md | 2 +- docs/tree/api/tree_dropbehaviour_config.md | 4 +- docs/tree/configuration.md | 6 +-- docs/tree/drag_and_drop_handling.md | 4 +- docs/tree/index.md | 2 +- docs/tree/setting_tree_appearance.md | 4 +- docs/tutorial/basic_application/index.md | 2 +- docs/tutorial/basic_application/step1.md | 2 +- docs/tutorial/basic_application/step2.md | 2 +- docs/tutorial/basic_application/step3.md | 2 +- docs/tutorial/basic_application/step5.md | 2 +- docs/tutorial/basic_application/step7.md | 2 +- docs/tutorial/binding_components/index.md | 2 +- docs/tutorial/binding_components/step1.md | 2 +- docs/tutorial/binding_components/step4.md | 2 +- docs/tutorial/binding_components/step5.md | 2 +- docs/tutorial/binding_components/step6.md | 6 +-- docs/window/configuration.md | 10 ++-- docs/window/customization.md | 4 +- docs/window/index.md | 2 +- 145 files changed, 320 insertions(+), 320 deletions(-) diff --git a/docs/calendar/configuring.md b/docs/calendar/configuring.md index 0c826c355..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"); ~~~ -![](/img/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", { }); ~~~ -![](/img/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", { }); ~~~ -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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", { }); ~~~ -![](/img/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 -![](/img/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 1ee24a66e..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: -![](/img/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 -![](/img/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 96a24b93d..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](/img/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 e28cfd2fa..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](/img/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 51fe16c1c..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. -![](/img/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 f6cb687d0..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. -![](/img/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: -![](/img/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 03183f367..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](/img/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](/img/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](/img/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](/img/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](/img/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](/img/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](/img/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](/img/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](/img/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](/img/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](/img/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](/img/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 41219c455..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. -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 83412d091..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). -![](/img/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 5494bd9cb..4a07a729c 100644 --- a/docs/colorpicker/configuration.md +++ b/docs/colorpicker/configuration.md @@ -25,7 +25,7 @@ const palette = [ ]; ~~~ -![](/img/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", { }); ~~~ -![](/img/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. -![](/img/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 -![](/img/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. -![](/img/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", { }); ~~~ -![](/img/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", { }); ~~~ -![](/img/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 ba5bfb309..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. -![](/img/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 62fd4536c..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](/img/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 507adf05f..315fef852 100644 --- a/docs/combobox/configuration.md +++ b/docs/combobox/configuration.md @@ -16,7 +16,7 @@ const combo = new dhx.Combobox("combo_container", { }); ~~~ -![](/img/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 -![](/img/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",{ }); ~~~ -![](/img/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",{ }); ~~~ -![](/img/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 -![](/img/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 -![](/img/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. -![](/img/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 -![](/img/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 -![](/img/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 97f23f5a6..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 -![](/img/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](/img/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 66bcf8ff7..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). -![](/img/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/custom_scroll.md b/docs/common_features/custom_scroll.md index f4eb1838a..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. -![](/img/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 923d02bda..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. -![](/img/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 1f5c0d5bd..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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 bd327f2ed..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](/img/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](/img/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](/img/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 05d5c2817..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). -![](/img/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 92d192c3e..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](/img/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 d6f0fbacd..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](/img/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 c1ccd95c4..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](/img/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 ee3eedd58..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](/img/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 7ebfadf2c..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](/img/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 5da31063c..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](/img/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 1cfd3ef9b..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](/img/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 636ddf566..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 -![](/img/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 5dd23c2af..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](/img/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](/img/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 28b9f933a..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](/img/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 e28da4667..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](/img/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 084aa398e..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). -![](/img/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 937ff26a1..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](/img/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 4fb62ebac..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](/img/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 1a2672a52..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](/img/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 1c4897e92..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](/img/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 ea6bd5a1d..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](/img/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 80b009817..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](/img/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 ffb2d7a78..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](/img/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 c40f6d400..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](/img/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 17a3477c2..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](/img/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 02b9a00af..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](/img/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 59559ac7d..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](/img/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](/img/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](/img/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 -![](/img/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/configuration.md b/docs/grid/configuration.md index 7cc9a7c36..5e21ad397 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 -![](/img/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](/img/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. -![](/img/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: -![](/img/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. -![](/img/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. -![](/img/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. ::: -![](/img/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", { }); ~~~ -![](/img/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. -![](/img/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. -![](/img/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: diff --git a/docs/grid/customization.md b/docs/grid/customization.md index ae6e0104d..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](/img/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](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 ~~~ -![](/img/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 -![](/img/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 -![](/img/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 4a63def91..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). -![](/img/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 82f18d357..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. -![](/img/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 | |-----------------------------------------------------------|-----------------------------------------------------------| -|![](/img/treegrid/dropbehaviour_child.png) | ![](/img/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 | |----------------------------------------------------------- |----------------------------------------------------------- | -|![](/img/treegrid/dropbehaviour_sibling.png) | ![](/img/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 0f622e786..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. -![](/img/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" }); ~~~ -![](/img/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 fc8bbd79a..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. -![](/img/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 d59a6586e..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. -![](/img/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 b819f2487..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 -![](/img/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: -![](/img/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: -![](/img/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 46e0a9c3e..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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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) -![](/img/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 -![](/img/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) -![](/img/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 -![](/img/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) -![](/img/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 -![](/img/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 bcc756bb7..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" | | ----------------------------------- | ----------------------------------- | ------------------------------------ | ----------------------------------------- | -| ![](/img/layout/line_type.png) | ![](/img/layout/wide_type.png) | ![](/img/layout/space_type.png) | ![](/img/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 7f4c3854a..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](/img/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 f88549bea..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). -![](/img/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 07c2bd949..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.** -[![](/img/layout/1c.png)](https://snippet.dhtmlx.com/mzlodj28) -[![](/img/layout/2e.png)](https://snippet.dhtmlx.com/1oqx20ve) -[![](/img/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) -[![](/img/layout/3e.png)](https://snippet.dhtmlx.com/v0w2p60c) -[![](/img/layout/3w.png)](https://snippet.dhtmlx.com/ag01de2d) -[![](/img/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) -[![](/img/layout/3l.png)](https://snippet.dhtmlx.com/bozlxz69) -[![](/img/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) -[![](/img/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) -[![](/img/layout/4e.png)](https://snippet.dhtmlx.com/m6nlb0bf) -[![](/img/layout/4w.png)](https://snippet.dhtmlx.com/uwb6hql7) -[![](/img/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) -[![](/img/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) -[![](/img/layout/4h.png)](https://snippet.dhtmlx.com/5ekykk2n) -[![](/img/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) -[![](/img/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) -[![](/img/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) -[![](/img/layout/4j.png)](https://snippet.dhtmlx.com/8km3g1k2) -[![](/img/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) -[![](/img/layout/4g.png)](https://snippet.dhtmlx.com/mwrfozsu) -[![](/img/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) -[![](/img/layout/5e.png)](https://snippet.dhtmlx.com/wnn4xfu4) -[![](/img/layout/5w.png)](https://snippet.dhtmlx.com/jo5z28kr) -[![](/img/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) -[![](/img/layout/5h.png)](https://snippet.dhtmlx.com/xr6jv9kk) -[![](/img/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) -[![](/img/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) -[![](/img/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) -[![](/img/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) -[![](/img/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 b2a616d06..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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 e3e9c4a39..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](/img/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](/img/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](/img/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 ffecb7617..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). -![](/img/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 de98dc089..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](/img/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). -![](/img/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. -![](/img/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](/img/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 c0ddc5682..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](/img/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 64f06c16a..a5e50a05e 100644 --- a/docs/menu/customization.md +++ b/docs/menu/customization.md @@ -40,7 +40,7 @@ const dataset = [ ]; ~~~ -![](/img/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. -![](/img/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 a0c026a13..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). -![](/img/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 a245e1928..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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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](/img/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 9636c7fdf..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 -![](/img/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 36038c041..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). -![](/img/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 a8dc05b7a..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](/img/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](/img/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](/img/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](/img/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/optimus_guides/dashboard_demo.md b/docs/optimus_guides/dashboard_demo.md index ad675b973..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 добавить ссылку на демку на картинку и под картинкой) -![](/img/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 9c5f7f65c..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 добавить ссылку на демку на картинку и под картинкой) -![](/img/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 1b4e34219..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 добавить ссылку на демку на картинку и под картинкой) -![](/img/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 4164cdba1..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 добавить ссылку на демку на картинку и под картинкой) -![](/img/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 f5fd86e8d..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 добавить ссылку на демку на картинку и под картинкой) -![](/img/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 e073e6c90..22a845443 100644 --- a/docs/optimus_guides/hotel_demo.md +++ b/docs/optimus_guides/hotel_demo.md @@ -8,7 +8,7 @@ description: description [comment]: # (todo добавить ссылку на демку на картинку и под картинкой) -![](/img/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 db4de0436..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: -![](/img/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: -![](/img/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: -![](/img/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: -![](/img/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: -![](/img/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: -![](/img/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: -![](/img/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: -![](/img/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: -![](/img/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. -![](/img/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 8edf952b4..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: -![](/img/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 2f618de18..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 добавить ссылку на демку на картинку и под картинкой) -![](/img/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 3b52eaffa..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 -![](/img/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 -![](/img/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 fdfe3b0ea..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](/img/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 fa7f4f064..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). -![](/img/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 05d3260e7..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](/img/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 45af5f579..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). -![](/img/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 f6bfdc8b6..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](/img/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 03c5554ad..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. -![](/img/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 62dfc7179..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). -![](/img/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 4884935b0..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: -![](/img/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](/img/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 1eb4482b9..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](/img/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 c1a0a7d4d..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). -![](/img/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 9c007e829..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. -![](/img/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 d21f765f1..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. -![](/img/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 5738d2367..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](/img/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 c868de873..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](/img/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 243b4ed7a..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](/img/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 af8d4d3da..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). -![](/img/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 41573c1a9..f0ca2638f 100644 --- a/docs/sidebar/customization.md +++ b/docs/sidebar/customization.md @@ -49,7 +49,7 @@ const sidebarData = [ ]; ~~~ -![](/img/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](/img/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 c91378f64..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). -![](/img/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 9cebb7569..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. -![](/img/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 c1b07893d..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. -![](/img/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 acf9f9a9b..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. -![](/img/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 fb8cd3b4f..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. -![](/img/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 75123d510..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. -![](/img/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 960bf363a..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. -![](/img/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 -![](/img/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 -![](/img/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. -![](/img/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. -![](/img/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 7f6814d1e..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](/img/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 337c9dce4..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). -![](/img/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 fe6baf3ac..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. -![](/img/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 ec42ffbd3..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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 5bd632bc9..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](/img/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 7e3c2e29a..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). -![](/img/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 9a5f4af79..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](/img/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 d33f8fd6b..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](/img/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 7973b6f0b..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](/img/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 5a8cc4104..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](/img/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 e127a2951..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](/img/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](/img/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](/img/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 7a4c88d57..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](/img/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 4e914a6ff..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). -![](/img/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 516a2d602..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. -![](/img/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 17722cabf..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). -![](/img/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 e3d14c365..cb3949603 100644 --- a/docs/toolbar/customization.md +++ b/docs/toolbar/customization.md @@ -33,7 +33,7 @@ const toolbarData = [ ]; ~~~ -![](/img/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](/img/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 48678ff21..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. -![](/img/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 270e03cb8..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). -![](/img/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 57f10ca19..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. -![](/img/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 e08f55d0a..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. -![](/img/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 ee09d2bc2..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. -![](/img/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 7a6e17dd3..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. -![](/img/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 04d7be568..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. -![](/img/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 e39237530..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. -![](/img/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 c842630f7..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. -![](/img/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 e3b6d7fdd..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 -![](/img/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 -![](/img/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 695616aee..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 -![](/img/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 -![](/img/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 -![](/img/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 e9a51d376..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](/img/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](/img/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 1ea729339..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). -![](/img/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 f6efc0f73..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](/img/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 -![](/img/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 6868b13ee..4c9d94df3 100644 --- a/docs/tutorial/basic_application/index.md +++ b/docs/tutorial/basic_application/index.md @@ -25,7 +25,7 @@ Download the demo app [here](https://dhtmlx.com/x/download/docs/basic_applicatio
-![](/img/tutorial/basic_application/basic_initialization.png) +![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 92049071d..81115c9db 100644 --- a/docs/tutorial/basic_application/step1.md +++ b/docs/tutorial/basic_application/step1.md @@ -13,7 +13,7 @@ Let's start our tutorial with preparing a file for our future app:
-![](/img/tutorial/basic_application/file.png) +![File explorer showing the contact_manager folder with an index file in DHTMLX Suite](/img/tutorial/basic_application/file.png)
diff --git a/docs/tutorial/basic_application/step2.md b/docs/tutorial/basic_application/step2.md index d51aea30f..037043bcd 100644 --- a/docs/tutorial/basic_application/step2.md +++ b/docs/tutorial/basic_application/step2.md @@ -13,7 +13,7 @@ Our application will have the following structure:
-![](/img/tutorial/basic_application/layout_002.png) +![Layout scheme with a toolbar row above grid and chart cells in DHTMLX Suite](/img/tutorial/basic_application/layout_002.png)
diff --git a/docs/tutorial/basic_application/step3.md b/docs/tutorial/basic_application/step3.md index a6360b2e3..33625a4c8 100644 --- a/docs/tutorial/basic_application/step3.md +++ b/docs/tutorial/basic_application/step3.md @@ -49,7 +49,7 @@ layout.cell("toolbar-cell").attach(toolbar);
-![](/img/tutorial/basic_application/toolbar_003.png) +![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/step5.md b/docs/tutorial/basic_application/step5.md index 16a383a90..d69944597 100644 --- a/docs/tutorial/basic_application/step5.md +++ b/docs/tutorial/basic_application/step5.md @@ -29,7 +29,7 @@ toolbar.events.on("Click", function(id,e){
-![](/img/tutorial/basic_application/bind_toolbar_grid.png) +![Contacts grid filled with user data after clicking the Load toolbar button in DHTMLX Suite](/img/tutorial/basic_application/bind_toolbar_grid.png)
diff --git a/docs/tutorial/basic_application/step7.md b/docs/tutorial/basic_application/step7.md index a1126f1b9..35abb19ba 100644 --- a/docs/tutorial/basic_application/step7.md +++ b/docs/tutorial/basic_application/step7.md @@ -91,7 +91,7 @@ After finishing all the steps described in the tutorial, you get a mini app that
-![](/img/tutorial/basic_application/chart.png) +![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 8f61a57b4..8cd84f84e 100644 --- a/docs/tutorial/binding_components/index.md +++ b/docs/tutorial/binding_components/index.md @@ -13,7 +13,7 @@ Besides, this tutorial will help you to learn how to edit data in the Grid, add
-![](/img/tutorial/binding_components/binding_components.png) +![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/tutorial/binding_components/step1.md b/docs/tutorial/binding_components/step1.md index 0f0691028..360c888d2 100644 --- a/docs/tutorial/binding_components/step1.md +++ b/docs/tutorial/binding_components/step1.md @@ -44,7 +44,7 @@ We pass two parameters to the method:
-![](/img/tutorial/binding_components/window.png) +![Empty modal window titled Editing item with Cancel and Apply footer buttons in DHTMLX Suite](/img/tutorial/binding_components/window.png)
diff --git a/docs/tutorial/binding_components/step4.md b/docs/tutorial/binding_components/step4.md index b044a2bb2..f5da19678 100644 --- a/docs/tutorial/binding_components/step4.md +++ b/docs/tutorial/binding_components/step4.md @@ -83,7 +83,7 @@ After that a right-click on a grid cell will call a context menu we have specifi
-![](/img/tutorial/binding_components/context_menu.png) +![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 588401732..20f0e5d17 100644 --- a/docs/tutorial/binding_components/step5.md +++ b/docs/tutorial/binding_components/step5.md @@ -32,7 +32,7 @@ toolbar.data.parse([
-![](/img/tutorial/binding_components/toolbar.png) +![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 3096abf5e..ac1472fff 100644 --- a/docs/tutorial/binding_components/step6.md +++ b/docs/tutorial/binding_components/step6.md @@ -33,7 +33,7 @@ function openAddWindow(){
-![](/img/tutorial/binding_components/adding_item.png) +![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)
@@ -49,7 +49,7 @@ In all these cases we'll call the **openEditWindow** function to display the edi
-![](/img/tutorial/binding_components/editing_item.png) +![Editing item window with form fields prefilled from the selected grid row in DHTMLX Suite](/img/tutorial/binding_components/editing_item.png)
@@ -168,7 +168,7 @@ When you complete the steps described in this tutorial, you'll get an advanced d
-![](/img/tutorial/binding_components/binding_components.png) +![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/window/configuration.md b/docs/window/configuration.md index 8155fb1c1..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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 -![](/img/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 6275c925f..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. -![](/img/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. -![](/img/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 116280f28..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). -![](/img/window/window_front.png) +![DHTMLX Window titled WINDOW showing a scrollable list of dhtmlx components in DHTMLX Suite](/img/window/window_front.png) ## Features From 45a22f288360faa11f86ec690b8f54536fe13f4b Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Mon, 29 Jun 2026 12:55:08 +0300 Subject: [PATCH 3/5] [update] disable editUrl in docusaurus config - comment out editUrl to remove "edit this page" links --- docusaurus.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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: { From 82f39a9904386e8010516a7926f7089a58ecf37f Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 1 Jul 2026 13:27:01 +0300 Subject: [PATCH 4/5] [add] Grid accessibility and keyboard navigation docs - new Grid accessibility guide (docs/grid/accessibility.md): WAI-ARIA roles/attributes, selection modes, keyboard model, high-contrast themes - whatsnew 9.3.5 release notes and migration note: Home/End and Page Up/Down now move the active cell instead of only scrolling - reworked Grid keyboard navigation section in configuration.md; key names wrapped in across the accessibility guides - cross-links to the accessibility guide from the editable, keyNavigation, selection, and type configs; accessibility page added to the sidebar --- docs/common_features/accessibility_support.md | 20 +- docs/grid/accessibility.md | 254 ++++++++++++++++++ docs/grid/api/grid_editable_config.md | 4 + docs/grid/api/grid_keynavigation_config.md | 4 +- docs/grid/api/grid_selection_config.md | 3 +- docs/grid/api/grid_type_config.md | 4 +- docs/grid/configuration.md | 241 +++++++++++++---- docs/migration.md | 16 +- docs/whatsnew.md | 29 ++ sidebars.js | 1 + 10 files changed, 506 insertions(+), 70 deletions(-) create mode 100644 docs/grid/accessibility.md 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/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 5e21ad397..071164bc4 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -3159,7 +3159,7 @@ For information on working with the History API, read the [Work with History mod ## Keyboard navigation -DHTMLX Grid provides the keyboard navigation that will help you manipulate your grid faster. +DHTMLX Grid provides the keyboard navigation that will help you manipulate your grid faster. Shortcuts are organized into **zones** - the body, header, and footer - and are resolved by where the focus currently is. Focus enters the grid through hidden focus sentinels and moves between the zones with the Arrow and Tab keys. For ARIA semantics, the focus model, and configuration recipes, refer to the following guide: [Grid accessibility](grid/accessibility.md). ### Default shortcut keys @@ -3168,23 +3168,15 @@ The navigation shortcut keys and keys combinations that Grid enables by default - - + + - - + + - - - - - - - - - + @@ -3226,44 +3218,60 @@ The list of the shortcut keys and their combinations used for moving selection b
PageUpscrolls Grid up to the height of the visible content (without change of the selected cell)PageUpmoves the selected cell up by one page of visible rows; when no cell is selected, scrolls Grid up to the height of the visible content
PageDownscrolls Grid down to the height of the visible content (without change of the selected cell)PageDownmoves the selected cell down by one page of visible rows; when no cell is selected, scrolls Grid down to the height of the visible content
Homenavigates to the beginning of the Grid content (without change of the selected cell)
Endnavigates 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
- + - + - + - + - + - + - + - + - - + + + + + + - - + + + + + + + + + + + + + +
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
Tab moves selection to the next horizontal cell or the first cell of the next rowHomemoves selection to the first cell (column) of the current row
Endmoves selection to the last cell (column) of the current row
Shit+Tab moves selection to the previous horizontal cell or to the first cell of the previous rowCtrl+Homemoves selection to the first cell of the grid
Ctrl+Endmoves selection to the last cell of the grid
Tabmoves selection to the next horizontal cell or the first cell of the next row; at the end of the grid moves the focus into the footer (when it exists) or out of the grid
Shift+Tabmoves selection to the previous horizontal cell or to the last cell of the previous row; at the beginning of the grid moves the focus into the header or out of the grid
@@ -3273,37 +3281,61 @@ The combinations of the shortcut keys listed below do not work when the `selecti - + - + - + - + - + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + +
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
Shift+Homeextends the selection to the first cell of the current row
Shift+Endextends the selection to the last cell of the current row
Ctrl+Shift+Homeextends the selection to the first cell of the grid
Ctrl+Shift+Endextends the selection to the last cell of the grid
Shift+PageUpextends the selection up by one page of visible rows
Shift+PageDownextends the selection down by one page of visible rows
@@ -3330,15 +3362,23 @@ The list of the shortcut keys for editing is given below: - - + + + + + + - + + + + + - + @@ -3357,67 +3397,67 @@ The module supports keyboard navigation for selecting and managing ranges, simil
Enteropens the editor in the selected cell. If the editor is currently opened - closes the editor and saves changesEnteropens the editor in the selected cell. If the editor is currently opened - closes the editor and saves changes. On a boolean (checkbox) cell, toggles the value
F2opens the editor in the selected cell (non-boolean cells) - an alternative to Enter
EscapeSpacetoggles a boolean (checkbox) cell without opening a text editor
Escape 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 +3468,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 +3479,95 @@ 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 + + +### Shortcut keys for the header + +The column header is a navigable focus zone. The following shortcut keys are available when the focus is in the header: + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ArrowLeft / ArrowRightmove between header cells (colspan-aware: the focus skips cells covered by a span and lands on the owning cell)
ArrowUp / ArrowDownmove between header rows in a multi-row header. ArrowUp from the first row has no effect; ArrowDown from the last row moves the focus into the body
Enter / Spacesort by the column. On a header cell that contains a filter control, Enter activates the filter (the inner control receives focus)
Shift+Entertoggle multi-column sort for the column (requires the [`multiSort`](grid/api/grid_multisort_config.md) property)
Tab / Shift+Tabmove within the header with row wrapping; Tab past the last header cell moves the focus into the body, Shift+Tab before the first header cell exits the grid
Escapedeactivate an active filter control and return the focus to its header cell; a second Escape returns the focus to the body
+ +### Shortcut keys for the footer + +The footer is a navigable focus zone, symmetric with the header. The following shortcut keys are available when the focus is in the footer: + + + + + + + + + + + + + + + + + + + + + + + + +
ArrowLeft / ArrowRightmove between footer cells (colspan-aware)
ArrowUp / ArrowDownmove between footer rows in a multi-row footer. ArrowUp from the first row moves the focus into the body; ArrowDown from the last row has no effect
Enteractivate a footer filter control
Tab / Shift+Tabmove within the footer with row wrapping; Shift+Tab before the first footer cell moves the focus into the body, Tab past the last footer cell exits the grid
Escapedeactivate an active filter control and return the focus to its footer cell, or return the focus to the body
+ +### Shortcut keys for the TreeGrid + +In the TreeGrid mode (`type: "tree"`), the arrow keys operate on the tree column in addition to the [`Ctrl+Enter`](#default-shortcut-keys) expand/collapse toggle: + + + + + + + + + + + + + + + + +
ArrowRightexpands a collapsed branch; on an expanded branch with children, moves the focus to the first child row
ArrowLeftcollapses an expanded branch; on a leaf or a collapsed branch, moves the focus to the parent row
Ctrl+Entertoggles expand/collapse of the row
+ +:::tip +For the full picture of the keyboard model together with the WAI-ARIA semantics and the focus model, see the [Grid accessibility](grid/accessibility.md) guide. +::: diff --git a/docs/migration.md b/docs/migration.md index 809bb96b0..e460518ed 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -10,6 +10,20 @@ description: You can explore how to migrate to newer versions in the documentati If you are using an outdated version of DHTMLX Suite 5 and require the documentation for it, please [contact us](https://dhtmlx.com/docs/contact.shtml), and we will send it to you. ::: +9.3.3 -> 9.3.5 +----------- + +### Grid + +#### Keyboard navigation behaviour of Home/End and Page Up/Page Down + +Since v9.3.5, Home, End, Page Up, and Page Down keys move the **selected (active) cell** instead of only scrolling the viewport (as part of the new [accessibility and keyboard navigation](grid/accessibility.md) model): + +- Home / End move the selected cell to the first / last column of the current row (previously they scrolled to the beginning / end of the grid content without changing the selected cell). +- Page Up / Page Down move the selected cell up / down by one page of visible rows (previously they only scrolled the grid by the height of the visible content). + +The previous behaviour - scrolling the viewport without changing the active cell - is preserved as a fallback when **no cell is selected**. If you relied on these keys for viewport scrolling while a cell was selected, review the [Keyboard navigation](grid/configuration.md#keyboard-navigation) article for the updated shortcut set. + 9.1 -> 9.2 ----------- @@ -584,7 +598,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/whatsnew.md b/docs/whatsnew.md index 0a991234d..7b3dbf31e 100644 --- a/docs/whatsnew.md +++ b/docs/whatsnew.md @@ -8,6 +8,35 @@ 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 + +### Breaking changes + +- Grid. The Home/End and Page Up/Page Down keys now move the selected (active) cell instead of only scrolling the viewport. See the [Migration to Newer Versions](migration.md) guide for additional information. + ## Version 9.3.3 Released on June 2, 2026 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" ], }, From 660fd89019fca67914130015de9b45d5d93fa773 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 1 Jul 2026 17:15:06 +0300 Subject: [PATCH 5/5] [update] address PR #118 review feedback - configuration.md: revert the Keyboard navigation section to the base (next) version; drop the reworked default/header/footer/tree content; keep key formatting; fix "Shit+Tab" -> "Shift+Tab" typo - migration.md: remove the 9.3.5 entry (no migrations in this version) - whatsnew.md: remove the 9.3.5 "Breaking changes" block --- docs/grid/configuration.md | 155 ++++--------------------------------- docs/migration.md | 14 ---- docs/whatsnew.md | 4 - 3 files changed, 14 insertions(+), 159 deletions(-) diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 071164bc4..e4f9cc0aa 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -3159,7 +3159,7 @@ For information on working with the History API, read the [Work with History mod ## Keyboard navigation -DHTMLX Grid provides the keyboard navigation that will help you manipulate your grid faster. Shortcuts are organized into **zones** - the body, header, and footer - and are resolved by where the focus currently is. Focus enters the grid through hidden focus sentinels and moves between the zones with the Arrow and Tab keys. For ARIA semantics, the focus model, and configuration recipes, refer to the following guide: [Grid accessibility](grid/accessibility.md). +DHTMLX Grid provides the keyboard navigation that will help you manipulate your grid faster. ### Default shortcut keys @@ -3169,11 +3169,19 @@ The navigation shortcut keys and keys combinations that Grid enables by default PageUp - moves the selected cell up by one page of visible rows; when no cell is selected, scrolls Grid up to the height of the visible content + scrolls Grid up to the height of the visible content (without change of the selected cell) PageDown - moves the selected cell down by one page of visible rows; when no cell is selected, scrolls Grid down to the height of the visible content + scrolls Grid down to the height of the visible content (without change of the selected cell) + + + Home + navigates to the beginning of the Grid content (without change of the selected cell) + + + End + navigates to the end of the Grid content (without change of the selected cell) Ctrl+Enter @@ -3249,29 +3257,13 @@ The list of the shortcut keys and their combinations used for moving selection b Ctrl+ArrowRight moves selection to the last horizontal cell - - Home - moves selection to the first cell (column) of the current row - - - End - moves selection to the last cell (column) of the current row - - - Ctrl+Home - moves selection to the first cell of the grid - - - Ctrl+End - moves selection to the last cell of the grid - Tab - moves selection to the next horizontal cell or the first cell of the next row; at the end of the grid moves the focus into the footer (when it exists) or out of the grid + moves selection to the next horizontal cell or the first cell of the next row Shift+Tab - moves selection to the previous horizontal cell or to the last cell of the previous row; at the beginning of the grid moves the focus into the header or out of the grid + moves selection to the previous horizontal cell or to the first cell of the previous row @@ -3312,30 +3304,6 @@ The combinations of the shortcut keys listed below do not work when the `selecti Ctrl+Shift+ArrowRight moves selection to the last horizontal cell with the change of the selected cells - - Shift+Home - extends the selection to the first cell of the current row - - - Shift+End - extends the selection to the last cell of the current row - - - Ctrl+Shift+Home - extends the selection to the first cell of the grid - - - Ctrl+Shift+End - extends the selection to the last cell of the grid - - - Shift+PageUp - extends the selection up by one page of visible rows - - - Shift+PageDown - extends the selection down by one page of visible rows - @@ -3363,15 +3331,7 @@ The list of the shortcut keys for editing is given below: Enter - opens the editor in the selected cell. If the editor is currently opened - closes the editor and saves changes. On a boolean (checkbox) cell, toggles the value - - - F2 - opens the editor in the selected cell (non-boolean cells) - an alternative to Enter - - - Space - toggles a boolean (checkbox) cell without opening a text editor + opens the editor in the selected cell. If the editor is currently opened - closes the editor and saves changes Escape @@ -3484,90 +3444,3 @@ The following shortcut key is available when the [`editable` mode](grid/api/grid - -### Shortcut keys for the header - -The column header is a navigable focus zone. The following shortcut keys are available when the focus is in the header: - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ArrowLeft / ArrowRightmove between header cells (colspan-aware: the focus skips cells covered by a span and lands on the owning cell)
ArrowUp / ArrowDownmove between header rows in a multi-row header. ArrowUp from the first row has no effect; ArrowDown from the last row moves the focus into the body
Enter / Spacesort by the column. On a header cell that contains a filter control, Enter activates the filter (the inner control receives focus)
Shift+Entertoggle multi-column sort for the column (requires the [`multiSort`](grid/api/grid_multisort_config.md) property)
Tab / Shift+Tabmove within the header with row wrapping; Tab past the last header cell moves the focus into the body, Shift+Tab before the first header cell exits the grid
Escapedeactivate an active filter control and return the focus to its header cell; a second Escape returns the focus to the body
- -### Shortcut keys for the footer - -The footer is a navigable focus zone, symmetric with the header. The following shortcut keys are available when the focus is in the footer: - - - - - - - - - - - - - - - - - - - - - - - - -
ArrowLeft / ArrowRightmove between footer cells (colspan-aware)
ArrowUp / ArrowDownmove between footer rows in a multi-row footer. ArrowUp from the first row moves the focus into the body; ArrowDown from the last row has no effect
Enteractivate a footer filter control
Tab / Shift+Tabmove within the footer with row wrapping; Shift+Tab before the first footer cell moves the focus into the body, Tab past the last footer cell exits the grid
Escapedeactivate an active filter control and return the focus to its footer cell, or return the focus to the body
- -### Shortcut keys for the TreeGrid - -In the TreeGrid mode (`type: "tree"`), the arrow keys operate on the tree column in addition to the [`Ctrl+Enter`](#default-shortcut-keys) expand/collapse toggle: - - - - - - - - - - - - - - - - -
ArrowRightexpands a collapsed branch; on an expanded branch with children, moves the focus to the first child row
ArrowLeftcollapses an expanded branch; on a leaf or a collapsed branch, moves the focus to the parent row
Ctrl+Entertoggles expand/collapse of the row
- -:::tip -For the full picture of the keyboard model together with the WAI-ARIA semantics and the focus model, see the [Grid accessibility](grid/accessibility.md) guide. -::: diff --git a/docs/migration.md b/docs/migration.md index e460518ed..f161d0505 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -10,20 +10,6 @@ description: You can explore how to migrate to newer versions in the documentati If you are using an outdated version of DHTMLX Suite 5 and require the documentation for it, please [contact us](https://dhtmlx.com/docs/contact.shtml), and we will send it to you. ::: -9.3.3 -> 9.3.5 ------------ - -### Grid - -#### Keyboard navigation behaviour of Home/End and Page Up/Page Down - -Since v9.3.5, Home, End, Page Up, and Page Down keys move the **selected (active) cell** instead of only scrolling the viewport (as part of the new [accessibility and keyboard navigation](grid/accessibility.md) model): - -- Home / End move the selected cell to the first / last column of the current row (previously they scrolled to the beginning / end of the grid content without changing the selected cell). -- Page Up / Page Down move the selected cell up / down by one page of visible rows (previously they only scrolled the grid by the height of the visible content). - -The previous behaviour - scrolling the viewport without changing the active cell - is preserved as a fallback when **no cell is selected**. If you relied on these keys for viewport scrolling while a cell was selected, review the [Keyboard navigation](grid/configuration.md#keyboard-navigation) article for the updated shortcut set. - 9.1 -> 9.2 ----------- diff --git a/docs/whatsnew.md b/docs/whatsnew.md index 7b3dbf31e..4d2437701 100644 --- a/docs/whatsnew.md +++ b/docs/whatsnew.md @@ -33,10 +33,6 @@ For additional information, refer to [Grid accessibility](grid/accessibility.md) - Tree. Fixed an error when removing items in autoload mode - Window. Fixed drag/resize positioning issues on scrolled pages -### Breaking changes - -- Grid. The Home/End and Page Up/Page Down keys now move the selected (active) cell instead of only scrolling the viewport. See the [Migration to Newer Versions](migration.md) guide for additional information. - ## Version 9.3.3 Released on June 2, 2026