diff --git a/docs/assets/grid/multi_level_nesting.png b/docs/assets/grid/multi_level_nesting.png new file mode 100644 index 00000000..b34cf8d2 Binary files /dev/null and b/docs/assets/grid/multi_level_nesting.png differ diff --git a/docs/assets/grid/multisort_grouped_data.png b/docs/assets/grid/multisort_grouped_data.png new file mode 100644 index 00000000..0d4404df Binary files /dev/null and b/docs/assets/grid/multisort_grouped_data.png differ diff --git a/docs/assets/grid/multisorting_data.png b/docs/assets/grid/multisorting_data.png new file mode 100644 index 00000000..665e5381 Binary files /dev/null and b/docs/assets/grid/multisorting_data.png differ diff --git a/docs/assets/grid/row_expander.png b/docs/assets/grid/row_expander.png new file mode 100644 index 00000000..f2ad01ff Binary files /dev/null and b/docs/assets/grid/row_expander.png differ diff --git a/docs/assets/grid/subgrid_specific_rows.png b/docs/assets/grid/subgrid_specific_rows.png new file mode 100644 index 00000000..3a089099 Binary files /dev/null and b/docs/assets/grid/subgrid_specific_rows.png differ diff --git a/docs/data_collection/api/datacollection_filter_method.md b/docs/data_collection/api/datacollection_filter_method.md index 6e4b2afb..c55122cf 100644 --- a/docs/data_collection/api/datacollection_filter_method.md +++ b/docs/data_collection/api/datacollection_filter_method.md @@ -14,12 +14,12 @@ description: You can explore the filter method of DataCollection in the document - `rule: function | object` - the filtering criteria - If set as a *function*, filtering will be applied by the rule specified in the function. The function takes an object of a data item as a parameter and returns *true/false* - If set as an *object*, the parameter has the following attributes: - - `by: string | number` - mandatory, the id of a data field (the column of Grid) + - `by: string | number` - mandatory, the id of a data field - `match: string` - mandatory, a pattern to match - `compare: function` - optional, a function for extended filtering that takes three parameters: - - `value` - the value to compare (e.g. a column in a row for Grid) + - `value` - the value to compare - `match` - a pattern to match - - `item` - a data item the values of which should be compared (e.g. a row) + - `item` - a data item the values of which should be compared - `config: object` - optional, defines the parameters of filtering. It may contain the following properties: - `id: string` - optional, the id of the filter - `add: boolean` - optional, defines whether each next filtering will be applied to the already filtered data (true), or to the initial data (false, default) diff --git a/docs/data_collection/api/datacollection_getfilters_method.md b/docs/data_collection/api/datacollection_getfilters_method.md index b5b22f8d..347f5b52 100644 --- a/docs/data_collection/api/datacollection_getfilters_method.md +++ b/docs/data_collection/api/datacollection_getfilters_method.md @@ -15,7 +15,7 @@ description: You can explore the getFilters method of DataCollection in the docu - `permanent: boolean` - optional, false by default. Allows getting the list of permanent filters @returns: -- `filters: object` - an object with the applied filters, where the key is the id of a filter and the value is an object with the [**rule** and **config** properties](data_collection/api/datacollection_filter_method.md) +- `filters: object` - an object with the applied filters, where the key is the id of a filter and the value is an object with the [`rule` and `config` properties](data_collection/api/datacollection_filter_method.md) @example: const filters = grid.data.getFilters(); diff --git a/docs/data_collection/api/datacollection_getsortingstates_method.md b/docs/data_collection/api/datacollection_getsortingstates_method.md new file mode 100644 index 00000000..9b9d9759 --- /dev/null +++ b/docs/data_collection/api/datacollection_getsortingstates_method.md @@ -0,0 +1,61 @@ +--- +sidebar_label: getSortingStates() +title: JavaScript DataCollection - getSortingStates Method +description: You can explore the getSortingStates method of DataCollection 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. +--- + +# getSortingStates() + +@short: returns an array of objects with the current parameters of sorting applied to the data + +## Usage + +~~~jsx +interface ISortingState { + by: string | number, + dir: "asc" | "desc", + as?: (a) => any, + rule?: (a, b) => number, + smartSorting?: boolean +} + +getSortingStates(): ISortingState[]; +~~~ + +@returns: +An array of objects with the current parameters of sorting applied to the data. + +@example: +const state = grid.data.getSortingStates(); +// -> [{by: "country", dir: "desc"}, {by: "population", dir: "desc"}] + +@descr: +The array returned by the method contains objects with the following properties: + + + + + + + + + + + + + + + + + + + + + + + + +
by(string | number) the id of a data field to sort by
dir(string) the direction of sorting: "asc" or "desc"
as(function) optional, a custom function of converting values before comparing
rule(function) optional, a custom sorting function
smartSorting(boolean) optional, (if applied) specifies whether a sorting rule should be applied each time after changing the data set
+ +@changelog: +added in v9.1 \ No newline at end of file diff --git a/docs/data_collection/api/datacollection_sort_method.md b/docs/data_collection/api/datacollection_sort_method.md index 6da5e74f..593e9e3b 100644 --- a/docs/data_collection/api/datacollection_sort_method.md +++ b/docs/data_collection/api/datacollection_sort_method.md @@ -12,7 +12,7 @@ description: You can explore the sort method of DataCollection in the documentat @params: - `rule: object` - an object with parameters for sorting. The object has the following attributes: - - `by: string | number` - the id of a data field (a column of Grid) + - `by: string | number` - the id of a data field - `dir: string` - the direction of sorting: "asc" or "desc" - `as: function` - a function that specifies the type to sort data as - `rule: function` - optional, a sorting rule; the function must have two parameters and return a number (-1,0,1) @@ -20,16 +20,14 @@ description: You can explore the sort method of DataCollection in the documentat - `smartSorting: boolean` - specifies whether a sorting rule should be applied each time after changing the data set @example: -grid.data.sort({ - by:"a", - dir:"desc", - as: function(item){ - return item.toUpperCase(); - }, +grid.data.sort( { - smartSorting: true - } -}); + by:"a", + dir:"desc", + as: item => (item.toUpperCase()) + }, + { smartSorting: true } +); // cancels the applied sorting rules grid.data.sort(); diff --git a/docs/data_collection/index.md b/docs/data_collection/index.md index cf417f26..221d01ae 100644 --- a/docs/data_collection/index.md +++ b/docs/data_collection/index.md @@ -9,40 +9,41 @@ description: You can have an overview of DataCollection in the documentation of A set of APIs that allow you to work with data of a component. Applicable to Chart, Combobox, DataView, Grid, List. ## Methods -| Name | Description | -| ----------------------------------------------- | ------------------------------------------------------ | -| [](api/datacollection_add_method.md) | @getshort(api/datacollection_add_method.md) | -| [](api/datacollection_changeid_method.md) | @getshort(api/datacollection_changeid_method.md) | -| [](api/datacollection_copy_method.md) | @getshort(api/datacollection_copy_method.md) | -| [](api/datacollection_exists_method.md) | @getshort(api/datacollection_exists_method.md) | -| [](api/datacollection_filter_method.md) | @getshort(api/datacollection_filter_method.md) | -| [](api/datacollection_find_method.md) | @getshort(api/datacollection_find_method.md) | -| [](api/datacollection_findall_method.md) | @getshort(api/datacollection_findall_method.md) | -| [](api/datacollection_foreach_method.md) | @getshort(api/datacollection_foreach_method.md) | -| [](api/datacollection_getfilters_method.md) | @getshort(api/datacollection_getfilters_method.md) | -| [](api/datacollection_getid_method.md) | @getshort(api/datacollection_getid_method.md) | -| [](api/datacollection_getindex_method.md) | @getshort(api/datacollection_getindex_method.md) | -| [](api/datacollection_getinitialdata_method.md) | @getshort(api/datacollection_getinitialdata_method.md) | -| [](api/datacollection_getitem_method.md) | @getshort(api/datacollection_getitem_method.md) | -| [](api/datacollection_getlength_method.md) | @getshort(api/datacollection_getlength_method.md) | -| [](api/datacollection_group_method.md) | @getshort(api/datacollection_group_method.md) | -| [](api/datacollection_isdataloaded_method.md) | @getshort(api/datacollection_isdataloaded_method.md) | -| [](api/datacollection_isgrouped_method.md) | @getshort(api/datacollection_isgrouped_method.md) | -| [](api/datacollection_issaved_method.md) | @getshort(api/datacollection_issaved_method.md) | -| [](api/datacollection_load_method.md) | @getshort(api/datacollection_load_method.md) | -| [](api/datacollection_map_method.md) | @getshort(api/datacollection_map_method.md) | -| [](api/datacollection_maprange_method.md) | @getshort(api/datacollection_maprange_method.md) | -| [](api/datacollection_move_method.md) | @getshort(api/datacollection_move_method.md) | -| [](api/datacollection_parse_method.md) | @getshort(api/datacollection_parse_method.md) | -| [](api/datacollection_reduce_method.md) | @getshort(api/datacollection_reduce_method.md) | -| [](api/datacollection_remove_method.md) | @getshort(api/datacollection_remove_method.md) | -| [](api/datacollection_removeall_method.md) | @getshort(api/datacollection_removeall_method.md) | -| [](api/datacollection_resetfilter_method.md) | @getshort(api/datacollection_resetfilter_method.md) | -| [](api/datacollection_save_method.md) | @getshort(api/datacollection_save_method.md) | -| [](api/datacollection_serialize_method.md) | @getshort(api/datacollection_serialize_method.md) | -| [](api/datacollection_sort_method.md) | @getshort(api/datacollection_sort_method.md) | -| [](api/datacollection_ungroup_method.md) | @getshort(api/datacollection_ungroup_method.md) | -| [](api/datacollection_update_method.md) | @getshort(api/datacollection_update_method.md) | +| Name | Description | +| ------------------------------------------------- | ------------------------------------------------------- | +| [](api/datacollection_add_method.md) | @getshort(api/datacollection_add_method.md) | +| [](api/datacollection_changeid_method.md) | @getshort(api/datacollection_changeid_method.md) | +| [](api/datacollection_copy_method.md) | @getshort(api/datacollection_copy_method.md) | +| [](api/datacollection_exists_method.md) | @getshort(api/datacollection_exists_method.md) | +| [](api/datacollection_filter_method.md) | @getshort(api/datacollection_filter_method.md) | +| [](api/datacollection_find_method.md) | @getshort(api/datacollection_find_method.md) | +| [](api/datacollection_findall_method.md) | @getshort(api/datacollection_findall_method.md) | +| [](api/datacollection_foreach_method.md) | @getshort(api/datacollection_foreach_method.md) | +| [](api/datacollection_getfilters_method.md) | @getshort(api/datacollection_getfilters_method.md) | +| [](api/datacollection_getid_method.md) | @getshort(api/datacollection_getid_method.md) | +| [](api/datacollection_getindex_method.md) | @getshort(api/datacollection_getindex_method.md) | +| [](api/datacollection_getinitialdata_method.md) | @getshort(api/datacollection_getinitialdata_method.md) | +| [](api/datacollection_getitem_method.md) | @getshort(api/datacollection_getitem_method.md) | +| [](api/datacollection_getlength_method.md) | @getshort(api/datacollection_getlength_method.md) | +| [](api/datacollection_getsortingstates_method.md) | @getshort(api/datacollection_getsortingstates_method.md)| +| [](api/datacollection_group_method.md) | @getshort(api/datacollection_group_method.md) | +| [](api/datacollection_isdataloaded_method.md) | @getshort(api/datacollection_isdataloaded_method.md) | +| [](api/datacollection_isgrouped_method.md) | @getshort(api/datacollection_isgrouped_method.md) | +| [](api/datacollection_issaved_method.md) | @getshort(api/datacollection_issaved_method.md) | +| [](api/datacollection_load_method.md) | @getshort(api/datacollection_load_method.md) | +| [](api/datacollection_map_method.md) | @getshort(api/datacollection_map_method.md) | +| [](api/datacollection_maprange_method.md) | @getshort(api/datacollection_maprange_method.md) | +| [](api/datacollection_move_method.md) | @getshort(api/datacollection_move_method.md) | +| [](api/datacollection_parse_method.md) | @getshort(api/datacollection_parse_method.md) | +| [](api/datacollection_reduce_method.md) | @getshort(api/datacollection_reduce_method.md) | +| [](api/datacollection_remove_method.md) | @getshort(api/datacollection_remove_method.md) | +| [](api/datacollection_removeall_method.md) | @getshort(api/datacollection_removeall_method.md) | +| [](api/datacollection_resetfilter_method.md) | @getshort(api/datacollection_resetfilter_method.md) | +| [](api/datacollection_save_method.md) | @getshort(api/datacollection_save_method.md) | +| [](api/datacollection_serialize_method.md) | @getshort(api/datacollection_serialize_method.md) | +| [](api/datacollection_sort_method.md) | @getshort(api/datacollection_sort_method.md) | +| [](api/datacollection_ungroup_method.md) | @getshort(api/datacollection_ungroup_method.md) | +| [](api/datacollection_update_method.md) | @getshort(api/datacollection_update_method.md) | ## Events diff --git a/docs/grid/api/api_overview.md b/docs/grid/api/api_overview.md index d076adf1..583b67d2 100644 --- a/docs/grid/api/api_overview.md +++ b/docs/grid/api/api_overview.md @@ -14,14 +14,17 @@ description: You can explore the API of Grid in the documentation of the DHTMLX | [](grid/api/grid_addrowcss_method.md) | @getshort(grid/api/grid_addrowcss_method.md) | | [](grid/api/grid_addspan_method.md) | @getshort(grid/api/grid_addspan_method.md) | | [](grid/api/grid_adjustcolumnwidth_method.md) | @getshort(grid/api/grid_adjustcolumnwidth_method.md) | +| [](grid/api/grid_collapse_method.md) | @getshort(grid/api/grid_collapse_method.md) | +| [](grid/api/grid_collapseall_method.md) | @getshort(grid/api/grid_collapseall_method.md) | | [](grid/api/grid_destructor_method.md) | @getshort(grid/api/grid_destructor_method.md) | | [](grid/api/grid_editcell_method.md) | @getshort(grid/api/grid_editcell_method.md) | | [](grid/api/grid_editend_method.md) | @getshort(grid/api/grid_editend_method.md) | +| [](grid/api/grid_expand_method.md) | @getshort(grid/api/grid_expand_method.md) | +| [](grid/api/grid_expandall_method.md) | @getshort(grid/api/grid_expandall_method.md) | | [](grid/api/grid_getcellrect_method.md) | @getshort(grid/api/grid_getcellrect_method.md) | | [](grid/api/grid_getcolumn_method.md) | @getshort(grid/api/grid_getcolumn_method.md) | | [](grid/api/grid_getheaderfilter_method.md) | @getshort(grid/api/grid_getheaderfilter_method.md) | | [](grid/api/grid_getscrollstate_method.md) | @getshort(grid/api/grid_getscrollstate_method.md) | -| [](grid/api/grid_getsortingstate_method.md) | @getshort(grid/api/grid_getsortingstate_method.md) | | [](grid/api/grid_getspan_method.md) | @getshort(grid/api/grid_getspan_method.md) | | [](grid/api/grid_getsummary_method.md) | @getshort(grid/api/grid_getsummary_method.md) | | [](grid/api/grid_hidecolumn_method.md) | @getshort(grid/api/grid_hidecolumn_method.md) | @@ -41,6 +44,7 @@ description: You can explore the API of Grid in the documentation of the DHTMLX :::info important - Use [the methods of DataCollection](data_collection.md) to work with data. - Apply [the methods of Selection](grid/api/api_overview.md#selection-methods) to manage the selection of Grid cells. +- Use [the methods of TreeCollection](tree_collection.md#methods) to work with data of Grid in the TreeGrid mode. ::: ## Grid events @@ -49,10 +53,14 @@ description: You can explore the API of Grid in the documentation of the DHTMLX | Name | Description | | ------------------------------------------ | ------------------------------------------------- | +| [](grid/api/grid_aftercollapse_event.md) | @getshort(grid/api/grid_aftercollapse_event.md) | | [](grid/api/grid_aftereditend_event.md) | @getshort(grid/api/grid_aftereditend_event.md) | | [](grid/api/grid_aftereditstart_event.md) | @getshort(grid/api/grid_aftereditstart_event.md) | +| [](grid/api/grid_afterexpand_event.md) | @getshort(grid/api/grid_afterexpand_event.md) | +| [](grid/api/grid_beforecollapse_event.md) | @getshort(grid/api/grid_beforecollapse_event.md) | | [](grid/api/grid_beforeeditend_event.md) | @getshort(grid/api/grid_beforeeditend_event.md) | | [](grid/api/grid_beforeeditstart_event.md) | @getshort(grid/api/grid_beforeeditstart_event.md) | +| [](grid/api/grid_beforeexpand_event.md) | @getshort(grid/api/grid_beforeexpand_event.md) | ### Mouse @@ -157,6 +165,7 @@ description: You can explore the API of Grid in the documentation of the DHTMLX :::info important - Use [the events of DataCollection](data_collection.md#events) to work with data of Grid. - Apply [the events of Selection](grid/api/api_overview.md#selection-events) to handle the selection of Grid cells. +- Use [the events of TreeCollection](tree_collection.md#events) to work with data of Grid in the TreeGrid mode. ::: ## Grid properties @@ -169,10 +178,12 @@ description: You can explore the API of Grid in the documentation of the DHTMLX | [](grid/api/grid_autowidth_config.md) | @getshort(grid/api/grid_autowidth_config.md) | | [](grid/api/grid_bottomsplit_config.md) | @getshort(grid/api/grid_bottomsplit_config.md) | | [](grid/api/grid_closable_config.md) | @getshort(grid/api/grid_closable_config.md) | +| [](grid/api/grid_collapsed_config.md) | @getshort(grid/api/grid_collapsed_config.md) | | [](grid/api/grid_columns_config.md) | @getshort(grid/api/grid_columns_config.md) | | [](grid/api/grid_css_config.md) | @getshort(grid/api/grid_css_config.md) | | [](grid/api/grid_data_config.md) | @getshort(grid/api/grid_data_config.md) | | [](grid/api/grid_dragcopy_config.md) | @getshort(grid/api/grid_dragcopy_config.md) | +| [](grid/api/grid_dragexpand_config.md) | @getshort(grid/api/grid_dragexpand_config.md) | | [](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_editable_config.md) | @getshort(grid/api/grid_editable_config.md) | @@ -191,13 +202,17 @@ description: You can explore the API of Grid in the documentation of the DHTMLX | [](grid/api/grid_keynavigation_config.md) | @getshort(grid/api/grid_keynavigation_config.md) | | [](grid/api/grid_leftsplit_config.md) | @getshort(grid/api/grid_leftsplit_config.md) | | [](grid/api/grid_multiselection_config.md) | @getshort(grid/api/grid_multiselection_config.md) | +| [](grid/api/grid_multisort_config.md) | @getshort(grid/api/grid_multisort_config.md) | | [](grid/api/grid_resizable_config.md) | @getshort(grid/api/grid_resizable_config.md) | | [](grid/api/grid_rightsplit_config.md) | @getshort(grid/api/grid_rightsplit_config.md) | +| [](grid/api/grid_rootparent_config.md) | @getshort(grid/api/grid_rootparent_config.md) | | [](grid/api/grid_rowcss_config.md) | @getshort(grid/api/grid_rowcss_config.md) | | [](grid/api/grid_rowheight_config.md) | @getshort(grid/api/grid_rowheight_config.md) | | [](grid/api/grid_selection_config.md) | @getshort(grid/api/grid_selection_config.md) | | [](grid/api/grid_sortable_config.md) | @getshort(grid/api/grid_sortable_config.md) | | [](grid/api/grid_spans_config.md) | @getshort(grid/api/grid_spans_config.md) | +| [](grid/api/grid_subrow_config.md) | @getshort(grid/api/grid_subrow_config.md) | +| [](grid/api/grid_subrowconfig_config.md) | @getshort(grid/api/grid_subrowconfig_config.md) | | [](grid/api/grid_summary_config.md) | @getshort(grid/api/grid_summary_config.md) | | [](grid/api/grid_tooltip_config.md) | @getshort(grid/api/grid_tooltip_config.md) | | [](grid/api/grid_topsplit_config.md) | @getshort(grid/api/grid_topsplit_config.md) | @@ -239,39 +254,3 @@ You will find the list of all the available configuration properties of a Grid c | [](grid/api/export/grid_png_method.md) | @getshort(grid/api/export/grid_png_method.md) | | [](grid/api/export/grid_xlsx_method.md) | @getshort(grid/api/export/grid_xlsx_method.md) | -## TreeGrid mode API - -### TreeGrid mode methods - -| Name | Description | -| ----------------------------------------------------- | ------------------------------------------------------------ | -| [](grid/api/treegrid_mode/grid_collapse_method.md) | @getshort(grid/api/treegrid_mode/grid_collapse_method.md) | -| [](grid/api/treegrid_mode/grid_collapseall_method.md) | @getshort(grid/api/treegrid_mode/grid_collapseall_method.md) | -| [](grid/api/treegrid_mode/grid_expand_method.md) | @getshort(grid/api/treegrid_mode/grid_expand_method.md) | -| [](grid/api/treegrid_mode/grid_expandall_method.md) | @getshort(grid/api/treegrid_mode/grid_expandall_method.md) | - -:::info important -- Use [the methods of TreeCollection](tree_collection.md) to work with data of Grid in the TreeGrid mode. -::: - -### TreeGrid mode events - -| Name | Description | -| ------------------------------------------------------- | ------------------------------------------------------------- | -| [](grid/api/treegrid_mode/grid_aftercollapse_event.md) | @getshort(grid/api/treegrid_mode/grid_aftercollapse_event.md) | -| [](grid/api/treegrid_mode/grid_afterexpand_event.md) | @getshort(grid/api/treegrid_mode/grid_afterexpand_event.md) | -| [](grid/api/treegrid_mode/grid_beforecollapse_event.md) | @getshort(grid/api/treegrid_mode/grid_beforecollapse_event.md)| -| [](grid/api/treegrid_mode/grid_beforeexpand_event.md) | @getshort(grid/api/treegrid_mode/grid_beforeexpand_event.md) | -| [](grid/api/treegrid_mode/grid_expand_event.md) | @getshort(grid/api/treegrid_mode/grid_beforecollapse_event.md)| - -:::info important -- Use [the events of TreeCollection](tree_collection.md#events) to work with data of Grid in the TreeGrid mode. -::: - -### TreeGrid mode properties - -| Name | Description | -| --------------------------------------------------- | ---------------------------------------------------------- | -| [](grid/api/treegrid_mode/grid_collapsed_config.md) | @getshort(grid/api/treegrid_mode/grid_collapsed_config.md) | -| [](grid/api/treegrid_mode/grid_dragexpand_config.md)| @getshort(grid/api/treegrid_mode/grid_dragexpand_config.md)| -| [](grid/api/treegrid_mode/grid_rootparent_config.md)| @getshort(grid/api/treegrid_mode/grid_rootparent_config.md)| \ No newline at end of file diff --git a/docs/grid/api/treegrid_mode/grid_aftercollapse_event.md b/docs/grid/api/grid_aftercollapse_event.md similarity index 75% rename from docs/grid/api/treegrid_mode/grid_aftercollapse_event.md rename to docs/grid/api/grid_aftercollapse_event.md index 585f94db..956f502d 100644 --- a/docs/grid/api/treegrid_mode/grid_aftercollapse_event.md +++ b/docs/grid/api/grid_aftercollapse_event.md @@ -6,10 +6,12 @@ description: You can explore the afterCollapse event of Grid in the documentatio # afterCollapse -@short: fires after collapsing Grid in the TreeGrid mode +@short: fires after collapsing a row that contains child rows :::note -The event works only for Grid with the `type: "tree"` configuration option +The event works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'afterCollapse: (rowId: string | number) => void;'} @@ -18,7 +20,11 @@ The event works only for Grid with the `type: "tree"` configuration option The callback of the event is called with the following parameter: - `rowId: string | number` - the id of a collapsed row -@example: +@descr: + +### Example + +~~~jsx {2,9-11} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -30,8 +36,8 @@ const grid = new dhx.Grid("grid_container", { grid.events.on("afterCollapse", (rowId) => { // your logic here }); +~~~ -@descr: @changelog: added in v6.4 \ No newline at end of file diff --git a/docs/grid/api/treegrid_mode/grid_afterexpand_event.md b/docs/grid/api/grid_afterexpand_event.md similarity index 75% rename from docs/grid/api/treegrid_mode/grid_afterexpand_event.md rename to docs/grid/api/grid_afterexpand_event.md index 870a4b77..bf91471f 100644 --- a/docs/grid/api/treegrid_mode/grid_afterexpand_event.md +++ b/docs/grid/api/grid_afterexpand_event.md @@ -6,10 +6,12 @@ description: You can explore the afterExpand event of Grid in the documentation # afterExpand -@short: fires after expanding Grid in the TreeGrid mode +@short: fires after expanding a row that contains child rows :::note -The event works only for Grid with the `type: "tree"` configuration option +The event works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'afterExpand: (rowId: string | number) => void;'} @@ -19,7 +21,11 @@ The callback of the event is called with the following parameter: - `rowId: string | number` - the id of an expanded row -@example: +@descr: + +### Example + +~~~jsx {2,9-11} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -31,9 +37,7 @@ const grid = new dhx.Grid("grid_container", { grid.events.on("afterExpand", (rowId) => { // your logic here }); - -@descr: - +~~~ @changelog: added in v6.4 diff --git a/docs/grid/api/treegrid_mode/grid_beforecollapse_event.md b/docs/grid/api/grid_beforecollapse_event.md similarity index 77% rename from docs/grid/api/treegrid_mode/grid_beforecollapse_event.md rename to docs/grid/api/grid_beforecollapse_event.md index 5c35170e..7d065f61 100644 --- a/docs/grid/api/treegrid_mode/grid_beforecollapse_event.md +++ b/docs/grid/api/grid_beforecollapse_event.md @@ -6,10 +6,12 @@ description: You can explore the beforeCollapse event of Grid in the documentati # beforeCollapse -@short: fires before collapsing Grid in the TreeGrid mode +@short: fires before collapsing a row that contains child rows :::note -The event works only for Grid with the `type: "tree"` configuration option +The event works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'beforeCollapse: (rowId: string | number) => boolean | void;'} @@ -21,7 +23,11 @@ The callback of the event is called with the following parameter: @returns: Return `false` to block collapsing of a grid; otherwise, `true`. -@example: +@descr: + +### Example + +~~~jsx {2,9-12} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -34,7 +40,7 @@ grid.events.on("beforeCollapse", (rowId) => { // your logic here return false; }); +~~~ -@descr: @changelog: added in v6.4 diff --git a/docs/grid/api/treegrid_mode/grid_beforeexpand_event.md b/docs/grid/api/grid_beforeexpand_event.md similarity index 77% rename from docs/grid/api/treegrid_mode/grid_beforeexpand_event.md rename to docs/grid/api/grid_beforeexpand_event.md index 95c07614..ef5c3e4e 100644 --- a/docs/grid/api/treegrid_mode/grid_beforeexpand_event.md +++ b/docs/grid/api/grid_beforeexpand_event.md @@ -6,23 +6,29 @@ description: You can explore the beforeExpand event of Grid in the documentation # beforeExpand -@short: fires before expanding Grid in the TreeGrid mode +@short: fires before expanding a row that contains child rows :::note -The event works only for Grid with the `type: "tree"` configuration option +The event works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'beforeExpand: (rowId: string | number) => boolean | void;'} @params: -The callback of the event is called with the following parameters: +The callback of the event is called with the following parameter: - `rowId: string | number` - the id of an expanded row @returns: Return `false` to block expanding of a grid; otherwise, `true`. -@example: +@descr: + +### Example + +~~~jsx {2,9-12} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -35,9 +41,6 @@ grid.events.on("beforeExpand", (rowId) => { // your logic here return false; }); - -@descr: - - +~~~ @changelog: added in v6.4 diff --git a/docs/grid/api/treegrid_mode/grid_collapse_method.md b/docs/grid/api/grid_collapse_method.md similarity index 66% rename from docs/grid/api/treegrid_mode/grid_collapse_method.md rename to docs/grid/api/grid_collapse_method.md index 7791f75f..e8b2e8d6 100644 --- a/docs/grid/api/treegrid_mode/grid_collapse_method.md +++ b/docs/grid/api/grid_collapse_method.md @@ -6,18 +6,22 @@ description: You can explore the collapse method of Grid in the documentation of # collapse() -@short: collapses a tree node by id +@short: collapses a row that contains child rows by id :::note -The method works only for Grid with the `type: "tree"` configuration option +The method works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'collapse(id: string | number): void;'} @params: -- `id: string | number` - the id of a node to collapse +- `id: string | number` - the id of a row to collapse -@example: +### Example + +~~~jsx {2,9} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -27,6 +31,7 @@ const grid = new dhx.Grid("grid_container", { }); grid.collapse("native"); +~~~ @descr: diff --git a/docs/grid/api/treegrid_mode/grid_collapseall_method.md b/docs/grid/api/grid_collapseall_method.md similarity index 70% rename from docs/grid/api/treegrid_mode/grid_collapseall_method.md rename to docs/grid/api/grid_collapseall_method.md index db7191ed..4434cef2 100644 --- a/docs/grid/api/treegrid_mode/grid_collapseall_method.md +++ b/docs/grid/api/grid_collapseall_method.md @@ -6,15 +6,21 @@ description: You can explore the collapseAll method of Grid in the documentation # collapseAll() -@short: collapses all expanded tree nodes +@short: collapses all expanded rows that contain child rows :::note -The method works only for Grid with the `type: "tree"` configuration option +The method works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'collapseAll(): void;'} -@example: +@descr: + +### Example + +~~~jsx {2,9} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -24,9 +30,7 @@ const grid = new dhx.Grid("grid_container", { }); grid.collapseAll(); - -@descr: - +~~~ @changelog: added in v6.3 \ No newline at end of file diff --git a/docs/grid/api/treegrid_mode/grid_collapsed_config.md b/docs/grid/api/grid_collapsed_config.md similarity index 89% rename from docs/grid/api/treegrid_mode/grid_collapsed_config.md rename to docs/grid/api/grid_collapsed_config.md index 2a93f442..6873d2e0 100644 --- a/docs/grid/api/treegrid_mode/grid_collapsed_config.md +++ b/docs/grid/api/grid_collapsed_config.md @@ -6,7 +6,7 @@ description: You can explore the collapsed config of Grid in the documentation o # collapsed -@short: Optional. Defines that Grid in the TreeGrid mode is initialized in the collapsed state +@short: Optional. Defines that Grid is initialized in the collapsed state :::note The property works only for Grid with the `type: "tree"` configuration option diff --git a/docs/grid/api/treegrid_mode/grid_dragexpand_config.md b/docs/grid/api/grid_dragexpand_config.md similarity index 100% rename from docs/grid/api/treegrid_mode/grid_dragexpand_config.md rename to docs/grid/api/grid_dragexpand_config.md diff --git a/docs/grid/api/treegrid_mode/grid_expand_method.md b/docs/grid/api/grid_expand_method.md similarity index 66% rename from docs/grid/api/treegrid_mode/grid_expand_method.md rename to docs/grid/api/grid_expand_method.md index 6a079269..05fe13ff 100644 --- a/docs/grid/api/treegrid_mode/grid_expand_method.md +++ b/docs/grid/api/grid_expand_method.md @@ -6,18 +6,22 @@ description: You can explore the expand method of Grid in the documentation of t # expand() -@short: expands a tree node by id +@short: expands a row that contains child rows :::note -The method works only for Grid with the `type: "tree"` configuration option +The method works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'expand(id: string | number): void;'} @params: -- `id: string | number` - the id of a node to expand +- `id: string | number` - the id of a row to expand -@example: +### Example + +~~~jsx {2,9} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -27,5 +31,6 @@ const grid = new dhx.Grid("grid_container", { }); grid.expand("native"); +~~~ @descr: \ No newline at end of file diff --git a/docs/grid/api/treegrid_mode/grid_expandall_method.md b/docs/grid/api/grid_expandall_method.md similarity index 69% rename from docs/grid/api/treegrid_mode/grid_expandall_method.md rename to docs/grid/api/grid_expandall_method.md index bf8078f1..12c5ca7c 100644 --- a/docs/grid/api/treegrid_mode/grid_expandall_method.md +++ b/docs/grid/api/grid_expandall_method.md @@ -6,15 +6,21 @@ description: You can explore the expandAll method of Grid in the documentation o # expandAll() -@short: expands all collapsed tree nodes +@short: expands all collapsed rows that contain child rows :::note -The method works only for Grid with the `type: "tree"` configuration option +The method works: +- for Grid in the default mode with the `subRow` configuration option +- for Grid in the TreeGrid mode (with the `type: "tree"` configuration option) ::: @signature: {'expandAll(): void;'} -@example: +@descr: + +### Example + +~~~jsx {2,9} const grid = new dhx.Grid("grid_container", { type: "tree", columns: [ @@ -24,7 +30,6 @@ const grid = new dhx.Grid("grid_container", { }); grid.expandAll(); - -@descr: +~~~ @changelog: added in v6.3 \ No newline at end of file diff --git a/docs/grid/api/grid_getsortingstate_method.md b/docs/grid/api/grid_getsortingstate_method.md deleted file mode 100644 index fb5a50ed..00000000 --- a/docs/grid/api/grid_getsortingstate_method.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -sidebar_label: getSortingState() -title: JavaScript Grid - getSortingState Method -description: You can explore the getSortingState method 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. ---- - -# getSortingState() - -@short: returns the current state of sorting data in Grid - -@signature: {'getSortingState(): object;'} - -@returns: -An object with the current state of sorting data in the grid. - -@example: -const state = grid.getSortingState(); -// -> {dir: "desc", by: "country"} - -@descr: - -**Related sample**: [Grid. Get sorting state](https://snippet.dhtmlx.com/u2vk3ri3) - -The return object includes the following attributes: - - - - - - - - - - - - -
dir(string) the sorting direction (desc, asc)
by(string | number) the id of a column that the grid is sorted by
- -@changelog: -added in v6.4 - -[comment]: # (@related: grid/usage.md#getting-the-sorting-state) diff --git a/docs/grid/api/grid_getsubrow_method.md b/docs/grid/api/grid_getsubrow_method.md new file mode 100644 index 00000000..56e50053 --- /dev/null +++ b/docs/grid/api/grid_getsubrow_method.md @@ -0,0 +1,67 @@ +--- +sidebar_label: getSubRow() +title: JavaScript Grid - getSubRow Method +description: You can explore the getSubRow method 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. +--- + +# getSubRow() + +@short: returns the configuration and content of a sub-row for the specified row + +:::info +Note that the method works if a sub-row is in the visible area or if the `preserve:true` property is specified in the `subRowConfig` object of the sub-row. +::: + +@signature: {'getSubRow(id: string | number): ISubViewCell | null;'} + +@params: +- `id: string | number` - the id of a row + +@returns: +An object that includes the following properties: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
css(string) user-defined CSS classes for a sub-row
element(HTMLElement | null) the parent container of the current sub-row
expanded(boolean) defines whether a sub-row is expanded by default, false by default
fullWidth(boolean) defines whether a sub-row will take all the width of Grid, false by default
height(number) the height of a sub-row in pixels, 200 by default
padding(string | number) the inner padding of a sub-row, 8 by default
preserve(boolean) saves the state of sub-rows while expanding/collapsing, disappearing from the visible area, data updating, false by default
toggleIcon(boolean) enables the icon for expanding/collapsing, true by default
view(string | object | null) that can be presented by:
  • a string, if the sub-row is set by the HTML content
  • an object instance to interact with, if a sub-row is an instance of a nested component (for example, Grid)
  • null, if the sub-row is unavailable (for example, it is hidden or placed outside the visible area and the `preserve` config is not specified)
