diff --git a/docs/assets/grid/footer_bottom_position.png b/docs/assets/grid/footer_bottom_position.png new file mode 100644 index 00000000..338d316c Binary files /dev/null and b/docs/assets/grid/footer_bottom_position.png differ diff --git a/docs/assets/grid/footer_relative_position.png b/docs/assets/grid/footer_relative_position.png new file mode 100644 index 00000000..c09c87ad Binary files /dev/null and b/docs/assets/grid/footer_relative_position.png differ diff --git a/docs/assets/treegrid/dropbehaviour_child.png b/docs/assets/treegrid/dropbehaviour_child.png new file mode 100644 index 00000000..b12b31f6 Binary files /dev/null and b/docs/assets/treegrid/dropbehaviour_child.png differ diff --git a/docs/assets/treegrid/dropbehaviour_child_result.png b/docs/assets/treegrid/dropbehaviour_child_result.png new file mode 100644 index 00000000..8f689e6c Binary files /dev/null and b/docs/assets/treegrid/dropbehaviour_child_result.png differ diff --git a/docs/assets/treegrid/dropbehaviour_sibling.png b/docs/assets/treegrid/dropbehaviour_sibling.png new file mode 100644 index 00000000..35db008a Binary files /dev/null and b/docs/assets/treegrid/dropbehaviour_sibling.png differ diff --git a/docs/assets/treegrid/dropbehaviour_sibling_result.png b/docs/assets/treegrid/dropbehaviour_sibling_result.png new file mode 100644 index 00000000..09433fe1 Binary files /dev/null and b/docs/assets/treegrid/dropbehaviour_sibling_result.png differ diff --git a/docs/assets/treegrid/treegrid_front.png b/docs/assets/treegrid/treegrid_front.png index 5b990998..0f7d4859 100644 Binary files a/docs/assets/treegrid/treegrid_front.png and b/docs/assets/treegrid/treegrid_front.png differ diff --git a/docs/chart/api/export/chart_pdf_method.md b/docs/chart/api/export/chart_pdf_method.md index f8f55098..2b4bca89 100644 --- a/docs/chart/api/export/chart_pdf_method.md +++ b/docs/chart/api/export/chart_pdf_method.md @@ -8,11 +8,14 @@ description: You can explore the pdf method of Chart in the documentation of the @short: Exports a chart to a PDF file -@signature: {'pdf(config?: object): void;'} +@signature: {'pdf(config?: IPDFConfig): Promise;'} + +@returns: +A promise of data export @params: - `config` - (optional) an object with export settings. You can specify the following settings for export to PDF: - - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/chart/pdf/8.0.0` + - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/chart/pdf/9.3.0` - `name?: string` - (optional) the name of the exported file - `theme?: string` - (optional) the exported theme, "light" by default. For custom or overridden themes, enable the `exportStyles` option - `exportStyles?: boolean | string[]` - (optional) defines the styles that will be sent to the export service when exporting Chart. Use *false* to prevent all styles from being sent to the export service @@ -45,13 +48,19 @@ description: You can explore the pdf method of Chart in the documentation of the @example: // default export -chart.export.pdf(); +chart.export.pdf() + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); // export with config settings chart.export.pdf({ - url: "https://export.dhtmlx.com/chart/pdf/8.0.0", - name:"result.pdf" -}); + url: "https://export.dhtmlx.com/chart/pdf/9.3.0", + name: "result.pdf" +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); @descr: @@ -75,11 +84,13 @@ It is necessary to set sufficient margin for correct display of `headerTemplate` | "A5" | (5.83in x 8.27in) | | "A6" | (4.13in x 5.83in) | -**Related samples**: [Chart. Export. Export to PDF/PNG](https://snippet.dhtmlx.com/4rybsjjq) +**Related samples**: [Chart. Export to PDF/PNG](https://snippet.dhtmlx.com/4rybsjjq) -**Related API:** [exportStyles](chart/api/chart_exportstyles_config.md) +**Related API:** [`exportStyles`](chart/api/chart_exportstyles_config.md) **Change log:** + +- The method returns a promise of data export since v9.3 - The **header** and **footer** options of the export object were added in v8.4 - The **theme**, **exportStyles** options of the export object were added in v8.1 - The **pageRanges**, **displayHeaderFooter**, **footerTemplate**, **headerTemplate** options of the pdf object were added in v8.1 diff --git a/docs/chart/api/export/chart_png_method.md b/docs/chart/api/export/chart_png_method.md index b5b457c1..903e29df 100644 --- a/docs/chart/api/export/chart_png_method.md +++ b/docs/chart/api/export/chart_png_method.md @@ -8,11 +8,14 @@ description: You can explore the png method of Chart in the documentation of the @short: Exports a chart to a PNG file -@signature: {'png(config?: object): void;'} +@signature: {'png(config?: IPNGConfig): Promise;'} + +@returns: +A promise of data export @params: - `config` - (optional) an object with export settings. You can specify the following settings for export to PNG: - - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/chart/png/8.0.0` + - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/chart/png/9.3.0` - `name?: string` - (optional) the name of the exported file - `theme?: string` - (optional) the exported theme, "light" by default. For custom or overridden themes, enable the `exportStyles` option - `exportStyles?: boolean | string[]` - (optional) defines the styles that will be sent to the export service when exporting Chart. Use *false* to prevent all styles from being sent to the export service @@ -21,22 +24,29 @@ description: You can explore the png method of Chart in the documentation of the @example: // default export -chart.export.png(); +chart.export.png() + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); // export with config settings chart.export.png({ - url: "https://export.dhtmlx.com/chart/png/8.0.0", + url: "https://export.dhtmlx.com/chart/png/9.3.0", name: "result.png" -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); @descr: -**Related samples**: [Chart. Export. Export to PDF/PNG](https://snippet.dhtmlx.com/4rybsjjq) +**Related samples**: [Chart. Export to PDF/PNG](https://snippet.dhtmlx.com/4rybsjjq) -**Related API:** [exportStyles](chart/api/chart_exportstyles_config.md) +**Related API:** [`exportStyles`](chart/api/chart_exportstyles_config.md) **Change log:** +- The method returns a promise of data export since v9.3 - The **header** and **footer** options of the export object were added in 8.4 - The **theme** and **exportStyles** options of the export object were added in 8.1 - Added in v8.0 \ No newline at end of file diff --git a/docs/chart/features.md b/docs/chart/features.md index 4e3d9100..f034f1fc 100644 --- a/docs/chart/features.md +++ b/docs/chart/features.md @@ -121,7 +121,7 @@ In this section you will know how to export Chart to different formats. | Topic | Description | | :----------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | -| [Exporting Chart to a PDF or PNG file](category/export-methods.md) | Learn how to export Chart to PDF or PNG formats ([Example](https://snippet.dhtmlx.com/4rybsjjq)) | +| [Exporting Chart to a PDF or PNG file](../usage/#exporting-data) | Learn how to export Chart to PDF or PNG formats ([Example](https://snippet.dhtmlx.com/4rybsjjq)) | ## How to work with Chart events @@ -150,7 +150,7 @@ In this section you will learn about common functionality of the library which c | ------------------------------------------------------------- | ------------------------------------------------------------- | | [Touch support](../../common_features/touch_support/) | Learn how to work with touch support | | [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript | -| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering | +| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component's rendering | ## Any questions left? diff --git a/docs/chart/usage.md b/docs/chart/usage.md index 39e46859..0e59125d 100644 --- a/docs/chart/usage.md +++ b/docs/chart/usage.md @@ -174,3 +174,38 @@ The method takes as a parameter an object with two properties: A new data item is added relative to the X-axis. In case of adding many items, you need to increase the value of each new data item position to add it correctly. **Related sample**: [Chart. Adding data on the fly](https://snippet.dhtmlx.com/dpz4w5nr) + +## Exporting data + +You can export data of Chart into the PDF or PNG format via the corresponding methods of the `Export` module. + +### Exporting data to PDF + +The [`pdf()`](chart/api/export/chart_pdf_method.md) method of the Export module allows you to export Chart data into a PDF file. The method takes an [object with the export settings](chart/api/export/chart_pdf_method.md) as a parameter (all settings are optional) and returns a promise of data export. + +~~~jsx +chart.export.pdf({ + url: "https://export.dhtmlx.com/chart/pdf/9.3.0", + name: "result.pdf" +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); +~~~ + +**Related sample**: [Chart. Export to PDF/PNG](https://snippet.dhtmlx.com/4rybsjjq) + +### Exporting data to PNG + +The [`png()`](chart/api/export/chart_png_method.md) method of the Export module allows you to export data from Chart into a PNG file. The method takes an [object with export settings](chart/api/export/chart_png_method.md) as a parameter (all settings are optional) and returns a promise of data export. + +~~~jsx +chart.export.png({ + theme: "dark" // the exported theme, "light" by default +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); +~~~ + +**Related sample**: [Chart. Export to PDF/PNG](https://snippet.dhtmlx.com/4rybsjjq) \ No newline at end of file diff --git a/docs/grid/api/api_overview.md b/docs/grid/api/api_overview.md index 656e8c69..44d6c0c9 100644 --- a/docs/grid/api/api_overview.md +++ b/docs/grid/api/api_overview.md @@ -198,10 +198,13 @@ description: You can explore the API of Grid in the documentation of the DHTMLX | [](grid/api/grid_dragitem_config.md) | @getshort(grid/api/grid_dragitem_config.md) | | [](grid/api/grid_dragmode_config.md) | @getshort(grid/api/grid_dragmode_config.md) | | [](grid/api/grid_dragpanel_config.md) | @getshort(grid/api/grid_dragpanel_config.md) | +| [](grid/api/grid_dropbehaviour_config.md) | @getshort(grid/api/grid_dropbehaviour_config.md) | | [](grid/api/grid_editable_config.md) | @getshort(grid/api/grid_editable_config.md) | | [](grid/api/grid_eventhandlers_config.md) | @getshort(grid/api/grid_eventhandlers_config.md) | +| [](grid/api/grid_exportconfig_config.md) | @getshort(grid/api/grid_exportconfig_config.md) | | [](grid/api/grid_exportstyles_config.md) | @getshort(grid/api/grid_exportstyles_config.md) | | [](grid/api/grid_footerautoheight_config.md)| @getshort(grid/api/grid_footerautoheight_config.md)| +| [](grid/api/grid_footerposition_config.md) | @getshort(grid/api/grid_footerposition_config.md) | | [](grid/api/grid_footerrowheight_config.md) | @getshort(grid/api/grid_footerrowheight_config.md) | | [](grid/api/grid_footertooltip_config.md) | @getshort(grid/api/grid_footertooltip_config.md) | | [](grid/api/grid_group_config.md) | @getshort(grid/api/grid_group_config.md) | diff --git a/docs/grid/api/export/grid_csv_method.md b/docs/grid/api/export/grid_csv_method.md index 80c1ede6..68f34d90 100644 --- a/docs/grid/api/export/grid_csv_method.md +++ b/docs/grid/api/export/grid_csv_method.md @@ -8,7 +8,7 @@ description: You can explore the csv export method of Grid in the documentation @short: Exports data from a grid into a CSV file -@signature: {'csv(config?: object): string;'} +@signature: {'csv(config?: ICsvExportConfig) => Promise;'} @params: - `config` - (optional) an object with export settings. You can specify the following settings for export to CSV: @@ -17,23 +17,37 @@ description: You can explore the csv export method of Grid in the documentation - `rowDelimiter?: string` - (optional) a newline ("\n") by default. A separator between rows, can be a tab - "\t", or any other value - `columnDelimiter?: string` - (optional) a comma (",") by default. A separator between columns, can be a semicolon - ";", or any other value +:::note +You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property. +::: + @returns: -A CSV string with Grid data +A promise of data export as a CSV string @example: // default export -grid.export.csv(); +grid.export.csv() + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); // export with config settings grid.export.csv({ name: "my_file", // the name of a ready CSV file rowDelimiter: "\t", // the delimiter used to separate rows columnDelimiter: ";" // the delimiter used to separate columns -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); @descr: **Related samples**: [Grid. Export to xlsx and csv](https://snippet.dhtmlx.com/58oqij47) -**Related article:** [Exporting Grid](grid/usage.md) \ No newline at end of file +**Related article:** [Exporting Grid](grid/usage.md) + +**Change log:** + +- The method returns a promise of data export since v9.3 \ No newline at end of file diff --git a/docs/grid/api/export/grid_pdf_method.md b/docs/grid/api/export/grid_pdf_method.md index 6fd9563d..45bdfe00 100644 --- a/docs/grid/api/export/grid_pdf_method.md +++ b/docs/grid/api/export/grid_pdf_method.md @@ -8,11 +8,14 @@ description: You can explore the pdf export method of Grid in the documentation @short: Exports data from a grid to a PDF file -@signature: {'pdf(config?: object): void;'} +@signature: {'pdf(config?: IPDFConfig) => Promise;'} + +@returns: +A promise of data export @params: - `config` - (optional) an object with export settings. You can specify the following settings for export to PDF: - - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/grid/pdf/8.1.0` + - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/grid/pdf/9.3.0` - `name?: string` - (optional) the name of the exported file - `theme?: string` - (optional) the exported theme, "light" by default. For custom or overridden themes, enable the `exportStyles` option - `exportStyles?: boolean | string[]` - (optional) defines the styles that will be sent to the export service when exporting Grid. Use *false* to prevent all styles from being sent to the export service @@ -43,19 +46,30 @@ description: You can explore the pdf export method of Grid in the documentation - `header?: string` - (optional) an HTML template for the header in the exported file - `footer?: string` - (optional) an HTML template for the footer in the exported file +:::note +You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property. +::: + @example: // default export -grid.export.pdf(); +grid.export.pdf() + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); // export with config settings grid.export.pdf({ - format: "A4", - scale: 0.75, - displayHeaderFooter: true, - theme: "dark", -}); - + pdf: { + format: false, // the format of the output file, "A4" by default + scale: 0.75, // the scale of the grid rendering (between 0.1 and 2) + displayHeaderFooter: true // defines whether to display the header and footer, false by default + }, + theme: "dark" // the exported theme, "light" by default +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); @descr: @@ -88,8 +102,10 @@ If you use Grid in conjunction with [Pagination](pagination.md), only the displa **Related article:** [Exporting Grid](grid/usage.md) -**Related API:** [exportStyles](grid/api/grid_exportstyles_config.md) +**Related API:** [`exportStyles`](grid/api/grid_exportstyles_config.md) **Change log:** + +- The method returns a promise of data export since v9.3 - The **header** and **footer** options of the export object were added in v8.4 - Added in v8.1 \ No newline at end of file diff --git a/docs/grid/api/export/grid_png_method.md b/docs/grid/api/export/grid_png_method.md index c1fad239..a39d3364 100644 --- a/docs/grid/api/export/grid_png_method.md +++ b/docs/grid/api/export/grid_png_method.md @@ -8,25 +8,38 @@ description: You can explore the png export method of Grid in the documentation @short: Exports data from a grid to a PNG file -@signature: {'png(config?: object): void;'} +@signature: {'png(config?: IPNGConfig) => Promise;'} + +@returns: +A promise of data export @params: - `config` - (optional) an object with export settings. You can specify the following settings for export to PNG: - - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/grid/png/8.1.0` + - `url?: string` - (optional) the url of the service that executes export and returns an exported file. This setting is optional, you should use it only if you need to specify the path to your local export service. The default value is `https://export.dhtmlx.com/grid/png/9.3.0` - `name?: string` - (optional) the name of the exported file - `theme?: string` - (optional) the exported theme, "light" by default. For custom or overridden themes, enable the `exportStyles` option - `exportStyles?: boolean | string[]` - (optional) defines the styles that will be sent to the export service when exporting Grid. Use *false* to prevent all styles from being sent to the export service - `header?: string` - (optional) an HTML template for the header in the exported file - `footer?: string` - (optional) an HTML template for the footer in the exported file +:::note +You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property. +::: + @example: // default export -grid.export.png(); +grid.export.png() + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); // export with config settings grid.export.png({ theme: "dark", -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); @descr: @@ -39,9 +52,10 @@ If you use Grid in conjunction with [Pagination](pagination.md), only the displa **Related article:** [Exporting Grid](grid/usage.md) -**Related API:** [exportStyles](grid/api/grid_exportstyles_config.md) +**Related API:** [`exportStyles`](grid/api/grid_exportstyles_config.md) **Change log:** -- The **header** and **footer** options of the export object were added in 8.4 +- The method returns a promise of data export since v9.3 +- The **header** and **footer** options of the export object were added in v8.4 - Added in v8.1 \ No newline at end of file diff --git a/docs/grid/api/export/grid_xlsx_method.md b/docs/grid/api/export/grid_xlsx_method.md index 4c546902..4b14b378 100644 --- a/docs/grid/api/export/grid_xlsx_method.md +++ b/docs/grid/api/export/grid_xlsx_method.md @@ -12,7 +12,7 @@ description: You can explore the xlsx export method of Grid in the documentation DHTMLX Grid uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel) for export of data to Excel. [Check the details](grid/usage.md/#exporting-data-to-excel). ::: -@signature: {'xlsx(config?: object): void;'} +@signature: {'xlsx(config?: IXlsxExportConfig) => Promise;'} @params: - `config` - (optional) an object with export settings. You can specify the following settings for export to Excel: @@ -21,9 +21,19 @@ DHTMLX Grid uses the WebAssembly-based library [Json2Excel](https://github.com/d - `tableName?: string` - (optional) "data" by default. The name of a sheet with grid data in the Excel file - `dateFormatMask?: string` - (optional) "dd/mm/yy" by default. The mask used for [dates formatting in Excel](https://support.microsoft.com/en-us/office/format-a-date-the-way-you-want-in-excel-8e10019e-d5d8-47a1-ba95-db95123d273e) +:::note +You can specify extended export configuration settings via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) configuration property. +::: + +@returns: +A promise of data export + @example: // default export -grid.export.xlsx(); +grid.export.xlsx() + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); // export with config settings grid.export.xlsx({ @@ -31,10 +41,17 @@ grid.export.xlsx({ name: "my_file", // the name of a ready Excel file tableName: "grid", // the name of a sheet with grid data in the Excel file dateFormatMask: "mm.dd.yy" // the date format mask for Excel -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); @descr: **Related samples**: [Grid. Export to xlsx and csv](https://snippet.dhtmlx.com/58oqij47) -**Related article:** [Exporting Grid](grid/usage.md/#exporting-data-to-excel) \ No newline at end of file +**Related article:** [Exporting Grid](grid/usage.md/#exporting-data-to-excel) + +**Change log:** + +- The method returns a promise of data export since v9.3 \ No newline at end of file diff --git a/docs/grid/api/grid_beforefilter_event.md b/docs/grid/api/grid_beforefilter_event.md index 4e7eee16..23b011dd 100644 --- a/docs/grid/api/grid_beforefilter_event.md +++ b/docs/grid/api/grid_beforefilter_event.md @@ -1,22 +1,34 @@ --- sidebar_label: beforeFilter -title: JavaScript Grid - beforeFilter Event eSort +title: JavaScript Grid - beforeFilter Event description: You can explore the beforeFilter event of 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. --- # beforeFilter -@short: fires before the filterChange event is called +@short: fires before filtering is applied -@signature: {'beforeFilter:({ value: string, colId?: string | number }) => void | boolean;'} +:::note +The event can be canceled by returning `false`. +::: + +### Usage + +~~~jsx +beforeFilter: ( + value: string | string[] | Date | Date[], + colId?: string | number +) => void | boolean; +~~~ @params: The callback of the event is called with the following parameters: -- `value: string` - required, the entered value by which data must be filtered -- `colId: string | number` - optional, the ID of a column + +- `value: string | string[] | Date | Date[]` - the value by which the data will be filtered +- `colId: string | number` - the ID of the column the filter is applied to @returns: -Return `false` to block the filtering process; otherwise, `true`. +Return `false` to prevent data filtering; otherwise, `true`. @example: grid.events.on("beforeFilter", (value, colId) => { @@ -28,4 +40,6 @@ grid.events.on("beforeFilter", (value, colId) => { **Related sample**: [Grid. Events](https://snippet.dhtmlx.com/9zeyp4ds) -@changelog: added in v8.0 +@changelog: +- The `value` parameter of the callback function can be a *Date* object or an array of *Date[]* objects since v9.3 +- Added in v8.0 diff --git a/docs/grid/api/grid_beforesort_event.md b/docs/grid/api/grid_beforesort_event.md index 050eaa8a..b3e1f10b 100644 --- a/docs/grid/api/grid_beforesort_event.md +++ b/docs/grid/api/grid_beforesort_event.md @@ -1,6 +1,6 @@ --- sidebar_label: beforeSort -title: JavaScript Grid - beforeSort Event eSort +title: JavaScript Grid - beforeSort Event description: You can explore the beforeSort event of 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. --- diff --git a/docs/grid/api/grid_blockselection_config.md b/docs/grid/api/grid_blockselection_config.md index 69d2a1d9..88609bc9 100644 --- a/docs/grid/api/grid_blockselection_config.md +++ b/docs/grid/api/grid_blockselection_config.md @@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac @short: Optional. Enables/disables the BlockSelection module during the Grid initialization -### Usage +#### Usage ~~~jsx blockSelection?: @@ -53,7 +53,7 @@ const grid = new dhx.Grid("grid_container", { }); @descr: -### Parameters +#### Parameters The `blockSelection` property can be set in two ways: diff --git a/docs/grid/api/grid_clipboard_config.md b/docs/grid/api/grid_clipboard_config.md index e08eab05..4defc87e 100644 --- a/docs/grid/api/grid_clipboard_config.md +++ b/docs/grid/api/grid_clipboard_config.md @@ -16,7 +16,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac The module requires the [`RangeSelection`](grid/usage_rangeselection.md) module to be enabled and is best used in conjunction with the [`BlockSelection`](grid/usage_blockselection.md) module in the `"range"` mode (enabled on initialization of the `Clipboard` module) for convenient range selection via the UI. ::: -### Usage +#### Usage ~~~jsx clipboard?: diff --git a/docs/grid/api/grid_dragpanel_config.md b/docs/grid/api/grid_dragpanel_config.md index 36d8c5b9..14e584f2 100644 --- a/docs/grid/api/grid_dragpanel_config.md +++ b/docs/grid/api/grid_dragpanel_config.md @@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac @short: Optional. Enables/disables the DragPanel module during the Grid initialization -### Usage +#### Usage ~~~jsx dragPanel?: diff --git a/docs/grid/api/grid_dropbehaviour_config.md b/docs/grid/api/grid_dropbehaviour_config.md new file mode 100644 index 00000000..04adb246 --- /dev/null +++ b/docs/grid/api/grid_dropbehaviour_config.md @@ -0,0 +1,46 @@ +--- +sidebar_label: dropBehaviour +title: JavaScript Grid - dropBehaviour Config +description: You can explore the dropBehaviour config of 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. +--- + +# dropBehaviour + +:::tip pro version only +This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +@short: Optional. Defines the behaviour of a dragged item in a Grid in the TreeGrid mode + +:::note +The `dropBehaviour` property is available only in the TreeGrid mode with the enabled drag-n-drop functionality. + +To enable drag-n-drop within Grid in the TreeGrid mode (reorder the items), use the [`dragItem`](/grid/api/grid_dragitem_config/) property, to enable drag-n-drop between Grids in the TreeGrid mode, use the [`dragMode`](/grid/api/grid_dragmode_config/) property. +::: + +@signature: {'dropBehaviour?: "child" | "sibling" | "complex";'} + +@example: +const grid = new dhx.Grid("treegrid_container", { + type: "tree", + columns: [ + { id: "name", header: [{ text: "Book Name" }], gravity: 1.5 }, + { id: "price", type: "string", header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }] }, + { id: "cover", type: "string", header: [{}, { text: "Cover" }] }, + { id: "ships", type: "string", header: [{ text: "Ships in" }] }, + { id: "inStock", type: "string", header: [{ text: "In stock" }] } + ], + dragItem: "both", // to activate the functionality for columns or rows separately, set the value to "column" or "row" + dropBehaviour: "sibling" // enables one of the drop modes: "child" | "sibling" | "complex" +}); + +@descr: +There are three modes of behaviour of a dragged item, depending on the value set for the `dropBehaviour` option in the configuration object of a grid in the TreeGrid mode: + +- "child" - a dragged item becomes a child of the item it is dragged to +- "sibling" - a dragged item becomes a sibling of the item it is dragged to +- "complex" - a dragged item can become both a child or a sibling of a target item, depending on the position specified by highlighting + +**Related sample**: [Grid (TreeGrid). Drop behaviour](https://snippet.dhtmlx.com/o2v3pcg0) + +**Related article**: [Drop behaviour](/grid/treegrid_mode/#drop-behaviour) \ No newline at end of file diff --git a/docs/grid/api/grid_exportconfig_config.md b/docs/grid/api/grid_exportconfig_config.md new file mode 100644 index 00000000..0448c597 --- /dev/null +++ b/docs/grid/api/grid_exportconfig_config.md @@ -0,0 +1,169 @@ +--- +sidebar_label: exportConfig +title: JavaScript Grid - exportConfig Config +description: You can explore the exportConfig config of 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. +--- + +# exportConfig + +:::tip pro version only +This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +@short: allows providing an advanced configuring of parameters for Grid export into CSV, XLSX, PDF, and PNG formats + +#### Usage + +~~~jsx +exportConfig?: (config: IGridConfig, exportType: "pdf" | "png" | "csv" | "xlsx") => { + // overriding basic Grid settings + columns?: (column: ICol, index: number, columns: ICol[], api: IGrid) => ICol | null; + data?: (row: IRow, index: number, data: IRow[], api: IGrid) => IRow | null; + spans?: (span: ISpan, index: number, spans: ISpan[], api: IGrid) => ISpan | null; + + // format-specific configurations + typeConfig?: IXlsxExportConfig | ICsvExportConfig | IPDFConfig | IPNGConfig; + + // any other IGridConfig properties (e.g., headerRowHeight) + [key: string]: any; +} +~~~ + +#### Parameters + +The `exportConfig` property is a callback function that takes the following parameters: + +| Parameter | Description | +|------------------ |---------------------------------------------------------------------------------- | +| `config` | (*IGridConfig*) the current configuration of a Grid instance | +| `exportType` | (*string*) the type of export being performed: "pdf", "png", "csv", or "xlsx" | + +and returns a configuration object with export parameters. The returned configuration object may contain the following properties: + +- `columns` - (*function*) a function for column transformation; returning `null` excludes the column from the export +- `data` - (*function*) a function for filtering or modifying row data; returning `null` excludes the row from the final file +- `spans` - (*function*) a function to handle cell merging (spans); returning `null` ignores the span in the export +- `typeConfig` - (*object*) an object containing unique settings for the specific format (filenames, delimiters, themes) +- **Grid properties** - any Grid property that should be overridden (e.g., `headerRowHeight`) set as a `key:value` pair, where the *key* is the property name and the *value* is the property value to be applied only to the exported state + +#### Examples + +- Example 1: Conditional filtering and formatting + +In this example, sensitive data is excluded for all formats, while for PDF/PNG the headers are converted to the uppercase and HTML templates are disabled: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + data:dataset, + exportConfig: (config, exportType) => ({ + // Column transformation + columns: (column) => { + // Completely exclude the "experience_level" column from any export + if (column.id === "experience_level") return null; + + // For spreadsheet formats (Excel/CSV), keep columns as is + if (exportType === "xlsx" || exportType === "csv") { + return column; + } + + // For PDF/PNG, remove HTML templates and uppercase the headers + column.template = null; + column.header[0].text = column.header[0].text.toUpperCase(); + + return column; + }, + + // Row data filtering + data: (row) => { + // Exclude young animals (age <= 3) from the export + if (row.animal_age <= 3) return null; + + // Business logic example: do not export dogs to CSV and cats to Excel + if (exportType === "csv" && row.animal_type === "Dog") return null; + if (exportType === "xlsx" && row.animal_type === "Cat") return null; + + return row; + }, + + // Adjust the header height specifically for the Excel file + headerRowHeight: exportType === "xlsx" ? 60 : config.headerRowHeight, + }), +}); +~~~ + +- Example 2: Format-specific configuration with `typeConfig` + +The following example shows the use of the `typeConfig` property to define filenames, CSV delimiters, and XLSX date masks: + +~~~jsx +const exportConfig = { + csv: { + name: "cat_report", // Resulting CSV filename + rowDelimiter: "\t", // Use Tab as row delimiter + columnDelimiter: ";" // Use Semicolon as column delimiter + }, + xlsx: { + name: "dog_report", // Resulting Excel filename + tableName: "Main Report", // Sheet name in the Excel workbook + dateFormatMask: "dd.mm.yyyy" // Excel-specific date format mask + }, + pdf: { + theme: "dark", // Apply the dark theme to the PDF document + scale: 0.8, // Content scaling (80%) + format: "A4" // Page format + } +}; + +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + data:dataset, + exportConfig: (config, exportType) => ({ + // Pass settings from our object based on the export type + typeConfig: exportConfig[exportType] + }) +}); +~~~ + +- Example 3: Filtering spans + +If your Grid uses cell merging, you can manage how spans are handled during export. Check the example below: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + data:dataset, + spans: [ + // span configuration objects + ], + exportConfig: (config, exportType) => ({ + spans: (span) => { + // Exclude cells' merges when exporting to CSV, + // as the CSV format does not support merged cells + if (exportType === "csv") return null; + return span; + } + }) +}); +~~~ + +#### Details + +The `exportConfig` property extends the possibilities of the standard export and allows you to dynamically modify the structure and content of the resulting document at the moment the export function is called. With this property, you can: + +- **filter data**: exclude specific rows, columns, or spans by returning `null` in the corresponding callback methods +- **transform content**: modify headers, format values, or strip HTML templates to ensure data is displayed correctly in spreadsheet editors +- **define format-specific settings**: set delimiters for CSV, date masks for Excel, or visual themes for PDF +- **adjust styling**: override Grid properties (such as row height) specifically for the exported file + +**Related sample**: [Grid. Custom export logic for PDF, PNG, XLSX, CSV](https://snippet.dhtmlx.com/aher21cg) + +**Related article**: [Extended export configuration settings](/grid/usage/#extended-export-configuration-settings) + +@changelog: added in v9.3 \ No newline at end of file diff --git a/docs/grid/api/grid_exportstyles_config.md b/docs/grid/api/grid_exportstyles_config.md index 6916f26d..0db7d48e 100644 --- a/docs/grid/api/grid_exportstyles_config.md +++ b/docs/grid/api/grid_exportstyles_config.md @@ -22,11 +22,11 @@ const grid = new dhx.Grid("grid_container", { }); @descr: -By default, the **exportStyles** property is disabled. Thus, when you export Grid, CSS styles included to the page are not sent to the export service. This reduces the size of the exported data. +By default, the `exportStyles` property is disabled. Thus, when you export Grid, CSS styles included to the page are not sent to the export service. This reduces the size of the exported data. -If you want some styles to be exported, set string values with the absolute paths to the desired styles to the **exportStyles** array: +If you want some styles to be exported, set string values with the absolute paths to the desired styles to the `exportStyles` array: -~~~js +~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ // columns config @@ -50,7 +50,7 @@ You need to enable the property if you want to export Grid with a [custom or ove @descr: **Related API:** -- [png()](grid/api/export/grid_png_method.md) -- [pdf()](grid/api/export/grid_pdf_method.md) +- [`png()`](grid/api/export/grid_png_method.md) +- [`pdf()`](grid/api/export/grid_pdf_method.md) @changelog: added in v8.1 diff --git a/docs/grid/api/grid_filterchange_event.md b/docs/grid/api/grid_filterchange_event.md index 3b125af5..8bc566a5 100644 --- a/docs/grid/api/grid_filterchange_event.md +++ b/docs/grid/api/grid_filterchange_event.md @@ -6,26 +6,36 @@ description: You can explore the filterChange event of Grid in the documentation # filterChange -@short: fires on typing text in an input of a column's header +@short: fires when the filter value is changed -@signature: {'filterChange: (value: string, colId: string | number, filterId: string) => void;'} +### Usage + +~~~jsx +filterChange: ( + value: string | string[] | Date | Date[], + colId: string | number, + content: "inputFilter" | "selectFilter" | "comboFilter" | "dateFilter" +) => void; +~~~ @params: The callback of the event is called with the following parameters: -- `value: string` - an entered value -- `colId: string | number` - the id of a column -- `filterId: string` - the type of a filter: "inputFilter" | "selectFilter" | "comboFilter" +- `value: string | string[] | Date | Date[]` - the current value of the filter +- `colId: string | number` - the ID of the column where the filter changed +- `content: string` - the type of the applied filter ("inputFilter", "selectFilter", "comboFilter", or "dateFilter") @example: -grid.events.on("filterChange", (value, colId, filterId) => { +grid.events.on("filterChange", (value, colId, content) => { console.log("You've entered "+value+" into the "+colId+" column"); }); @descr: :::info -The **filterChange** event invokes the [beforeFilter](grid/api/grid_beforefilter_event.md) event +The `filterChange` event invokes the [`beforeFilter`](grid/api/grid_beforefilter_event.md) event. ::: -@changelog: added in v6.3 +@changelog: +- The `value` parameter of the callback function can be a *Date* object or an array of *Date[]* objects since v9.3 +- Added in v6.3 diff --git a/docs/grid/api/grid_footerposition_config.md b/docs/grid/api/grid_footerposition_config.md new file mode 100644 index 00000000..49b9bc0d --- /dev/null +++ b/docs/grid/api/grid_footerposition_config.md @@ -0,0 +1,65 @@ +--- +sidebar_label: footerPosition +title: JavaScript Grid - footerPosition Config +description: You can explore the footerPosition config of 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. +--- + +# footerPosition + +:::tip pro version only +This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +@short: Optional. Defines the positioning logic for the footer and bottom-pinned rows within the component container + +@signature: {'footerPosition?: "bottom" | "relative";'} + +@default: "relative" + +@example: +const grid = new dhx.Grid("grid_container", { + columns: [ + { + id: "productId", + header: [{ text: "Product Id" }], + summary: "count", + footer: [{ text: summary => `Total: ${summary.count}` }], + }, + { + id: "category", + header: [{ text: "Category" }], + }, + { + id: "price", + type: "number", + numberMask: { prefix: "$" }, + header: [{ text: "Price" }], + summary: "avg", + footer: [{ text: summary => `Avg: ${summary.avg}` }], + }, + { + id: "stock", + type: "number", + header: [{ text: "Stock" }], + summary: "sum", + footer: [{ text: summary => `Total: ${summary.sum}` }], + }, + ], + data: dataset, + footerPosition: "bottom", // "relative" by default + bottomSplit: 2 +}); + +@descr: +The property has the following values: + +- `relative` - the footer follows the content immediately. If the number of rows is small and doesn't fill the container, the footer moves up to stay attached to the last row. +- `bottom` - the footer and [bottom-pinned rows](/grid/api/grid_bottomsplit_config/) are strictly locked to the bottom edge of the container. They remain at the base of the component even if the content occupies only a fraction of the available height. + +@changelog: added in v9.3 + +**Related sample**: +- [Grid. Fixed rows positioned at the bottom](https://snippet.dhtmlx.com/w5xzdjb7) +- [Grid. Footer positioned at the bottom](https://snippet.dhtmlx.com/8sbf8b2y) + +**Related article**: [Configuration](/grid/configuration/#footer-position) \ No newline at end of file diff --git a/docs/grid/api/grid_getheaderfilter_method.md b/docs/grid/api/grid_getheaderfilter_method.md index 141e34e3..ca920b5a 100644 --- a/docs/grid/api/grid_getheaderfilter_method.md +++ b/docs/grid/api/grid_getheaderfilter_method.md @@ -16,11 +16,11 @@ description: You can explore the getHeaderFilter method of Grid in the documenta @returns: An object with a set of methods which let you work with the header filter of the specified column. The methods are: -- [blur()](grid/api/headerfilter/blur_method.md) - removes focus from the filter -- [clear()](grid/api/headerfilter/clear_method.md) - clears the value set in the filter -- [focus()](grid/api/headerfilter/focus_method.md) - sets focus on the filter -- [getFilter()](grid/api/headerfilter/getfilter_method.md) - returns either an HTML object or an object with Combobox configuration -- [setValue()](grid/api/headerfilter/setvalue_method.md) - sets a value by which a column will be filtered +- [`blur()`](grid/api/headerfilter/blur_method.md) - removes focus from the filter +- [`clear()`](grid/api/headerfilter/clear_method.md) - clears the value set in the filter +- [`focus()`](grid/api/headerfilter/focus_method.md) - sets focus on the filter +- [`getFilter()`](grid/api/headerfilter/getfilter_method.md) - returns either an HTML object, or an object with Combobox/Calendar configuration +- [`setValue()`](grid/api/headerfilter/setvalue_method.md) - sets the filter value @example: const countryFilter = grid.getHeaderFilter("country"); diff --git a/docs/grid/api/grid_group_config.md b/docs/grid/api/grid_group_config.md index eee91af6..488bc972 100644 --- a/docs/grid/api/grid_group_config.md +++ b/docs/grid/api/grid_group_config.md @@ -16,7 +16,7 @@ The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX S Note that when you initialize Grid with the `group` configuration property, the tree-like mode is enabled for Grid and it will have the `type: tree` property in its configuration. ::: -## Usage +#### Usage ~~~jsx {22} type TAggregate = "sum" | "count" | "min" | "max" | "avg" | string; @@ -45,7 +45,7 @@ interface IGridConfig { } ~~~ -## Parameters +#### Parameters As an object the `group` configuration option has the following properties: diff --git a/docs/grid/api/grid_history_config.md b/docs/grid/api/grid_history_config.md index 774aecd9..c217a0d1 100644 --- a/docs/grid/api/grid_history_config.md +++ b/docs/grid/api/grid_history_config.md @@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac @short: Optional. Enables/disables the History module during the Grid initialization -### Usage +#### Usage ~~~jsx history?: diff --git a/docs/grid/api/grid_rangeselection_config.md b/docs/grid/api/grid_rangeselection_config.md index 5b40cbc3..54e7e561 100644 --- a/docs/grid/api/grid_rangeselection_config.md +++ b/docs/grid/api/grid_rangeselection_config.md @@ -12,7 +12,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac @short: Optional. Enables/disables the RangeSelection module during the Grid initialization -### Usage +#### Usage ~~~jsx rangeSelection?: diff --git a/docs/grid/api/grid_rootparent_config.md b/docs/grid/api/grid_rootparent_config.md index 1a319d3e..8ae59e79 100644 --- a/docs/grid/api/grid_rootparent_config.md +++ b/docs/grid/api/grid_rootparent_config.md @@ -9,12 +9,12 @@ description: You can explore the rootParent config of Grid in the documentation @short: Optional. Defines the id of the root parent :::note -The property works only for Grid with the `type: "tree"` configuration option +The property works only for Grid with the `type: "tree"` configuration option. ::: -@signature: rootParent?: string; +@signature: {'rootParent?: string;'} -@example: +@example: const grid = new dhx.Grid("grid_container", { type: "tree", rootParent: "root", diff --git a/docs/grid/api/grid_subrow_config.md b/docs/grid/api/grid_subrow_config.md index 8a05764f..8e3d9d7c 100644 --- a/docs/grid/api/grid_subrow_config.md +++ b/docs/grid/api/grid_subrow_config.md @@ -20,11 +20,11 @@ Note that when the `subRow` config is used, Grid doesn't support the [TreeGrid m @descr: -## Parameters +#### Parameters The `subRow` property is a callback function which is called with the row object as a parameter and returns HTML as string or a constructor of a subGrid (or any other nested Suite component). -### Example +#### Example - a sub-row with an HTML content diff --git a/docs/grid/api/grid_subrowconfig_config.md b/docs/grid/api/grid_subrowconfig_config.md index 561103a6..306f5094 100644 --- a/docs/grid/api/grid_subrowconfig_config.md +++ b/docs/grid/api/grid_subrowconfig_config.md @@ -20,7 +20,7 @@ Note that when the [`subRow`](/grid/api/grid_subrow_config/) config is used, Gri @descr: -## Parameters +#### Parameters When the property is set as an *object*, the specified parameters are applied to all the rows. @@ -40,7 +40,7 @@ The `subRowConfig` object may contain the following properties: The `fullWidth` property works only if the `subRowConfig` property is initialized as an object. ::: -### Example +#### Example - the global configuration of sub-rows diff --git a/docs/grid/api/grid_summary_config.md b/docs/grid/api/grid_summary_config.md index c0b77ab5..48981521 100644 --- a/docs/grid/api/grid_summary_config.md +++ b/docs/grid/api/grid_summary_config.md @@ -8,7 +8,7 @@ description: You can explore the spans config of Grid in the documentation of th @short: Optional. Creates the list of calculated values based on the column's data -## Usage +#### Usage ~~~jsx type TSummaryMethod = (rows: IRow[]) => string | number; @@ -19,7 +19,7 @@ interface ISummary { summary?: ISummary; ~~~ -## Parameters +#### Parameters The `summary` configuration option of Grid is an object with calculated values, where the *keys* are the field names and the *values* can be: diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md index 07ff6a70..e92ecca8 100644 --- a/docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md @@ -31,16 +31,35 @@ header: [ colspan?: number, rowspan?: number, css?: string, - content?: "inputFilter" | "selectFilter" | "comboFilter", + content?: "inputFilter" | "selectFilter" | "comboFilter" | "dateFilter", filterConfig?: { + placeholder?: string, // sets an input placeholder for `inputFilter`, `comboFilter` and `dateFilter` + icon?: string, // sets CSS class for the filter icon in `inputFilter` and the calendar icon in `dateFilter` + /* properties of `comboFilter` configuration */ filter?: (item, input: string) => boolean, - multiselection?: boolean, - readonly?: boolean, - placeholder?: string, // sets an input placeholder for `comboFilter` and `inputFilter` + multiselection?: boolean, // false by default + readonly?: boolean, // false by default virtual?: boolean, // true by default - template?: function + template?: function, + /* properties of `dateFilter` configuration */ + asDateObject?: boolean, // false by default + date?: Date | string, + mark?: (date: Date) => string, + disabledDates?: (date: Date) => boolean, + weekStart?: "saturday" | "sunday" | "monday", // "sunday" by default + weekNumbers?: boolean, // false by default + mode?: "calendar" | "year" | "month" | "timepicker", // "calendar" by default + timePicker?: boolean, // false by default + dateFormat?: string, // by default, applies the dateFormat used for the column + timeFormat?: 24 | 12, // 24 by default + thisMonthOnly?: boolean, // false by default + width?: string | number, // "250px" by default + range?: boolean // false by default }, - customFilter?: (item, input: string) => boolean, + customFilter?: ( + value: string | number | Date | Date[], + match: string | string[] | Date | Date[] + ) => boolean, headerSort?: boolean, // true by default sortAs?: (cellValue) => string | number, htmlEnable?: boolean, // false by default @@ -76,13 +95,15 @@ Each header object may include: css(optional) styling to be applied to a header - content(optional) additional content of a header, which can be one of the filters: "inputFilter" | "selectFilter" | "comboFilter" + content(optional) defines the content of the column header, including the filter type. Allows setting one of the predefined filters: +
  • "inputFilter" — a text input field
  • "selectFilter" — a dropdown list
  • "comboFilter" — a combobox with search
  • "dateFilter" (PRO version) — a filter with a calendar for selecting a date or a date range
