diff --git a/docs/data_collection/api/datacollection_add_method.md b/docs/data_collection/api/datacollection_add_method.md index 453e27b8..3573ef27 100644 --- a/docs/data_collection/api/datacollection_add_method.md +++ b/docs/data_collection/api/datacollection_add_method.md @@ -12,18 +12,23 @@ description: You can explore the add method of DataCollection in the documentati Please note that data should be loaded into DataCollection via the `parse()` method. The `add()` method is primarily intended for loading standalone elements or small groups of elements, so its loads data slower than the `parse()` method. ::: -@signature: {'add(new_item: object | object[], index?: number): (string | number) | (string | number)[];'} +#### Usage + +~~~ts +type Id = string | number; +add(newItem: IDataItem | IDataItem[], index?: number): Id | Id[]; +~~~ @params: -- `new_item: object | array` - the object of a new item or an array of item objects -- `index: number` - optional, the index of the position starting from which new items will be added +- `newItem: IDataItem | IDataItem[]` - the object of a new item or an array of item objects +- `index?: number` - optional, the index of the position starting from which new items will be added @returns: Either item's id or an array with ids of items. @example: // adding a new item into the beginning of a data collection -component.data.add({"value": 57.44787660011765, "id": "u1565340894584"},0); +component.data.add({ "value": 57.44787660011765, "id": "u1565340894584" }, 0); // adding an array of new items into a data collection component.data.add([ diff --git a/docs/data_collection/api/datacollection_changeid_method.md b/docs/data_collection/api/datacollection_changeid_method.md index 2ab6f173..635b8278 100644 --- a/docs/data_collection/api/datacollection_changeid_method.md +++ b/docs/data_collection/api/datacollection_changeid_method.md @@ -12,8 +12,8 @@ description: You can explore the changeId method of DataCollection in the docume @params: - `id: string | number` - the old id of an item -- `newId: string | number` - optional, the new id; auto-generated if not set -- `silent: boolean` - true, to prevent changing the id; otherwise, false +- `newId: string | number` - the new id; auto-generated if not set +- `silent?: boolean` - optional, if set to *true*, the method will be called without triggering events; otherwise, *false* @example: component.data.changeId("1", "22"); diff --git a/docs/data_collection/api/datacollection_copy_method.md b/docs/data_collection/api/datacollection_copy_method.md index 49fba344..5ae63dd2 100644 --- a/docs/data_collection/api/datacollection_copy_method.md +++ b/docs/data_collection/api/datacollection_copy_method.md @@ -13,13 +13,13 @@ description: You can explore the copy method of DataCollection in the documentat @params: - `id: (string | number) | (string | number)[]` - the id of an item or an array with ids of items to copy - `index: number` - the index to create a copy at -- `target: object` - optional, the target data collection object +- `target?: object` - optional, the target data collection object @returns: The item's id or an array with ids of items. @example: -component.data.copy("4",5); // copies the item with id:4 to the position with index 5 +component.data.copy("4", 5); // copies the item with id:4 to the position with index 5 @descr: diff --git a/docs/data_collection/api/datacollection_filter_method.md b/docs/data_collection/api/datacollection_filter_method.md index c55122cf..5a27f8a7 100644 --- a/docs/data_collection/api/datacollection_filter_method.md +++ b/docs/data_collection/api/datacollection_filter_method.md @@ -8,22 +8,28 @@ description: You can explore the filter method of DataCollection in the document @short: filters data items in a component -@signature: {'filter(rule?: function | object, config?: object): string;'} +@signature: {'filter(rule?: function | object, config?: object, silent?: boolean): string;'} @params: -- `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* + +- `rule?: function | object` - optional, the filtering criteria + - If set as a *function*, filtering will be applied by the rule specified in the function. It takes as a parameter a data item 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 - - `match: string` - mandatory, a pattern to match - - `compare: function` - optional, a function for extended filtering that takes three parameters: + - `by?: string | number` - optional, the id of a data field + - `match?: string` - optional, a pattern to match + - `compare?: function` - optional, a function for extended filtering that takes the following parameters: - `value` - the value to compare - `match` - a pattern to match - `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) - - `permanent: boolean` - optional, *true* to make the current filter permanent. It will be applied even if the next filtering doesn't have the `add:true` property in its configuration object. Such a filter can be removed just with the [resetFilter()](data_collection/api/datacollection_resetfilter_method.md) method +- `config?: object` - optional, an object with 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) + - `permanent?: boolean` - optional, *true* to make the current filter permanent. It will be applied even if the next filtering doesn't have the `add:true` property in its configuration object. Such a filter can be removed just with the [resetFilter()](data_collection/api/datacollection_resetfilter_method.md) method +- `silent?: boolean` - optional, if set to true, the method will be called without triggering events, false by default + +:::info +Note that after calling the method with the `silent:true` parameter, you may need to repaint the component with the `paint()` method. +::: @returns: - `id: string` - the id of the filter diff --git a/docs/data_collection/api/datacollection_find_method.md b/docs/data_collection/api/datacollection_find_method.md index abd7c741..2e020b29 100644 --- a/docs/data_collection/api/datacollection_find_method.md +++ b/docs/data_collection/api/datacollection_find_method.md @@ -8,7 +8,7 @@ description: You can explore the find method of DataCollection in the documentat @short: finds the item that corresponds to the specified rule -@signature: {'find(rule: object | (item: object, index?: number, array?: object[]) => any): object;'} +@signature: {'find(rule: object | (item: object, index: number, array: object[]) => any): object;'} @params: - `rule: object | function` - the search criteria: @@ -16,21 +16,23 @@ description: You can explore the find method of DataCollection in the documentat - `by: string | function` - the search criterion (either the key of the item attribute or a search function) - `match: string` - the value of the item attribute - if set as a function, the search will be applied by the rule specified in the function. The function takes three parameters: - - `item` - (required) the object of an item - - `index` - (optional) the index of an item - - `array` - (optional) an array with items + - `item: object` - the object of an item + - `index: number` - the index of an item + - `array: object[]` - an array of items the method was called upon @returns: -An object of the matching item. +The object of the matching item. @example: -//searching for an item by the function -const item = component.data.find(function(item){ - if(item.text==="Manager"||item.text==="Marketer"){return true} +// searching for an item by the function +const item = component.data.find(function (item) { + if (item.text === "Manager" || item.text === "Marketer") { + return true + } }); -//searching for an item by the attribute key -const item = component.data.find({by:"text",match:"Manager"}); +// searching for an item by the attribute key +const item = component.data.find({ by: "text", match: "Manager" }); @descr: diff --git a/docs/data_collection/api/datacollection_findall_method.md b/docs/data_collection/api/datacollection_findall_method.md index c9ee5f23..61721c44 100644 --- a/docs/data_collection/api/datacollection_findall_method.md +++ b/docs/data_collection/api/datacollection_findall_method.md @@ -8,7 +8,7 @@ description: You can explore the findAll method of DataCollection in the documen @short: finds all the items that correspond to the specified rule -@signature: {'findAll(rule: object | (item: object, index?: number, array?: object[]) => any): object[];'} +@signature: {'findAll(rule: object | (item: object, index: number, array: object[]) => any): object[];'} @params: - `rule: object | function` - the search criteria: @@ -16,21 +16,23 @@ description: You can explore the findAll method of DataCollection in the documen - `by: string | function` - the search criterion (either the key of the item attribute or a search function) - `match: string` - the value of the item attribute - if set as a function, the search will be applied by the rule specified in the function. The function takes three parameters: - - `item` - (required) the object of an item - - `index` - (optional) the index of an item - - `array` - (optional) an array with items + - `item: object` - the object of an item + - `index: number` - the index of an item + - `array: object[]` - an array of items the method was called upon @returns: An array of matching item objects. @example: -//searching for items by the function -const items = component.data.findAll(function(items){ - if(items.text==="Manager"||items.text==="Marketer"){return true} +// searching for items by the function +const items = component.data.findAll(function (items) { + if (items.text === "Manager" || items.text === "Marketer") { + return true + } }); -//searching for items by the attribute key -const items = component.data.findAll({by:"text",match:"Manager"}); +// searching for items by the attribute key +const items = component.data.findAll({ by: "text", match: "Manager" }); @descr: diff --git a/docs/data_collection/api/datacollection_foreach_method.md b/docs/data_collection/api/datacollection_foreach_method.md index 7b27118f..3348d57d 100644 --- a/docs/data_collection/api/datacollection_foreach_method.md +++ b/docs/data_collection/api/datacollection_foreach_method.md @@ -8,16 +8,16 @@ description: You can explore the forEach method of DataCollection in the documen @short: iterates over all items of a data collection -@signature: {'forEach(callback: (item: object, index?: number, array?: object[]) => any): void;'} +@signature: {'forEach(callback: (item: object, index: number, array: object[]) => any): void;'} @params: - `callback: function` - a function that will iterate over items of a data collection. The function is called with the following parameters: - - `item` - the object of an item - - `index` - the index of an item - - `array` - an array of items the method was called upon + - `item: object` - the object of an item + - `index: number` - the index of an item + - `array: object[]` - an array of items the method was called upon @example: -component.data.forEach(function(item, index, array) { +component.data.forEach(function (item, index, array) { console.log("This is an item of dataCollection: ", item); console.log("This is an index of the element: ", index); console.log("This is an array of the elements: ", array); diff --git a/docs/data_collection/api/datacollection_getfilters_method.md b/docs/data_collection/api/datacollection_getfilters_method.md index 347f5b52..cdccd497 100644 --- a/docs/data_collection/api/datacollection_getfilters_method.md +++ b/docs/data_collection/api/datacollection_getfilters_method.md @@ -12,7 +12,7 @@ description: You can explore the getFilters method of DataCollection in the docu @params: -- `permanent: boolean` - optional, false by default. Allows getting the list of permanent filters +- `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) diff --git a/docs/data_collection/api/datacollection_getitem_method.md b/docs/data_collection/api/datacollection_getitem_method.md index 2ae9b158..abaa217c 100644 --- a/docs/data_collection/api/datacollection_getitem_method.md +++ b/docs/data_collection/api/datacollection_getitem_method.md @@ -26,7 +26,7 @@ const item = component.data.getItem(123); You can access the original properties of an item like this: -~~~js +~~~jsx const item = component.data.getItem(123); const text = item.text; ~~~ diff --git a/docs/data_collection/api/datacollection_getlength_method.md b/docs/data_collection/api/datacollection_getlength_method.md index 68ab517d..680bb3b1 100644 --- a/docs/data_collection/api/datacollection_getlength_method.md +++ b/docs/data_collection/api/datacollection_getlength_method.md @@ -14,7 +14,7 @@ description: You can explore the getLength method of DataCollection in the docum The number of elements of a data collection. @example: -component.data.getLength(); +const dataLength = component.data.getLength(); @descr: diff --git a/docs/data_collection/api/datacollection_getsortingstates_method.md b/docs/data_collection/api/datacollection_getsortingstates_method.md index 9b9d9759..916e352c 100644 --- a/docs/data_collection/api/datacollection_getsortingstates_method.md +++ b/docs/data_collection/api/datacollection_getsortingstates_method.md @@ -8,9 +8,9 @@ description: You can explore the getSortingStates method of DataCollection in th @short: returns an array of objects with the current parameters of sorting applied to the data -## Usage +#### Usage -~~~jsx +~~~ts interface ISortingState { by: string | number, dir: "asc" | "desc", @@ -27,7 +27,7 @@ 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"}] +// -> [{ by: "country", dir: "desc" }, { by: "population", dir: "desc" }] @descr: The array returned by the method contains objects with the following properties: diff --git a/docs/data_collection/api/datacollection_group_method.md b/docs/data_collection/api/datacollection_group_method.md index ffd99064..39d38548 100644 --- a/docs/data_collection/api/datacollection_group_method.md +++ b/docs/data_collection/api/datacollection_group_method.md @@ -16,9 +16,9 @@ Data grouping isn't intended for working with [`lazyDataProxy`](helpers.md/lazyd Grouped data can be serialized. After serialization data is available for rendering and editing as a plain tree-like structure ::: -## Usage +#### Usage -~~~jsx {16} +~~~ts {16} type TGroupOrderFunc = (item: IDataItem) => string; type TAggregate = "sum" | "count" | "min" | "max" | "avg" | string; interface IGroupOrder { @@ -39,21 +39,19 @@ group(order: TGroupOrder[], config?: IGroupConfig): void; ## Parameters -- `order` - an array that defines the order and configuration for data grouping. Each element in the array can be: - - a string that represents a grouping field - - a function `(i: IDataItem) => string` for dynamic defining of a group - - an `IGroupOrder` object that has the following properties: - - `by` - the field name or a function for user-defined grouping - - `map` - (optional) an object for data aggregation in a group, where the keys are field names, and the values can be: - - a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the `dhx.methods` helper - - a user-defined aggregation function `(i: IDataItem[]) => string | number` - - `summary` - (optional) specifies where the total row is rendered - at the `top` or at the `bottom` of the group -- `config` - (optional) the configuration of data grouping - - `showMissed` - (optional) specifies whether the elements that don't have the field for grouping should be displayed, *true* by default - - if set to *true*, the rows that don't have values for grouping are rendered row by row after all the data - - if a *string* value is set, e.g. "Missed", the rows that don't have values for grouping are rendered as a separate group the name of which will have the specified string value. This group will be rendered as the last one - - if set to *false*, the rows that don't suit the grouping criteria won't be rendered - - `field` - (optional) the group field name, *"group"* by default + + + + + + + + + + + +
order (array) an array that defines the order and configuration for data grouping. Each element in the array can be:
  • a string that represents a grouping field
  • a function `(i: IDataItem) => string` for dynamic defining of a group
  • an `IGroupOrder` object that has the following properties:
    • `by: string | function` - the field name or a function for user-defined grouping
    • `map?: object` - optional, an object for data aggregation in a group, where the keys are field names, and the values can be: +
      • a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the `dhx.methods` helper
      • a user-defined aggregation function `(i: IDataItem[]) => string | number`
    • `summary?: string` - optional, specifies where the total row is rendered - at the `top` or at the `bottom` of the group