+ +**Related article:** [Getting sub-row config and content](grid/configuration.md#getting-sub-row-config-and-content) + +@changelog: +- Added in v9.1 diff --git a/docs/grid/api/grid_getsummary_method.md b/docs/grid/api/grid_getsummary_method.md index 984d537c..52bc5d74 100644 --- a/docs/grid/api/grid_getsummary_method.md +++ b/docs/grid/api/grid_getsummary_method.md @@ -58,7 +58,7 @@ console.log(columnSummary); //{ totalPopulation: 1000000, avgAge: 28 } - the val **Related article:** [Getting the summary object](grid/configuration.md#getting-the-summary-object) -**Related**: [summary](grid/api/grid_summary_config.md) +**Related API**: [summary](grid/api/grid_summary_config.md) @changelog: - Added in v9.0 diff --git a/docs/grid/api/grid_headerautoheight_config.md b/docs/grid/api/grid_headerautoheight_config.md index a9b81b01..7a1625eb 100644 --- a/docs/grid/api/grid_headerautoheight_config.md +++ b/docs/grid/api/grid_headerautoheight_config.md @@ -10,7 +10,7 @@ description: You can explore the headerAutoHeight config of Grid in the document @short: Optional. Allows adjusting the height of the header for the content to fit in -@signature: headerAutoHeight?: boolean; +@signature: {'headerAutoHeight?: boolean;'} @default: false diff --git a/docs/grid/api/grid_multisort_config.md b/docs/grid/api/grid_multisort_config.md new file mode 100644 index 00000000..6cd0f008 --- /dev/null +++ b/docs/grid/api/grid_multisort_config.md @@ -0,0 +1,32 @@ +--- +sidebar_label: multiSort +title: JavaScript Grid - multiSort Config +description: You can explore the multiSort 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. +--- + +# multiSort + +@short: Optional. Enables the possibility of sorting Grid data by multiple columns + +:::tip Pro version only +This functionality is available in the PRO edition only. +::: + +@signature: {'multiSort?: boolean;'} + +@default: true + +@example: +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + multiSort: false, + data: dataset +}); + +@descr: + +**Related sample**: [Grid. Sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/4ej0i3qi) + +**Related article**: [Sorting by multiple columns](grid/usage.md#sorting-by-multiple-columns) \ No newline at end of file diff --git a/docs/grid/api/treegrid_mode/grid_rootparent_config.md b/docs/grid/api/grid_rootparent_config.md similarity index 82% rename from docs/grid/api/treegrid_mode/grid_rootparent_config.md rename to docs/grid/api/grid_rootparent_config.md index 2d91016d..1a319d3e 100644 --- a/docs/grid/api/treegrid_mode/grid_rootparent_config.md +++ b/docs/grid/api/grid_rootparent_config.md @@ -8,6 +8,10 @@ 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 +::: + @signature: rootParent?: string; @example: @@ -26,6 +30,6 @@ const grid = new dhx.Grid("grid_container", { @descr: By default, the root parent takes the id of the Grid container. -If the id of the container is set to null or defined as an HTML element, the value of the root parent will be auto-generated. +If the id of the container is set to `null` or defined as an HTML element, the value of the root parent will be auto-generated. @changelog: added in v7.1 \ No newline at end of file diff --git a/docs/grid/api/grid_subrow_config.md b/docs/grid/api/grid_subrow_config.md new file mode 100644 index 00000000..812b78ab --- /dev/null +++ b/docs/grid/api/grid_subrow_config.md @@ -0,0 +1,69 @@ +--- +sidebar_label: subRow +title: JavaScript Grid - subRow Config +description: You can explore the subRow 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. +--- + +# subRow + +@short: Optional. Defines the sub-row content for each row of the main Grid + +:::note +Note that when the `subRow` config is used, Grid doesn't support the [TreeGrid mode](grid/treegrid_mode.md) and the [data grouping](grid/usage.md#grouping-data) functionality. +::: + +@signature: {'subRow?: (row: IRow) => string | IViewConstructor;'} + +@descr: + +## 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 + +- a sub-row with an HTML content + +~~~jsx {8-10} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "zone_name", header: [{ text: "Zone name" }] }, + { id: "temperature", header: [{ text: "Temperature" }] }, + { id: "status", header: [{ text: "Status" }] }, + ], + data: dataset, + subRow: ({ zone_name }) => { + return `
Details for ${zone_name}
`; + }, +}); +~~~ + +- a sub-row with a subgrid + +~~~jsx {7-16} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "zone_name", header: [{ text: "Zone name" }] }, + { id: "temperature", header: [{ text: "Temperature" }] }, + ], + data: dataset, + subRow: ({ data }) => { + return new dhx.Grid(null, { + columns: [ + { id: "animal_type", header: [{ text: "Animal type" }] }, + { id: "name", header: [{ text: "Name" }] }, + ], + data, + autoWidth: true, + }); + }, +}); +~~~ + +**Related sample:** [Grid. Row expander. Full config](https://snippet.dhtmlx.com/xdw2037t) + +**Related article:** [Row expander](grid/configuration.md#row-expander) + +**Related API**: [subRowConfig](grid/api/grid_subrowconfig_config.md) + + \ No newline at end of file diff --git a/docs/grid/api/grid_subrowconfig_config.md b/docs/grid/api/grid_subrowconfig_config.md new file mode 100644 index 00000000..3dc47044 --- /dev/null +++ b/docs/grid/api/grid_subrowconfig_config.md @@ -0,0 +1,86 @@ +--- +sidebar_label: subRowConfig +title: JavaScript Grid - subRowConfig Config +description: You can explore the subRowConfig 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. +--- + +# subRowConfig + +@short: Optional. Specifies the configuration settings of a sub-row + +@signature: {'subRowConfig?: ((row: IRow) => ISubRowConfig) | ISubRowConfig;'} + +@descr: + +## Parameters + +When the property is set as an *object*, the specified parameters are applied to all the rows. + +When the property is set as a *callback function*, it is called with the row object as a parameter and returns the `subRowConfig` object, which allows providing specific configuration for each particular row. + +The `subRowConfig` object may contain the following properties: + +- `expanded` - (*boolean*) defines whether a sub-row is expanded by default, *false* by default +- `preserve` - (*boolean*) saves the state of sub-rows while expanding/collapsing, disappearing from the visible area, data updating, *false* by default +- `toggleIcon` - (*boolean*) enables the icon for expanding/collapsing, *true* by default +- `height` - (*number*) the height of a sub-row in pixels, [controls the visibility of sub-rows](grid/configuration.md#adding-sub-rows-for-specific-rows), *200* by default +- `padding` - (*string* | *number*) the inner padding of a sub-row, *8* by default +- `css` - (*string*) user-defined CSS classes for a sub-row +- `fullWidth` - (*boolean*) defines whether a sub-row will take all the width of Grid, *false* by default + +:::info note +The `fullWidth` property works only if the `subRowConfig` property is initialized as an object. +::: + +### Example + +- the global configuration of sub-rows + +~~~jsx {7-11} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "zone_name", header: [{ text: "Zone name" }] }, + { id: "temperature", header: [{ text: "Temperature" }] }, + ], + data: dataset, + subRowConfig: { + height: 200, + padding: 8, + fullWidth: true, + }, + subRow: ({ zone_name }) => `
Details for ${zone_name}
`, +}); +~~~ + +- configuring sub-rows settings dynamically + +The `height` setting of the `subRowConfig` property (set as a callback function) allows you to control the visibility of sub-rows. Set the `height` setting to 0 if you don't want a sub-row to be created for particular rows. + +~~~jsx {7-10} +const grid = new dhx.Grid("grid_container", { + columns:[ + // columns config + ], + data: dataset, + autoWidth: true, + subRowConfig: (row) => ({ + height: row.data.length ? 250 : 0, + expanded: true + }), + subRow: (row) => new dhx.Grid(null, { + columns: [ + // columns config + ], + data: row.data + }), +}); +~~~ + +**Related sample:** +- [Grid. Row expander. Full config](https://snippet.dhtmlx.com/xdw2037t) +- [Grid. Row expander. Subgrid only in specific rows](https://snippet.dhtmlx.com/03udbtmr) + +**Related article:** [Row expander](grid/configuration.md#row-expander) + +**Related API**: [subRow](grid/api/grid_subrow_config.md) + \ No newline at end of file diff --git a/docs/grid/api/grid_summary_config.md b/docs/grid/api/grid_summary_config.md index 3a719bfa..85eea114 100644 --- a/docs/grid/api/grid_summary_config.md +++ b/docs/grid/api/grid_summary_config.md @@ -84,7 +84,7 @@ console.log(summary); // { totalPopulation: 1000000, totalArea: 50000, density: **Related article:** [Summary of calculated values](grid/configuration.md#custom-statistics-in-the-column-headerfooter-and-spans) -**Related**: [getSummary](grid/api/grid_getsummary_method.md) +**Related API**: [getSummary](grid/api/grid_getsummary_method.md) @changelog: - Added in v9.0 \ No newline at end of file diff --git a/docs/grid/api/grid_type_config.md b/docs/grid/api/grid_type_config.md index 0c5c8ec2..b9233127 100644 --- a/docs/grid/api/grid_type_config.md +++ b/docs/grid/api/grid_type_config.md @@ -12,7 +12,7 @@ description: You can explore the type config of Grid in the documentation of the @example: const grid = new dhx.Grid("grid_container", { - type: "tree", + type: "tree", columns: [ // columns config ], diff --git a/docs/grid/api/treegrid_mode/grid_expand_event.md b/docs/grid/api/treegrid_mode/grid_expand_event.md deleted file mode 100644 index 36064e21..00000000 --- a/docs/grid/api/treegrid_mode/grid_expand_event.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -sidebar_label: expand -title: JavaScript Grid - expand Event -description: You can explore the expand 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. ---- - -# expand - -@short: fires before collapsing Grid in the TreeGrid mode - -:::note -The event works only for Grid with the `type: "tree"` configuration option -::: - -@signature: {'expand: (rowId: string | number) => void;'} - -@params: -The callback of the event is called with the following parameter: - -- `rowId: string | number` - the id of an expanded row - -@example: -const grid = new dhx.Grid("grid_container", { - type: "tree", - columns: [ - // columns config - ], - data: dataset, -}); - -grid.events.on("expand", (rowId) => { - // your logic here -}); - -@descr: \ No newline at end of file diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 433c3e08..7d2ca194 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1323,7 +1323,9 @@ const columnSummary = grid.getSummary("age"); console.log(columnSummary); //{ totalPopulation: 1000000, avgAge: 28 } - the value of the "age" column only ~~~ -## Header/footer text +## Column header/footer + +### Header/footer text You can specify the text of the header/footer column via the `text` property. It can be set either as a *string* or a *callback function* which is called with the following parameter: @@ -1355,7 +1357,7 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -## Header/footer filters +### 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): @@ -1414,7 +1416,7 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -### 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 @@ -1425,7 +1427,7 @@ const grid = new dhx.Grid("grid_container", { - **virtual** - (*boolean*) enables dynamic loading of data on scrolling the list of options - **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 +#### 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). @@ -1453,7 +1455,7 @@ const grid = new dhx.Grid("grid_container", { 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*. -## Header/footer height +### Header/footer height You can change the height of the header/footer in one of the following ways: @@ -1616,12 +1618,457 @@ const grid = new dhx.Grid("grid_container", { **Related sample**: [Grid. Frozen columns and rows](https://snippet.dhtmlx.com/hcgl9nth) +## Row expander + +The row expander functionality allows using nested content in Grid sub-rows. You can add a Grid or any other Suite widget, as well as some HTML content into a sub-row. + +:::tip Pro version only +This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +![](../assets/grid/row_expander.png) + +### Adding sub-rows + +In order to enable the row expander feature, you should use the [`subRow`](grid/api/grid_subrow_config.md) configuration option. It defines the content of sub-rows for each row of the Grid. The `subRow` property is a callback function which is called with the row object as a parameter and should return an HTML string or the constructor of a Suite component (Grid, Chart, Form, DataView, etc.). + +:::note +Note that when the `subRow` config is used, Grid doesn't support the [TreeGrid mode](grid/treegrid_mode.md) and the [data grouping](grid/usage.md#grouping-data) functionality. +::: + +Check the example of using a sub-row with an HTML content: + +~~~jsx {8-10} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "zone_name", header: [{ text: "Zone name" }] }, + { id: "temperature", header: [{ text: "Temperature" }] }, + { id: "status", header: [{ text: "Status" }] }, + ], + data: dataset, + subRow: ({ zone_name }) => { + return `
Details for ${zone_name}
`; + }, +}); +~~~ + +**Related sample:** [Grid. Row expander. Custom HTML and hiding toggle icon](https://snippet.dhtmlx.com/pvgyd3z9) + +In the example below a sub-row contains a subgrid: + +~~~jsx {7-16} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "zone_name", header: [{ text: "Zone name" }] }, + { id: "temperature", header: [{ text: "Temperature" }] }, + ], + data: dataset, + subRow: ({ data }) => { + return new dhx.Grid(null, { + columns: [ + { id: "animal_type", header: [{ text: "Animal type" }] }, + { id: "name", header: [{ text: "Name" }] }, + ], + data, + autoWidth: true, + }); + }, +}); +~~~ + +**Related sample:** [Grid. Row expander. Full config](https://snippet.dhtmlx.com/xdw2037t) + +### Adjusting configuration of sub-rows + +You can define common configuration settings of all sub-rows or provide specific options for each sub-row via the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) configuration property of Grid. + +This property can be used either as a callback function or as an object: + +- when set as an *object*, the specified parameters are applied to all the rows +- when set as a *callback function*, it is called with the row object as a parameter and returns an object, which allows providing specific configuration for each particular row + +The **subRowConfig** object may contain the following properties: + +- `expanded` - (*boolean*) defines whether a sub-row is expanded by default, *false* by default +- `preserve` - (*boolean*) saves the state of sub-rows when they are expanded/collapsed, hidden from the visible area, the data is updated, *false* by default +- `toggleIcon` - (*boolean*) enables the icon for sub-rows expanding/collapsing, *true* by default +- `height` - (*number*) the height of a sub-row in pixels, *200* by default +- `padding` - (*string|number*) the inner padding of a sub-row, *8* by default +- `css` - (*string*) user-defined CSS classes for a sub-row +- `fullWidth` - (*boolean*) defines whether a sub-row will take all the width of Grid, *false* by default + +:::info note +The `fullWidth` property works only if the `subRowConfig` property is initialized as an object. +::: + +The following example shows how to provide global configuration options for sub-rows: + +~~~jsx {7-11} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "zone_name", header: [{ text: "Zone name" }] }, + { id: "temperature", header: [{ text: "Temperature" }] }, + ], + data: dataset, + subRowConfig: { + height: 200, + padding: 8, + fullWidth: true, + }, + subRow: ({ zone_name }) => `
Details for ${zone_name}
`, +}); +~~~ + +**Related sample:** [Grid. Row expander. Full config](https://snippet.dhtmlx.com/xdw2037t) + +### Dynamic configuration of sub-rows + +You can dynamically expand/collapse certain sub-rows or adjust their appearance (specify the size of a cell, provide particular styles for sub-rows, etc.) on initialization of Grid depending on some conditions, using the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) configuration property of Grid set as a callback function. Check the example below: + +~~~jsx {7-11} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "zone_name", header: [{ text: "Zone name" }] }, + { id: "temperature", header: [{ text: "Temperature" }] }, + ], + data: dataset, + subRowConfig: (row) => ({ + height: 200, + expanded: row.temperature > 30, + css: row.temperature > 30 ? "hot-zone" : "cool-zone", + }), + subRow: ({ zone_name }) => `
Details for ${zone_name}
`, +}); +~~~ + +In the above example the sub-rows are dynamically configured depending on the value in the column with the "temperature" id. If the temperature value is more than 30, a sub-row will be expanded and gets the CSS "hot-zone" class (or "cool-zone", if the temperature value is less than 30). The height of an expanded sub-row cell will be 200px. + +#### Adding sub-rows for specific rows + +You can define which row a sub-row should be created for with the help of the `height` property of the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) configuration option. If you don't want to create sub-rows for particular rows, specify the `height:0` setting in the `subRowConfig` property. + +:::note +The described functionality works only if the `subRowConfig` property is initialized as a callback function. +::: + +~~~jsx {7-10} +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + data: dataset, + autoWidth: true, + subRowConfig: (row) => ({ + height: row.data.length ? 250 : 0, + expanded: true + }), + subRow: (row) => new dhx.Grid(null, { + columns: [ + // columns config + ], + data: row.data + }), +}); +~~~ + +![](../assets/grid/subgrid_specific_rows.png) + +In the above example the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) config set as a callback function defines that sub-rows with the height 250px will be created for rows that have some data. For rows without data the `height:0` setting is specified, so sub-rows won't be created for these rows. + +**Related sample:** [Grid. Row expander. Subgrid only in specific rows](https://snippet.dhtmlx.com/03udbtmr) + +### Saving state of nested components or data in sub-rows + +You can save the state of the nested components or the data of sub-rows while updating data, scrolling or collapsing sub-rows by using the `preserve` property of the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) configuration option of Grid. By default, sub-rows are destroyed when they are hidden (e.g. if a row leaves the visible area during scrolling) or collapsed, which leads to resetting of any changes made in the inner components. + +When the `preserve: true` setting is specified, sub-rows aren't destroyed when hidden or collapsed and their content is saved. It means that any change (such as sorting, data input or state change) is saved and the sub-row is restored in the same state when displayed again. + +:::info note +It's important to take into account that the `preserve: true` setting increases the size of the used memory, since the sub-rows data are kept in the memory even when they aren't displayed. +::: + +#### When using `preserve` is useful + +- When the data of sub-rows should be interactive. It means when a sub-row contains a form or any other component the content of which can be changed by a user and the changes shouldn't be reset +- For complex sub-rows with a state. For example, if a sub-row renders a component with a dynamic content and a complex user interface + +#### When `preserve` shouldn't be used + +- When sub-rows are used just for rendering static information. If a sub-row presents a simple text or a static HTML, the use of `preserve` is not rational +- In case a large amount of data is used. If a grid has a lot of rows and sub-rows, using `preserve` may increase the size of the used memory, which will affect the performance + +In the example below the `preserve` config is used to save the context of the Form nested in a sub-row: + +~~~jsx {7-9} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "name", header: [{ text: "Name" }] }, + { id: "age", header: [{ text: "Age" }] }, + ], + data: dataset, + subRowConfig: { + preserve: true, // saves the state of sub-rows + }, + subRow: (row) => { + return new dhx.Form(null, { + rows: [ + { type: "input", name: "details", label: "Details", value: row.details }, + ], + }); + }, +}); +~~~ + +### Loading data into a sub-row + +You can dynamically load data into a sub-row using the `load()` method of [DataCollection](/data_collection/) or [TreeCollection](/tree_collection/), depending on the nested component: + +~~~jsx {16-18} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "country", header: [{ text: "Country" }] }, + { id: "population", header: [{ text: "Population" }] }, + ], + data: dataset, + subRowConfig: { height: 400 }, + subRow: () => { + const subGrid = new dhx.Grid(null, { + columns: [ + { id: "title", header: [{ text: "Title" }] }, + { id: "authors", header: [{ text: "Authors" }] }, + ], + }); + + subGrid.data.load("https://some/dataset.json").then(() => { + subGrid.selection.setCell(subGrid.data.getId(0)); + }); + + return subGrid; + }, +}); +~~~ + +In the above example the `load()` method of [DataCollection](/data_collection/) is used for loading data into a nested Grid. + +**Related sample:** [Grid. Row expander. Subgrid data loading](https://snippet.dhtmlx.com/03ndqrqt) + +### Handling events + +#### Grid event handlers + +If a sub-row initializes a nested component (any Suite component), the sub-component's events can be set in the [`subRow`](grid/api/grid_subrow_config.md) callback function. It allows specifying event handlers directly for the nested component: + +~~~jsx {16-18} +const grid = new dhx.Grid("grid_container", { + columns: [ + { width: 200, id: "zone_name", header: [{ text: "Zone Name" }] }, + { width: 150, id: "temperature", header: [{ text: "Temperature" }] }, + ], + data: dataset, + subRow: ({ zone_name }) => { + const subGrid = new dhx.Grid(null, { + columns: [ + { id: "animal", header: [{ text: "Animal" }] }, + { id: "count", header: [{ text: "Count" }] }, + ], + data: zooMap[zone_name], + }); + + subGrid.events.on("cellClick", (row, column) => { + console.log(`${row} ${column}`); + }); + + return subGrid; + }, +}); +~~~ + +**Related sample:** [Grid. Row expander. Subgrid events handling](https://snippet.dhtmlx.com/3364si14) + +#### HTML template event handlers + +To specify the event handlers for a sub-row with an HTML content, use the [`eventHandlers`](grid/api/grid_eventhandlers_config.md) configuration option of Grid: + +~~~jsx {13-20} +const grid = new dhx.Grid("grid_container", { + columns: [ + { width: 200, id: "name", header: [{ text: "Name" }] }, + { width: 150, id: "details", header: [{ text: "Details" }] }, + ], + data: dataset, + subRow: (row) => ` +
+

Details for ${row.name}

+ +
+ `, + eventHandlers: { + onclick: { + // the button click event in a sub-row + subrow_button: (event, data) => { + console.log(`A button click in the row ${data.row.id}`); // subRow id + } + }, + } +}); +~~~ + +### Multi-level Grid nesting + +It is possible to create as many levels of nested subgrids, as necessary. + +![](../assets/grid/multi_level_nesting.png) + +To specify the structure of a multi-level Grid nesting, do the following: + +- create a Grid with columns and data +- in the Grid configuration specify the [`subRow`](grid/api/grid_subrow_config.md) option as a callback function, which: + - returns a nested Grid that contains the `subRow` config set as a callback function that may return: + - some Suite component + - HTML as string + - a subgrid instance for another nesting level (that contains the `subRow` config set as a callback function to return another subgrid, a Suite component, or HTML content) + +Check the example below: + +~~~jsx {12,24,36} +const grid = new dhx.Grid("grid_container", { + columns: [ + { id: "col_1", header: [{ text: "Grid. Level 1" }] }, + { id: "col_2", header: [{ text: "Second Column" }] }, + ], + data: dataset, + autoWidth: true, + subRowConfig: (row) => ({ + height: 300, + expanded: row.col_1 === "Row 1", + }), + subRow: ({ data }) => { + return new dhx.Grid(null, { + columns: [ + { id: "col_1", header: [{ text: "Grid. Level 2" }] }, + { id: "col_2", header: [{ text: "Second Column" }] }, + ], + data, + autoWidth: true, + subRowConfig: (row) => ({ + height: 300, + expanded: row.col_1 === "Row 1", + }), + subRow: ({ data }) => { + return new dhx.Grid(null, { + columns: [ + { id: "col_1", header: [{ text: "Grid. Level 3" }] }, + { id: "col_2", header: [{ text: "Second Column" }] }, + ], + data, + autoWidth: true, + subRowConfig: (row) => ({ + height: 300, + expanded: row.col_1 === "Row 1", + }), + subRow: () => (`Subrow. Level 4`), + }) + }, + }) + }, +}); +~~~ + +**Related sample:** [Grid. Row expander. Subgrid with rows expanded by criteria](https://snippet.dhtmlx.com/dih3z7cz) + +### Adjusting sub-row width + +You can adjust the sub-row width depending on the width of its parent Grid via the `fullWidth` property of the [`subRowConfig`](grid/api/grid_subrowconfig_config.md) configuration object. + +:::info note +The `fullWidth` property works only if the `subRowConfig` property is initialized as an object. +::: + +If the `fullWidth: true` configuration option is specified, the sub-row width is the same as the full width of the Grid content, including the area outside the visible area borders (it means that the sub-row will be scrolled together with the horizontal scroll). By default, a sub-row takes just the width of the visible Grid area. + +Check the example below: + +~~~jsx {12-14} +const grid = new dhx.Grid("grid_container", { + width: 400, + columns: [ + { id: "name", header: [{ text: "Name" }], width: 150 }, + { id: "value", header: [{ text: "Value" }], width: 150 }, + { id: "description", header: [{ text: "Description" }], width: 300 }, + ], + data: dataset, + subRow: (row) => { + return `
Details for ${row.name}
`; + }, + subRowConfig: { + fullWidth: true, // makes the sub-row width equal to the Grid content width + }, +}); +~~~ + +In the above example: + +- the width of the Grid container is set as 400px +- if the `fullWidth` config isn't enabled, the sub-row width will be equal to the Grid width (400px) +- the common width of all the columns is 600px, thus if the `fullWidth: true` setting is specified, the sub-row width will be equal to 600px + +### Getting sub-row config and content + +You can get the configuration settings applied to a sub-row and the content inside it using the [`getSubRow()`](grid/api/grid_getsubrow_method.md) method. + +:::info +Note that the method works if a sub-row is in the visible area or if the `preserve:true` property is specified in the `subRowConfig` object of the sub-row. +::: + +The method takes as a parameter the id of a row and returns an object that includes the following properties: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
css(string) user-defined CSS classes for a sub-row
element(HTMLElement | null) the parent container of the current sub-row
expanded(boolean) defines whether a sub-row is expanded by default, false by default
fullWidth(boolean) defines whether a sub-row will take all the width of Grid, false by default
height(number) the height of a sub-row in pixels, 200 by default
padding(string | number) the inner padding of a sub-row, 8 by default
preserve(boolean) saves the state of sub-rows while expanding/collapsing, disappearing from the visible area, data updating, false by default
toggleIcon(boolean) enables the icon for expanding/collapsing, true by default
view(string | object | null) that can be presented by:
  • a string, if the sub-row is set by the HTML content
  • an object instance to interact with, if a sub-row is an instance of a nested component (for example, Grid)
  • null, if the sub-row is unavailable (for example, it is hidden or placed outside the visible area and the `preserve` config is not specified)
+ ## Drag-n-drop The drag-n-drop functionality allows you to reorder one or several rows or columns inside the grid or between several grids. :::tip Pro version only -If you use GPL version of DHTMLX Grid (or DHTMLX Suite), you will be able to reorder only rows and only one by one. +If you use the GPL version of DHTMLX Grid (or DHTMLX Suite), you will be able to reorder only rows and only one by one. **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. ::: diff --git a/docs/grid/features.md b/docs/grid/features.md index f51798d7..37716bf6 100644 --- a/docs/grid/features.md +++ b/docs/grid/features.md @@ -202,6 +202,21 @@ In this section you will learn how to add and remove columns and rows, how to hi | [Showing / hiding a column](../usage/#hidingshowing-a-column) | Learn how to show and hide a column in Grid ([Example](https://snippet.dhtmlx.com/n4zjwsqj)) | | [Checking visibility of a column](../usage/#checking-visibility-of-a-column) | Learn how to check whether a column is hidden ([Example](https://snippet.dhtmlx.com/rdqhwnjv)) | +## How to work with row expander + +| Topic | Description | +| -------------------------------------------------------------- | ---------------------------------------------- | +| [Adding sub-rows](../configuration/#adding-sub-rows) | Learn how to enable the row expander feature and add sub-rows into Grid ([Example](https://snippet.dhtmlx.com/xdw2037t)) | +| [Adjusting configuration of sub-rows](../configuration/#adjusting-configuration-of-sub-rows) | Learn how to configure the sub-rows ([Example](https://snippet.dhtmlx.com/xdw2037t)) | +| [Dynamic configuration of sub-rows](../configuration/#dynamic-configuration-of-sub-rows) | Learn how to adjust the configuration settings of sub-rows dynamically ([Example](https://snippet.dhtmlx.com/pbubj175)) | +| [Saving state of nested components or data in sub-rows](../configuration/#saving-state-of-nested-components-or-data-in-sub-rows) | Learn how to save the state of nested components or the data of sub-rows | +| [Loading data into a sub-row](../configuration/#loading-data-into-a-sub-row) | Learn how to dynamically load data into a sub-row ([Example](https://snippet.dhtmlx.com/03ndqrqt)) | +| [Handling events](../configuration/#handling-events) | Learn how to add event handlers for sub-rows with sub-components or HTML content ([Example](https://snippet.dhtmlx.com/3364si14)) | +| [Multi-level Grid nesting](../configuration/#multi-level-grid-nesting) | Learn how to specify a multi-level Grid nesting structure ([Example](https://snippet.dhtmlx.com/dih3z7cz)) | +| [Adjusting sub-row width](../configuration/#adjusting-sub-row-width) | Learn how to adjust the sub-row width depending on the width of the parent Grid | +| [Getting sub-row config and content](../configuration/#getting-sub-row-config-and-content) | Learn how to get the configuration settings applied to a sub-row and the content inside it | + + ## How to work with data in Grid This section will tell you how to use **Grid API** and **DataCollection API** for working with data of Grid, i.e. edit, add, remove, sort data, etc. @@ -226,10 +241,11 @@ In this section you will find the ways of editing data in Grid. In this section you will find the ways of sorting data in Grid. -| Topic | Description | -| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | -| [Sorting data](../usage/#sorting-data) | Learn how to sort data in the grid ([Example](https://snippet.dhtmlx.com/81dmbdfd)) | -| [Sortable columns](../configuration/#sortable-columns) | Learn how to define whether a column should be sortable ([Example](https://snippet.dhtmlx.com/r3prvlmo)) | +| Topic | Description | +| --------------------------------------------- | ---------------------------------------------------------------- | +| [Sorting data](../usage/#sorting-data) | Learn how to sort data in the grid ([Example](https://snippet.dhtmlx.com/81dmbdfd)) | +| [Sorting by multiple columns](../usage/#sorting-by-multiple-columns) | Learn how to sort Grid data by multiple columns ([Example 1](https://snippet.dhtmlx.com/4ej0i3qi), [Example 2](https://snippet.dhtmlx.com/786zr190)) | +| [Sortable columns](../configuration/#sortable-columns)| Learn how to define whether a column should be sortable ([Example](https://snippet.dhtmlx.com/r3prvlmo)) | | [Getting sorting state](../usage/#getting-the-sorting-state) | Learn how to get the current state of sorting data in Grid ([Example](https://snippet.dhtmlx.com/u2vk3ri3)) | ### How to filter data @@ -277,7 +293,6 @@ In this section you will find the ways of working with 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 | | [Working with TreeGrid mode](../treegrid_mode/#work-with-grid-in-the-treegrid-mode) | Learn how to expand/collapse nodes | -| [TreeGrid mode API](../../category/treegrid-mode-api/) | Learn how to use the API of TreeGrid mode of Grid | ## How to scroll Grid @@ -327,7 +342,6 @@ In this section you can find out corresponding references of Grid API. | [Grid column properties](../api/api_gridcolumn_properties/) | Check the list of properties of a Grid column | | [DataCollection API](../../data_collection/) | Check the API of DataCollection to work with Grid data | | [Selection API](../../category/selection-api/) | Check the API of Selection to manage the selection of Grid cells | -| [TreeGrid mode API](../../category/treegrid-mode-api/) | Check the API of Grid in the TreeGrid mode | ## Common functionality diff --git a/docs/grid/treegrid_mode.md b/docs/grid/treegrid_mode.md index 57c44067..1603cd72 100644 --- a/docs/grid/treegrid_mode.md +++ b/docs/grid/treegrid_mode.md @@ -6,9 +6,9 @@ description: You can explore how to work with Grid in the documentation of the D # TreeGrid mode -{{pronote +:::tip Pro version only The TreeGrid mode of the Grid component is available in the **PRO** version only. -}} +::: TreeGrid mode of the Grid component allows showing the nested tabular data. @@ -40,7 +40,7 @@ There is also a set of properties you can provide for Grid in the TreeGrid mode ### Collapsed mode -To initialize Grid in the TreeGrid mode in the collapsed state, use the [collapsed](grid/api/treegrid_mode/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", { @@ -57,7 +57,7 @@ const grid = new dhx.Grid("grid_container", { ### 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/treegrid_mode/grid_dragexpand_config.md) property to *false*: +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", { @@ -75,7 +75,7 @@ const grid = new dhx.Grid("grid_container", { ### Defining the id of the root parent -To define the id of the root parent, use the [rootParent](grid/api/treegrid_mode/grid_rootparent_config.md) configuration property: +To define the id of the root parent, use the [rootParent](grid/api/grid_rootparent_config.md) configuration property: ~~~jsx {3} const grid = new dhx.Grid("grid_container", { @@ -219,13 +219,13 @@ grid.data.load("/some/data").then(function(){ ## 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. Besides, there are some methods specific for the TreeGrid mode of Grid. These are the methods for expanding/collapsing nodes. +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. ### Expanding/collapsing nodes #### Expanding/collapsing a certain node -To expand a particular node in a Grid in the TreeGrid mode by its id, use the [`expand()`](grid/api/treegrid_mode/grid_expand_method.md) method: +To expand a particular node in a Grid by its id, use the [`expand()`](grid/api/grid_expand_method.md) method: ~~~jsx {5,13} const grid = new dhx.Grid("grid_container", { @@ -243,7 +243,7 @@ const grid = new dhx.Grid("grid_container", { grid.expand("native"); ~~~ -To collapse a grid node, make use of the [`collapse()`](grid/api/treegrid_mode/grid_collapse_method.md) method: +To collapse a grid node, make use of the [`collapse()`](grid/api/grid_collapse_method.md) method: ~~~jsx {5,13} const grid = new dhx.Grid("grid_container", { @@ -265,7 +265,7 @@ grid.collapse("native"); #### Expanding/collapsing all nodes -It is also possible to expand/collapse all the nodes of the Grid in the TreeGrid mode using the two corresponding methods - [`expandAll()`](grid/api/treegrid_mode/grid_expandall_method.md) and [`collapseAll()`](grid/api/treegrid_mode/grid_collapseall_method.md): +It is also possible to expand/collapse all the nodes of the Grid using the two corresponding methods - [`expandAll()`](grid/api/grid_expandall_method.md) and [`collapseAll()`](grid/api/grid_collapseall_method.md): ~~~jsx {14,16} const grid = new dhx.Grid("grid_container", { @@ -290,15 +290,7 @@ grid.collapseAll(); ## Event handling -When you work with Grid in the TreeGrid mode, you can use the [API Events of DHTMLX Grid](/category/grid-events/). There is also a set of events specific for the TreeGrid mode of Grid that allow handling collapsing and expanding of nodes: - -| Name | Description | -| ------------------------------------------------------- | ------------------------------------------------------------- | -| [](grid/api/treegrid_mode/grid_aftercollapse_event.md) | @getshort(grid/api/treegrid_mode/grid_aftercollapse_event.md) | -| [](grid/api/treegrid_mode/grid_afterexpand_event.md) | @getshort(grid/api/treegrid_mode/grid_afterexpand_event.md) | -| [](grid/api/treegrid_mode/grid_beforecollapse_event.md) | @getshort(grid/api/treegrid_mode/grid_beforecollapse_event.md)| -| [](grid/api/treegrid_mode/grid_beforeexpand_event.md) | @getshort(grid/api/treegrid_mode/grid_beforeexpand_event.md) | -| [](grid/api/treegrid_mode/grid_expand_event.md) | @getshort(grid/api/treegrid_mode/grid_beforecollapse_event.md)| +When you work with Grid in the TreeGrid mode, you can use the [API Events of DHTMLX Grid](/category/grid-events/). You can learn how to work with Grid events in the [related guide](/grid/events/). diff --git a/docs/grid/usage.md b/docs/grid/usage.md index 270b10e3..ab9250ae 100644 --- a/docs/grid/usage.md +++ b/docs/grid/usage.md @@ -273,7 +273,7 @@ You can filter grid data by the specified criteria with the help of the `filter( config - (object) optional, an object with the following properties: + (object) optional, an object with the following properties: @@ -314,7 +314,7 @@ It is possible to sort data in the grid via the `sort()` method of [DataCollecti rule - (object) an object with parameters for sorting. It can take the following attributes: + (object) an object with parameters for sorting. It can take the following attributes: config @@ -324,26 +324,72 @@ It is possible to sort data in the grid via the `sort()` method of [DataCollecti
-~~~js -grid.data.sort({ - by:"a", - dir:"desc", - as: function(item){ - return item.toUpperCase(); - }, +~~~jsx +grid.data.sort( { - smartSorting: true - } -}); + by:"a", + dir:"desc", + as: item => (item.toUpperCase()) + }, + { smartSorting: true } +); ~~~ **Related sample**: [Grid. Sorting](https://snippet.dhtmlx.com/81dmbdfd) +#### Sorting by multiple columns + +:::tip pro version only +The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package. +::: + +You can sort Grid by multiple columns simultaneously. + +![](../assets/grid/multisorting_data.png) + +**Related sample**: [Grid. Sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/4ej0i3qi) + +Multi-sorting is enabled on initialization of the component. In the example below Grid data is sorted with the help of the `sort()` method of [DataCollection](data_collection.md) by several columns: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + editable: true, + group: { + order: ["animal_type"] // group by the `animal_type` field + }, + groupable: true, // enables grouping functionality, false by default + data: dataset +}); + +grid.data.sort({ by: "volunteer_name", dir: "desc" }, { smartSorting: true }); +grid.data.sort({ by: "task_status", dir: "asc" }); +grid.data.sort({ by: "animal_type", dir: "asc" }); +~~~ + +![](../assets/grid/multisort_grouped_data.png) + +**Related sample**: [Grid. Grouping with sorting by multiple columns (multisorting)](https://snippet.dhtmlx.com/786zr190) + +If you need to disable the multi-sorting ability, set the [`multiSort`](grid/api/grid_multisort_config.md) Grid property to *false*. + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + multiSort: false, + data: dataset +}); +~~~ + #### Custom sorting -You can also specify the **rule** attribute in a passed object instead of the default ones and set a custom function for sorting. For example: +You can also specify the `rule` attribute in a passed object instead of the default ones and set a custom function for sorting. For example: -~~~js +~~~jsx grid.data.sort({ rule: (a, b) => a.id > b.id ? 1 : (a.id < b.id ? -1 : 0) }); @@ -351,28 +397,38 @@ grid.data.sort({ #### Getting the sorting state -To get the current state of sorting data in Grid, use the [](grid/api/grid_getsortingstate_method.md) method. The method returns an object with two attributes: +To get the current state of sorting data in Grid, use the [`getSortingStates()`](data_collection/api/datacollection_getsortingstates_method.md) method of DataCollection. The method allows getting the result of sorting data by multiple columns and returns an array of objects with the following properties: + + + + - + - - + + + + + + + + + +
by(string | number) the id of a data field to sort by
dir(string) the sorting direction (desc, asc)(string) the direction of sorting: "asc" or "desc"
by(string | number) the id of a column that the grid is sorted byas(function) a custom function of converting values before comparing
rule(function) a custom sorting function
smartSorting(boolean) (if applied) specifies whether a sorting rule should be applied each time after changing the data set
-
-~~~js -const state = grid.getSortingState(); -// -> { dir: "desc", by: "country" } +~~~jsx +const state = grid.data.getSortingStates(); +// -> [{by: "country", dir: "desc"}, {by: "population", dir: "desc"}] ~~~ -**Related sample**: [Grid. Get sorting state](https://snippet.dhtmlx.com/u2vk3ri3) ### Editing data diff --git a/docs/integration/suite_and_backend.md b/docs/integration/suite_and_backend.md index 578d083d..2aa762a8 100644 --- a/docs/integration/suite_and_backend.md +++ b/docs/integration/suite_and_backend.md @@ -8,25 +8,25 @@ description: You can explore how to connect DHTMLX Suite to a backend. Browse de ![](../assets/integration/work_with_backend.png) -DHTMLX Suite 8 or DHTMLX components don't have any special requirements for the backend. They can be easily connected with any backend platform which supports the REST API (RESTful API). +DHTMLX Suite 9 or DHTMLX components don't have any special requirements for the backend. They can be easily connected with any backend platform which supports the REST API (RESTful API). Besides, the DHTMLX library allows providing a [multi-user backend](#multiuser-real-time-updated-backend-save-method-getting-editing-deleting-and-sending-data) for any Suite component. -The DHTMLX library includes the [DataCollection](/data_collection/) helper that completely supports REST API for dealing with the backend. +The DHTMLX library includes the [DataCollection](/data_collection/) helper that completely supports REST API for dealing with the backend. Thus, to transfer data from your backend to the Suite components, all you need to do is create a valid JSON dataset. You can load it into the component using the [load()](/data_collection/api/datacollection_load_method/) method of DataCollection. -Thus, to transfer data from your backend to the Suite components, all you need to do is create a valid JSON dataset. You can load it into the component using the [load()](/data_collection/api/datacollection_load_method/) method of DataCollection. -## Examples of using DHTMLX Suite widgets with Node.js -Let's have an overview of the examples. +## Examples of using DHTMLX Suite widgets with Node.js :::info Download and take a look at the [Examples of using DHTMLX Suite widgets with Node.js](https://github.com/DHTMLX/nodejs-suite-demo). ::: -Here you can find 11 interactive samples. Follow the instructions in the README.md file to run the examples. +Here you can find 12 interactive samples. Follow the instructions in the README.md file to run the examples. You can easily modify any widget for your purposes and find out how it works. +:::tip note Pay attention: the components of the demo work with one database. When editing data in one component, you affect data in other components. +::: To reset the database, stop the server and delete the file with the `.sqlite` extension from the root directory of the project. @@ -122,12 +122,18 @@ The following request methods are used in this example: `GET`, `PUT`, `POST`, `D ![](../assets/integration/work_with_backend_save.png) -The example is created to show you how to save the changes made in data to the backend via the **save()** method of DataCollection. +The example is created to show you how to save the changes made in data to the backend via the `save()` method of DataCollection. This example of Grid is visually the same as the previous one but the ways of adding and editing data in this example are developed in another way. For instance, after you click the "Add new card" button, an empty row will be added after the last row in the grid. Editing of any cell of the grid is implemented by double-clicking on the cell. The following request methods are used in this example: `GET`, `PUT`, `POST`, `DELETE`. +### Multiuser (real-time updated) backend. Save method. Getting, editing, deleting, and sending data + +This example shows how to implement a multi-user backend for Grid with the help of Node.js and the Faye library to provide live data updates. + +You can create a multi-user (real-time updated) backend for any Suite widget. The backend can be implemented in any language, and you can use any library that will allow the client and the server sides interact via the WebSocket protocol. + :::info Download and take a look at the [Examples of using DHTMLX Suite widgets with Node.js](https://github.com/DHTMLX/nodejs-suite-demo). -::: +::: \ No newline at end of file diff --git a/docs/migration.md b/docs/migration.md index a5ad6e2c..b38e6cd7 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -6,6 +6,21 @@ description: You can explore how to migrate to newer versions in the documentati # Migration to newer versions +9.0 -> 9.1 +----------- + +### Grid + +The `getSortingState()` method of Grid has been deprecated and replaced with the `getSortingStates()` method of [DataCollection](/data_collection/) and [TreeCollection](/tree_collection/), which allows getting the result of sorting data by multiple columns. + +~~~jsx title="Before v9.1" +grid.getSortingState(); +~~~ + +~~~jsx title="From v9.1" +grid.data.getSortingStates()[0]; // getting the first (main) sorting state +~~~ + 8.4 -> 9.0 ----------- diff --git a/docs/tree_collection/api/treecollection_filter_method.md b/docs/tree_collection/api/treecollection_filter_method.md index eb870660..bb77aaa9 100644 --- a/docs/tree_collection/api/treecollection_filter_method.md +++ b/docs/tree_collection/api/treecollection_filter_method.md @@ -14,12 +14,12 @@ description: You can explore the filter method of TreeCollection in the document - `rule: function | object` - the filtering criteria - If set as a *function*, filtering will be applied by the rule specified in the function. The function takes an object of a data item as a parameter and returns *true/false* - If set as an *object*, the parameter has the following attributes: - - `by: string | number` - required, the id of a column + - `by: string | number` - required, the id of a data field - `match: string` - required, a pattern to match - `compare: function` - optional, a function for extended filtering that takes three parameters: - - `value` - the value to compare (e.g. a column in a row for Grid) + - `value` - the value to compare - `match` - a pattern to match - - `item` - a data item the values of which should be compared (e.g. a row) + - `item` - a data item the values of which should be compared - `config: object` - optional, defines the parameters of filtering. The parameter may contain the following properties: - `type: string` - optional, defines the area the filtering will be applied: "all", "level", "leafs" - `level: number` - optional, the level the filtering will be applied to diff --git a/docs/tree_collection/api/treecollection_getsortingstates_method.md b/docs/tree_collection/api/treecollection_getsortingstates_method.md new file mode 100644 index 00000000..a0b0f509 --- /dev/null +++ b/docs/tree_collection/api/treecollection_getsortingstates_method.md @@ -0,0 +1,61 @@ +--- +sidebar_label: getSortingStates() +title: JavaScript TreeCollection - getSortingStates Method +description: You can explore the getSortingStates method of TreeCollection 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. +--- + +# getSortingStates() + +@short: returns an array of objects with the current parameters of sorting applied to the data + +## Usage + +~~~jsx +interface ISortingState { + by: string | number, + dir: "asc" | "desc", + as?: (a) => any, + rule?: (a, b) => number, + smartSorting?: boolean +} + +getSortingStates(): ISortingState[]; +~~~ + +@returns: +An array of objects with the current parameters of sorting applied to the data. + +@example: +const state = component.data.getSortingStates(); + +@descr: +The array returned by the method contains objects with the following properties: + + + + + + + + + + + + + + + + + + + + + + + + +
by(string | number) the id of a data field to sort by
dir(string) the direction of sorting: "asc" or "desc"
as(function) optional, a custom function of converting values before comparing
rule(function) optional, a custom sorting function
smartSorting(boolean) optional, (if applied) specifies whether a sorting rule should be applied each time after changing the data set
+ + +@changelog: +added in v9.1 \ No newline at end of file diff --git a/docs/tree_collection/api/treecollection_sort_method.md b/docs/tree_collection/api/treecollection_sort_method.md index bb8c06a2..5ca115ad 100644 --- a/docs/tree_collection/api/treecollection_sort_method.md +++ b/docs/tree_collection/api/treecollection_sort_method.md @@ -12,7 +12,7 @@ description: You can explore the sort method of TreeCollection in the documentat @params: - `rule: object` - an object with parameters for sorting. The object has the following attributes: - - `by: string | number` - the id of a data field (a column of Grid in the TreeGrid mode) + - `by: string | number` - the id of a data field - `dir: string` - the direction of sorting: "asc" or "desc" - `as: function` - a function that specifies the type to sort data as - `rule: function` - optional, a sorting rule; the function must have two parameters and return a number (-1,0,1) @@ -20,16 +20,14 @@ description: You can explore the sort method of TreeCollection in the documentat - `smartSorting: boolean` - specifies whether a sorting rule should be applied each time after changing the data set @example: -component.data.sort({ - by: "price", - dir: "asc", - as: function(value){ - return value ? value : "" - }, +component.data.sort( { - smartSorting: true - } -}); + by: "price", + dir: "asc", + as: value => (value || "") + }, + { smartSorting: true } +); // cancels the applied sorting rules component.data.sort(); diff --git a/docs/tree_collection/index.md b/docs/tree_collection/index.md index 0614ee82..47db3f41 100644 --- a/docs/tree_collection/index.md +++ b/docs/tree_collection/index.md @@ -10,39 +10,40 @@ A set of API methods and events that allow you to work with data of a component ## Methods -| Name | Description | -| --------------------------------------------- | ---------------------------------------------------- | -| [](api/treecollection_add_method.md) | @getshort(api/treecollection_add_method.md) | -| [](api/treecollection_cancopy_method.md) | @getshort(api/treecollection_cancopy_method.md) | -| [](api/treecollection_copy_method.md) | @getshort(api/treecollection_copy_method.md) | -| [](api/treecollection_eachchild_method.md) | @getshort(api/treecollection_eachchild_method.md) | -| [](api/treecollection_eachparent_method.md) | @getshort(api/treecollection_eachparent_method.md) | -| [](api/treecollection_exists_method.md) | @getshort(api/treecollection_exists_method.md) | -| [](api/treecollection_filter_method.md) | @getshort(api/treecollection_filter_method.md) | -| [](api/treecollection_foreach_method.md) | @getshort(api/treecollection_foreach_method.md) | -| [](api/treecollection_getfilters_method.md) | @getshort(api/treecollection_getfilters_method.md) | -| [](api/treecollection_getid_method.md) | @getshort(api/treecollection_getid_method.md) | -| [](api/treecollection_getindex_method.md) | @getshort(api/treecollection_getindex_method.md) | -| [](api/treecollection_getitem_method.md) | @getshort(api/treecollection_getitem_method.md) | -| [](api/treecollection_getitems_method.md) | @getshort(api/treecollection_getitems_method.md) | -| [](api/treecollection_getlength_method.md) | @getshort(api/treecollection_getlength_method.md) | -| [](api/treecollection_getparent_method.md) | @getshort(api/treecollection_getparent_method.md) | -| [](api/treecollection_getroot_method.md) | @getshort(api/treecollection_getroot_method.md) | -| [](api/treecollection_haveitems_method.md) | @getshort(api/treecollection_haveitems_method.md) | -| [](api/treecollection_issaved_method.md) | @getshort(api/treecollection_issaved_method.md) | -| [](api/treecollection_load_method.md) | @getshort(api/treecollection_load_method.md) | -| [](api/treecollection_loaditems_method.md) | @getshort(api/treecollection_loaditems_method.md) | -| [](api/treecollection_move_method.md) | @getshort(api/treecollection_move_method.md) | -| [](api/treecollection_parse_method.md) | @getshort(api/treecollection_parse_method.md) | -| [](api/treecollection_refreshitems_method.md) | @getshort(api/treecollection_refreshitems_method.md) | -| [](api/treecollection_remove_method.md) | @getshort(api/treecollection_remove_method.md) | -| [](api/treecollection_removeall_method.md) | @getshort(api/treecollection_removeall_method.md) | -| [](api/treecollection_resetfilter_method.md) | @getshort(api/treecollection_resetfilter_method.md) | -| [](api/treecollection_restoreorder_method.md) | @getshort(api/treecollection_restoreorder_method.md) | -| [](api/treecollection_save_method.md) | @getshort(api/treecollection_save_method.md) | -| [](api/treecollection_serialize_method.md) | @getshort(api/treecollection_serialize_method.md) | -| [](api/treecollection_sort_method.md) | @getshort(api/treecollection_sort_method.md) | -| [](api/treecollection_update_method.md) | @getshort(api/treecollection_update_method.md) | +| Name | Description | +| ------------------------------------------------- | --------------------------------------------------------- | +| [](api/treecollection_add_method.md) | @getshort(api/treecollection_add_method.md) | +| [](api/treecollection_cancopy_method.md) | @getshort(api/treecollection_cancopy_method.md) | +| [](api/treecollection_copy_method.md) | @getshort(api/treecollection_copy_method.md) | +| [](api/treecollection_eachchild_method.md) | @getshort(api/treecollection_eachchild_method.md) | +| [](api/treecollection_eachparent_method.md) | @getshort(api/treecollection_eachparent_method.md) | +| [](api/treecollection_exists_method.md) | @getshort(api/treecollection_exists_method.md) | +| [](api/treecollection_filter_method.md) | @getshort(api/treecollection_filter_method.md) | +| [](api/treecollection_foreach_method.md) | @getshort(api/treecollection_foreach_method.md) | +| [](api/treecollection_getfilters_method.md) | @getshort(api/treecollection_getfilters_method.md) | +| [](api/treecollection_getid_method.md) | @getshort(api/treecollection_getid_method.md) | +| [](api/treecollection_getindex_method.md) | @getshort(api/treecollection_getindex_method.md) | +| [](api/treecollection_getitem_method.md) | @getshort(api/treecollection_getitem_method.md) | +| [](api/treecollection_getitems_method.md) | @getshort(api/treecollection_getitems_method.md) | +| [](api/treecollection_getlength_method.md) | @getshort(api/treecollection_getlength_method.md) | +| [](api/treecollection_getparent_method.md) | @getshort(api/treecollection_getparent_method.md) | +| [](api/treecollection_getroot_method.md) | @getshort(api/treecollection_getroot_method.md) | +| [](api/treecollection_getsortingstates_method.md) | @getshort(api/treecollection_getsortingstates_method.md) | +| [](api/treecollection_haveitems_method.md) | @getshort(api/treecollection_haveitems_method.md) | +| [](api/treecollection_issaved_method.md) | @getshort(api/treecollection_issaved_method.md) | +| [](api/treecollection_load_method.md) | @getshort(api/treecollection_load_method.md) | +| [](api/treecollection_loaditems_method.md) | @getshort(api/treecollection_loaditems_method.md) | +| [](api/treecollection_move_method.md) | @getshort(api/treecollection_move_method.md) | +| [](api/treecollection_parse_method.md) | @getshort(api/treecollection_parse_method.md) | +| [](api/treecollection_refreshitems_method.md) | @getshort(api/treecollection_refreshitems_method.md) | +| [](api/treecollection_remove_method.md) | @getshort(api/treecollection_remove_method.md) | +| [](api/treecollection_removeall_method.md) | @getshort(api/treecollection_removeall_method.md) | +| [](api/treecollection_resetfilter_method.md) | @getshort(api/treecollection_resetfilter_method.md) | +| [](api/treecollection_restoreorder_method.md) | @getshort(api/treecollection_restoreorder_method.md) | +| [](api/treecollection_save_method.md) | @getshort(api/treecollection_save_method.md) | +| [](api/treecollection_serialize_method.md) | @getshort(api/treecollection_serialize_method.md) | +| [](api/treecollection_sort_method.md) | @getshort(api/treecollection_sort_method.md) | +| [](api/treecollection_update_method.md) | @getshort(api/treecollection_update_method.md) | ## Events diff --git a/docs/whatsnew.md b/docs/whatsnew.md index a38c6ec7..8dc87b96 100644 --- a/docs/whatsnew.md +++ b/docs/whatsnew.md @@ -8,6 +8,52 @@ 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.1 + +Released on February 18, 2025 + +Review of the release on the blog + +### Breaking changes + +This version brings some updates in the API methods. Check the [Migration](migration.md#90---91) guide to keep in step with the latest updates. + +### New functionality + +#### Grid + +- [Row expander](grid/configuration.md#row-expander) with the possibility to insert any Suite widget or HTML content (PRO version) +- [Multi-sorting](grid/usage.md#sorting-by-multiple-columns) functionality that allows sorting Grid by several columns (PRO version) + +### Fixes + +- DataCollection/TreeCollection. The `sort()` method called without arguments doesn't reset the applied sorting +- Grid. Falsy firing of data events on row drag-n-drop +- Grid. The issue with a gap appearing while calculating `autoHeight` of a cell +- Toolbar. Incorrect menu items positioning +- TreeCollection. The `restoreOrder()` method doesn't reset the applied sorting + +### New demo on backend integration + +- [Multiuser (real-time updated) backend. Save method. Getting, editing, deleting, and sending data](https://github.com/DHTMLX/nodejs-suite-demo/blob/master/public/views/12_grid_with_form_multiuser.html) + +### New samples + +#### Grid + +- [Grouping and template in group headers](https://snippet.dhtmlx.com/dywmb6ec) +- [Search and highlight results](https://snippet.dhtmlx.com/p74701lu) +- [Hiding columns using header context menu](https://snippet.dhtmlx.com/ygfj3uo3) +- [Empty state](https://snippet.dhtmlx.com/sbajbjre) +- [Row pinning with checkbox](https://snippet.dhtmlx.com/idu0mdmr) +- [Dynamic calculations](https://snippet.dhtmlx.com/6nrd0v2y) +- [Dataview editor for second column](https://snippet.dhtmlx.com/1lvoz1ra) +- [Custom yes/no editor](https://snippet.dhtmlx.com/4nq80zi3) +- [Additional details in second grid (linked grids)](https://snippet.dhtmlx.com/u0e135f1) +- [Readonly (disabled) rows](https://snippet.dhtmlx.com/h3nah0jv) +- [Rotated (vertical) header](https://snippet.dhtmlx.com/xdmemdjg) +- [Grid and Pivot. Integration](https://snippet.dhtmlx.com/0uo39y8c) + ## Version 9.0.4 Released on February 4, 2025 @@ -785,9 +831,9 @@ Released on April 18, 2023 - [the ability to select multiple cells/rows in TreeGrid](grid/configuration.md#multiple-selection-of-grid-cells) - [the ability to drag-n-drop multiple rows](grid/configuration.md#drag-n-drop-of-multiple-rows) - The ability to define [whether collapsed rows should expand while hovering them over during drag-n-drop](grid/configuration.md): - - new property: [`dragExpand`](grid/api/treegrid_mode/grid_dragexpand_config.md) + - new property: [`dragExpand`](grid/api/grid_dragexpand_config.md) - The ability to initialize TreeGrid in the collapsed state: - - new property: [`collapsed`](grid/api/treegrid_mode/grid_collapsed_config.md) + - new property: [`collapsed`](grid/api/grid_collapsed_config.md) ### Updates @@ -1691,7 +1737,7 @@ Check the [Migration article](migration.md#70---71) to keep in step with the lat - The ability to [customize the tooltip of a column](grid/customization.md#adding-template-to-tooltip) via the [tooltipTemplate](grid/api/api_gridcolumn_properties.md) configuration option of a TreeGrid column - The ability [to define the height for a separate row of TreeGrid](grid/configuration.md#row-height) - New events are added: [beforeRowResize](grid/api/grid_beforerowresize_event.md) and [afterRowResize](grid/api/grid_afterrowresize_event.md), [beforeSort](grid/api/grid_beforesort_event.md) and [afterSort](grid/api/grid_aftersort_event.md) -- The ability to define the id of the parent root via the [rootParent](grid/api/treegrid_mode/grid_rootparent_config.md) configuration option of TreeGrid +- The ability to define the id of the parent root via the [rootParent](grid/api/grid_rootparent_config.md) configuration option of TreeGrid #### Window @@ -1762,7 +1808,7 @@ Released on December 21, 2020 - Fix the issue which caused the hidden column with the filter not to be shown in Grid - Fix the incorrect work of the select filter when applying to the columns with numeric values in Grid - Fix the incorrect work of regular expressions in columns with filters in Grid -- Fix the issue with the [collapseAll()](grid/api/treegrid_mode/grid_collapseall_method.md) method in TreeGrid +- Fix the issue with the [collapseAll()](grid/api/grid_collapseall_method.md) method in TreeGrid - Fix the incorrect work of the [save()](data_collection/api/datacollection_save_method.md) method of Data Collection - Fix the issue with display of sorting icon when applying alignment to Grid columns - Fix the issue which caused the item in the filtered state after deleting from the data collection to be still found via the [afterRemove](data_collection/api/datacollection_afterremove_event.md) event @@ -2236,7 +2282,7 @@ Released on January 28, 2020 - The possibility [to set selection to multiple cells/rows of Grid](grid/usage.md#using-selection-api) via the `setCell()` method of the selection object - New additional arrow keyboard shortcuts are added to [Keyboard navigation](grid/configuration.md#keyboard-navigation) - The ability [to sort content of any Grid column by clicking on its header](grid/configuration.md#sortable-columns) via the [](grid/api/grid_sortable_config.md) property -- The [](grid/api/grid_getsortingstate_method.md) method that [allows getting the current state of sorting data in Grid](grid/usage.md#getting-the-sorting-state) is added +- The `getSortingState()` method that [allows getting the current state of sorting data in Grid](grid/usage.md#getting-the-sorting-state) is added - The possibility [to check visibility of a column](grid/usage.md#checking-visibility-of-a-column) via the [](grid/api/grid_iscolumnhidden_method.md) method - The ability to enable [dynamic loading of data in Grid](grid/data_loading.md#dynamic-loading) - The [](grid/api/grid_afterkeydown_event.md) and [](grid/api/grid_beforekeydown_event.md) events are added @@ -2291,11 +2337,11 @@ Released on January 28, 2020 #### TreeGrid - The ability [to check visibility of a column](grid/usage.md#checking-visibility-of-a-column) via the [](grid/api/grid_iscolumnhidden_method.md) method -- The [](grid/api/treegrid_mode/grid_aftercollapse_event.md), [](grid/api/treegrid_mode/grid_beforecollapse_event.md), [](grid/api/treegrid_mode/grid_afterexpand_event.md), [](grid/api/treegrid_mode/grid_beforeexpand_event.md) events are added +- The [](grid/api/grid_aftercollapse_event.md), [](grid/api/grid_beforecollapse_event.md), [](grid/api/grid_afterexpand_event.md), [](grid/api/grid_beforeexpand_event.md) events are added - The possibility [to adjust the size of TreeGrid columns to the size of TreeGrid](grid/configuration.md#autowidth-for-columns) via the [](grid/api/grid_autowidth_config.md) configuration property - The ability [to adjust the width of columns to the width of their content automatically](grid/configuration.md#autosize-for-columns) with the help of the [](grid/api/grid_adjust_config.md) property - The ability [to sort content of any TreeGrid column by clicking on its header](grid/configuration.md#sortable-columns) using the [](grid/api/grid_sortable_config.md) property -- The [](grid/api/grid_getsortingstate_method.md) method that [allows getting the current state of sorting data in TreeGrid](grid/usage.md#getting-the-sorting-state) is added +- The `getSortingState()` method that [allows getting the current state of sorting data in TreeGrid](grid/usage.md#getting-the-sorting-state) is added #### Window @@ -2367,7 +2413,7 @@ Released on December 12, 2019 #### TreeGrid -- The [](grid/api/treegrid_mode/grid_collapse_method.md), [](grid/api/treegrid_mode/grid_collapseall_method.md), [](grid/api/treegrid_mode/grid_expand_method.md), [](grid/api/treegrid_mode/grid_expandall_method.md) methods are added +- The [](grid/api/grid_collapse_method.md), [](grid/api/grid_collapseall_method.md), [](grid/api/grid_expand_method.md), [](grid/api/grid_expandall_method.md) methods are added - The ability [to add custom elements into TreeGrid cells](grid/configuration.md#html-content-of-grid-columns) using the [](grid/api/grid_htmlenable_config.md) property #### Menu/Ribbon/SideBar/Toolbar diff --git a/sidebars.js b/sidebars.js index bb1439de..4c4b30aa 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2475,9 +2475,13 @@ module.exports = { "grid/api/grid_addrowcss_method", "grid/api/grid_addspan_method", "grid/api/grid_adjustcolumnwidth_method", + "grid/api/grid_collapse_method", + "grid/api/grid_collapseall_method", "grid/api/grid_destructor_method", "grid/api/grid_editcell_method", "grid/api/grid_editend_method", + "grid/api/grid_expand_method", + "grid/api/grid_expandall_method", "grid/api/grid_getcellrect_method", "grid/api/grid_getcolumn_method", { @@ -2496,8 +2500,8 @@ module.exports = { ] }, "grid/api/grid_getscrollstate_method", - "grid/api/grid_getsortingstate_method", "grid/api/grid_getspan_method", + "grid/api/grid_getsubrow_method", "grid/api/grid_getsummary_method", "grid/api/grid_hidecolumn_method", "grid/api/grid_hiderow_method", @@ -2528,12 +2532,14 @@ module.exports = { id: "grid/api/overview/events_overview", },*/ items: [ + "grid/api/grid_aftercollapse_event", "grid/api/grid_aftercolumndrag_event", "grid/api/grid_aftercolumndrop_event", "grid/api/grid_aftercolumnhide_event", "grid/api/grid_aftercolumnshow_event", "grid/api/grid_aftereditend_event", "grid/api/grid_aftereditstart_event", + "grid/api/grid_afterexpand_event", "grid/api/grid_afterkeydown_event", "grid/api/grid_afterresizeend_event", "grid/api/grid_afterrowdrag_event", @@ -2542,12 +2548,14 @@ module.exports = { "grid/api/grid_afterrowresize_event", "grid/api/grid_afterrowshow_event", "grid/api/grid_aftersort_event", + "grid/api/grid_beforecollapse_event", "grid/api/grid_beforecolumndrag_event", "grid/api/grid_beforecolumndrop_event", "grid/api/grid_beforecolumnhide_event", "grid/api/grid_beforecolumnshow_event", "grid/api/grid_beforeeditend_event", "grid/api/grid_beforeeditstart_event", + "grid/api/grid_beforeexpand_event", "grid/api/grid_beforefilter_event", "grid/api/grid_beforekeydown_event", "grid/api/grid_beforeresizestart_event", @@ -2609,10 +2617,12 @@ module.exports = { "grid/api/grid_autowidth_config", "grid/api/grid_bottomsplit_config", "grid/api/grid_closable_config", + "grid/api/grid_collapsed_config", "grid/api/grid_columns_config", "grid/api/grid_css_config", "grid/api/grid_data_config", "grid/api/grid_dragcopy_config", + "grid/api/grid_dragexpand_config", "grid/api/grid_dragitem_config", "grid/api/grid_dragmode_config", "grid/api/grid_editable_config", @@ -2631,13 +2641,17 @@ module.exports = { "grid/api/grid_keynavigation_config", "grid/api/grid_leftsplit_config", "grid/api/grid_multiselection_config", + "grid/api/grid_multisort_config", "grid/api/grid_resizable_config", "grid/api/grid_rightsplit_config", + "grid/api/grid_rootparent_config", "grid/api/grid_rowcss_config", "grid/api/grid_rowheight_config", "grid/api/grid_selection_config", "grid/api/grid_sortable_config", "grid/api/grid_spans_config", + "grid/api/grid_subrow_config", + "grid/api/grid_subrowconfig_config", "grid/api/grid_summary_config", "grid/api/grid_tooltip_config", "grid/api/grid_topsplit_config", @@ -2721,65 +2735,6 @@ module.exports = { "grid/api/export/grid_xlsx_method" ], }, - { - type: "category", - label: "TreeGrid mode API", - link: { - type: 'generated-index', - title: "TreeGrid mode API", - keywords: ['treegrid mode api'], - image: '/img/docusaurus.png' - }, - items: [ - { - type: "category", - label: "Methods", - link: { - type: 'generated-index', - title: "Methods", - keywords: ['grid treegrid mode methods'], - image: '/img/docusaurus.png' - }, - items: [ - "grid/api/treegrid_mode/grid_collapse_method", - "grid/api/treegrid_mode/grid_collapseall_method", - "grid/api/treegrid_mode/grid_expand_method", - "grid/api/treegrid_mode/grid_expandall_method", - ], - }, - { - type: "category", - label: "Events", - link: { - type: 'generated-index', - title: "Events", - keywords: ['grid treegrid mode events'], - image: '/img/docusaurus.png' - }, - items: [ - "grid/api/treegrid_mode/grid_aftercollapse_event", - "grid/api/treegrid_mode/grid_afterexpand_event", - "grid/api/treegrid_mode/grid_beforecollapse_event", - "grid/api/treegrid_mode/grid_beforeexpand_event", - "grid/api/treegrid_mode/grid_expand_event", - ], - }, - { - type: "category", - label: "Properties", - link: { - type: 'generated-index', - title: "Properties", - keywords: ['grid treegrid mode properties'], - image: '/img/docusaurus.png' - }, - items: [ - "grid/api/treegrid_mode/grid_collapsed_config", - "grid/api/treegrid_mode/grid_dragexpand_config", - "grid/api/treegrid_mode/grid_rootparent_config", - ], - }, - ]}, ], }, "grid/features", @@ -4569,6 +4524,7 @@ module.exports = { "data_collection/api/datacollection_getinitialdata_method", "data_collection/api/datacollection_getitem_method", "data_collection/api/datacollection_getlength_method", + "data_collection/api/datacollection_getsortingstates_method", "data_collection/api/datacollection_group_method", "data_collection/api/datacollection_isdataloaded_method", "data_collection/api/datacollection_isgrouped_method", @@ -4770,6 +4726,7 @@ module.exports = { "tree_collection/api/treecollection_getlength_method", "tree_collection/api/treecollection_getparent_method", "tree_collection/api/treecollection_getroot_method", + "tree_collection/api/treecollection_getsortingstates_method", "tree_collection/api/treecollection_haveitems_method", "tree_collection/api/treecollection_issaved_method", "tree_collection/api/treecollection_load_method",