- filterConfig(optional) a configuration object for "comboFilter" and "inputFilter"

a configuration object for "comboFilter" can contain a set of properties:
  • filter - (optional) sets a custom function for filtering Combo Box options
  • multiselection - (optional) enables selection of multiple options
  • readonly - (optional) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input). The default value of the readonly property depends on the following conditions:
    • the `readonly:true` is set as a default value, if `htmlEnable:true` is set for a column and there is no template specified for a column
    • in all other cases, `readonly:false` is set by default
  • placeholder - (optional) sets a placeholder in the input of ComboBox
  • virtual - (optional) enables dynamic loading of data on scrolling the list of options, true by default
  • template - (optional) a function which returns a template with content for the filter options. Takes an option item as a parameter:
    • item - (object) an option item

a configuration object for "inputFilter" can contain the following property:
  • placeholder - (optional) sets a placeholder in the input
+ filterConfig + (optional) a configuration object for setting the behavior and appearance of the filter. The set of properties depends on the filter type specified in the `content` property:

- a configuration object for "inputFilter" can contain the following properties:
  • placeholder - (optional) the placeholder text in the input field
  • icon - (optional) the CSS class for the filter icon

- a configuration object for "comboFilter" can contain a set of properties:
  • filter - (optional) sets a custom function for filtering Combo Box options
  • multiselection - (optional) enables selection of multiple options, *false* by default
  • readonly - (optional) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input). The default value of the readonly property depends on the following conditions:
    • the `readonly:true` is set as a default value, if `htmlEnable:true` is set for a column and there is no template specified for a column
    • in all other cases, `readonly:false` is set by default
  • placeholder - (optional) sets a placeholder in the input of ComboBox
  • virtual - (optional) enables dynamic loading of data on scrolling the list of options, true by default
  • template - (optional) a function which returns a template with content for the filter options. Takes an option item as a parameter:
    • item - (object) an option item