config(object) optional, the configuration of data grouping. The configuration object may include the following properties:
  • `showMissed?: boolean | string` - optional, specifies whether the elements that don't have the field for grouping should be displayed, *true* by default
    • if set to *true*, the rows that don't have values for grouping are rendered row by row after all the data
    • if a *string* value is set, e.g. "Missed", the rows that don't have values for grouping are rendered as a separate group the name of which will have the specified string value. This group will be rendered as the last one
    • if set to *false*, the rows that don't suit the grouping criteria won't be rendered
  • `field?: string` - optional, the group field name, *"group"* by default
## Examples diff --git a/docs/data_collection/api/datacollection_isdataloaded_method.md b/docs/data_collection/api/datacollection_isdataloaded_method.md index 813d5da4..f2bfad39 100644 --- a/docs/data_collection/api/datacollection_isdataloaded_method.md +++ b/docs/data_collection/api/datacollection_isdataloaded_method.md @@ -6,15 +6,17 @@ description: You can explore the isDataLoaded method of DataCollection in the do # isDataLoaded() -{{pronote This functionality is available in the PRO edition only.}} +:::tip pro version only +The method works with the [Dynamic loading](helpers/lazydataproxy.md) functionality which is available in the PRO edition only. +::: @short: checks whether the specified data range is loaded from the server @signature: {'isDataLoaded(from?: number, to?: number): boolean;'} @params: -- `from: number` - optional, the index of the first element of the data range to be checked -- `to: number` - optional, the index of the last element of the data range to be checked +- `from?: number` - optional, the index of the first element of the data range to be checked +- `to?: number` - optional, the index of the last element of the data range to be checked @returns: `true`, if a range of data is loaded; otherwise, `false`. diff --git a/docs/data_collection/api/datacollection_load_method.md b/docs/data_collection/api/datacollection_load_method.md index a41c53b3..bf50afce 100644 --- a/docs/data_collection/api/datacollection_load_method.md +++ b/docs/data_collection/api/datacollection_load_method.md @@ -8,12 +8,12 @@ description: You can explore the load method of DataCollection in the documentat @short: loads data from an external file -@signature: {'load?(url: string | DataProxy, driver?: object | string): Promise;'} +@signature: {'load(url: string | IDataProxy, driver?: object | string): Promise;'} @params: - `url: string | IDataProxy` - the URL of an external file or DataProxy with the URL configured -- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default +- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default @returns: A promise of data loading. @@ -34,7 +34,7 @@ The component will make an AJAX call and expect the remote URL to provide valid Data loading is asynchronous, so you need to wrap any after-loading code into a promise: ~~~jsx -component.data.load(url).then(function(){ +component.data.load(url).then(function () { //do something after load; }); ~~~ @@ -43,7 +43,7 @@ or ~~~jsx component.data.load(url); -component.data.loadData.then(function(){ +component.data.loadData.then(function () { //do something after load; }); // loadData executes a callback function after an asynchronous diff --git a/docs/data_collection/api/datacollection_map_method.md b/docs/data_collection/api/datacollection_map_method.md index f507b336..f1dd5da3 100644 --- a/docs/data_collection/api/datacollection_map_method.md +++ b/docs/data_collection/api/datacollection_map_method.md @@ -6,22 +6,22 @@ description: You can explore the map method of DataCollection in the documentati # map() -@short: iterates through all items of the component +@short: iterates through all the items of the component -@signature: {'map(callback: (item: object, index?: number, array?: object[]) => any): object[];'} +@signature: {'map(callback: (item: object, index: number, array: object[]) => any): object[];'} @params: - `callback: function` - a function that will be called for each item of a component. The function is called with the following parameters: - - `item` - the object of an item - - `index` - the index of an item - - `array` - an array of items the method was called upon + - `item: object` - the object of an item + - `index: number` - the index of an item + - `array: object[]` - an array of items the method was called upon @returns: A new array of items where each item is the result of the callback function. @example: // getting the ids of all items of the component -component.data.map(function(item, index, array){ +component.data.map(function (item, index, array) { return item.id; }); diff --git a/docs/data_collection/api/datacollection_maprange_method.md b/docs/data_collection/api/datacollection_maprange_method.md index ef1dfc91..f5792a0e 100644 --- a/docs/data_collection/api/datacollection_maprange_method.md +++ b/docs/data_collection/api/datacollection_maprange_method.md @@ -8,21 +8,21 @@ description: You can explore the mapRange method of DataCollection in the docume @short: returns a new array of the items according to the specified parameters -@signature: {'mapRange(from: number, to: number, callback: (item: object, index?: number, array?: object[]) => any): object[];'} +@signature: {'mapRange(from: number, to: number, callback: (item: object, index: number, array: object[]) => any): object[];'} @params: - `from: number` - the initial position of an item in the range - `to: number` - the final position of an item in the range - `callback: function` - a function that will be called for each item from the specified range. The function is called with the following parameters: - - `item` - the object of an item - - `index` - the index of an item - - `array` - an array of items the method was called upon + - `item: object` - the object of an item + - `index: number` - the index of an item + - `array: object[]` - an array of items the method was called upon @returns: A new array of matching item objects. @example: -const result = component.data.mapRange(0, 20, function(item, index, array) { +const result = component.data.mapRange(0, 20, function (item, index, array) { console.log(item.id, index); }); diff --git a/docs/data_collection/api/datacollection_move_method.md b/docs/data_collection/api/datacollection_move_method.md index f6f07cae..c8236eb9 100644 --- a/docs/data_collection/api/datacollection_move_method.md +++ b/docs/data_collection/api/datacollection_move_method.md @@ -13,13 +13,13 @@ description: You can explore the move method of DataCollection in the documentat @params: - `id: string | string[]` - the ids of items to move - `index: number` - the index to move items to -- `target: object` - optional, the target data collection object +- `target?: object` - optional, the target data collection object @returns: Either the item's id or an array with ids of items. @example: -component.data.move("4",5); // moves the item with id:4 to the position with index 5 +component.data.move("4", 5); // moves the item with id:4 to the position with index 5 @descr: diff --git a/docs/data_collection/api/datacollection_parse_method.md b/docs/data_collection/api/datacollection_parse_method.md index b02d3d2e..e3a7f8ff 100644 --- a/docs/data_collection/api/datacollection_parse_method.md +++ b/docs/data_collection/api/datacollection_parse_method.md @@ -12,7 +12,7 @@ description: You can explore the parse method of DataCollection in the documenta @params: - `data: array | string` - the data to load -- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default +- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default @example: const dataset = [ diff --git a/docs/data_collection/api/datacollection_reduce_method.md b/docs/data_collection/api/datacollection_reduce_method.md index 5e3c39ef..4d2b5102 100644 --- a/docs/data_collection/api/datacollection_reduce_method.md +++ b/docs/data_collection/api/datacollection_reduce_method.md @@ -8,21 +8,27 @@ description: You can explore the reduce method of DataCollection in the document @short: reduces the array to a single value -@signature: {'reduce(callback: (acc: any, item: any) => any, acc: any): any;'} +#### Usage + +~~~ts +type ReduceCallBack = (acc: A, item: IDataItem, index: number) => A; +reduce(callback: ReduceCallBack, acc: A): A; +~~~ @params: -- `callback: function` - a function that will be called for each item in the array. The function takes two parameters: - - `acc` - the initialValue, or the previously returned value of the function - - `item` - the current item of a data collection +- `callback: function` - a function that will be called for each item in the array. The function is called with the following parameters: + - `acc: any` - the *initialValue*, or the previously returned value of the function + - `item: IDataItem` - the current item of a data collection + - `index: number` - the index of the item - `acc: any` - a value to be passed to the function as the initial value @returns: A single output value. @example: -const total = component.data.reduce(function(acc, item) { - return acc + item.value; +const total = component.data.reduce(function (acc, IDataItem, index) { + return acc + IDataItem.value; }, 0); @descr: diff --git a/docs/data_collection/api/datacollection_resetfilter_method.md b/docs/data_collection/api/datacollection_resetfilter_method.md index 4a55a9da..ba138bb6 100644 --- a/docs/data_collection/api/datacollection_resetfilter_method.md +++ b/docs/data_collection/api/datacollection_resetfilter_method.md @@ -8,12 +8,17 @@ description: You can explore the resetFilter method of DataCollection in the doc @short: resets the active filters -@signature: {'resetFilter(config?: object): boolean;'} +@signature: {'resetFilter(config?: object, silent?: boolean): boolean;'} @params: -- `config: object` - optional, specifies the parameters of resetting the active filters. If the config isn't specified or it is empty, all the filters except for those that have the **permanent** property in the configuration object will be reset. Can contain the following properties: - - `id: string` - optional, the id of the filter to reset - - `permanent: boolean` - optional, *true* to reset all the active filters, including those that have the **permanent:true** property in their config +- `config?: object` - optional, specifies the parameters of resetting the active filters. If the config isn't specified or it is empty, all the filters except for those that have the `permanent` property in the configuration object will be reset. Can contain the following properties: + - `id?: string` - optional, the id of the filter to reset + - `permanent?: boolean` - optional, *true* to reset all the active filters, including those that have the `permanent:true` property in their config +- `silent?: boolean` - optional, if set to *true*, the method will be called without triggering events, *false* by default + +:::info +Note that after calling the method with the `silent:true` parameter, you may need to repaint the component with the `paint()` method. +::: @returns: - `result: boolean` - *true*, if all the filters, including the permanent ones, have been reset; otherwise *false* diff --git a/docs/data_collection/api/datacollection_save_method.md b/docs/data_collection/api/datacollection_save_method.md index 0a8fc496..89b19be1 100644 --- a/docs/data_collection/api/datacollection_save_method.md +++ b/docs/data_collection/api/datacollection_save_method.md @@ -8,29 +8,29 @@ description: You can explore the save method of DataCollection in the documentat @short: saves changes made in a data collection to the server side -@signature: {'save?: (url: string | IDataProxy) => void;'} +@signature: {'save(url: IDataProxy | string): void;'} @params: -- `url: string | IDataProxy` - the URL of a server side or DataProxy with the URL configured +- `url: IDataProxy | string` - the URL of a server side or DataProxy with the URL configured @example: grid.data.save("http://userurl/"); //or -grid.data.save(new DataProxy({url:"http://userurl/"})); +grid.data.save(new DataProxy({ url:"http://userurl/" })); @descr: -Each time the user changes data of the component, the **save()** method will make an AJAX call and expect the remote URL to save data changes. +Each time the user changes data of the component, the `save()` method will make an AJAX call and expect the remote URL to save data changes. The method will send one of the following requests to the backend: - `POST` - after adding new data into the component; - `PUT` - after editing data of the component; - `DELETE` - after deleting data. -Data saving is asynchronous, so you need to return a promise - the result of the saving operation. To do this, use the **saveData** property that returns a "promise" object: +Data saving is asynchronous, so you need to return a promise - the result of the saving operation. To do this, use the `saveData` property that returns a "promise" object: -~~~js +~~~jsx const data = new DataCollection(); data.save(loader); return data.saveData.then(function () { @@ -38,9 +38,9 @@ return data.saveData.then(function () { }); ~~~ -Use the [isSaved](data_collection/api/datacollection_issaved_method.md) method to know whether the changes are saved: +Use the [`isSaved`](data_collection/api/datacollection_issaved_method.md) method to check whether the changes are saved: -~~~js +~~~jsx grid.data.saveData.then(function () { console.log(grid.data.isSaved()); }); diff --git a/docs/data_collection/api/datacollection_serialize_method.md b/docs/data_collection/api/datacollection_serialize_method.md index 5d28c6d8..d23f3d09 100644 --- a/docs/data_collection/api/datacollection_serialize_method.md +++ b/docs/data_collection/api/datacollection_serialize_method.md @@ -11,7 +11,7 @@ description: You can explore the serialize method of DataCollection in the docum @signature: {'serialize(driver?: string): object[];'} @params: -- `driver: string` - optional, the format that the data will be serialized into ("json", "csv", "xml"), "json" by default +- `driver?: string` - optional, the format that the data will be serialized into ("json", "csv", "xml"), "json" by default @returns: Returns serialized data for each item of the component either as an array of JSON objects or as a CSV/XML string. diff --git a/docs/data_collection/api/datacollection_sort_method.md b/docs/data_collection/api/datacollection_sort_method.md index 593e9e3b..3658beb7 100644 --- a/docs/data_collection/api/datacollection_sort_method.md +++ b/docs/data_collection/api/datacollection_sort_method.md @@ -11,19 +11,19 @@ description: You can explore the sort method of DataCollection in the documentat @signature: {'sort(rule?: object, config?: object): void;'} @params: -- `rule: object` - an object with parameters for sorting. The object has the following attributes: - - `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) -- `config: object` - defines the parameter of sorting. It may contain one property: - - `smartSorting: boolean` - specifies whether a sorting rule should be applied each time after changing the data set +- `rule?: object` - optional, an object with parameters for sorting. The object has the following attributes: + - `by?: string | number` - optional, the id of a data field + - `dir?: string` - optional, the direction of sorting: "asc" or "desc" + - `as?: function` - optional, 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) +- `config?: object` - optional, defines the parameter of sorting. It may contain one property: + - `smartSorting?: boolean` - optional, specifies whether a sorting rule should be applied each time after changing the data set @example: grid.data.sort( { - by:"a", - dir:"desc", + by: "a", + dir: "desc", as: item => (item.toUpperCase()) }, { smartSorting: true } diff --git a/docs/data_collection/api/datacollection_update_method.md b/docs/data_collection/api/datacollection_update_method.md index 441eeacc..dc5cab7f 100644 --- a/docs/data_collection/api/datacollection_update_method.md +++ b/docs/data_collection/api/datacollection_update_method.md @@ -8,16 +8,33 @@ description: You can explore the update method of DataCollection in the document @short: updates properties of the item -@signature: {'update?: (id: string | number, newItem: object) => void;'} +@signature: {'update(id: string | number, newItem: object, silent?: boolean): void;'} @params: - `id: string | number` - the id of the item which needs to be updated - `newItem: object` - a hash of properties which need to be updated +- `silent?: boolean` - optional, if set to *true*, the method will be called without triggering events, *false* by default + +:::info +Note that after calling the method with the `silent:true` parameter, you may need to repaint the component with the `paint()` method. +::: @example: component.data.update(123, { text:"New text" }); @descr: +Also note, that for correct work of the method the last update of a data collection should be done with the `silent:false` setting applied, for example: + +~~~jsx +const itemsForUpdate = [...]; // items { ... } +const lastIndex = itemsForUpdate.length - 1; + +itemsForUpdate.forEach((item, index) => { + data.update(item.id, { + param: "change param", + }, index != lastIndex); // the last update isn't silent, as the `silent:false` parameter is set +}); +~~~ **Related sample**: [Data. Update](https://snippet.dhtmlx.com/4g90gi6b) diff --git a/docs/tree_collection/api/treecollection_add_method.md b/docs/tree_collection/api/treecollection_add_method.md index 4c3a6253..51ec1515 100644 --- a/docs/tree_collection/api/treecollection_add_method.md +++ b/docs/tree_collection/api/treecollection_add_method.md @@ -12,7 +12,7 @@ description: You can explore the add method of TreeCollection in the documentati @params: - `obj: object | array` - the configuration of the added item -- `index: number` - defines the position of the item in the component +- `index?: number` - optional, defines the position of the item in the component - `parent: string | number` - the ID of the future parent item @returns: @@ -20,9 +20,9 @@ The item's id or an array with ids of items. @example: toolbar.data.add({ - type:"button", - icon:"dxi-plus", - value:"New" -},1); + type: "button", + icon: "dxi-plus", + value: "New" +}, 1); @descr: diff --git a/docs/tree_collection/api/treecollection_copy_method.md b/docs/tree_collection/api/treecollection_copy_method.md index 1bae511c..03741b76 100644 --- a/docs/tree_collection/api/treecollection_copy_method.md +++ b/docs/tree_collection/api/treecollection_copy_method.md @@ -13,15 +13,15 @@ description: You can explore the copy method of TreeCollection in the documentat @params: - `id: (string | number) | (string | number)[]` - the ids of the items to copy - `index: number` - the position of a copy -- `target: object` - a tree collection where the copy will be stored -- `targetId: string | number` - (for menu options) the ID of a menuItem to which a copy of the menu option will be placed +- `target?: object` - optional, a tree collection where the copy will be stored +- `targetId?: string | number` - optional (for menu options), the ID of a menuItem to which a copy of the menu option will be placed @returns: The item's id or an array with ids of items. @example: -toolbar.data.copy("print_btn",2) +toolbar.data.copy("print_btn", 2) // another toolbar -toolbar2.data.copy("save_btn",1,toolbar1.data); +toolbar2.data.copy("save_btn", 1, toolbar1.data); @descr: diff --git a/docs/tree_collection/api/treecollection_eachchild_method.md b/docs/tree_collection/api/treecollection_eachchild_method.md index ae563340..c13080bd 100644 --- a/docs/tree_collection/api/treecollection_eachchild_method.md +++ b/docs/tree_collection/api/treecollection_eachchild_method.md @@ -14,10 +14,10 @@ description: You can explore the eachChild method of TreeCollection in the docum - `id: string` - the ID of a control - `callback: function` - the function that will be applied to every child of the item. The function takes three parameters: - `item: object` - required, the object of an item - - `index: number` - optional, the index of an item - - `array: object[]` - optional, an array with items -- `direct: boolean` - optional, defines whether the function should iterate through all children (of any level) of the specified item. If *false*, the function will iterate only through the first-level children of the item; *true* by default. -- `checkItem: function` - optional, the function that defines whether the callback function can be applied to the item. The function takes an object of a data item as a parameter and returns a *boolean* value. + - `index?: number` - optional, the index of an item + - `array?: object[]` - optional, an array with items +- `direct?: boolean` - optional, defines whether the function should iterate through all children (of any level) of the specified item. If *false*, the function will iterate only through the first-level children of the item; *true* by default. +- `checkItem?: function` - optional, the function that defines whether the callback function can be applied to the item. The function takes an object of a data item as a parameter and returns a *boolean* value. @example: toolbar.data.eachChild("menu_1", item => { diff --git a/docs/tree_collection/api/treecollection_eachparent_method.md b/docs/tree_collection/api/treecollection_eachparent_method.md index aa9c2bd5..425e7b7c 100644 --- a/docs/tree_collection/api/treecollection_eachparent_method.md +++ b/docs/tree_collection/api/treecollection_eachparent_method.md @@ -14,9 +14,9 @@ description: You can explore the eachParent method of TreeCollection in the docu - `id: string | number` - the ID of the item - `callback: function` - the function that will be applied to each parent of the item. The function takes three parameters: - `item: object` - required, the object of an item - - `index: number` - optional, the index of an item - - `array: object[]` - optional, an array with items -- `self: boolean` - optional, defines whether the function should iterate over the specified item itself; *false* by default + - `index?: number` - optional, the index of an item + - `array?: object[]` - optional, an array with items +- `self?: boolean` - optional, defines whether the function should iterate over the specified item itself; *false* by default @example: toolbar.data.eachParent("new_btn", item => console.log(item)); diff --git a/docs/tree_collection/api/treecollection_filter_method.md b/docs/tree_collection/api/treecollection_filter_method.md index bb77aaa9..461c84b3 100644 --- a/docs/tree_collection/api/treecollection_filter_method.md +++ b/docs/tree_collection/api/treecollection_filter_method.md @@ -8,24 +8,29 @@ description: You can explore the filter method of TreeCollection in the document @short: filters controls by some criteria -@signature: {'filter(rule?: function | object, config?: object): string;'} +@signature: {'filter(rule?: function | object, config?: object, silent?: boolean): string;'} @params: -- `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* +- `rule?: function | object` - the filtering criteria + - If set as a *function*, filtering will be applied by the rule specified in the function. It takes as a parameter a data item and returns *true/false* - If set as an *object*, the parameter has the following attributes: - - `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: + - `by?: string | number` - optional, the id of a data field + - `match?: string` - optional, a pattern to match + - `compare?: function` - optional, a function for extended filtering that takes three parameters: - `value` - the value to compare - `match` - a pattern to match - `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 - - `add: boolean` - optional, defines whether each next filtering will be applied to the already filtered data (true), or to the initial data (false, default) - - `id: string` - optional, the id of the filter - - `permanent: boolean` - optional, *true* to make the current filter permanent. It will be applied even if the next filtering doesn't have the `add:true` property in its configuration object. Such a filter can be removed just with the [resetFilter()](tree_collection/api/treecollection_resetfilter_method.md) method +- `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 + - `add?: boolean` - optional, defines whether each next filtering will be applied to the already filtered data (true), or to the initial data (false, default) + - `id?: string` - optional, the id of the filter + - `permanent?: boolean` - optional, *true* to make the current filter permanent. It will be applied even if the next filtering doesn't have the `add:true` property in its configuration object. Such a filter can be removed just with the [resetFilter()](tree_collection/api/treecollection_resetfilter_method.md) method +- `silent?: boolean` - optional, if set to true, the method will be called without triggering events, false by default + +:::info +Note that after calling the method with the `silent:true` parameter, you may need to repaint the component with the `paint()` method. +::: @returns: - `id: string` - the id of the filter diff --git a/docs/tree_collection/api/treecollection_foreach_method.md b/docs/tree_collection/api/treecollection_foreach_method.md index 4b376988..e5c5cb0e 100644 --- a/docs/tree_collection/api/treecollection_foreach_method.md +++ b/docs/tree_collection/api/treecollection_foreach_method.md @@ -15,11 +15,11 @@ description: You can explore the forEach method of TreeCollection in the documen - `element: object` - the object of an item of a tree collection - `index: number` - the index of an item - `array: object[]` - an array of items the method was called upon -- `parentID: string | number` - optional, the parent id. If not specified, the function will start iterating over from the root item. -- `level: number` - optional, the number of levels to be iterated over. If not specified, each nested level will be visited. +- `parentID?: string | number` - optional, the parent id. If not specified, the function will start iterating over from the root item. +- `level?: number` - optional, the number of levels to be iterated over. If not specified, each nested level will be visited. @example: -component.data.forEach(function(element, index, array) { +component.data.forEach(function (element, index, array) { console.log("This is an item of treeCollection: ", element); console.log("This is an index of the element: ", index); console.log("This is an array of the elements: ", array); diff --git a/docs/tree_collection/api/treecollection_getfilters_method.md b/docs/tree_collection/api/treecollection_getfilters_method.md index 3bef6f24..7b35d181 100644 --- a/docs/tree_collection/api/treecollection_getfilters_method.md +++ b/docs/tree_collection/api/treecollection_getfilters_method.md @@ -12,7 +12,7 @@ description: You can explore the getFilters method of TreeCollection in the docu @params: -- `permanent: boolean` - optional, false by default. Allows getting the list of permanent filters +- `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](tree_collection/api/treecollection_filter_method.md) @@ -26,6 +26,6 @@ const grid = new dhx.Grid("grid_container", { data: dataset, }); -grid.data.getFilters(); +const filters = grid.data.getFilters(); @descr: \ No newline at end of file diff --git a/docs/tree_collection/api/treecollection_getid_method.md b/docs/tree_collection/api/treecollection_getid_method.md index 4fe79535..35bae3c5 100644 --- a/docs/tree_collection/api/treecollection_getid_method.md +++ b/docs/tree_collection/api/treecollection_getid_method.md @@ -12,7 +12,7 @@ description: You can explore the getId method of TreeCollection in the documenta @params: - `index: number` - the index of the item -- `parentId: string | number` - the id of the parent of an item +- `parentId?: string | number` - optional, the id of the parent of an item @returns: The id of the item. diff --git a/docs/tree_collection/api/treecollection_getindex_method.md b/docs/tree_collection/api/treecollection_getindex_method.md index 720a49fd..45c1746e 100644 --- a/docs/tree_collection/api/treecollection_getindex_method.md +++ b/docs/tree_collection/api/treecollection_getindex_method.md @@ -17,6 +17,6 @@ description: You can explore the getIndex method of TreeCollection in the docume The current position of the item. @example: -toolbar.data.getIndex("add_btn"); +const index = toolbar.data.getIndex("add_btn"); @descr: diff --git a/docs/tree_collection/api/treecollection_getitem_method.md b/docs/tree_collection/api/treecollection_getitem_method.md index 7973fb9e..03ce4219 100644 --- a/docs/tree_collection/api/treecollection_getitem_method.md +++ b/docs/tree_collection/api/treecollection_getitem_method.md @@ -17,6 +17,6 @@ description: You can explore the getItem method of TreeCollection in the documen An item object. @example: -const add_btn = toolbar.data.getItem("add_btn"); +const item = toolbar.data.getItem("add_btn"); @descr: diff --git a/docs/tree_collection/api/treecollection_getlength_method.md b/docs/tree_collection/api/treecollection_getlength_method.md index 819794b9..dead5caf 100644 --- a/docs/tree_collection/api/treecollection_getlength_method.md +++ b/docs/tree_collection/api/treecollection_getlength_method.md @@ -11,12 +11,12 @@ description: You can explore the getLength method of TreeCollection in the docum @signature: {'getLength(id?: string | number): number;'} @params: -- `id: string | number` - the ID of a control +- `id?: string | number` - optional, the ID of a control @returns: A number of the child items of the control. @example: -toolbar.data.getLength("menu1"); +const itemsLength = toolbar.data.getLength("menu1"); @descr: diff --git a/docs/tree_collection/api/treecollection_getroot_method.md b/docs/tree_collection/api/treecollection_getroot_method.md index 6ad85d38..ef5fc731 100644 --- a/docs/tree_collection/api/treecollection_getroot_method.md +++ b/docs/tree_collection/api/treecollection_getroot_method.md @@ -14,6 +14,6 @@ description: You can explore the getRoot method of TreeCollection in the documen The id of the root element. @example: -toolbar.data.getRoot(); +const rootId = toolbar.data.getRoot(); @descr: diff --git a/docs/tree_collection/api/treecollection_getsortingstates_method.md b/docs/tree_collection/api/treecollection_getsortingstates_method.md index a0b0f509..3390164b 100644 --- a/docs/tree_collection/api/treecollection_getsortingstates_method.md +++ b/docs/tree_collection/api/treecollection_getsortingstates_method.md @@ -8,9 +8,9 @@ description: You can explore the getSortingStates method of TreeCollection in th @short: returns an array of objects with the current parameters of sorting applied to the data -## Usage +#### Usage -~~~jsx +~~~ts interface ISortingState { by: string | number, dir: "asc" | "desc", diff --git a/docs/tree_collection/api/treecollection_issaved_method.md b/docs/tree_collection/api/treecollection_issaved_method.md index 0900e79f..ae8b6b49 100644 --- a/docs/tree_collection/api/treecollection_issaved_method.md +++ b/docs/tree_collection/api/treecollection_issaved_method.md @@ -14,7 +14,7 @@ description: You can explore the isSaved method of TreeCollection in the documen `true` if the changes are saved; otherwise, `false`. @example: -toolbar.data.isSaved(); +const result = toolbar.data.isSaved(); @descr: diff --git a/docs/tree_collection/api/treecollection_load_method.md b/docs/tree_collection/api/treecollection_load_method.md index 0e3f84a8..91151b07 100644 --- a/docs/tree_collection/api/treecollection_load_method.md +++ b/docs/tree_collection/api/treecollection_load_method.md @@ -8,11 +8,11 @@ description: You can explore the load method of TreeCollection in the documentat @short: loads items from a file -@signature: {'load(url: string | object, driver?: object | string): Promise'} +@signature: {'load(url: string | IDataProxy, driver?: object | string): Promise'} @params: -- `url: string | DataProxy` - the URL of an external file or DataProxy object with the URL configured -- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default +- `url: string | IDataProxy` - the URL of an external file or DataProxy object with the URL configured +- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default @returns: A promise of data loading. @@ -31,7 +31,7 @@ The component will make an AJAX call and expect the remote URL to provide valid Data loading is asynchronous, so you need to wrap any after-loading code into a promise: ~~~jsx -toolbar.data.load(url).then(function(){ +toolbar.data.load(url).then(function () { //do something after load; }); ~~~ @@ -40,7 +40,7 @@ or ~~~jsx toolbar.data.load(url); -toolbar.data.loadData.then(function(){ +toolbar.data.loadData.then(function () { //do something after load; }); // loadData executes a callback function after an asynchronous diff --git a/docs/tree_collection/api/treecollection_loaditems_method.md b/docs/tree_collection/api/treecollection_loaditems_method.md index c1d1cc39..19b01336 100644 --- a/docs/tree_collection/api/treecollection_loaditems_method.md +++ b/docs/tree_collection/api/treecollection_loaditems_method.md @@ -12,7 +12,7 @@ description: You can explore the loadItems method of TreeCollection in the docum @params: - `id: string | number` - the ID of a control -- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default +- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default @example: myToolbar.data.loadItems("menu_id"); diff --git a/docs/tree_collection/api/treecollection_map_method.md b/docs/tree_collection/api/treecollection_map_method.md index ccd794f6..39be079e 100644 --- a/docs/tree_collection/api/treecollection_map_method.md +++ b/docs/tree_collection/api/treecollection_map_method.md @@ -6,7 +6,7 @@ description: You can explore the map method of TreeCollection in the documentati # map() -@short: iterates through items +@short: iterates through all the items of the component @signature: {'map(callback: function, id?: string | number, direct?: boolean): any;'} @@ -15,11 +15,11 @@ description: You can explore the map method of TreeCollection in the documentati - `item: object` - the object of an item - `index: number` - the index of an item - `array: object[]` - an array of items the method was called upon -- `id: string | number` - the ID of a control the child items of which will be included -- `direct: boolean` - defines whether only direct children of the control will be included in the iteration +- `id?: string | number` - optional, the ID of a control the child items of which will be included +- `direct?: boolean` - optional, defines whether only direct children of the control will be included in the iteration @example: -toolbar.data.map((item)=>{ +toolbar.data.map ((item) => { //remove all icons item.icon = ""; }); @@ -30,19 +30,19 @@ toolbar.paint(); To work with all children of a particular control, pass one more parameter to **map()** - the ID of the control: ~~~jsx -toolbar.data.map((item)=>{ +toolbar.data.map ((item) => { // disable items item.disabled = true; -},"menu_1"); +}, "menu_1"); toolbar.paint(); ~~~ If you want to iterate only through immediate children, set the third parameter to *false*: ~~~jsx -toolbar.data.map((item)=>{ +toolbar.data.map ((item) => { // add a css class to each item item.css = "highlight"; -},"menu_1",false); +}, "menu_1", false); toolbar.paint(); ~~~ diff --git a/docs/tree_collection/api/treecollection_mapvisible_method.md b/docs/tree_collection/api/treecollection_mapvisible_method.md index f73a65a7..5beeff51 100644 --- a/docs/tree_collection/api/treecollection_mapvisible_method.md +++ b/docs/tree_collection/api/treecollection_mapvisible_method.md @@ -13,13 +13,13 @@ description: You can explore the mapVisible method of TreeCollection in the docu @params: - `callback: function` - the function that will be applied to every visible item. The function can take three parameters: - `item: object` - required, the object of an item - - `index: number` - optional, the index of an item - - `array: object[]` - optional, an array with items -- `id: string | number` - the ID of a control the child items of which will be included -- `direct: boolean` - defines whether only direct children of the control will be included in the iteration + - `index: number` - the index of an item + - `array: object[]` - an array with items +- `id?: string | number` - optional, the ID of a control the child items of which will be included +- `direct?: boolean` - optional, defines whether only direct children of the control will be included in the iteration @example: -treegrid.data.mapVisible(item => console.log(item),"parent_id", true); +treegrid.data.mapVisible(item => console.log(item), "parent_id", true); @descr: diff --git a/docs/tree_collection/api/treecollection_move_method.md b/docs/tree_collection/api/treecollection_move_method.md index cb374f61..3e1f2284 100644 --- a/docs/tree_collection/api/treecollection_move_method.md +++ b/docs/tree_collection/api/treecollection_move_method.md @@ -13,14 +13,14 @@ description: You can explore the move method of TreeCollection in the documentat @params: - `id: (string | number) | (string | number)[]` - the ids of items to move - `index: number` - the index to move items to -- `target: object` - optional, the target tree collection object -- `targetId: (string | number) | (string | number)[]` - optional, the id of the parent item where the moved items will be placed +- `target?: object` - optional, the target tree collection object +- `targetId?: (string | number) | (string | number)[]` - optional, the id of the parent item where the moved items will be placed @returns: The item's id or an array with ids of items. @example: -toolbar.data.move("profile_btn",-1); +toolbar.data.move("profile_btn", -1); @descr: diff --git a/docs/tree_collection/api/treecollection_parse_method.md b/docs/tree_collection/api/treecollection_parse_method.md index e21cc5fc..4710d8f2 100644 --- a/docs/tree_collection/api/treecollection_parse_method.md +++ b/docs/tree_collection/api/treecollection_parse_method.md @@ -12,7 +12,7 @@ description: You can explore the parse method of TreeCollection in the documenta @params: - `data: array | string` - the data to load -- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default +- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default @example: // loads data into the toolbar from the JSON array diff --git a/docs/tree_collection/api/treecollection_refreshitems_method.md b/docs/tree_collection/api/treecollection_refreshitems_method.md index db9f104e..36d275e1 100644 --- a/docs/tree_collection/api/treecollection_refreshitems_method.md +++ b/docs/tree_collection/api/treecollection_refreshitems_method.md @@ -12,7 +12,7 @@ description: You can explore the refreshItems method of TreeCollection in the do @params: - `id: string | number` - the ID of a control -- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default +- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default @example: toolbar.data.refreshItems("menu_id"); diff --git a/docs/tree_collection/api/treecollection_removeall_method.md b/docs/tree_collection/api/treecollection_removeall_method.md index 4ce58ea0..64ee6c4f 100644 --- a/docs/tree_collection/api/treecollection_removeall_method.md +++ b/docs/tree_collection/api/treecollection_removeall_method.md @@ -8,11 +8,11 @@ description: You can explore the removeAll method of TreeCollection in the docum @short: removes all items in the target branch or all items of the component -@signature: {'removeAll(id: string | number): void;'} +@signature: {'removeAll(id?: string | number): void;'} @params: -- `id: string | number` - (optional) the id of the branch +- `id?: string | number` - optional, the id of the branch @example: toolbar.data.removeAll(id); diff --git a/docs/tree_collection/api/treecollection_resetfilter_method.md b/docs/tree_collection/api/treecollection_resetfilter_method.md index 7c6a89e7..a95cf8cd 100644 --- a/docs/tree_collection/api/treecollection_resetfilter_method.md +++ b/docs/tree_collection/api/treecollection_resetfilter_method.md @@ -8,12 +8,17 @@ description: You can explore the resetFilter method of TreeCollection in the doc @short: resets the active filters -@signature: {'resetFilter(config?: object): boolean;'} +@signature: {'resetFilter(config?: object, silent?: boolean): boolean;'} @params: - `config: object` - optional, specifies the parameters of resetting the active filters. If the config isn't specified or it is empty, all the filters except for those that have the **permanent** property in the configuration object will be reset. Can contain the following properties: - - `id: string` - optional, the id of the filter to reset - - `permanent: boolean` - optional, *true* to reset all the active filters, including those that have the **permanent:true** property in their config + - `id?: string` - optional, the id of the filter to reset + - `permanent?: boolean` - optional, *true* to reset all the active filters, including those that have the **permanent:true** property in their config +- `silent?: boolean` - optional, if set to *true*, the method will be called without triggering events, *false* by default + +:::info +Note that after calling the method with the `silent:true` parameter, you may need to repaint the component with the `paint()` method. +::: @returns: - `result: boolean` - *true*, if all the filters, including the permanent ones, have been reset; otherwise *false* diff --git a/docs/tree_collection/api/treecollection_save_method.md b/docs/tree_collection/api/treecollection_save_method.md index 247f4584..ca1b75e6 100644 --- a/docs/tree_collection/api/treecollection_save_method.md +++ b/docs/tree_collection/api/treecollection_save_method.md @@ -8,21 +8,30 @@ description: You can explore the save method of TreeCollection in the documentat @short: saves changes made in a tree collection to the server side -@signature: {'save(url: string | object): void;'} +@signature: {'save(url: IDataProxy | string): void;'} @params: -- `url: string | object` - the URL of a server side (or DataProxy object) +- `url: IDataProxy | string` - the URL of a server side or DataProxy with the URL configured @example: toolbar.data.save("http://userurl/"); +//or +toolbar.data.save(new DataProxy({ url:"http://userurl/" })); + @descr: -The component will make an AJAX call and expect the remote URL to save data changes. +Each time the user changes data of the component, the `save()` method will make an AJAX call and expect the remote URL to save data changes. +The method will send one of the following requests to the backend: + +- `POST` - after adding new data into the component; +- `PUT` - after editing data of the component; +- `DELETE` - after deleting data. + Data saving is asynchronous, so you need to return a promise - the result of the saving operation. To do this, use the **saveData** property that returns a "promise" object: -~~~js +~~~jsx const data = new TreeCollection(); data.save(loader); return data.saveData.then(function () { @@ -30,9 +39,9 @@ return data.saveData.then(function () { }); ~~~ -Use the [](tree_collection/api/treecollection_issaved_method.md) method to know whether the changes are saved: +Use the [](tree_collection/api/treecollection_issaved_method.md) method to check whether the changes are saved: -~~~js +~~~jsx toolbar.data.saveData.then(function () { console.log(toolbar.data.isSaved()); }); diff --git a/docs/tree_collection/api/treecollection_serialize_method.md b/docs/tree_collection/api/treecollection_serialize_method.md index b5a51cb6..c83d1b68 100644 --- a/docs/tree_collection/api/treecollection_serialize_method.md +++ b/docs/tree_collection/api/treecollection_serialize_method.md @@ -11,19 +11,19 @@ description: You can explore the serialize method of TreeCollection in the docum @signature: {'serialize(driver?: string): object[] | string;'} @params: -- `driver: string` - optional, the format that the data will be serialized into ("json", "csv", "xml"), "json" by default +- `driver?: string` - optional, the format that the data will be serialized into ("json", "csv", "xml"), "json" by default @returns: Serialized data of the component either as an array of JSON objects or as a CSV/XML string. @example: // serialize data into an array of JSON objects -component.data.serialize(); +const data = component.data.serialize(); // serialize data into an XML string -component.data.serialize("xml"); +const xmlData = component.data.serialize("xml"); // serialize data into a CSV string -component.data.serialize("csv"); +const csvData = component.data.serialize("csv"); @descr: diff --git a/docs/tree_collection/api/treecollection_sort_method.md b/docs/tree_collection/api/treecollection_sort_method.md index 5ca115ad..13c00874 100644 --- a/docs/tree_collection/api/treecollection_sort_method.md +++ b/docs/tree_collection/api/treecollection_sort_method.md @@ -11,13 +11,13 @@ description: You can explore the sort method of TreeCollection in the documentat @signature: {'sort(rule?: object, config?: object): void;'} @params: -- `rule: object` - an object with parameters for sorting. The object has the following attributes: - - `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) -- `config: object` - defines the parameter of sorting. It may contain one property: - - `smartSorting: boolean` - specifies whether a sorting rule should be applied each time after changing the data set +- `rule?: object` - optional, an object with parameters for sorting. The object has the following attributes: + - `by?: string | number` - optional, the id of a data field + - `dir?: string` - optional, the direction of sorting: "asc" or "desc" + - `as?: function` - optional, 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) +- `config?: object` - optional, defines the parameter of sorting. It may contain one property: + - `smartSorting?: boolean` - optional, specifies whether a sorting rule should be applied each time after changing the data set @example: component.data.sort( diff --git a/docs/tree_collection/api/treecollection_update_method.md b/docs/tree_collection/api/treecollection_update_method.md index 757b8785..2941a0c9 100644 --- a/docs/tree_collection/api/treecollection_update_method.md +++ b/docs/tree_collection/api/treecollection_update_method.md @@ -6,15 +6,32 @@ description: You can explore the update method of TreeCollection in the document # update() -@short: changes an item +@short: updates properties of the item -@signature: {'update(id: string | number, item: object): void;'} +@signature: {'update(id: string | number, item: object, silent?: boolean): void;'} @params: - `id: string | number` - the ID of an item - `item: object` - new properties for an item +- `silent?: boolean` - optional, if set to *true*, the method will be called without triggering events, *false* by default + +:::info +Note that after calling the method with the `silent:true` parameter, you may need to repaint the component with the `paint()` method. +::: @example: -toolbar.data.update("add_btn",{ value:"Add new" }); +toolbar.data.update("add_btn", { value:"Add new" }); @descr: +Also note, that for correct work of the method the last update of a data collection should be done with the `silent:false` setting applied, for example: + +~~~jsx +const itemsForUpdate = [...]; // items { ... } +const lastIndex = itemsForUpdate.length - 1; + +itemsForUpdate.forEach((item, index) => { + data.update(item.id, { + param: "change param", + }, index != lastIndex); // the last update isn't silent, as the `silent:false` parameter is set +}); +~~~ \ No newline at end of file