Merge pull request #88 from DHTMLX/9.3

[update] correct and complete docs for v9.3

Author: mafanya23

docs/assets/treegrid/dropbehaviour_child.png

@@ -19,7 +19,31 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac
 @example:
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        // columns config
+        {
+            id: "productId",
+            header: [{ text: "Product Id" }],
+            summary: "count",
+            footer: [{ text: summary => `Total: ${summary.count}` }],
+        },
+        {
+            id: "category",
+            header: [{ text: "Category" }],
+        },
+        {
+            id: "price",
+            type: "number",
+            numberMask: { prefix: "$" },
+            header: [{ text: "Price" }],
+            summary: "avg",
+            footer: [{ text: summary => `Avg: ${summary.avg}` }],
+        },
+        {
+            id: "stock",
+            type: "number",
+            header: [{ text: "Stock" }],
+            summary: "sum",
+            footer: [{ text: summary => `Total: ${summary.sum}` }],
+        },
     ],
     data: dataset,
     footerPosition: "bottom", // "relative" by default

docs/assets/treegrid/dropbehaviour_child_result.png

@@ -16,11 +16,11 @@ description: You can explore the getHeaderFilter method of Grid in the documenta
 @returns:
 An object with a set of methods which let you work with the header filter of the specified column. The methods are:
 
-- [blur()](grid/api/headerfilter/blur_method.md) - removes focus from the filter
-- [clear()](grid/api/headerfilter/clear_method.md) - clears the value set in the filter
-- [focus()](grid/api/headerfilter/focus_method.md) - sets focus on the filter
-- [getFilter()](grid/api/headerfilter/getfilter_method.md) - returns either an HTML object or an object with Combobox configuration
-- [setValue()](grid/api/headerfilter/setvalue_method.md) - sets a value by which a column will be filtered
+- [`blur()`](grid/api/headerfilter/blur_method.md) - removes focus from the filter
+- [`clear()`](grid/api/headerfilter/clear_method.md) - clears the value set in the filter
+- [`focus()`](grid/api/headerfilter/focus_method.md) - sets focus on the filter
+- [`getFilter()`](grid/api/headerfilter/getfilter_method.md) - returns either an HTML object, or an object with Combobox/Calendar configuration
+- [`setValue()`](grid/api/headerfilter/setvalue_method.md) - sets the filter value
 
 @example:
 const countryFilter = grid.getHeaderFilter("country");

docs/assets/treegrid/dropbehaviour_sibling.png

@@ -6,25 +6,24 @@ description: You can explore the getFilter method of the header filter of Grid i
 
 # getFilter()
 
-@short: returns either an HTML object or an object with Combobox configuration
+@short: returns either an HTML object, or an object with Combobox/Calendar configuration
 
-@signature: {'getFilter(): HTML object | Combobox;'}
+@signature: {'getFilter(): VNode | Combobox | Calendar;'}
 
 @returns:
-Either an HTML object or an object with Combobox configuration
+Either an HTML object, or an object with Combobox/Calendar configuration
 
 @example:
 const filter1 = grid.getHeaderFilter("country").getFilter();
 console.log(filter1);
 // -> returns Combobox
-//  {config: {…}, _uid: 'u1670500020936', events: o, data: d, popup: f, …}
-
+// { config: {...}, _uid: 'u1670500020936', events: o, data: d, popup: f, ... }
 
 const filter2 = grid.getHeaderFilter("netChange").getFilter();
 console.log(filter2);
 // -> returns an HTML object
-// {type: 1, attrs: {…}, tag: 'div', _class: 'dhx_grid-filter__label dxi dxi-magnify', 
-// ref: 'netChange_filter', …}
+// { type: 1, attrs: {...}, tag: 'div', _class: 'dhx_grid-filter__label dxi dxi-magnify', ref: 'netChange_filter', ... }
 
 @changelog:
-added in v8.0
+- The method may return an object with Calendar configuration since v9.3
+- Added in v8.0

docs/assets/treegrid/dropbehaviour_sibling_dragging.png

@@ -10,19 +10,41 @@ description: You can explore the setValue method of the header filter of Grid in
 
 @signature: {'setValue(value: string | string[] | Date | Date[]): void;'}
 
-@params:
-- `value: string | string[] | Date | Date[]` - the value to be set for the filter
+@descr:
+#### Usage
 
-:::info
-- An array of string values can be specified only for [`comboFilter`](/grid/configuration/#customizing-headerfooter-filters) in the `multiselection:true` mode.
+- for inputFilter, selectFilter, comboFilter
 
-- For [`dateFilter`](/grid/configuration/#customizing-headerfooter-filters), the value must be passed strictly as a *Date* object (for a single selection) or an array of *Date[]* objects (for the `range` mode). *String* values are not supported by the `setValue()` method for this filter type.
-:::
+~~~jsx
+setValue(value: string): void; 
+~~~
+
+- for comboFilter
+
+~~~jsx
+setValue(value: string | string[]): void;
+~~~
+
+- for dateFilter
+
+~~~jsx
+setValue(value: Date | Date[]): void; 
+~~~
+
+@params:
+- `value: string | string[] | Date | Date[]` - the value to be set for the filter
 
 @example:
 grid.getHeaderFilter("country").setValue("Brazil");
 
 @descr:
+:::info
+The [`dateFilter`](/grid/configuration/#headerfooter-filters) type of filter supports only the *Date object* values.
+:::
+
+Note that in case of the enabled `multiselection` or `range` modes, the method awaits the value to be passed as an array.
+
+**Related article**: [Header/footer filters](/grid/configuration/#headerfooter-filters)
 
 @changelog:
 

docs/assets/treegrid/dropbehaviour_sibling_result.png

@@ -1616,16 +1616,40 @@ You can define the logic of setting the position of the Grid footer as well as o
 
 ![](../assets/grid/footer_bottom_position.png)
 
-Here is the example of positioning the footer and two frozen rows at the bottom of the Grid, as presented in the above image:
+Here is the example of positioning the footer and a frozen row at the bottom of the Grid, as presented in the above image:
 
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        // columns config
+        {
+            id: "productId",
+            header: [{ text: "Product Id" }],
+            summary: "count",
+            footer: [{ text: summary => `Total: ${summary.count}` }],
+        },
+        {
+            id: "category",
+            header: [{ text: "Category" }],
+        },
+        {
+            id: "price",
+            type: "number",
+            numberMask: { prefix: "$" },
+            header: [{ text: "Price" }],
+            summary: "avg",
+            footer: [{ text: summary => `Avg: ${summary.avg}` }],
+        },
+        {
+            id: "stock",
+            type: "number",
+            header: [{ text: "Stock" }],
+            summary: "sum",
+            footer: [{ text: summary => `Total: ${summary.sum}` }],
+        },
     ],
     data: dataset,
     footerPosition: "bottom", // "relative" by default
-    bottomSplit: 2
+    bottomSplit: 1
 });
 ~~~