- a configuration object for "dateFilter" (PRO version) can contain a set of properties:
Main properties:
  • icon - (optional) the CSS class for the calendar icon
  • placeholder - (optional) the placeholder text in the input field when no date is selected
  • asDateObject - (optional) determines how the filter processes data for `customFilter` and the `beforeFilter` and `filterChange` events. If *true*, the comparison is performed using Date objects, *false* by default
  • range - (optional) enables the date range selection mode (from and to), *false* by default
  • dateFormat - (optional) the date display format (e.g., *"%d/%m/%Y"*). By default, applies the `dateFormat` used for the column
Calendar API configuration properties:
  • date - (optional) - the initial date opened in the calendar
  • mark - (optional) - a function for adding custom CSS classes to specific dates
  • disabledDates - (optional) - a function for disabling the selection of specific dates
  • weekStart - (optional) - the start day of the week (*"saturday"*, *"sunday"* (default), *"monday"*).
  • weekNumbers - (optional) - shows week numbers if *true*, *false* by default
  • mode - (optional) - the calendar display mode (*"calendar"* (default), *"year"*, *"month"*, *"timepicker"*)
  • timePicker - (optional) - adds the ability to select time, *false* by default
  • timeFormat - (optional) - the time format (*12* or *24* (default) hours)
  • thisMonthOnly - (optional) - if *true*, allows selecting dates only within the current month, *false* by default
  • width - (optional) - the width of the dropdown calendar, *"250px"* by default
- customFilter (optional) a custom function for extended filtering. It takes two parameters:
  • item - (required) a data item the value of which should be compared
  • input - (required) the value of the option selected in the filter
and returns true/false to specify whether the data item should be displayed in the grid after filtering + customFilter (optional) a callback function that allows defining custom filtering logic. It takes two parameters:
  • value - (required) the cell value in the row
  • match - (required) the value selected in the filter
and returns *true*, if the row matches the filtering criteria, otherwise *false* headerSort(optional) enables/disables sorting by clicking the header, true by default diff --git a/docs/grid/api/headerfilter/getfilter_method.md b/docs/grid/api/headerfilter/getfilter_method.md index 4c9f8750..fc4465f1 100644 --- a/docs/grid/api/headerfilter/getfilter_method.md +++ b/docs/grid/api/headerfilter/getfilter_method.md @@ -6,25 +6,24 @@ description: You can explore the getFilter method of the header filter of Grid i # getFilter() -@short: returns either an HTML object or an object with Combobox configuration +@short: returns either an HTML object, or an object with Combobox/Calendar configuration -@signature: {'getFilter(): HTML object | Combobox;'} +@signature: {'getFilter(): VNode | Combobox | Calendar;'} @returns: -Either an HTML object or an object with Combobox configuration +Either an HTML object, or an object with Combobox/Calendar configuration @example: const filter1 = grid.getHeaderFilter("country").getFilter(); console.log(filter1); // -> returns Combobox -//  {config: {…}, _uid: 'u1670500020936', events: o, data: d, popup: f, …} - +// { config: {...}, _uid: 'u1670500020936', events: o, data: d, popup: f, ... } const filter2 = grid.getHeaderFilter("netChange").getFilter(); console.log(filter2); // -> returns an HTML object -// {type: 1, attrs: {…}, tag: 'div', _class: 'dhx_grid-filter__label dxi dxi-magnify', -// ref: 'netChange_filter', …} +// { type: 1, attrs: {...}, tag: 'div', _class: 'dhx_grid-filter__label dxi dxi-magnify', ref: 'netChange_filter', ... } @changelog: -added in v8.0 \ No newline at end of file +- The method may return an object with Calendar configuration since v9.3 +- Added in v8.0 \ No newline at end of file diff --git a/docs/grid/api/headerfilter/setvalue_method.md b/docs/grid/api/headerfilter/setvalue_method.md index 23491755..2d37e2b6 100644 --- a/docs/grid/api/headerfilter/setvalue_method.md +++ b/docs/grid/api/headerfilter/setvalue_method.md @@ -6,23 +6,47 @@ description: You can explore the setValue method of the header filter of Grid in # setValue() -@short: sets a value by which a column will be filtered +@short: Sets the filter value -@signature: {'setValue(value: string | string[]): void;'} - -@params: -- `value: string | string[]` - a value by which the column will be filtered +@signature: {'setValue(value: string | string[] | Date | Date[]): void;'} @descr: +#### Usage -:::info -An array of string values can be specified only for **comboFilter** in the [`multiselection:true`](grid/configuration.md#headerfooter-filters) mode. -::: +- for inputFilter, selectFilter, comboFilter + +~~~jsx +setValue(value: string): void; +~~~ + +- for comboFilter + +~~~jsx +setValue(value: string | string[]): void; +~~~ + +- for dateFilter + +~~~jsx +setValue(value: Date | Date[]): void; +~~~ + +@params: +- `value: string | string[] | Date | Date[]` - the value to be set for the filter @example: grid.getHeaderFilter("country").setValue("Brazil"); @descr: +:::info +The [`dateFilter`](/grid/configuration/#headerfooter-filters) type of filter supports only the *Date object* values. +::: + +Note that in case of the enabled `multiselection` or `range` modes, the method awaits the value to be passed as an array. + +**Related article**: [Header/footer filters](/grid/configuration/#headerfooter-filters) @changelog: -added in v8.0 \ No newline at end of file + +- The `value` parameter can be set as a *Date* object or as an array of *Date[]* objects since v9.3 +- Added in v8.0 \ No newline at end of file diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 0daba65c..6b6265fd 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1373,9 +1373,11 @@ const grid = new dhx.Grid("grid_container", { ### Header/footer filters -There are three types of filters that you can specify in the header/footer content of a [Grid column](grid/api/grid_columns_config.md): +There are the following types of filters that you can specify in the header/footer content of a [Grid column](grid/api/grid_columns_config.md): `inputFilter`, `selectFilter`, `comboFilter`, `dateFilter` (**PRO version**). -- **inputFilter** - provides a way of filtering data of a Grid column by using a text field +- **inputFilter** + +Provides a way of filtering data of a Grid column by using a text input field. ~~~jsx { @@ -1384,9 +1386,12 @@ There are three types of filters that you can specify in the header/footer conte } ~~~ -**Related sample**: [Grid. Header filters (comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/4qz8ng3c) +If you specify **inputFilter** as the header or footer content of a column, you can set a configuration object for it via the `filterConfig` property. + +#### The list of configuration properties for `inputFilter` -If you specify **inputFilter** as the header or footer content of a column, you can set a configuration object for it via the `filterConfig` property. The configuration object may contain the **placeholder** property that sets a placeholder in the input: +- `placeholder` - (*string*) - optional, the placeholder text in the input field +- `icon` - (*string*) - optional, the CSS class for the filter icon ~~~jsx { @@ -1396,53 +1401,41 @@ If you specify **inputFilter** as the header or footer content of a column, you { content: "inputFilter", filterConfig: { placeholder: "Type something" } } ] } -~~~ +~~~ + +**Related sample**: [Grid. Header filters (dateFilter, comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/4qz8ng3c) + +- **selectFilter** -- **selectFilter** - allows end users to filter data of a column by choosing an option from a presented dropdown list +Allows end users to filter data of a column by choosing an option from a presented dropdown list. ~~~jsx { - width: 160, id: "status", + id: "status", header: [{ text: "Status" }, { content: "selectFilter" }], editorType: "select", options: ["Done", "In Progress", "Not Started"] } ~~~ -**Related sample**: [Grid. Header filters (comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/4qz8ng3c) +**Related sample**: [Grid. Header filters (dateFilter, comboFilter, inputFilter, selectFilter](https://snippet.dhtmlx.com/4qz8ng3c) -- **comboFilter** - provides a way to filter data of a column by choosing an option from a presented dropdown list. To find an option quickly you can enter text into the edit control +- **comboFilter** + +Provides a way to filter data of a column by choosing an option from a presented combobox. To find an option quickly, you can enter text into the edit control. ~~~jsx { - width: 160, id: "renewals", + id: "renewals", header: [{ text: "Number of renewals" }, { content: "comboFilter" }], type: "string", editorType: "combobox", options: ["1 time", "1-2 times", "more than 5 times"] } ~~~ -**Related sample**: [Grid. Header filters (comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/4qz8ng3c) +If you specify **comboFilter** as the header or footer content of a column, you can set an additional config with properties for it via the `filterConfig` property. -If you specify **comboFilter** as the header or footer content of a column, you can set an additional config with properties for it via the `filterConfig` property: - -~~~jsx {8} -const grid = new dhx.Grid("grid_container", { - columns: [ - { - width: 150, - id: "migrants", - header: [ - { text: "Migrants (net)" }, - { content: "comboFilter", filterConfig: {readonly: true }} - ] - } - ], - data: dataset -}); -~~~ - -#### The list of configuration properties for comboFilter +#### The list of configuration properties for `comboFilter` - **filter** - (*function*) sets a custom function for filtering Combo Box options - **multiselection** - (*boolean*) enables selection of multiple options @@ -1453,14 +1446,92 @@ const grid = new dhx.Grid("grid_container", { - **virtual** - (*boolean*) enables dynamic loading of data on scrolling the list of options, *true* by default - **template** - (*function*) a function which returns a template with content for the filter options. Takes an option item as a parameter -#### Customizing header/footer filters +~~~jsx +{ + id: "category", + header: [ + { text: "Category" }, + { content: "comboFilter", filterConfig: { placeholder: "Select a category" } } + ] +} +~~~ + +**Related sample**: [Grid. Header filters (dateFilter, comboFilter, inputFilter, selectFilter](https://snippet.dhtmlx.com/4qz8ng3c) + +- **dateFilter** + +:::tip pro version only +This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +Provides a way of filtering data of a Grid column by using a calendar for selecting a date or a date range. + +If you specify **dateFilter** as the header or footer content of a column, you can set an additional config with properties for it via the `filterConfig` property. + +#### The list of configuration properties for `dateFilter` + +Main properties: + +- `icon` - (*string*) - the CSS class for the calendar icon. +- `placeholder` - (*string*) - the placeholder text in the input field when no date is selected. +- `asDateObject` - (*boolean*) - determines how the filter processes data for `customFilter` and the `beforeFilter` and `filterChange` events. If `true`, the comparison is performed using Date objects. +- `range` - (*boolean*) - enables the date range selection mode (from and to). +- `dateFormat` - (*string*) - the date display format (e.g., `"%d/%m/%Y"`). By default, applies the `dateFormat` used for the column. + +Calendar API configuration properties: + +- `date` - (*Date | string*) - the initial date opened in the calendar. +- `mark` - (*function*) - a function for adding custom CSS classes to specific dates. +- `disabledDates` - (*function*) - a function for disabling the selection of specific dates. +- `weekStart` - (*string*) - the start day of the week (`"saturday"`, `"sunday"`, `"monday"`). +- `weekNumbers` - (*boolean*) - shows week numbers if `true`. +- `mode` - (*string*) - the calendar display mode (`"calendar"`, `"year"`, `"month"`, `"timepicker"`). +- `timePicker` - (*boolean*) - adds the ability to select time. +- `timeFormat` - (*number*) - the time format (`12` or `24` hours). +- `thisMonthOnly` - (*boolean*) - if `true`, allows selecting dates only within the current month. +- `width` - (*string | number*) - the width of the dropdown calendar. + +**dateFilter** supports two modes of operation: + +- **single mode** (default) - the filter allows selecting a single specific date by default. Only records corresponding to the selected day will remain in the table. + +- **range mode** - this mode is activated by setting the `range: true` property in the `filterConfig` object. In this mode, the user can select the start date and the end date. The table will filter records falling within the selected time interval (inclusive). + +~~~jsx +{ + id: "receivedDate", + type: "date", + dateFormat: "%d.%m.%Y", + header: [ + { text: "Received Date" }, + { + content: "dateFilter", + filterConfig: { + placeholder: "Select a date", + range: true + } + } + ] +} +~~~ + +**Related sample**: [Grid. Header filters (dateFilter, comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/4qz8ng3c) + +### Customizing header/footer filters To add a custom function with your you own logic for the filter of a Grid column, you need to set the `customFilter` attribute when configuring the header/footer content of the [column](grid/api/api_gridcolumn_properties.md). :::note -The `customFilter` attribute can be used when [*content: "inputFilter" | "selectFilter" | "comboFilter"*](#headerfooter-filters) is set. +The `customFilter` attribute can be used when [*content: "inputFilter" | "selectFilter" | "comboFilter" | "dateFilter"*](#headerfooter-filters) is set. ::: +The `customFilter` attribute is a callback function that compares the value of each cell of the row with the value which is selected in the header/footer filter of the column. It takes two parameters: + +- `value` - (*string* | *number* | *Date* | *Date[]*) the cell value in the row +- `match` - (*string* | *string[]* | *Date* | *Date[]*) the value selected in the filter + +and returns `true`, if the row matches the filtering criteria, otherwise `false`. + ~~~jsx {8} const grid = new dhx.Grid("grid_container", { columns: [ @@ -1473,13 +1544,11 @@ const grid = new dhx.Grid("grid_container", { } ]}, ], - data: dataset + // other configuration properties }); ~~~ -**Related sample**: [Grid. Custom filters in the header](https://snippet.dhtmlx.com/gcidkxjg) - -The `customFilter` attribute is a function which compares the value of each cell of the column with the value which is selected in the header/footer filter of the column. If the value of the cell matches the specified criteria, the function returns *true*, otherwise, it returns *false*. +**Related sample**: [Grid. Custom filters in the header (dateFilter, comboFilter, inputFilter, selectFilter)](https://snippet.dhtmlx.com/gcidkxjg) ### Header/footer height @@ -1531,6 +1600,63 @@ const grid2 = new dhx.Grid("grid", { **Related sample**: [Grid. Header/footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d?tag=grid) +### Footer position + +:::tip pro version only +This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +You can define the logic of setting the position of the Grid footer as well as of the frozen rows fixed at the Grid bottom by the [`bottomSplit`](/grid/api/grid_bottomsplit_config/) option with another Grid property [`footerPosition`](/grid/api/grid_footerposition_config/). The property has the following values: + +- `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) + +- `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) + +Here is the example of positioning the footer and a frozen row at the bottom of the Grid, as presented in the above image: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + { + id: "productId", + header: [{ text: "Product Id" }], + summary: "count", + footer: [{ text: summary => `Total: ${summary.count}` }], + }, + { + id: "category", + header: [{ text: "Category" }], + }, + { + id: "price", + type: "number", + numberMask: { prefix: "$" }, + header: [{ text: "Price" }], + summary: "avg", + footer: [{ text: summary => `Avg: ${summary.avg}` }], + }, + { + id: "stock", + type: "number", + header: [{ text: "Stock" }], + summary: "sum", + footer: [{ text: summary => `Total: ${summary.sum}` }], + }, + ], + data: dataset, + footerPosition: "bottom", // "relative" by default + bottomSplit: 1 +}); +~~~ + +**Related samples**: +- [Grid. Fixed rows positioned at the bottom](https://snippet.dhtmlx.com/w5xzdjb7) +- [Grid. Footer positioned at the bottom](https://snippet.dhtmlx.com/8sbf8b2y) + ## Rows ### Row height @@ -2486,6 +2612,8 @@ If you use the GPL version of DHTMLX Grid (or DHTMLX Suite), you will be able to **Note**, to be able to drag-n-drop a column and (or) multiple rows, you need to use PRO version of the DHTMLX Grid (or DHTMLX Suite) package. ::: +There are some peculiarities of the drag-n-drop functionality in the Grid in the TreeGrid mode. [Check the related section for details](/grid/treegrid_mode/#drag-n-drop). + ### Drag-n-drop inside the grid It is possible to reorder a row or column of Grid by drag and drop. To enable the functionality, define the [`dragItem: "both"`](grid/api/grid_dragitem_config.md) property in the configuration object of Grid: diff --git a/docs/grid/features.md b/docs/grid/features.md index e05ae2d0..a0264faf 100644 --- a/docs/grid/features.md +++ b/docs/grid/features.md @@ -55,6 +55,7 @@ In this section you will find the ways of working with the TreeGrid mode of Grid | [Enabling TreeGrid mode](../treegrid_mode/#initialization) | Learn how to enable the TreeGrid mode of Grid | | [Configuring TreeGrid mode](../treegrid_mode/#configuration)| Learn how to configure the TreeGrid mode of Grid | | [Data loading in TreeGrid mode](../treegrid_mode/#data-loading)| Learn how to load data in the TreeGrid mode of Grid | +| [Drag-n-drop in TreeGrid mode](../treegrid_mode/#drag-n-drop)| Learn how to enable and configure the drag-n-drop functionality in the TreeGrid mode of Grid | | [Working with TreeGrid mode](../treegrid_mode/#work-with-grid-in-the-treegrid-mode) | Learn how to expand/collapse nodes | ### How to configure columns @@ -101,6 +102,7 @@ In this section you can learn how to configure the header and footer of Grid, ho | [Configuring header/footer](../api/api_gridcolumn_properties/) | Learn how to configure a Grid header/footer ([Example](https://snippet.dhtmlx.com/9jl55ep7)) | | [Setting the height for header and footer](../configuration/#headerfooter-height) | Learn how to set the height for rows in the header and footer of Grid ([Example](https://snippet.dhtmlx.com/wjcjl80i)) | | [Setting the text for header and footer](../configuration/#headerfooter-text) | Learn how to set the text for rows in the header and footer of Grid ([Example](https://snippet.dhtmlx.com/9jl55ep7)) | +| [Setting the position of the footer](../configuration/#footer-position) | Learn how to set the position of the footer and bottom-pinned rows ([Example 1](https://snippet.dhtmlx.com/w5xzdjb7), [Example 2](https://snippet.dhtmlx.com/8sbf8b2y)) | | [Styling header cells](../customization/#styling-header-cells) | Learn how to set styling to the text of header cells ([Example](https://snippet.dhtmlx.com/7o4elf48)) | | [Styling footer cells](../customization/#styling-footer-cells) | Learn how to set styling to the text of footer cells ([Example](https://snippet.dhtmlx.com/d254hcvp)) | @@ -354,6 +356,7 @@ In this section you will get to know how to export Grid to different formats. | Topic | Description | | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | [Exporting Grid to XLSX, CSV, PNG or PDF format](../usage/#exporting-data) | Learn how to export Grid to the necessary format ([Example 1](https://snippet.dhtmlx.com/58oqij47), [Example 2](https://snippet.dhtmlx.com/ti9l91mn)) | +| [Extended export configuration settings](../usage/#extended-export-configuration-settings)| Learn how to provide extended configuration properties for Grid export ([Example](https://snippet.dhtmlx.com/aher21cg))| ## How to localize Grid diff --git a/docs/grid/treegrid_mode.md b/docs/grid/treegrid_mode.md index 1603cd72..f1479ea0 100644 --- a/docs/grid/treegrid_mode.md +++ b/docs/grid/treegrid_mode.md @@ -36,11 +36,11 @@ const Grid = new dhx.Grid("grid_container", { Grid in the TreeGrid mode uses all the same configuration options available in the [API of the default Grid](grid/configuration.md). -There is also a set of properties you can provide for Grid in the TreeGrid mode to optimize its configuration for your needs. +There is also a set of properties you can provide for Grid in the TreeGrid mode to optimize its configuration for your needs. They are described below. ### Collapsed mode -To initialize Grid in the TreeGrid mode in the collapsed state, use the [collapsed](grid/api/grid_collapsed_config.md) property: +To initialize Grid in the TreeGrid mode in the collapsed state, use the [`collapsed`](grid/api/grid_collapsed_config.md) property: ~~~jsx {7} const grid = new dhx.Grid("grid_container", { @@ -55,24 +55,6 @@ const grid = new dhx.Grid("grid_container", { **Related sample**: [Grid (TreeGrid). Collapsed mode](https://snippet.dhtmlx.com/t4iswa2y) -### Expanding collapsed rows on drag-n-drop - -If you have collapsed rows in your Grid in the TreeGrid mode, they will expand automatically when you move the mouse pointer over them during drag-n-drop. To disable this functionality, set the [dragExpand](grid/api/grid_dragexpand_config.md) property to *false*: - -~~~jsx {7} -const grid = new dhx.Grid("grid_container", { - type: "tree", - columns: [ - // columns config - ], - dragItem: "row", - dragExpand: false, - data: dataset -}); -~~~ - -**Related sample:** [Grid (TreeGrid). Multiselection and drag-n-drop](https://snippet.dhtmlx.com/hwddi1ki) - ### Defining the id of the root parent To define the id of the root parent, use the [rootParent](grid/api/grid_rootparent_config.md) configuration property: @@ -217,6 +199,71 @@ grid.data.load("/some/data").then(function(){ }); ~~~ +## Drag-n-drop + +The drag-n-drop functionality provides the possibility to reorder items inside the grid or between several grids in the TreeGrid mode. + +To enable drag-n-drop within Grid in the TreeGrid mode (reorder the items), use the [`dragItem`](/grid/api/grid_dragitem_config/) property, to enable drag-n-drop between Grids in the TreeGrid mode, use the [`dragMode`](/grid/api/grid_dragmode_config/) property. + +### Drop behaviour + +You can specify the drag-n-drop behaviour of items in the Grid in the TreeGrid mode with the [`dropBehaviour`](/grid/api/grid_dropbehaviour_config/) option in the configuration object of the component. + +There are three modes of behaviour of a dragged item: + +- "child" - a dragged item becomes a child of the item it is dragged to + +The images below show drag-n-drop behaviour of items within a Grid in the TreeGrid mode with the `dropBehaviour: "child"` configuration setting applied: + +| Dragging an item | Result | +|-----------------------------------------------------------|-----------------------------------------------------------| +|![](../assets/treegrid/dropbehaviour_child.png) | ![](../assets/treegrid/dropbehaviour_child_result.png) | + +- "sibling" - a dragged item becomes a sibling of the item it is dragged to + +The images below show the drag-n-drop behaviour of items within a Grid in the TreeGrid mode with the `dropBehaviour: "sibling"` configuration setting applied: + +| Dragging an item | Result | +|----------------------------------------------------------- |----------------------------------------------------------- | +|![](../assets/treegrid/dropbehaviour_sibling.png) | ![](../assets/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 + +~~~jsx +const grid = new dhx.Grid("treegrid_container", { + type: "tree", + columns: [ + { id: "name", header: [{ text: "Book Name" }], gravity: 1.5 }, + { id: "price", type: "string", header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }] }, + { id: "cover", type: "string", header: [{}, { text: "Cover" }] }, + { id: "ships", type: "string", header: [{ text: "Ships in" }] }, + { id: "inStock", type: "string", header: [{ text: "In stock" }] } + ], + dragItem: "both", // to activate the functionality for columns or rows separately, set the value to "column" or "row" + dropBehaviour: "sibling" // enables one of the drop modes "child" | "sibling" | "complex" +}); +~~~ + +**Related sample**: [Grid (TreeGrid). Drop behaviour](https://snippet.dhtmlx.com/o2v3pcg0) + +### Expanding collapsed rows on drag-n-drop + +If you have collapsed rows in your Grid in the TreeGrid mode, they will expand automatically when you move the mouse pointer over them during drag-n-drop. To disable this functionality, set the [`dragExpand`](grid/api/grid_dragexpand_config.md) property to *false*: + +~~~jsx {7} +const grid = new dhx.Grid("grid_container", { + type: "tree", + columns: [ + // columns config + ], + dragItem: "row", + dragExpand: false, + data: dataset +}); +~~~ + +**Related sample:** [Grid (TreeGrid). Multiselection and drag-n-drop](https://snippet.dhtmlx.com/hwddi1ki) + ## Work with Grid in the TreeGrid mode While working with Grid in the TreeGrid mode, you can use the [API methods of DHTMLX Grid](/category/grid-methods/) which allow setting configuration of columns, getting an object of a particular column as well as the parameters of a certain cell. There are some methods specific for the TreeGrid mode of Grid. These are the methods for expanding/collapsing nodes. diff --git a/docs/grid/usage.md b/docs/grid/usage.md index 49764fd9..168622b5 100644 --- a/docs/grid/usage.md +++ b/docs/grid/usage.md @@ -473,7 +473,7 @@ The [](grid/api/grid_editend_method.md) method does not work if [the type of the ### Exporting data -You can easily export data of Grid into the Excel, CSV, PDF, or PNG format. +You can easily export data of Grid into the Excel, CSV, PDF, or PNG format. Besides the standard functionality of the `Export` module methods described below, you can also [provide advanced configuring of parameters for Grid export](/grid/usage/#extended-export-configuration-settings) via the Grid [`exportConfig`](/grid/api/grid_exportconfig_config/) property. #### Exporting data to Excel @@ -481,7 +481,7 @@ Since v9.2 DHTMLX Grid uses the WebAssembly-based library [Json2Excel](https://g Thus, to have the possibility of exporting files you need to: -- call the [`xlsx()`](grid/api/export/grid_xlsx_method.md) method of the `Export` module. The method takes an [object with export settings](grid/api/export/grid_xlsx_method.md) as a parameter (all settings are optional) +- call the [`xlsx()`](grid/api/export/grid_xlsx_method.md) method of the `Export` module. The method takes an [object with export settings](grid/api/export/grid_xlsx_method.md) as a parameter (all settings are optional) and returns a promise of data export. - if you use the public export server, you don't need to specify the link to it, since it is used by default - if you use your own export server, you need to: - install the [Json2Excel](https://github.com/dhtmlx/json2excel) library @@ -492,7 +492,10 @@ grid.export.xlsx({ name: "my_file", // the name of a ready Excel file, "grid" by default tableName: "grid", // the name of a sheet with grid data in the Excel file, "data" by default dateFormatMask: "mm.dd.yy" // the date format mask for Excel, "dd/mm/yy" by default -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); ~~~ You can check the latest version of the Json2Excel library at the [github repository](https://github.com/dhtmlx/json2excel). @@ -515,14 +518,17 @@ or provide a local path to the export module on your computer as a value of the #### Exporting data to CSV -You can export data from Grid to the CSV format with the [`csv()`](grid/api/export/grid_csv_method.md) method of the Export module. The method takes an [object with export settings](grid/api/export/grid_csv_method.md) as a parameter (all settings are optional). +You can export data from Grid to the CSV format with the [`csv()`](grid/api/export/grid_csv_method.md) method of the Export module. The method takes an [object with export settings](grid/api/export/grid_csv_method.md) as a parameter (all settings are optional) and returns a promise of data export. ~~~jsx grid.export.csv({ name: "my_file", // the name of a ready CSV file, "grid" by default rowDelimiter: "\t", // the delimiter used to separate rows, "\n" (newline) by default columnDelimiter: ";" // the delimiter used to separate columns, "," (comma) by default -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); ~~~ **Related sample**: [Grid. Export to xlsx and csv](https://snippet.dhtmlx.com/58oqij47) @@ -531,31 +537,176 @@ The `csv()` method returns a CSV string with Grid data. #### Exporting data to PDF -The [`pdf()`](grid/api/export/grid_pdf_method.md) method of the Export module allows you to export data from Grid into a PDF file. The method takes an [object with export settings](grid/api/export/grid_pdf_method.md) as a parameter (all settings are optional). +The [`pdf()`](grid/api/export/grid_pdf_method.md) method of the Export module allows you to export data from Grid into a PDF file. The method takes an [object with export settings](grid/api/export/grid_pdf_method.md) as a parameter (all settings are optional) and returns a promise of data export. ~~~jsx grid.export.pdf({ - format: "A4", // the format of the output file, "A4" by default - scale: 0.75, // the scale of the grid rendering (between 0.1 and 2) - displayHeaderFooter: true, // defines whether to display the header and footer, false by default + pdf: { + format: false, // the format of the output file, "A4" by default + scale: 0.75, // the scale of the grid rendering (between 0.1 and 2) + displayHeaderFooter: true // defines whether to display the header and footer, false by default + }, theme: "dark" // the exported theme, "light" by default -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); ~~~ **Related sample**: [Grid. Export to PDF/PNG](https://snippet.dhtmlx.com/ti9l91mn) #### Exporting data to PNG -The [`png()`](grid/api/export/grid_png_method.md) method of the Export module allows you to export data from Grid into a PNG file. The method takes an [object with export settings](grid/api/export/grid_png_method.md) as a parameter (all settings are optional). +The [`png()`](grid/api/export/grid_png_method.md) method of the Export module allows you to export data from Grid into a PNG file. The method takes an [object with export settings](grid/api/export/grid_png_method.md) as a parameter (all settings are optional) and returns a promise of data export. ~~~jsx grid.export.png({ theme: "dark" // the exported theme, "light" by default -}); +}) + .then(() => console.log("success")) + .catch(() => console.log("failure")) + .finally(() => console.log("finished")); ~~~ **Related sample**: [Grid. Export to PDF/PNG](https://snippet.dhtmlx.com/ti9l91mn) +### Extended export configuration settings + +:::tip pro version only +This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +There is a possibility to provide an advanced configuring of parameters for Grid export into the CSV, XLSX, PDF, and PNG formats with the [`exportConfig`](/grid/api/grid_exportconfig_config/) property. + +Unlike the standard export, [`exportConfig`](/grid/api/grid_exportconfig_config/) allows you to dynamically modify the structure and content of the resulting document at the moment the export function is called. With this property, you can: + +- **filter data**: exclude specific rows, columns, or spans by returning `null` in the corresponding callback methods +- **transform content**: modify headers, format values, or strip HTML templates to ensure data is displayed correctly in spreadsheet editors +- **define format-specific settings**: set delimiters for CSV, date masks for Excel, or visual themes for PDF +- **adjust styling**: override Grid properties (such as row height) specifically for the exported file + +The `exportConfig` property is a callback function that takes the following parameters: + +| Parameter | Description | +|------------------ |---------------------------------------------------------------------------------- | +| `config` | (*IGridConfig*) the current configuration of a Grid instance | +| `exportType` | (*string*) the type of export being performed: "pdf", "png", "csv", or "xlsx" | + +The returned configuration object may contain the following properties: + +- `columns` - (*function*) a function for column transformation; returning `null` excludes the column from the export +- `data` - (*function*) a function for filtering or modifying row data; returning `null` excludes the row from the final file +- `spans` - (*function*) a function to handle cell merging (spans); returning `null` ignores the span in the export +- `typeConfig` - (*object*) an object containing unique settings for the specific format (filenames, delimiters, themes) +- **Grid properties** - any Grid property that should be overridden (e.g., `headerRowHeight`) set as a `key:value` pair, where the *key* is the property name and the *value* is the property value to be applied only to the exported state + +#### Example 1: Conditional filtering and formatting + +In this example, sensitive data is excluded for all formats, while for PDF/PNG the headers are converted to the uppercase and HTML templates are disabled: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + data:dataset, + exportConfig: (config, exportType) => ({ + // Column transformation + columns: (column) => { + // Completely exclude the "experience_level" column from any export + if (column.id === "experience_level") return null; + + // For spreadsheet formats (Excel/CSV), keep columns as is + if (exportType === "xlsx" || exportType === "csv") { + return column; + } + + // For PDF/PNG, remove HTML templates and uppercase the headers + column.template = null; + column.header[0].text = column.header[0].text.toUpperCase(); + + return column; + }, + + // Row data filtering + data: (row) => { + // Exclude young animals (age <= 3) from the export + if (row.animal_age <= 3) return null; + + // Business logic example: do not export dogs to CSV and cats to Excel + if (exportType === "csv" && row.animal_type === "Dog") return null; + if (exportType === "xlsx" && row.animal_type === "Cat") return null; + + return row; + }, + + // Adjust the header height specifically for the Excel file + headerRowHeight: exportType === "xlsx" ? 60 : config.headerRowHeight, + }), +}); +~~~ + +#### Example 2: Format-specific configuration with `typeConfig` + +The following example shows the use of the `typeConfig` property to define filenames, CSV delimiters, and XLSX date masks: + +~~~jsx +const exportConfig = { + csv: { + name: "cat_report", // Resulting CSV filename + rowDelimiter: "\t", // Use Tab as row delimiter + columnDelimiter: ";" // Use Semicolon as column delimiter + }, + xlsx: { + name: "dog_report", // Resulting Excel filename + tableName: "Main Report", // Sheet name in the Excel workbook + dateFormatMask: "dd.mm.yyyy" // Excel-specific date format mask + }, + pdf: { + theme: "dark", // Apply the dark theme to the PDF document + scale: 0.8, // Content scaling (80%) + format: "A4" // Page format + } +}; + +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + data:dataset, + exportConfig: (config, exportType) => ({ + // Pass settings from our object based on the export type + typeConfig: exportConfig[exportType] + }) +}); +~~~ + +#### Example 3: Filtering spans + +If your Grid uses cell merging, you can manage how spans are handled during export. Check the example below: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + data:dataset, + spans: [ + // span configuration objects + ], + exportConfig: (config, exportType) => ({ + spans: (span) => { + // Exclude cells' merges when exporting to CSV, + // as the CSV format does not support merged cells + if (exportType === "csv") return null; + return span; + } + }) +}); +~~~ + +**Related sample**: [Grid. Custom export logic for PDF, PNG, XLSX, CSV](https://snippet.dhtmlx.com/aher21cg) + ## Grouping data :::tip pro version only diff --git a/docs/tree/api/api_overview.md b/docs/tree/api/api_overview.md index f6a51606..674ea1ed 100644 --- a/docs/tree/api/api_overview.md +++ b/docs/tree/api/api_overview.md @@ -69,7 +69,7 @@ description: You can explore the API of Tree in the documentation of the DHTMLX | ----------------------------------------- | ------------------------------------------------ | | [](tree/api/tree_autoload_config.md) | @getshort(tree/api/tree_autoload_config.md) | | [](tree/api/tree_checkbox_config.md) | @getshort(tree/api/tree_checkbox_config.md) | -| [](tree/api/tree_collapsed_config.md) | @getshort(tree/api/tree_collapsed_config.md) | +| [](tree/api/tree_collapsed_config.md) | @getshort(tree/api/tree_collapsed_config.md) | | [](tree/api/tree_css_config.md) | @getshort(tree/api/tree_css_config.md) | | [](tree/api/tree_data_config.md) | @getshort(tree/api/tree_data_config.md) | | [](tree/api/tree_dragcopy_config.md) | @getshort(tree/api/tree_dragcopy_config.md) | @@ -84,3 +84,4 @@ description: You can explore the API of Tree in the documentation of the DHTMLX | [](tree/api/tree_rootid_config.md) | @getshort(tree/api/tree_rootid_config.md) | | [](tree/api/tree_selection_config.md) | @getshort(tree/api/tree_selection_config.md) | | [](tree/api/tree_template_config.md) | @getshort(tree/api/tree_template_config.md) | +| [](tree/api/tree_tooltip_config.md) | @getshort(tree/api/tree_tooltip_config.md) | diff --git a/docs/tree/api/tree_autoload_config.md b/docs/tree/api/tree_autoload_config.md index 361861c5..1cb6f4a6 100644 --- a/docs/tree/api/tree_autoload_config.md +++ b/docs/tree/api/tree_autoload_config.md @@ -11,7 +11,7 @@ description: You can explore the autoload config of Tree in the documentation of @signature: {'autoload?: string;'} @example: -const tree = new dhx.Tree("tree_container", {autoload: "/backend/autoload"}); +const tree = new dhx.Tree("tree_container", { autoload: "/backend/autoload" }); tree.data.load("/backend/autoload?id=tree"); @descr: @@ -19,18 +19,16 @@ tree.data.load("/backend/autoload?id=tree"); **Related sample**: [Tree. Autoload](https://snippet.dhtmlx.com/ahrblf1m) :::info -To control the process of auto-load, use the related [beforeItemLoad](tree_collection/api/treecollection_beforeitemload_event.md) and [afterItemLoad](tree_collection/api/treecollection_afteritemload_event.md) events +To control the process of auto-load, use the related [`beforeItemLoad`](tree_collection/api/treecollection_beforeitemload_event.md) and [`afterItemLoad`](tree_collection/api/treecollection_afteritemload_event.md) events. ::: -
- Here is an example of sending an HTTP GET request to the server using the Express library: -~~~js +~~~jsx app.get("/backend/autoload", (req, res) => { const currentData = treeData.filter(i => i.parent === req.query.id); return res.send(currentData); -}) +}); ~~~ -[comment]: # (@related: tree/initialization_of_dhtmlxtree.md#initialize-tree) +**Related article**: [Initialization](/tree/initialization_of_dhtmlxtree/#initialize-tree) diff --git a/docs/tree/api/tree_checkbox_config.md b/docs/tree/api/tree_checkbox_config.md index b8f7ac08..80178927 100644 --- a/docs/tree/api/tree_checkbox_config.md +++ b/docs/tree/api/tree_checkbox_config.md @@ -11,10 +11,12 @@ description: You can explore the checkbox config of Tree in the documentation of @signature: {'checkbox?: boolean;'} @example: -const tree = new dhx.Tree("tree_container", {checkbox: true}); +const tree = new dhx.Tree("tree_container", { checkbox: true }); @descr: **Related sample**: [Tree. Inline editing, drag-and-drop and checkboxes](https://snippet.dhtmlx.com/hyfz6ai7) -[comment]: # (@related: tree/initialization_of_dhtmlxtree.md#initialize-tree tree/configuration.md#checkboxes-for-items) +**Related articles**: +- [Initialization](/tree/initialization_of_dhtmlxtree/#initialize-tree) +- [Configuration](/tree/configuration/#checkboxes-for-items) diff --git a/docs/tree/api/tree_css_config.md b/docs/tree/api/tree_css_config.md index 4225955b..705cbf53 100644 --- a/docs/tree/api/tree_css_config.md +++ b/docs/tree/api/tree_css_config.md @@ -31,18 +31,19 @@ description: You can explore the css config of Tree in the documentation of the ~~~ -**Related samples**: -- [Tree. Styling (custom CSS)](https://snippet.dhtmlx.com/ocv4p7zg) -- [Tree. Custom toggle icon](https://snippet.dhtmlx.com/zapehxd3) - +@descr: Note, that the DHTMLX library provides [a set of own CSS classes](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget) that you can also apply to change the appearance of Tree: -~~~js +~~~jsx const tree = new dhx.Tree("tree_container", { css: "dhx_widget--bg-gray" }); ~~~ +**Related samples**: +- [Tree. Styling (custom CSS)](https://snippet.dhtmlx.com/ocv4p7zg) +- [Tree. Custom toggle icon](https://snippet.dhtmlx.com/zapehxd3) + **Related articles**: - [List of CSS classes for styling a widget](helpers/base_elements.md#list-of-css-classes-for-styling-a-widget) - [Themes](themes.md) diff --git a/docs/tree/api/tree_data_config.md b/docs/tree/api/tree_data_config.md index ab063fc0..9f2ec217 100644 --- a/docs/tree/api/tree_data_config.md +++ b/docs/tree/api/tree_data_config.md @@ -15,7 +15,7 @@ Please note that if you specify the `id` fields in the tree collection, their va @signature: {'data?: object[];'} @params: -Each **data** object can have the following properties: +Each `data` object can have the following properties: @@ -77,10 +77,12 @@ const tree = new dhx.Tree("tree", { - [Tree. Initialization with config.data](https://snippet.dhtmlx.com/r49y51k3) - [Tree. Initialization with external TreeCollection](https://snippet.dhtmlx.com/osjo7t0h) -You can disable displaying of a checkbox for a tree item via the [update](tree_collection/api/treecollection_update_method.md) method of tree collection. +You can disable displaying of a checkbox for a tree item via the [`update()`](tree_collection/api/treecollection_update_method.md) method of tree collection. ~~~jsx -tree.data.update("Books", {checkbox:false}); +tree.data.update("Books", { checkbox: false }); ~~~ -[comment]: # (@related: tree/initialization_of_dhtmlxtree.md#initialize-tree tree/loading_data.md#preparing-data-set) +**Related articles**: +- [Initialization](/tree/initialization_of_dhtmlxtree/#initialize-tree) +- [Data loading](tree/loading_data.md#preparing-data-set) diff --git a/docs/tree/api/tree_dropbehaviour_config.md b/docs/tree/api/tree_dropbehaviour_config.md index ddcf28d4..ee1c75a1 100644 --- a/docs/tree/api/tree_dropbehaviour_config.md +++ b/docs/tree/api/tree_dropbehaviour_config.md @@ -11,16 +11,18 @@ description: You can explore the dropBehaviour config of Tree in the documentati @signature: {'dropBehaviour?: "child" | "sibling" | "complex";'} @example: -const source = new dhx.Tree("tree-source",{dragMode:"source", dropBehaviour:"complex"}); -const target = new dhx.Tree("tree-target",{dragMode:"target", dropBehaviour:"complex"}); +const source = new dhx.Tree("tree-source", { dragMode: "source", dropBehaviour: "complex" }); +const target = new dhx.Tree("tree-target", { dragMode: "target", dropBehaviour: "complex" }); @descr: **Related sample**: [Tree. Drop behaviour](https://snippet.dhtmlx.com/80mh3hly) -{{note Don't forget to enable drag-n-drop via the [](tree/api/tree_dragmode_config.md) property to use dropBehaviour.}} +:::note +Don't forget to enable drag-n-drop via the [`dragMode`](tree/api/tree_dragmode_config.md) property to use `dropBehaviour`. +::: -There are three modes of behaviour of a dragged tree item, depending on the value set for the **dropBehaviour** option in the configuration object of a tree: +There are three modes of behaviour of a dragged tree item, depending on the value set for the `dropBehaviour` option in the configuration object of a tree: - "child" - a dragged item becomes a child of the item it is dragged to @@ -32,4 +34,4 @@ There are three modes of behaviour of a dragged tree item, depending on the valu - "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) -[comment]: # (@related: tree/initialization_of_dhtmlxtree.md#initialize-tree tree/drag_and_drop_handling.md#drop-behaviour) +**Related article**: [Drop behaviour](/tree/drag_and_drop_handling/#drop-behaviour) diff --git a/docs/tree/api/tree_template_config.md b/docs/tree/api/tree_template_config.md index 88b59938..d1f4f736 100644 --- a/docs/tree/api/tree_template_config.md +++ b/docs/tree/api/tree_template_config.md @@ -8,7 +8,7 @@ description: You can explore the template config of Tree in the documentation of @short: Optional. Specifies a template for Tree items -@signature: template?: (item: object, isFolder: boolean) => string | null; +@signature: {'template?: (item: object, isFolder: boolean) => string | null;'} @params: The template function takes two parameters: @@ -16,9 +16,11 @@ The template function takes two parameters: - `item` - an object of a Tree item - `isFolder` - defines whether an item is a folder -and returns either a string or null. +and returns either a *string* or *null*. -**Tip.** The callback function together with the isFolder parameter allows you to specify a template for child items only. +:::tip +The callback function together with the `isFolder` parameter allows you to specify a template for child items only. +::: @example: const tree = new dhx.Tree("tree_container", { @@ -36,7 +38,8 @@ const tree = new dhx.Tree("tree_container", { return isFolder ? null : template; } }); -@examplestop: + +@descr: **Related sample**: [Tree. Handling events in template](https://snippet.dhtmlx.com/hg3f50td) diff --git a/docs/tree/api/tree_tooltip_config.md b/docs/tree/api/tree_tooltip_config.md new file mode 100644 index 00000000..69b55df8 --- /dev/null +++ b/docs/tree/api/tree_tooltip_config.md @@ -0,0 +1,90 @@ +--- +sidebar_label: tooltip +title: JavaScript Tree - tooltip Config +description: You can explore the tooltip config of Tree 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. +--- + +# tooltip + +@short: Optional. Enables and configures tooltips for Tree items + +#### Usage + +~~~jsx +tooltip?: + | boolean + | (item: ITreeItem, event: MouseEvent) => string + | { + template?: (item: ITreeItem, event: MouseEvent) => string; + force?: boolean; // false by default + showDelay?: number; + hideDelay?: number; + htmlEnable?: boolean; + margin?: number; // 8 by default + position?: "right" | "bottom" | "center" | "left" | "top"; // "bottom" by default + css?: string; + } +~~~ + +The property can have three types of values: + +- *boolean* — if `true`, enables the standard tooltip (the value is taken from the [`value`](/tree/api/tree_data_config/) property of the item) +- *function* — a template function that returns the string content of the tooltip +- *object* — a configuration object for detailed customization of the tooltip's behavior and appearance. Check the available properties below + +@params: + +The properties of the `tooltip` *configuration object* are described below: + +- `template` - (optional) a function that determines the content of the tooltip. It takes two arguments: + - `item` - (*object*) the data object of a tree item. + - `event` - (*object*) the native mouse event (MouseEvent). + The template function must return a string. +- `force` - (optional) if `true`, forces the tooltip to appear without delays. In this case, the `showDelay` and `hideDelay` settings are ignored. The default value is `false`. +- `showDelay` - (optional) the delay before the tooltip appears (in milliseconds). +- `hideDelay` - (optional) the delay before the tooltip hides (in milliseconds). +- `htmlEnable` - (optional) specifies whether the use of the HTML markup inside the tooltip is allowed. +- `margin` - (optional) the margin between the tree item and the tooltip (in pixels). The default value is `8`. +- `position` - (optional) the position of the tooltip relative to the item. The possible values are: `"right"`, `"bottom"`, `"center"`, `"left"`, `"top"`. The default value is `"bottom"`. +- `css` - (optional) the name of the CSS class for customizing the style of the tooltip container. + +@descr: +#### Examples + +- using the tooltip configuration with a custom template and a display delay: + +~~~jsx +const tree = new dhx.Tree("tree_container", { + tooltip: { + htmlEnable: true, + // the 500ms delay before showing + showDelay: 500, + // the tooltip will appear to the right of the item + position: "right", + // a CSS class for styling + css: "custom-tooltip-style", + // the template function + template: (item, event) => { + // display the item's name and the number of children (if any) + const count = item.items ? ` (${item.items.length})` : ""; + return `${item.value}${count}`; + } + } +}); +~~~ + +- defining the content of tooltip via a function: + +~~~jsx +const tree = new dhx.Tree("tree_container", { + tooltip: (item) => + (item.value + (item.items ? ` (${item.items?.length})` : "") + "") +}); +~~~ + +**Related sample**: [Tree. Tooltip template](https://snippet.dhtmlx.com/kswil8cl) + +**Related article**: [Configuration](/tree/configuration/#tooltips-for-items) + +@changelog: +Added in v9.3 \ No newline at end of file diff --git a/docs/tree/configuration.md b/docs/tree/configuration.md index 425c69d4..8ce03932 100644 --- a/docs/tree/configuration.md +++ b/docs/tree/configuration.md @@ -13,19 +13,19 @@ description: You can explore the configuration of Tree in the documentation of t 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. -In order to enable checkboxes for items, make use of the [](tree/api/tree_checkbox_config.md) configuration option: +In order to enable checkboxes for items, make use of the [`checkbox`](tree/api/tree_checkbox_config.md) configuration option: -~~~js -const tree = new dhx.Tree("tree_container", {checkbox: true}); +~~~jsx +const tree = new dhx.Tree("tree_container", { checkbox: true }); ~~~ **Related sample**: [Tree. Inline editing, drag-and-drop and checkboxes](https://snippet.dhtmlx.com/hyfz6ai7) ## Collapsed mode -To initialize a tree in the collapsed state, use the [collapsed](tree/api/tree_collapsed_config.md) property: +To initialize a tree in the collapsed state, use the [`collapsed`](tree/api/tree_collapsed_config.md) property: -~~~js +~~~jsx const tree = new dhx.Tree("tree_container", { collapsed: true, }); @@ -37,23 +37,23 @@ const tree = new dhx.Tree("tree_container", { ![](../assets/tree/editable.png) -It is possible to enable editing of the text of Tree items before initialization of the component using the [](tree/api/tree_editable_config.md) configuration property: +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: -~~~js -const tree = new dhx.Tree("tree_container", {editable: true}); +~~~jsx +const tree = new dhx.Tree("tree_container", { editable: true }); ~~~ **Related sample**: [Tree. Inline editing, drag-and-drop and checkboxes](https://snippet.dhtmlx.com/hyfz6ai7) ## Key navigation -You can switch on key navigation in a tree with the [](tree/api/tree_keynavigation_config.md) property before initialization of the component: +You can switch on key navigation in a tree with the [`keyNavigation`](tree/api/tree_keynavigation_config.md) property before initialization of the component: -~~~js -const tree = new dhx.Tree("tree_container", {keyNavigation: true}); +~~~jsx +const tree = new dhx.Tree("tree_container", { keyNavigation: true }); ~~~ -After that you need to select any item and then apply Arrow keys: +After that you need to select any item and then apply the Arrow keys:
@@ -84,10 +84,65 @@ After that you need to select any item and then apply Arrow keys: **Related sample**: [Tree. Disable selection](https://snippet.dhtmlx.com/2x9htpke) -The default configuration of Tree provides you with the selection feature that allows highlighting a Tree item. To disable selection in a Tree you need to set the [](tree/api/tree_selection_config.md) configuration property to *false*: +The default configuration of Tree provides you with the selection feature that allows highlighting a Tree item. To disable selection in a Tree you need to set the [`selection`](tree/api/tree_selection_config.md) configuration property to `false`: -~~~js +~~~jsx const tree = new dhx.Tree("tree_container", { selection: false, }); ~~~ + +## Tooltips for items + +You can add tooltips for Tree items via the [`tooltip`](/tree/api/tree_tooltip_config/) configuration option. It is possible to use the default tooltips, provide a template function to render a custom content in the tooltips, or apply extended options to get the desired tooltip configuration. Check the following examples: + +- using the tooltip configuration with a custom template and a display delay: + +~~~jsx +const tree = new dhx.Tree("tree_container", { + tooltip: { + htmlEnable: true, + // the 500ms delay before showing + showDelay: 500, + // the tooltip will appear to the right of the item + position: "right", + // a CSS class for styling + css: "custom-tooltip-style", + // the template function + template: (item, event) => { + // display the item's name and the number of children (if any) + const count = item.items ? ` (${item.items.length})` : ""; + return `${item.value}${count}`; + } + } +}); +~~~ + +- defining the content of tooltip via a function: + +~~~jsx +const tree = new dhx.Tree("tree_container", { + tooltip: (item) => + (item.value + (item.items ? ` (${item.items?.length})` : "") + "") +}); +~~~ + +**Related sample**: [Tree. Tooltip template](https://snippet.dhtmlx.com/kswil8cl) + +The [`tooltip`](/tree/api/tree_tooltip_config/) property can have the following types of values: + +- *boolean* — if `true`, enables the standard tooltip (the value is taken from the [`value`](/tree/api/tree_data_config/) property of the item) +- *function* — a template function that returns the string content of the tooltip +- *object* — a configuration object for detailed customization of the tooltip's behavior and appearance. The available properties are given below: + - `template` - (optional) a function that determines the content of the tooltip. It takes two arguments: + - `item` - (*object*) the data object of a tree item. + - `event` - (*object*) the native mouse event (MouseEvent). + The template function must return a string. + - `force` - (optional) if `true`, forces the tooltip to appear without delays. In this case, the `showDelay` and `hideDelay` settings are ignored. The default value is `false`. + - `showDelay` - (optional) the delay before the tooltip appears (in milliseconds). + - `hideDelay` - (optional) the delay before the tooltip hides (in milliseconds). + - `htmlEnable` - (optional) specifies whether the use of HTML markup inside the tooltip is allowed. + - `margin` - (optional) the margin between the tree item and the tooltip (in pixels). The default value is `8`. + - `position` - (optional) the position of the tooltip relative to the item. The possible values are: `"right"`, `"bottom"`, `"center"`, `"left"`, `"top"`. The default value is `"bottom"`. + - `css` - (optional) the name of the CSS class for customizing the style of the tooltip container. + diff --git a/docs/tree/drag_and_drop_handling.md b/docs/tree/drag_and_drop_handling.md index 81508d4b..e1be516f 100644 --- a/docs/tree/drag_and_drop_handling.md +++ b/docs/tree/drag_and_drop_handling.md @@ -9,8 +9,8 @@ description: You can explore the drag-n-drop of Tree in the documentation of the DHTMLX Tree possesses an advanced drag-n-drop functionality. With this feature, it is possible to reorder items in a tree and drag items between trees. To enable drag-n-drop, you should define the drag mode. ~~~js -const source = new dhx.Tree("tree-source",{dragMode:"source", dropBehaviour:"complex"}); -const target = new dhx.Tree("tree-target",{dragMode:"target", dropBehaviour:"complex"}); +const source = new dhx.Tree("tree-source", { dragMode: "source", dropBehaviour: "complex" }); +const target = new dhx.Tree("tree-target", { dragMode: "target", dropBehaviour: "complex" }); ~~~ ## Drag mode @@ -23,19 +23,21 @@ There are three modes of drag-n-drop available in a tree: By setting the drag mode, you automatically enable the drag-n-drop functionality. -~~~js +~~~jsx const tree = new dhx.Tree("tree_container", { - dragMode:"source" + dragMode: "source" }); ~~~ **Related sample**: [Tree. Drag modes](https://snippet.dhtmlx.com/7idtw7i4) -{{note Please note that drag-n-drop within a tree works, if it has **dragMode:"both"** setting in its configuration object.}} +:::note +Please note that drag-n-drop within a tree works, if it has `dragMode:"both"` setting in its configuration object. +::: ## Drop behaviour -You can specify the drag-n-drop behaviour of tree items with the [](tree/api/tree_dropbehaviour_config.md) in the configuration object of a tree. +You can specify the drag-n-drop behaviour of tree items with the [`dropBehaviour`](tree/api/tree_dropbehaviour_config.md) property in the configuration object of a tree. There are three modes of behaviour of a dragged tree item: @@ -51,11 +53,11 @@ There are three modes of behaviour of a dragged tree item: ## Copying dragged item -Instead of moving a dragged item to a new position in the same or a different tree, you can copy it. Use the [](tree/api/tree_dragcopy_config.md) option in the configuration object of a tree. +Instead of moving a dragged item to a new position in the same or a different tree, you can copy it. Use the [`dragCopy`](tree/api/tree_dragcopy_config.md) option in the configuration object of a tree. -~~~js -const treeSource = new dhx.Tree("tree-source", {dragMode: "source", dragCopy: true}); -const treeTarget = new dhx.Tree("tree-target", {dragMode: "target", dragCopy: true}); +~~~jsx +const treeSource = new dhx.Tree("tree-source", { dragMode: "source", dragCopy: true }); +const treeTarget = new dhx.Tree("tree-target", { dragMode: "target", dragCopy: true }); ~~~ **Related sample**: [Tree. Copy dragged item](https://snippet.dhtmlx.com/xm0lxbpj) diff --git a/docs/tree/features.md b/docs/tree/features.md index dc9b4fdd..797122a7 100644 --- a/docs/tree/features.md +++ b/docs/tree/features.md @@ -46,13 +46,14 @@ In this section you can find out how to initialize Tree, how to load data into t In this section you can find out how to configure drag-n-drop in Tree, how to enable or disable key navigation, how to let users to edit items by double-click. -| Topic | Description | -| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Configuring drag-n-drop](../drag_and_drop_handling/) | Learn how to configure the necessary mode of drag-n-drop of items between trees ([Example 1](https://snippet.dhtmlx.com/7idtw7i4), [Example 2](https://snippet.dhtmlx.com/hyfz6ai7)) | -| [Configuring drop behavior](../drag_and_drop_handling/) | Learn how to define the behavior of a dragged item ([Example](https://snippet.dhtmlx.com/80mh3hly)) | -| [Copying items during drag-n-drop](../drag_and_drop_handling/) | Learn how to copy an item to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/xm0lxbpj)) | -| [Enabling/disabling key navigation](../configuration/#key-navigation) | Learn how to enable and disable key navigation ([Example](https://snippet.dhtmlx.com/icql8fwq)) | -| [Activating inline editing](../configuration/#editing-of-items) | Learn how to activate inline editing on Tree initialization ([Example](https://snippet.dhtmlx.com/hyfz6ai7)) | +| Topic | Description | +| ------------------------------------------------------------- | -------------------------------------------------------------------------- | +| [Configuring drag-n-drop](../drag_and_drop_handling/) | Learn how to configure the necessary mode of drag-n-drop of items between trees ([Example 1](https://snippet.dhtmlx.com/7idtw7i4), [Example 2](https://snippet.dhtmlx.com/hyfz6ai7)) | +| [Configuring drop behavior](../drag_and_drop_handling/) | Learn how to define the behavior of a dragged item ([Example](https://snippet.dhtmlx.com/80mh3hly)) | +| [Copying items during drag-n-drop](../drag_and_drop_handling/) | Learn how to copy an item to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/xm0lxbpj)) | +| [Enabling/disabling key navigation](../configuration/#key-navigation) | Learn how to enable and disable key navigation ([Example](https://snippet.dhtmlx.com/icql8fwq)) | +| [Activating inline editing](../configuration/#editing-of-items) | Learn how to activate inline editing on Tree initialization ([Example](https://snippet.dhtmlx.com/hyfz6ai7)) | +| [Enabling and configuring tooltips](../configuration/#tooltips-for-items) | Learn how to enable and configure tooltips for Tree items ([Example](https://snippet.dhtmlx.com/kswil8cl)) | ## How to customize Tree and change its size diff --git a/docs/whatsnew.md b/docs/whatsnew.md index 94398943..5c34e940 100644 --- a/docs/whatsnew.md +++ b/docs/whatsnew.md @@ -8,6 +8,55 @@ 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 + +Released on February 17, 2026 + +### New functionality + +- Grid. The ability to [specify a flexible configuration for export](/grid/usage/#extended-export-configuration-settings) to the CSV, XLSX, PDF, and PNG formats (PRO version) + - new Grid configuration property: [`exportConfig`](/grid/api/grid_exportconfig_config/) +- Grid. A new [`dateFilter`](/grid/configuration/#headerfooter-filters) type of filter for the column header is added (PRO version) +- Grid. The ability to [define the position of the footer and frozen rows within the component container](/grid/configuration/#footer-position) (PRO version) + - new Grid configuration property: [`footerPosition`](/grid/api/grid_footerposition_config/) +- Grid. The ability to [define the behaviour of a dragged item](/grid/treegrid_mode/#drop-behaviour) in the TreeGrid mode (PRO version) + - new Grid configuration property: [`dropBehaviour`](/grid/api/grid_dropbehaviour_config/) +- Tree. The ability to [add tooltips for the items](/tree/configuration/#tooltips-for-items) + - new Tree configuration property: [`tooltip`](/tree/api/tree_tooltip_config/) +- Window. The ability to [set a window to the active state](/window/usage/#setting-the-active-state) + - new Window method: [`setActive()`](/window/api/window_setactive_method/) + +### Updates + +- Chart. Export module. The [`pdf()`](/chart/api/export/chart_pdf_method/) and [`png()`](/chart/api/export/chart_png_method/) export functions return a promise of data export +- Grid. Export module. The [`pdf()`](/grid/api/export/grid_pdf_method/), [`png()`](/grid/api/export/grid_png_method/), [`xlsx()`](/grid/api/export/grid_xlsx_method/) and [`csv()`](/grid/api/export/grid_csv_method/) export functions return a promise of data export +- Grid. The functionality of [column header filters](/grid/configuration/#headerfooter-filters) is updated: + - the [`setValue()`](/grid/api/headerfilter/setvalue_method/) method (of the [`getHeaderFilter()`](/grid/api/grid_getheaderfilter_method/) API), can take a *Date* object or an array of *Date[]* objects as a parameter + - the `value` parameter of the callback functions of [`filterChange`](/grid/api/grid_filterchange_event/) and [`beforeFilter`](/grid/api/grid_beforefilter_event/) events can be a *Date* object or an array of *Date[]* objects + - the parameters of the [`customFilter`](/grid/configuration/#customizing-headerfooter-filters) callback function can be *Date* objects or arrays of *Date[]* objects + +### Fixes + +- Grid. The inability to set a single date in the range mode is fixed +- Grid. Performance issues that occurred while filtering large data sets via `inputFilter` + +### New samples + +#### Grid + +- [Grid. Custom export logic for PDF, PNG, XLSX, CSV](https://snippet.dhtmlx.com/aher21cg) +- [Grid. Fixed rows positioned at the bottom](https://snippet.dhtmlx.com/w5xzdjb7) +- [Grid. Footer positioned at the bottom](https://snippet.dhtmlx.com/8sbf8b2y) +- [Grid (TreeGrid). Drop behaviour](https://snippet.dhtmlx.com/o2v3pcg0) + +#### Tree + +- [Tree. Tooltip template](https://snippet.dhtmlx.com/kswil8cl) + +#### Window + +- [Window. Setting the active state](https://snippet.dhtmlx.com/lvm3kfwq) + ## Version 9.2.8 Released on January 28, 2026 diff --git a/docs/window/api/api_overview.md b/docs/window/api/api_overview.md index 505ba3f0..c1d0118f 100644 --- a/docs/window/api/api_overview.md +++ b/docs/window/api/api_overview.md @@ -21,6 +21,7 @@ description: You can explore the API of Window in the documentation of the DHTML | [](window/api/window_isfullscreen_method.md) | @getshort(window/api/window_isfullscreen_method.md) | | [](window/api/window_isvisible_method.md) | @getshort(window/api/window_isvisible_method.md) | | [](window/api/window_paint_method.md) | @getshort(window/api/window_paint_method.md) | +| [](window/api/window_setactive_method.md) | @getshort(window/api/window_setactive_method.md) | | [](window/api/window_setfullscreen_method.md) | @getshort(window/api/window_setfullscreen_method.md) | | [](window/api/window_setposition_method.md) | @getshort(window/api/window_setposition_method.md) | | [](window/api/window_setsize_method.md) | @getshort(window/api/window_setsize_method.md) | diff --git a/docs/window/api/window_setactive_method.md b/docs/window/api/window_setactive_method.md new file mode 100644 index 00000000..55dd299e --- /dev/null +++ b/docs/window/api/window_setactive_method.md @@ -0,0 +1,48 @@ +--- +sidebar_label: setActive() +title: JavaScript Window - setActive Method +description: You can explore the setActive method of Window 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. +--- + +# setActive() + +@short: brings a specific window to the foreground by setting it to the active state + +@signature: {'setActive(): void;'} + +@descr: +In the following example the second window overlaps the first one on initialization, but the call of `setActive()` allows bringing the first window back to the front. + +@example: +const windowConfig = { + width: 300, + height: 300, + html: "
Window content
" +}; + +const window1 = new dhx.Window({ + ...windowConfig, + title: "Window 1", +}); + +const window2 = new dhx.Window({ + ...windowConfig, + title: "Window 2", +}); + +// displaying both windows +window1.show(); +window2.show(); // Window 2 is currently on top + +// bringing Window 1 to the front without refreshing its content +window1.setActive(); + +@descr: +The main benefit of this method is that the activation occurs **without re-rendering the content**, which ensures that the DOM state, such as form input values, scroll positions, or media playback remains completely intact. + +@changelog: +Added in v9.3 + +**Related sample**: [Window. Setting the active state](https://snippet.dhtmlx.com/lvm3kfwq) + +**Related article**: [Work with Window](/window/usage/#setting-the-active-state) \ No newline at end of file diff --git a/docs/window/features.md b/docs/window/features.md index 901d402d..8b4c3053 100644 --- a/docs/window/features.md +++ b/docs/window/features.md @@ -69,7 +69,8 @@ In this section you can learn how to show and hide the window, how to switch it | Topic | Description | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | [Showing / hiding Window](../usage/#showinghiding-window) | Learn how to show or hide a window on the page ([Example](https://snippet.dhtmlx.com/ee2vf9xw)) | -| [Checking visibility of a window](../usage/#checking-visibility-of-window) | Learn how to check whether a window is visible on the page or not ([Example](https://snippet.dhtmlx.com/woz5c09h)) | +| [Setting the active state](../usage/#setting-the-active-state) | Learn how to set the active state of Window ([Example](https://snippet.dhtmlx.com/lvm3kfwq)) +| [Checking visibility of a window](../usage/#checking-visibility-of-window) | Learn how to check whether a window is visible on the page or not ([Example](https://snippet.dhtmlx.com/woz5c09h)) | | [Switching Window to the full screen mode](../usage/#fullscreen-mode) | Learn how to display a window in the full screen mode ([Example](https://snippet.dhtmlx.com/aftti5fy)) | | [Setting / getting Window position](../usage/#positioning-window) | Learn how to set/get the position of a window on the fly ([Example](https://snippet.dhtmlx.com/hc3ronrk)) | | [Setting / getting Window size](../usage/#sizing-window) | Learn how to change and get the size of a window dynamically ([Example](https://snippet.dhtmlx.com/0zqxydvm)) | @@ -104,7 +105,7 @@ In this section you will learn about common functionality of the library which c | ------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | [Touch support](../../common_features/touch_support/) | Learn how to work with touch support ([Example](https://snippet.dhtmlx.com/q3cu6x1a)) | | [TypeScript support](../../common_features/using_typescript/) | Learn how to work with TypeScript | -| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component’s rendering | +| [AwaitRedraw](../../helpers/await_redraw/) | Learn how to perform the code after the component's rendering | ## Any questions left? diff --git a/docs/window/usage.md b/docs/window/usage.md index a548acac..e89181c1 100644 --- a/docs/window/usage.md +++ b/docs/window/usage.md @@ -8,10 +8,10 @@ description: You can explore how to work with Window in the documentation of the ## Attaching content -You can easily attach some HTML content to a window via the [](window/api/window_attachhtml_method.md) method. It takes as a parameter a string with HTML. +You can easily attach some HTML content to a window via the [`attachHTML()`](window/api/window_attachhtml_method.md) method. It takes as a parameter a string with HTML. -~~~js -const dhxWindow = new dhx.Window({title: "Window"}); +~~~jsx +const dhxWindow = new dhx.Window({ title: "Window" }); const html = "

Header

paragraph

"; dhxWindow.attachHTML(html); dhxWindow.show(); @@ -21,59 +21,62 @@ dhxWindow.show(); ## Attaching DHTMLX components -DHTMLX Window allows attaching other DHTMLX components inside it. +DHTMLX Window allows attaching other DHTMLX components inside it via the [`attach()`](/window/api/window_attach_method/) method. -~~~js -dhxWindow.attach("richtext",{mode: "document"}); +~~~jsx +dhxWindow.attach("richtext", { mode: "document" }); dhxWindow.show(); ~~~ **Related sample**: [Window. Attach widget](https://snippet.dhtmlx.com/t9ncuuou) -{{note The Message, Popup, Window components can't be attached to Window because these components can't have the parent container due to their architecture principles.}} +:::note +The Message, Popup, Window components can't be attached to Window because these components can't have the parent container due to their architecture principles. +::: + ## Repainting window -In case you've changed some configuration settings of a window, you can repaint it on a page via the [](window/api/window_paint_method.md) method: +In case you've changed some configuration settings of a window, you can repaint it on a page via the [`paint()`](window/api/window_paint_method.md) method: -~~~js +~~~jsx dhxWindow.paint(); ~~~ ## Fullscreen mode -DHTMLX Window can be displayed in the full screen mode. To activate the full screen mode, make use of the [](window/api/window_setfullscreen_method.md) method: +DHTMLX Window can be displayed in the full screen mode. To activate the full screen mode, make use of the [`setFullScreen()`](window/api/window_setfullscreen_method.md) method: -~~~js +~~~jsx dhxWindow.setFullScreen(); ~~~ **Related sample**: [Window. Fullscreen mode](https://snippet.dhtmlx.com/aftti5fy) -To disable the full screen mode, apply the [](window/api/window_unsetfullscreen_method.md) method: +To disable the full screen mode, apply the [`unsetFullScreen()`](window/api/window_unsetfullscreen_method.md) method: -~~~js +~~~jsx dhxWindow.unsetFullScreen(); ~~~ -To check whether the full screen mode is activated or not, use the [](window/api/window_isfullscreen_method.md) method: +To check whether the full screen mode is activated or not, use the [`isFullScreen()`](window/api/window_isfullscreen_method.md) method: -~~~js +~~~jsx dhxWindow.setFullScreen(); dhxWindow.isFullScreen(); // -> true ~~~ ## Showing/hiding window -You can hide a particular window or show it in a particular position on a page with the help of the [](window/api/window_hide_method.md) and [](window/api/window_show_method.md) methods. The [](window/api/window_show_method.md) method takes two optional parameters: +You can hide a particular window or show it in a particular position on a page with the help of the [`hide()`](window/api/window_hide_method.md) and [`show()`](window/api/window_show_method.md) methods. The [`show()`](window/api/window_show_method.md) method takes two optional parameters: -- [left](window/api/window_show_method.md) - (*number*) the left margin of a window -- [top](window/api/window_show_method.md) - (*number*) the top margin of a window +- [`left`](window/api/window_show_method.md) - (*number*) the left margin of a window +- [`top`](window/api/window_show_method.md) - (*number*) the top margin of a window If called without parameters, the method shows a window in the default position on a page. -~~~js +~~~jsx // shows a window in the specified position -dhxWindow.show(34,54); +dhxWindow.show(34, 54); // hides a window dhxWindow.hide(); @@ -81,20 +84,55 @@ dhxWindow.hide(); **Related sample**: [Window. Showing / hiding Window](https://snippet.dhtmlx.com/ee2vf9xw) +## Setting the active state + +While working with several windows, you may need to make a particular window active and bring it to the top. You can apply the [`setActive()`](/window/api/window_setactive_method/) method to the necessary window for this purpose. + +In the example below two windows are created. Although the second window overlaps the first one upon initialization, calling `setActive()` on the first window programmatically brings it back to the front. + +~~~jsx +const windowConfig = { + width: 300, + height: 300, + html: "
Window content
" +}; + +const window1 = new dhx.Window({ + ...windowConfig, + title: "Window 1", +}); + +const window2 = new dhx.Window({ + ...windowConfig, + title: "Window 2", +}); + +// displaying both windows +window1.show(); +window2.show(); // Window 2 is currently on top + +// bringing Window 1 to the front without refreshing its content +window1.setActive(); +~~~ + +**Related sample**: [Window. Setting the active state](https://snippet.dhtmlx.com/lvm3kfwq) + +The key advantage of this method is that the activation occurs **without re-rendering the content**. This ensures that the DOM state, such as form input values, scroll positions, or media playback, remains completely intact. + ## Sizing window -You can change the size of a window via the [](window/api/window_setsize_method.md) method. It takes two parameters: +You can change the size of a window via the [`setSize()`](window/api/window_setsize_method.md) method. It takes two parameters: -- [width](window/api/window_setsize_method.md) - (*number*) the width of a window -- [height](window/api/window_setsize_method.md) - (*number*) the height of a window +- [`width`](window/api/window_setsize_method.md) - (*number*) the width of a window +- [`height`](window/api/window_setsize_method.md) - (*number*) the height of a window -~~~js -dhxWindow.setSize(250,250); +~~~jsx +dhxWindow.setSize(250, 250); ~~~ -To get the current size of a window, use the [](window/api/window_getsize_method.md) method. It will return an object with width and height of a window: +To get the current size of a window, use the [`getSize()`](window/api/window_getsize_method.md) method. It will return an object with width and height of a window: -~~~js +~~~jsx const size = dhxWindow.getSize(); // -> {width: 960, height: 469} ~~~ @@ -102,29 +140,29 @@ const size = dhxWindow.getSize(); // -> {width: 960, height: 469} ## Positioning window -To set the position of a window on the fly, make use of the [](window/api/window_setposition_method.md) method. You should pass two parameters to the method: +To set the position of a window on the fly, make use of the [`setPosition()`](window/api/window_setposition_method.md) method. You should pass two parameters to the method: -- [left](window/api/window_setposition_method.md) - (*number*) the left coordinate of a window -- [top](window/api/window_setposition_method.md) - (*number*) the top coordinate of a window +- [`left`](window/api/window_setposition_method.md) - (*number*) the left coordinate of a window +- [`top`](window/api/window_setposition_method.md) - (*number*) the top coordinate of a window -~~~js -dhxWindow.setPosition(20,20); +~~~jsx +dhxWindow.setPosition(20, 20); dhxWindow.show(); ~~~ -To get the current position of a window, use the [](window/api/window_getposition_method.md) method. It will return an object with left and top coordinates of a window: +To get the current position of a window, use the [`getPosition()`](window/api/window_getposition_method.md) method. It will return an object with left and top coordinates of a window: -~~~js -const position = dhxWindow.getPosition(); // -> {left: 480, top: 234} +~~~jsx +const position = dhxWindow.getPosition(); // -> { left: 480, top: 234 } ~~~ **Related sample**: [Window. Get/set Window position](https://snippet.dhtmlx.com/hc3ronrk) ## Checking visibility of window -You can check whether a window is hidden or shown on a page using the [](window/api/window_isvisible_method.md) method of the Window API. The method returns *true*, if a window is visible, and *false* if it's hidden. +You can check whether a window is hidden or shown on a page using the [`isVisible()`](window/api/window_isvisible_method.md) method of the Window API. The method returns `true`, if a window is visible, and `false` if it's hidden. -~~~js +~~~jsx const visible = window.isVisible(); // -> true/false ~~~ diff --git a/sidebars.js b/sidebars.js index e29a1902..927b2e30 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2628,10 +2628,13 @@ module.exports = { "grid/api/grid_dragitem_config", "grid/api/grid_dragmode_config", "grid/api/grid_dragpanel_config", + "grid/api/grid_dropbehaviour_config", "grid/api/grid_editable_config", "grid/api/grid_eventhandlers_config", + "grid/api/grid_exportconfig_config", "grid/api/grid_exportstyles_config", "grid/api/grid_footerautoheight_config", + "grid/api/grid_footerposition_config", "grid/api/grid_footerrowheight_config", "grid/api/grid_footertooltip_config", "grid/api/grid_group_config", @@ -4532,6 +4535,7 @@ module.exports = { "tree/api/tree_rootid_config", "tree/api/tree_selection_config", "tree/api/tree_template_config", + "tree/api/tree_tooltip_config" ], }, ], @@ -4594,6 +4598,7 @@ module.exports = { "window/api/window_isfullscreen_method", "window/api/window_isvisible_method", "window/api/window_paint_method", + "window/api/window_setactive_method", "window/api/window_setfullscreen_method", "window/api/window_setposition_method", "window/api/window_setsize_method",