diff --git a/docs/grid/api/api_gridcolumn_properties.md b/docs/grid/api/api_gridcolumn_properties.md index 3298b7d0..dcf2f21c 100644 --- a/docs/grid/api/api_gridcolumn_properties.md +++ b/docs/grid/api/api_gridcolumn_properties.md @@ -20,7 +20,7 @@ columns:[ { text?: string | number, tooltip?: boolean | object, // true by default - tooltipTemplate?: (value: string | undefined, header: IHeader, col: ICol) => string | boolean, + tooltipTemplate?: (value: string | undefined, header: object, column: object) => string | boolean, align?: "left" | "center" | "right", // "left" by default colspan?: number, rowspan?: number, @@ -45,7 +45,7 @@ columns:[ { text?: string | number, tooltip?: boolean | object, // true by default - tooltipTemplate?: (value: string | undefined, footer: IFooter, col: ICol) => string | boolean, + tooltipTemplate?: (value: string | undefined, footer: object, column: object) => string | boolean, align?: "left" | "center" | "right", // "left" by default colspan?: number, rowspan?: number, @@ -59,7 +59,7 @@ columns:[ editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "textarea", format?: string, options?: (string | { id: string | number, value: string })[] | - (col: object, row?: object) => (string | { id: string | number, value: string })[], + (column: object, row?: object) => (string | { id: string | number, value: string })[], editorConfig?: obj, adjust?: "data" | "header" | "footer" | boolean, // false by default align?: "left" | "center" | "right", // "left" by default @@ -71,9 +71,9 @@ columns:[ sortable?: boolean, // true by default mark?: { min?: string, max?: string } | (cell: any, columnCells: any[], row?: object, column?: object) => string, - template?: (cellValue: any, row: object, col: object) => string, + template?: (cellValue: any, row: object, column: object) => string, tooltip?: boolean | object, // true by default - tooltipTemplate?: (cellValue: any, row: object, col: object) => string, + tooltipTemplate?: (cellValue: any, row: object, column: object) => string, }, // more column objects ] @@ -125,7 +125,7 @@ columns:[ options - (optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify editorType: "select" | "combobox" | "multiselect". The property can be:Related Samples:If newOptions property is enabled, all new options will be displayed in the editor regardless of the initialized options. + (optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify editorType: "select" | "combobox" | "multiselect". The property can be:Related Samples:If newOptions property is enabled, all new options will be displayed in the editor regardless of the initialized options. editorConfig @@ -165,11 +165,11 @@ columns:[ mark - (optional) can be either an object or a function:
Related Sample: Grid. Mark cells + (optional) can be either an object or a function:
Related Sample: Grid. Mark cells template - (optional) a function which returns a template with content for a cell(s). Takes 3 parameters:
Related Sample: Grid. Cell templates + (optional) a function which returns a template with content for a cell(s). Takes 3 parameters:
Related Sample: Grid. Cell templates tooltip @@ -177,7 +177,7 @@ columns:[ tooltipTemplate - (optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:Returning *false* from the function will block showing of the tooltip + (optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:Returning *false* from the function will block showing of the tooltip diff --git a/docs/grid/api/grid_addspan_method.md b/docs/grid/api/grid_addspan_method.md index 19a7a39e..4ad87758 100644 --- a/docs/grid/api/grid_addspan_method.md +++ b/docs/grid/api/grid_addspan_method.md @@ -8,7 +8,7 @@ description: You can explore the addSpan method of Grid in the documentation of @short: adds a rows/cols span -@signature: addSpan(spanObj: object): void; +@signature: {'addSpan(spanObj: object): void;'} @params: - `spanObj: object` - an object with configuration of a span. The object contains the following properties: diff --git a/docs/grid/api/grid_aftercolumndrag_event.md b/docs/grid/api/grid_aftercolumndrag_event.md index 29c36aa0..7d6e8d26 100644 --- a/docs/grid/api/grid_aftercolumndrag_event.md +++ b/docs/grid/api/grid_aftercolumndrag_event.md @@ -13,14 +13,17 @@ description: You can explore the afterColumnDrag event of Grid in the documentat @signature: {'afterColumnDrag: (data: object, events: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: + +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("afterColumnDrag", function(data, events) { +grid.events.on("afterColumnDrag", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_aftercolumndrop_event.md b/docs/grid/api/grid_aftercolumndrop_event.md index a9c5216c..3823fedb 100644 --- a/docs/grid/api/grid_aftercolumndrop_event.md +++ b/docs/grid/api/grid_aftercolumndrop_event.md @@ -13,14 +13,16 @@ description: You can explore the afterColumnDrop event of Grid in the documentat @signature: {'afterColumnDrop: (data: object, events: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("afterColumnDrop", function(data, events) { +grid.events.on("afterColumnDrop", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_aftercolumnhide_event.md b/docs/grid/api/grid_aftercolumnhide_event.md index aea453fc..21483f10 100644 --- a/docs/grid/api/grid_aftercolumnhide_event.md +++ b/docs/grid/api/grid_aftercolumnhide_event.md @@ -8,13 +8,15 @@ description: You can explore the afterColumnHide event of Grid in the documentat @short: fires after a column is hidden -@signature: {'afterColumnHide: (col: object) => void;'} +@signature: {'afterColumnHide: (column: object) => void;'} @params: -- `col: object` - an object with a column configuration +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration @example: -grid.events.on("afterColumnHide", function(column){ +grid.events.on("afterColumnHide", (column) => { // your logic here }); diff --git a/docs/grid/api/grid_aftercolumnshow_event.md b/docs/grid/api/grid_aftercolumnshow_event.md index cbaa8ef2..6007a2ff 100644 --- a/docs/grid/api/grid_aftercolumnshow_event.md +++ b/docs/grid/api/grid_aftercolumnshow_event.md @@ -8,13 +8,14 @@ description: You can explore the afterColumnShow event of Grid in the documentat @short: fires after a column is shown -@signature: {'afterColumnShow: (col: object) => void;'} +@signature: {'afterColumnShow: (column: object) => void;'} @params: -- `col: object` - an object with a column configuration +The callback of the event is called with the following parameters: +- `column: object` - an object with a column configuration @example: -grid.events.on("afterColumnShow", function(column){ +grid.events.on("afterColumnShow", (column) => { // your logic here }); diff --git a/docs/grid/api/grid_aftereditend_event.md b/docs/grid/api/grid_aftereditend_event.md index 442193bd..55f152c4 100644 --- a/docs/grid/api/grid_aftereditend_event.md +++ b/docs/grid/api/grid_aftereditend_event.md @@ -8,15 +8,17 @@ description: You can explore the afterEditEnd event of Grid in the documentation @short: fires after editing of a cell is ended -@signature: {'afterEditEnd: (value: string | number | boolean, row: object, col: object) => void;'} +@signature: {'afterEditEnd: (value: string | number | boolean, row: object, column: object) => void;'} @params: +The callback of the event is called with the following parameters: + - `value: string | number | boolean` - the new value of a cell - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration +- `column: object` - an object with a column configuration @example: -grid.events.on("afterEditEnd", function(value,row,column){ +grid.events.on("afterEditEnd", (value, row, column) => { // your logic here }); diff --git a/docs/grid/api/grid_aftereditstart_event.md b/docs/grid/api/grid_aftereditstart_event.md index dd252b3d..8eaa95a3 100644 --- a/docs/grid/api/grid_aftereditstart_event.md +++ b/docs/grid/api/grid_aftereditstart_event.md @@ -8,15 +8,17 @@ description: You can explore the afterEditStart event of Grid in the documentati @short: fires after editing of a cell has started -@signature: {'afterEditStart: (row: object, col: object, editorType: "input" | "select" | "datePicker" | "checkbox" | "combobox" | "textarea" | "multiselect") => void;'} +@signature: {'afterEditStart: (row: object, column: object, editorType: "input" | "select" | "datePicker" | "checkbox" | "combobox" | "textarea" | "multiselect") => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration +- `column: object` - an object with a column configuration - `editorType: string` - the type of a cell editor: "input", "select", "datePicker", "checkbox", "combobox", "textarea", "multiselect" @example: -grid.events.on("afterEditStart", function(row,col, editorType){ +grid.events.on("afterEditStart", (row, column, editorType) => { // your logic here }); diff --git a/docs/grid/api/grid_afterkeydown_event.md b/docs/grid/api/grid_afterkeydown_event.md index 0312141a..cb7f4d82 100644 --- a/docs/grid/api/grid_afterkeydown_event.md +++ b/docs/grid/api/grid_afterkeydown_event.md @@ -8,13 +8,15 @@ description: You can explore the afterKeyDown event of Grid in the documentation @short: fires after the user is pressing a shortcut key -@signature: {'afterKeyDown: (e: Event) => void;'} +@signature: {'afterKeyDown: (event: Event) => void;'} @params: -- `e: Event` - a native KeyboardEvent object +The callback of the event is called with the following parameter: + +- `event: Event` - a native KeyboardEvent object @example: -grid.events.on("afterKeyDown", function (e) { +grid.events.on("afterKeyDown", (event) => { // your logic here }); diff --git a/docs/grid/api/grid_afterresizeend_event.md b/docs/grid/api/grid_afterresizeend_event.md index 5cdb9deb..028a8534 100644 --- a/docs/grid/api/grid_afterresizeend_event.md +++ b/docs/grid/api/grid_afterresizeend_event.md @@ -8,14 +8,16 @@ description: You can explore the afterResizeEnd event of Grid in the documentati @short: fires after resizing of a column is ended -@signature: {'afterResizeEnd: (col: object, e: MouseEvent) => void;'} +@signature: {'afterResizeEnd: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("afterResizeEnd", function(col,e){ +grid.events.on("afterResizeEnd", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_afterrowdrag_event.md b/docs/grid/api/grid_afterrowdrag_event.md index bbd0fec8..5c18177b 100644 --- a/docs/grid/api/grid_afterrowdrag_event.md +++ b/docs/grid/api/grid_afterrowdrag_event.md @@ -8,17 +8,19 @@ description: You can explore the afterRowDrag event of Grid in the documentation @short: fires after dragging of a row is finished -@signature: {'afterRowDrag: (data: object, events: MouseEvent) => void;'} +@signature: {'afterRowDrag: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("afterRowDrag", function(data, events) { +grid.events.on("afterRowDrag", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_afterrowdrop_event.md b/docs/grid/api/grid_afterrowdrop_event.md index f6b720a9..7559774a 100644 --- a/docs/grid/api/grid_afterrowdrop_event.md +++ b/docs/grid/api/grid_afterrowdrop_event.md @@ -8,17 +8,19 @@ description: You can explore the afterRowDrop event of Grid in the documentation @short: fires before the user has finished dragging a row but after the mouse button is released -@signature: {'afterRowDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'afterRowDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("afterRowDrop", function(data, events) { +grid.events.on("afterRowDrop", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_afterrowhide_event.md b/docs/grid/api/grid_afterrowhide_event.md index 69a26b30..8d87656c 100644 --- a/docs/grid/api/grid_afterrowhide_event.md +++ b/docs/grid/api/grid_afterrowhide_event.md @@ -11,10 +11,12 @@ description: You can explore the afterRowHide event of Grid in the documentation @signature: {'afterRowHide: (row: object) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration @example: -grid.events.on("afterRowHide", function(row){ +grid.events.on("afterRowHide", (row) => { // your logic here }); diff --git a/docs/grid/api/grid_afterrowresize_event.md b/docs/grid/api/grid_afterrowresize_event.md index 96a8a3dc..ec5e7ecb 100644 --- a/docs/grid/api/grid_afterrowresize_event.md +++ b/docs/grid/api/grid_afterrowresize_event.md @@ -10,15 +10,17 @@ description: You can explore the afterRowResize event of Grid in the documentati @short: fires after the height of a row is changed -@signature: afterRowResize: (row: object, events: Event, currentHeight: number) => void; +@signature: {'afterRowResize: (row: object, event: Event, currentHeight: number) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `events: Event` - a native event object +- `event: Event` - a native event object - `currentHeight: number` - the current height of the row @example: -grid.events.on("afterRowResize", function(row, events, currentHeight) { +grid.events.on("afterRowResize", (row, event, currentHeight) => { console.log("Current row height:", currentHeight); }); diff --git a/docs/grid/api/grid_afterrowshow_event.md b/docs/grid/api/grid_afterrowshow_event.md index fffb899f..73cb5599 100644 --- a/docs/grid/api/grid_afterrowshow_event.md +++ b/docs/grid/api/grid_afterrowshow_event.md @@ -11,10 +11,12 @@ description: You can explore the afterRowShow event of Grid in the documentation @signature: {'afterRowShow: (row: object) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration @example: -grid.events.on("afterRowShow", function(row){ +grid.events.on("afterRowShow", (row) => { // your logic here }); diff --git a/docs/grid/api/grid_aftersort_event.md b/docs/grid/api/grid_aftersort_event.md index 9e9876df..52cf7191 100644 --- a/docs/grid/api/grid_aftersort_event.md +++ b/docs/grid/api/grid_aftersort_event.md @@ -8,15 +8,17 @@ description: You can explore the afterSort event of Grid in the documentation of @short: fires after a column is sorted by clicking on its header -@signature: afterSort: (col: object, dir: string) => void; +@signature: {'afterSort: (column: object, dir: string) => void;'} @params: -- `col: object` - an object with the configuration of a column +The callback of the event is called with the following parameters: + +- `column: object` - an object with the configuration of a column - `dir: string` - the sorting direction ("desc", "asc") @example: -grid.events.on("afterSort", (col, dir) => { - console.log(col, dir); +grid.events.on("afterSort", (column, dir) => { + // your logic here }); @descr: diff --git a/docs/grid/api/grid_autoheight_config.md b/docs/grid/api/grid_autoheight_config.md index 1adc7cf6..7742ee48 100644 --- a/docs/grid/api/grid_autoheight_config.md +++ b/docs/grid/api/grid_autoheight_config.md @@ -10,7 +10,7 @@ description: You can explore the autoHeight config of Grid in the documentation @short: Optional. Makes long text split into multiple lines based on the width of the column, controls the automatic height adjustment of the header/footer and cells with data -@signature: autoHeight?: boolean; +@signature: {'autoHeight?: boolean;'} @default: false diff --git a/docs/grid/api/grid_beforecolumndrag_event.md b/docs/grid/api/grid_beforecolumndrag_event.md index 2d9195da..dcebc81d 100644 --- a/docs/grid/api/grid_beforecolumndrag_event.md +++ b/docs/grid/api/grid_beforecolumndrag_event.md @@ -10,14 +10,16 @@ description: You can explore the beforeColumnDrag event of Grid in the documenta @short: fires before dragging of a column has started -@signature: {'beforeColumnDrag: (data: object, events: MouseEvent) => void | boolean;'} +@signature: {'beforeColumnDrag: (data: object, event: MouseEvent) => void | boolean;'} @params: +The callback of the event is called with the following parameters: + - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a column, from which the dragging process has started - - `source: array` - an array with ids of dragged columns + - `source: array` - an array with the ids of the dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to prevent dragging a column; otherwise, `true`. @@ -40,8 +42,8 @@ grid.events.on("beforeColumnDrag", ({ start }) => start !== "density"); @changelog: -- Before v7.0, the event took one parameter - the column id. -- Starting from v7.0, the event takes two parameters: **data** and **e**. +- Before v7.0, the callback of the event took one parameter - the column id +- Starting from v7.0, the callback of the event takes two parameters: **data** and **event** - The event was added in v6.5 [comment]: # (@relatedapi:) diff --git a/docs/grid/api/grid_beforecolumndrop_event.md b/docs/grid/api/grid_beforecolumndrop_event.md index 39856ace..7c562f43 100644 --- a/docs/grid/api/grid_beforecolumndrop_event.md +++ b/docs/grid/api/grid_beforecolumndrop_event.md @@ -13,11 +13,13 @@ description: You can explore the beforeColumnDrop event of Grid in the documenta @signature: {'beforeColumnDrop: (data: object, events: MouseEvent) => void | boolean;'} @params: +The callback of the event is called with the following parameters: + - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a column, from which the dragging process has started - - `source: array` - an array with ids of dragged columns + - `source: array` - an array with the ids of the dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to block the default action; otherwise, `true`. @@ -40,8 +42,8 @@ grid.events.on("beforeColumnDrop", ({ target }) => target !== "population"); @changelog: -- Before v7.0, the event took two parameters - **sourceId** and **targetId**. -- In v7.0, the parameters were replaced with new ones: **data** and **e**. +- Before v7.0, the callback of the event took two parameters - **sourceId** and **targetId** +- In v7.0, the parameters were replaced with new ones: **data** and **event** - The event was added in v6.5 [comment]: # (@relatedapi:) diff --git a/docs/grid/api/grid_beforecolumnhide_event.md b/docs/grid/api/grid_beforecolumnhide_event.md index ab4f5421..00c677d8 100644 --- a/docs/grid/api/grid_beforecolumnhide_event.md +++ b/docs/grid/api/grid_beforecolumnhide_event.md @@ -8,16 +8,17 @@ description: You can explore the beforeColumnHide event of Grid in the documenta @short: fires before a column is hidden -@signature: {'beforeColumnHide: (col: object) => boolean | void;'} +@signature: {'beforeColumnHide: (column: object) => boolean | void;'} @params: -- `col: object` - an object with a column configuration +The callback of the event is called with the following parameter: +- `column: object` - an object with a column configuration @returns: Return `false` to prevent a column from being hidden; otherwise, `true`. @example: -grid.events.on("beforeColumnHide", function(column){ +grid.events.on("beforeColumnHide", (column) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforecolumnshow_event.md b/docs/grid/api/grid_beforecolumnshow_event.md index 86e9c23b..1ef79629 100644 --- a/docs/grid/api/grid_beforecolumnshow_event.md +++ b/docs/grid/api/grid_beforecolumnshow_event.md @@ -8,16 +8,17 @@ description: You can explore the beforeColumnShow event of Grid in the documenta @short: fires before a column is shown on a page -@signature: {'beforeColumnShow: (col: object) => boolean | void;'} +@signature: {'beforeColumnShow: (column: object) => boolean | void;'} @params: -- `col: object` - an object with a column configuration +The callback of the event is called with the following parameter: +- `column: object` - an object with a column configuration @returns: Return `false` to prevent a column from being shown; otherwise, `true`. @example: -grid.events.on("beforeColumnShow", function(column){ +grid.events.on("beforeColumnShow", (column) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforeeditend_event.md b/docs/grid/api/grid_beforeeditend_event.md index 0576219c..47a9ff82 100644 --- a/docs/grid/api/grid_beforeeditend_event.md +++ b/docs/grid/api/grid_beforeeditend_event.md @@ -8,18 +8,20 @@ description: You can explore the beforeEditEnd event of Grid in the documentatio @short: fires before editing of a cell is completed -@signature: {'beforeEditEnd: (value: string | number | boolean, row: object, col: object) => boolean | void;'} +@signature: {'beforeEditEnd: (value: string | number | boolean, row: object, column: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: + - `value: string | number | boolean` - the new value of a cell - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration +- `column: object` - an object with a column configuration @returns: Return `false` to prevent closing of an editor; otherwise, `true`. @example: -grid.events.on("beforeEditEnd", function(value,row,column){ +grid.events.on("beforeEditEnd", (value, row, column) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforeeditstart_event.md b/docs/grid/api/grid_beforeeditstart_event.md index 0db44daf..0c182668 100644 --- a/docs/grid/api/grid_beforeeditstart_event.md +++ b/docs/grid/api/grid_beforeeditstart_event.md @@ -8,18 +8,19 @@ description: You can explore the beforeEditStart event of Grid in the documentat @short: fires before editing of a cell has started -@signature: {'beforeEditStart: (row: object, col: object, editorType: string) => boolean | void;'} +@signature: {'beforeEditStart: (row: object, column: object, editorType: string) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration +- `column: object` - an object with a column configuration - `editorType: string` - the type of a cell editor: "input", "select", "datePicker", "checkbox", "combobox", "textarea", "multiselect" @returns: Return `false` to block editing of a cell; otherwise, `true`. @example: -grid.events.on("beforeEditStart", function(row,col,editorType){ +grid.events.on("beforeEditStart", (row, column, editorType) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforefilter_event.md b/docs/grid/api/grid_beforefilter_event.md index b1980df9..4e7eee16 100644 --- a/docs/grid/api/grid_beforefilter_event.md +++ b/docs/grid/api/grid_beforefilter_event.md @@ -11,6 +11,7 @@ description: You can explore the beforeFilter event of Grid in the documentation @signature: {'beforeFilter:({ value: string, colId?: string | number }) => void | boolean;'} @params: +The callback of the event is called with the following parameters: - `value: string` - required, the entered value by which data must be filtered - `colId: string | number` - optional, the ID of a column @@ -18,8 +19,8 @@ description: You can explore the beforeFilter event of Grid in the documentation Return `false` to block the filtering process; otherwise, `true`. @example: -grid.events.on("beforeFilter", (value, id) => { - console.log("The", id, "column is filtered by", value, "value"); +grid.events.on("beforeFilter", (value, colId) => { + console.log("The", colId, "column is filtered by", value, "value"); // return false; }); diff --git a/docs/grid/api/grid_beforekeydown_event.md b/docs/grid/api/grid_beforekeydown_event.md index cd290fc5..fd793323 100644 --- a/docs/grid/api/grid_beforekeydown_event.md +++ b/docs/grid/api/grid_beforekeydown_event.md @@ -8,18 +8,19 @@ description: You can explore the beforeKeyDown event of Grid in the documentatio @short: fires before the user is pressing a shortcut key -@signature: {'beforeKeyDown: (e: Event) => boolean | void;'} +@signature: {'beforeKeyDown: (event: Event) => boolean | void;'} @params: -- `e: Event` - a native KeyboardEvent object +The callback of the event is called with the following parameters: +- `event: Event` - a native KeyboardEvent object @returns: -Return `false` to prevent pressing a shortcut key; otherwise, `false`. +Return `false` to prevent pressing a shortcut key; otherwise, `true`. @example: -grid.events.on("beforeKeyDown", function (e) { +grid.events.on("beforeKeyDown", (event) => { // your logic here - // return true + // return false; }); @descr: diff --git a/docs/grid/api/grid_beforeresizestart_event.md b/docs/grid/api/grid_beforeresizestart_event.md index 0532fd8a..dae9fe63 100644 --- a/docs/grid/api/grid_beforeresizestart_event.md +++ b/docs/grid/api/grid_beforeresizestart_event.md @@ -8,17 +8,18 @@ description: You can explore the beforeResizeStart event of Grid in the document @short: fires before resizing of a column has started -@signature: {'beforeResizeStart: (col: object, e: MouseEvent) => boolean | void;'} +@signature: {'beforeResizeStart: (column: object, event: MouseEvent) => boolean | void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to block resizing of a column; otherwise, `true`. @example: -grid.events.on("beforeResizeStart", function(col,e){ +grid.events.on("beforeResizeStart", (column, event) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforerowdrag_event.md b/docs/grid/api/grid_beforerowdrag_event.md index 4fa7f33e..0c58973f 100644 --- a/docs/grid/api/grid_beforerowdrag_event.md +++ b/docs/grid/api/grid_beforerowdrag_event.md @@ -8,20 +8,21 @@ description: You can explore the beforeRowDrag event of Grid in the documentatio @short: fires before dragging of a row has started -@signature: {'beforeRowDrag: (data: object, events: MouseEvent) => void | boolean;'} +@signature: {'beforeRowDrag: (data: object, event: MouseEvent) => void | boolean;'} @params: +The callback of the event is called with the following parameters: - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to prevent dragging a row; otherwise, `true`. @example: -grid.events.on("beforeRowDrag", function(data, events){ +grid.events.on("beforeRowDrag", (data, event) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforerowdrop_event.md b/docs/grid/api/grid_beforerowdrop_event.md index ebc64bb0..70680d99 100644 --- a/docs/grid/api/grid_beforerowdrop_event.md +++ b/docs/grid/api/grid_beforerowdrop_event.md @@ -8,20 +8,21 @@ description: You can explore the beforeRowDrop event of Grid in the documentatio @short: fires before the user has finished dragging and released the mouse button over a target row -@signature: {'beforeRowDrop: (data: object, events: MouseEvent) => void | boolean;'} +@signature: {'beforeRowDrop: (data: object, event: MouseEvent) => void | boolean;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to block the default action; otherwise, `true`. @example: -grid.events.on("beforeRowDrop", function(data, events){ +grid.events.on("beforeRowDrop", (data, event) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforerowhide_event.md b/docs/grid/api/grid_beforerowhide_event.md index 5b83bfda..49fb9da9 100644 --- a/docs/grid/api/grid_beforerowhide_event.md +++ b/docs/grid/api/grid_beforerowhide_event.md @@ -11,13 +11,14 @@ description: You can explore the beforeRowHide event of Grid in the documentatio @signature: {'beforeRowHide: (row: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - an object with a row configuration @returns: Return `false` to prevent a row from being hidden; otherwise, `true`. @example: -grid.events.on("beforeRowHide", function(row){ +grid.events.on("beforeRowHide", (row) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforerowresize_event.md b/docs/grid/api/grid_beforerowresize_event.md index 90795178..ea0e1c70 100644 --- a/docs/grid/api/grid_beforerowresize_event.md +++ b/docs/grid/api/grid_beforerowresize_event.md @@ -10,18 +10,19 @@ description: You can explore the beforeRowResize event of Grid in the documentat @short: fires before the height of a row is changed -@signature: beforeRowResize: (row: object, events: Event, currentHeight: number) => boolean | void; +@signature: {'beforeRowResize: (row: object, event: Event, currentHeight: number) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - an object with a row configuration -- `events: Event` - a native event object +- `event: Event` - a native event object - `currentHeight: number` - the current height of the row @returns: Return `false` to block resizing of a row; otherwise, `true`. @example: -grid.events.on("beforeRowResize", function(row, events, currentHeight) { +grid.events.on("beforeRowResize", (row, event, currentHeight) => { console.log("Current row height:", currentHeight); return true; }); diff --git a/docs/grid/api/grid_beforerowshow_event.md b/docs/grid/api/grid_beforerowshow_event.md index b5225ef4..600bd2cb 100644 --- a/docs/grid/api/grid_beforerowshow_event.md +++ b/docs/grid/api/grid_beforerowshow_event.md @@ -11,13 +11,14 @@ description: You can explore the beforeRowShow event of Grid in the documentatio @signature: {'beforeRowShow: (row: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - an object with a row configuration @returns: Return `false` to prevent a row from being shown; otherwise, `true`. @example: -grid.events.on("beforeRowShow", function(row){ +grid.events.on("beforeRowShow", (row) => { // your logic here return false; }); diff --git a/docs/grid/api/grid_beforesort_event.md b/docs/grid/api/grid_beforesort_event.md index e8219075..050eaa8a 100644 --- a/docs/grid/api/grid_beforesort_event.md +++ b/docs/grid/api/grid_beforesort_event.md @@ -8,18 +8,19 @@ description: You can explore the beforeSort event of Grid in the documentation o @short: fires before a column is sorted by clicking on its header -@signature: beforeSort: (col: object, dir: string) => void | boolean; +@signature: beforeSort: (column: object, dir: string) => void | boolean; @params: -- `col: object` - an object with the configuration of a column +The callback of the event is called with the following parameters: +- `column: object` - an object with the configuration of a column - `dir: string` - the sorting direction ("desc", "asc") @returns: Return `false` to prevent a column from being sorted; otherwise, `true`. @example: -grid.events.on("beforeSort", (col, dir) => { - console.log("beforeSort", col, dir); +grid.events.on("beforeSort", (column, dir) => { + // your logic here // return false; }); diff --git a/docs/grid/api/grid_cancelcolumndrop_event.md b/docs/grid/api/grid_cancelcolumndrop_event.md index 276e5332..518abab6 100644 --- a/docs/grid/api/grid_cancelcolumndrop_event.md +++ b/docs/grid/api/grid_cancelcolumndrop_event.md @@ -10,17 +10,18 @@ description: You can explore the cancelColumnDrop event of Grid in the documenta @short: fires on moving a mouse pointer out of borders of a column while dragging the column -@signature: {'cancelColumnDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'cancelColumnDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cancelColumnDrop", function(data, events) { +grid.events.on("cancelColumnDrop", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_cancelrowdrop_event.md b/docs/grid/api/grid_cancelrowdrop_event.md index b83000a1..078190cb 100644 --- a/docs/grid/api/grid_cancelrowdrop_event.md +++ b/docs/grid/api/grid_cancelrowdrop_event.md @@ -8,17 +8,18 @@ description: You can explore the cancelRowDrop event of Grid in the documentatio @short: fires on moving a mouse pointer out of borders of a row while dragging the row -@signature: {'cancelRowDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'cancelRowDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cancelRowDrop", function(data, events) { +grid.events.on("cancelRowDrop", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_cancolumndrop_event.md b/docs/grid/api/grid_cancolumndrop_event.md index 2d0657c5..f2438d92 100644 --- a/docs/grid/api/grid_cancolumndrop_event.md +++ b/docs/grid/api/grid_cancolumndrop_event.md @@ -10,17 +10,18 @@ description: You can explore the canColumnDrop event of Grid in the documentatio @short: fires when a dragged column is placed over a target column -@signature: {'canColumnDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'canColumnDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("canColumnDrop", function(data, events) { +grid.events.on("canColumnDrop", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_canrowdrop_event.md b/docs/grid/api/grid_canrowdrop_event.md index 8814d3fa..72e73cdf 100644 --- a/docs/grid/api/grid_canrowdrop_event.md +++ b/docs/grid/api/grid_canrowdrop_event.md @@ -8,17 +8,18 @@ description: You can explore the canRowDrop event of Grid in the documentation o @short: fires when a dragged row is placed over a target row -@signature: {'canRowDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'canRowDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("canRowDrop", function(data, events) { +grid.events.on("canRowDrop", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_cellclick_event.md b/docs/grid/api/grid_cellclick_event.md index 0460ee85..6a3cf881 100644 --- a/docs/grid/api/grid_cellclick_event.md +++ b/docs/grid/api/grid_cellclick_event.md @@ -8,15 +8,16 @@ description: You can explore the cellClick event of Grid in the documentation of @short: fires on click on a grid cell -@signature: {'cellClick: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellClick: (row: object, column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - an object with a row configuration - `column: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellClick", function(row,column,e){ +grid.events.on("cellClick", (row, column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_celldblclick_event.md b/docs/grid/api/grid_celldblclick_event.md index 193ffe0d..e74e6538 100644 --- a/docs/grid/api/grid_celldblclick_event.md +++ b/docs/grid/api/grid_celldblclick_event.md @@ -8,15 +8,16 @@ description: You can explore the cellDblClick event of Grid in the documentation @short: fires on double-click on a grid cell -@signature: {'cellDblClick: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellDblClick: (row: object, column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellDblClick", function(row,column,e){ +grid.events.on("cellDblClick", (row, column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_cellmousedown_event.md b/docs/grid/api/grid_cellmousedown_event.md index d9b0b9ad..1ac626d9 100644 --- a/docs/grid/api/grid_cellmousedown_event.md +++ b/docs/grid/api/grid_cellmousedown_event.md @@ -8,15 +8,17 @@ description: You can explore the cellMouseDown event of Grid in the documentatio @short: fires before releasing the left mouse button when clicking on a grid cell -@signature: {'cellMouseDown: (row: object, col: object, e: MouseEvent & TouchEvent) => void;'} +@signature: {'cellMouseDown: (row: object, column: object, event: MouseEvent & TouchEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration - `column: object` - an object with a column configuration -- `e: MouseEvent & TouchEvent` - a native HTML event object +- `event: MouseEvent & TouchEvent` - a native HTML event object @example: -grid.events.on("cellMouseDown", function(row,column,e){ +grid.events.on("cellMouseDown", (row, column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_cellmouseover_event.md b/docs/grid/api/grid_cellmouseover_event.md index 7e2452c5..434e6de6 100644 --- a/docs/grid/api/grid_cellmouseover_event.md +++ b/docs/grid/api/grid_cellmouseover_event.md @@ -8,15 +8,15 @@ description: You can explore the cellMouseOver event of Grid in the documentatio @short: fires on moving the mouse pointer over a grid cell -@signature: {'cellMouseOver: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellMouseOver: (row: object, column: object, event: MouseEvent) => void;'} @params: - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellMouseOver", function(row,column,e){ +grid.events.on("cellMouseOver", (row, column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_cellrightclick_event.md b/docs/grid/api/grid_cellrightclick_event.md index be824e7c..03807ba1 100644 --- a/docs/grid/api/grid_cellrightclick_event.md +++ b/docs/grid/api/grid_cellrightclick_event.md @@ -6,17 +6,18 @@ description: You can explore the cellRightClick event of Grid in the documentati # cellRightClick -@short: fires on right click on a grid cell +@short: fires on the right click on a grid cell -@signature: {'cellRightClick: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellRightClick: (row: object, column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - an object with a row configuration - `column: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellRightClick", function(row,column,e){ +grid.events.on("cellRightClick", (row, column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_dragcolumnin_event.md b/docs/grid/api/grid_dragcolumnin_event.md index 75fbff8b..50ae5a2c 100644 --- a/docs/grid/api/grid_dragcolumnin_event.md +++ b/docs/grid/api/grid_dragcolumnin_event.md @@ -10,17 +10,19 @@ description: You can explore the dragColumnIn event of Grid in the documentation @short: fires when a column is dragged to another potential target -@signature: {'dragColumnIn: (data: object, events: MouseEvent) => void;'} +@signature: {'dragColumnIn: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("dragColumnIn", function(data, events) { +grid.events.on("dragColumnIn", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_dragcolumnout_event.md b/docs/grid/api/grid_dragcolumnout_event.md index 92fe39de..7986cc06 100644 --- a/docs/grid/api/grid_dragcolumnout_event.md +++ b/docs/grid/api/grid_dragcolumnout_event.md @@ -10,17 +10,19 @@ description: You can explore the dragColumnOut event of Grid in the documentatio @short: fires when a column is dragged out of a potential target -@signature: {'dragColumnOut: (data: object, events: MouseEvent) => void;'} +@signature: {'dragColumnOut: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("dragColumnOut", function(data, events) { +grid.events.on("dragColumnOut", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_dragcolumnstart_event.md b/docs/grid/api/grid_dragcolumnstart_event.md index 0982aaf4..d1539b66 100644 --- a/docs/grid/api/grid_dragcolumnstart_event.md +++ b/docs/grid/api/grid_dragcolumnstart_event.md @@ -10,17 +10,19 @@ description: You can explore the dragColumnStart event of Grid in the documentat @short: fires when dragging of a column has started -@signature: {'dragColumnStart: (data: object, events: MouseEvent) => void;'} +@signature: {'dragColumnStart: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("dragColumnStart", function(data, events) { +grid.events.on("dragColumnStart", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_dragrowin_event.md b/docs/grid/api/grid_dragrowin_event.md index fd37acdb..c813fdea 100644 --- a/docs/grid/api/grid_dragrowin_event.md +++ b/docs/grid/api/grid_dragrowin_event.md @@ -8,17 +8,19 @@ description: You can explore the dragRowIn event of Grid in the documentation of @short: fires when a row is dragged to another potential target -@signature: {'dragRowIn: (data: object, events: MouseEvent) => void;'} +@signature: {'dragRowIn: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("dragRowIn", function(data, events) { +grid.events.on("dragRowIn", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_dragrowout_event.md b/docs/grid/api/grid_dragrowout_event.md index d9e3e47f..f733d89d 100644 --- a/docs/grid/api/grid_dragrowout_event.md +++ b/docs/grid/api/grid_dragrowout_event.md @@ -8,17 +8,19 @@ description: You can explore the dragRowOut event of Grid in the documentation o @short: fires when a row is dragged out of a potential target -@signature: {'dragRowOut: (data: object, events: MouseEvent) => void;'} +@signature: {'dragRowOut: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("dragRowOut", function(data, events) { +grid.events.on("dragRowOut", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_dragrowstart_event.md b/docs/grid/api/grid_dragrowstart_event.md index 7c654e21..d8e58137 100644 --- a/docs/grid/api/grid_dragrowstart_event.md +++ b/docs/grid/api/grid_dragrowstart_event.md @@ -8,17 +8,19 @@ description: You can explore the dragRowStart event of Grid in the documentation @short: fires when dragging of a row has started -@signature: {'dragRowStart: (data: object, events: MouseEvent) => void;'} +@signature: {'dragRowStart: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("dragRowStart", function(data, events) { +grid.events.on("dragRowStart", (data, event) => { // your logic here }); diff --git a/docs/grid/api/grid_editcell_method.md b/docs/grid/api/grid_editcell_method.md index 9c7640d3..87b756d2 100644 --- a/docs/grid/api/grid_editcell_method.md +++ b/docs/grid/api/grid_editcell_method.md @@ -16,7 +16,7 @@ description: You can explore the editCell method of Grid in the documentation of - `editorType: string` - optional, the type of an editor used in a cell: "input" | "select" | "datePicker" | "checkbox" | "combobox" | "textarea" | "multiselect" @example: -grid.editCell(grid.data.getId(0),"project"); +grid.editCell(grid.data.getId(0), "project"); @descr: diff --git a/docs/grid/api/grid_eventhandlers_config.md b/docs/grid/api/grid_eventhandlers_config.md index a043b76b..a84b2cc5 100644 --- a/docs/grid/api/grid_eventhandlers_config.md +++ b/docs/grid/api/grid_eventhandlers_config.md @@ -11,7 +11,7 @@ description: You can explore the eventHandlers config of Grid in the documentati ~~~js eventHandlers?: { [eventName: string]: { - [className: string]: (events: Event, item: object) => void; + [className: string]: (event: Event, item: object) => void; }; }; ~~~ @@ -27,7 +27,7 @@ The **eventHandlers** object includes a set of `key:value` pairs, where: value - an object that contains a key:value pair, where:
  1. key is the CSS class name that the handler will be applied to
  2. value is a function that takes two parameters:
+ an object that contains a key:value pair, where:
  1. key is the CSS class name that the handler will be applied to
  2. value is a function that takes two parameters:
@@ -38,7 +38,7 @@ const grid = new dhx.Grid("grid_container", { { width: 200, id: "country", header: [{ text: "Country", css: "header_country" }] }, { width: 150, id: "netChange", header: [{text: "Net Change"}], // define a custom template for the column's cells - template: function (text, row, col) { + template: (text, row, column) => { return "
3000000 ? "checked" : "") + " >
"; } @@ -50,13 +50,13 @@ const grid = new dhx.Grid("grid_container", { eventHandlers: { // add an event handler to the header cell onclick: { - header_country: function(event, data) { + header_country: (event, data) => { console.log(JSON.stringify(data.col, null, 2)); } }, // add an event handler to the HTML element of the custom template of cells onmouseover: { - cell__template: function(event, data) { + cell__template: (event, data) => { console.log(JSON.stringify(data.row, null, 2)); } } , @@ -90,12 +90,12 @@ const grid = new dhx.Grid("grid_container", { data: data, eventHandlers: { onclick: { - cell__html: function(event, data) { + cell__html: (event, data) => { console.log(JSON.stringify(data.col, null, 2)); }, }, onmouseover: { - cell__html: function(event) { + cell__html: (event) => { console.log("You are over " + event.target.tagName); }, } diff --git a/docs/grid/api/grid_filterchange_event.md b/docs/grid/api/grid_filterchange_event.md index 9797e205..3b125af5 100644 --- a/docs/grid/api/grid_filterchange_event.md +++ b/docs/grid/api/grid_filterchange_event.md @@ -11,12 +11,14 @@ description: You can explore the filterChange event of Grid in the documentation @signature: {'filterChange: (value: string, colId: string | number, filterId: string) => void;'} @params: +The callback of the event is called with the following parameters: + - `value: string` - an entered value - `colId: string | number` - the id of a column - `filterId: string` - the type of a filter: "inputFilter" | "selectFilter" | "comboFilter" @example: -grid.events.on("filterChange", function(value,colId,filterId){ +grid.events.on("filterChange", (value, colId, filterId) => { console.log("You've entered "+value+" into the "+colId+" column"); }); diff --git a/docs/grid/api/grid_footercellclick_event.md b/docs/grid/api/grid_footercellclick_event.md index ca1f933a..5940a1c4 100644 --- a/docs/grid/api/grid_footercellclick_event.md +++ b/docs/grid/api/grid_footercellclick_event.md @@ -6,16 +6,18 @@ description: You can explore the footerCellClick event of Grid in the documentat # footerCellClick -@short: fires on click on a grid footer cell +@short: fires on a click on a grid footer cell -@signature: {'footerCellClick: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellClick", function(col,e){ +grid.events.on("footerCellClick", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_footercelldblclick_event.md b/docs/grid/api/grid_footercelldblclick_event.md index 920e27fd..868c9fd8 100644 --- a/docs/grid/api/grid_footercelldblclick_event.md +++ b/docs/grid/api/grid_footercelldblclick_event.md @@ -6,16 +6,18 @@ description: You can explore the footerCellDblClick event of Grid in the documen # footerCellDblClick -@short: fires on double-click on a grid footer cell +@short: fires on a double-click on a grid footer cell -@signature: {'footerCellDblClick: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellDblClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellDblClick", function(col,e){ +grid.events.on("footerCellDblClick", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_footercellmousedown_event.md b/docs/grid/api/grid_footercellmousedown_event.md index 326db727..c63cbc51 100644 --- a/docs/grid/api/grid_footercellmousedown_event.md +++ b/docs/grid/api/grid_footercellmousedown_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellMouseDown event of Grid in the docume @short: fires on moving the mouse pointer over a grid footer cell -@signature: {'footerCellMouseDown: (col: object, e: MouseEvent & TouchEvent) => void;'} +@signature: {'footerCellMouseDown: (column: object, event: MouseEvent & TouchEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent & TouchEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent & TouchEvent` - a native HTML event object @example: -grid.events.on("footerCellMouseDown", function(col,e){ +grid.events.on("footerCellMouseDown", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_footercellmouseover_event.md b/docs/grid/api/grid_footercellmouseover_event.md index 6fbc0e6d..536ab45e 100644 --- a/docs/grid/api/grid_footercellmouseover_event.md +++ b/docs/grid/api/grid_footercellmouseover_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellMouseOver event of Grid in the docume @short: fires on moving the mouse pointer over a grid footer cell -@signature: {'footerCellMouseOver: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellMouseOver: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellMouseOver ", function(col,e){ +grid.events.on("footerCellMouseOver ", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_footercellrightclick_event.md b/docs/grid/api/grid_footercellrightclick_event.md index 8746f0d7..52b53e06 100644 --- a/docs/grid/api/grid_footercellrightclick_event.md +++ b/docs/grid/api/grid_footercellrightclick_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellRightClick event of Grid in the docum @short: fires on right click on a grid footer cell -@signature: {'footerCellRightClick: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellRightClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellRightClick", function(col,e){ +grid.events.on("footerCellRightClick", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_getcellrect_method.md b/docs/grid/api/grid_getcellrect_method.md index 4db9152a..8ee28b2e 100644 --- a/docs/grid/api/grid_getcellrect_method.md +++ b/docs/grid/api/grid_getcellrect_method.md @@ -18,7 +18,7 @@ description: You can explore the getCellRect method of Grid in the documentation An object with parameters of a cell. @example: -const rect = grid.getCellRect("1","c"); +const rect = grid.getCellRect("1", "c"); // -> {x: 200, y: -40, height: 40, width: 200} @descr: diff --git a/docs/grid/api/grid_getscrollstate_method.md b/docs/grid/api/grid_getscrollstate_method.md index 6655ded5..e6cd9398 100644 --- a/docs/grid/api/grid_getscrollstate_method.md +++ b/docs/grid/api/grid_getscrollstate_method.md @@ -14,7 +14,7 @@ description: You can explore the getScrollState method of Grid in the documentat An object with x,y coordinates of a position the grid has been scrolled to. @example: -const state = grid.getScrollState(); // -> {x:0,y:0} +const state = grid.getScrollState(); // -> { x:0, y:0 } @descr: diff --git a/docs/grid/api/grid_getspan_method.md b/docs/grid/api/grid_getspan_method.md index 40a513ff..aac78d5a 100644 --- a/docs/grid/api/grid_getspan_method.md +++ b/docs/grid/api/grid_getspan_method.md @@ -15,11 +15,11 @@ description: You can explore the getSpan method of Grid in the documentation of - `colId: string | number` - the id of a column @returns: -An object with configuration of a span. +An object with the configuration of a span. @example: -const span = grid.getSpan("10","a"); -// -> {row:"10", column:"a", colspan:4, text:"Some header", css:"myCustomColspan"} +const span = grid.getSpan("10", "a"); +// -> { row: "10", column: "a", colspan: 4, text: "Some header", css: "myCustomColspan" } @descr: diff --git a/docs/grid/api/grid_headercellclick_event.md b/docs/grid/api/grid_headercellclick_event.md index 7c4a0765..2ff91e22 100644 --- a/docs/grid/api/grid_headercellclick_event.md +++ b/docs/grid/api/grid_headercellclick_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellClick event of Grid in the documentat @short: fires on click on a grid header cell -@signature: {'headerCellClick: (col: object, events: MouseEvent) => void;'} +@signature: {'headerCellClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `events: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellClick", function(col,e){ +grid.events.on("headerCellClick", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_headercelldblclick_event.md b/docs/grid/api/grid_headercelldblclick_event.md index 93d30bb0..cadc428b 100644 --- a/docs/grid/api/grid_headercelldblclick_event.md +++ b/docs/grid/api/grid_headercelldblclick_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellDblClick event of Grid in the documen @short: fires on double-click on a grid footer cell -@signature: {'headerCellDblClick: (col: object, events: MouseEvent) => void;'} +@signature: {'headerCellDblClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `events: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellDblClick", function(col,e){ +grid.events.on("headerCellDblClick", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_headercellmousedown_event.md b/docs/grid/api/grid_headercellmousedown_event.md index a4c0263b..3e21ef57 100644 --- a/docs/grid/api/grid_headercellmousedown_event.md +++ b/docs/grid/api/grid_headercellmousedown_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellMouseDown event of Grid in the docume @short: fires on moving the mouse pointer over a grid header cell -@signature: {'headerCellMouseDown: (col: object, events: MouseEvent & TouchEvent) => void;'} +@signature: {'headerCellMouseDown: (column: object, event: MouseEvent & TouchEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `events: MouseEvent & TouchEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent & TouchEvent` - a native HTML event object @example: -grid.events.on("headerCellMouseDown", function(col,e){ +grid.events.on("headerCellMouseDown", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_headercellmouseover_event.md b/docs/grid/api/grid_headercellmouseover_event.md index ea363319..1ad2e0ed 100644 --- a/docs/grid/api/grid_headercellmouseover_event.md +++ b/docs/grid/api/grid_headercellmouseover_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellMouseOver event of Grid in the docume @short: fires on moving the mouse pointer over a grid header cell -@signature: {'headerCellMouseOver: (col: object, events: MouseEvent) => void;'} +@signature: {'headerCellMouseOver: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `events: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellMouseOver", function(col,e){ +grid.events.on("headerCellMouseOver", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_headercellrightclick_event.md b/docs/grid/api/grid_headercellrightclick_event.md index 45d2123b..4c8bf1dc 100644 --- a/docs/grid/api/grid_headercellrightclick_event.md +++ b/docs/grid/api/grid_headercellrightclick_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellRightClick event of Grid in the docum @short: fires on right click on a grid header cell -@signature: {'headerCellRightClick: (col: object, events: MouseEvent) => void;'} +@signature: {'headerCellRightClick: (column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `column: object` - an object with a column configuration -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellRightClick", function(col,e){ +grid.events.on("headerCellRightClick", (column, event) => { // your logic here }); diff --git a/docs/grid/api/grid_hidecolumn_method.md b/docs/grid/api/grid_hidecolumn_method.md index 208e9b14..91681095 100644 --- a/docs/grid/api/grid_hidecolumn_method.md +++ b/docs/grid/api/grid_hidecolumn_method.md @@ -14,7 +14,7 @@ description: You can explore the hideColumn method of Grid in the documentation - `colId: string | number` - the id of a column @example: -grid.hideColumn(col); +grid.hideColumn("colId"); @descr: diff --git a/docs/grid/api/grid_resize_event.md b/docs/grid/api/grid_resize_event.md index 78840137..d27afb7a 100644 --- a/docs/grid/api/grid_resize_event.md +++ b/docs/grid/api/grid_resize_event.md @@ -8,14 +8,16 @@ description: You can explore the resize event of Grid in the documentation of th @short: fires on resizing a column -@signature: {'resize: (col: object, events: MouseEvent) => void;'} +@signature: {'resize: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `events: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("resize", function(col,e){ +grid.events.on("resize", (column, event) => { // your code here }); diff --git a/docs/grid/api/grid_rowcss_config.md b/docs/grid/api/grid_rowcss_config.md index d0f8f13d..52e1b2d6 100644 --- a/docs/grid/api/grid_rowcss_config.md +++ b/docs/grid/api/grid_rowcss_config.md @@ -21,7 +21,7 @@ const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], - rowCss: function (row) { return row.custom ? "my_custom_row" : "" }, + rowCss: (row) => { return row.custom ? "my_custom_row" : "" }, data: dataset }); diff --git a/docs/grid/api/grid_scroll_event.md b/docs/grid/api/grid_scroll_event.md index 2279f6a2..edda564a 100644 --- a/docs/grid/api/grid_scroll_event.md +++ b/docs/grid/api/grid_scroll_event.md @@ -11,11 +11,13 @@ description: You can explore the scroll event of Grid in the documentation of th @signature: {'scroll: (scrollState: object) => void;'} @params: -- `scrollState: object` - an object with new top and left coordinates +The callback of the event is called with the following parameter: + +- `scrollState: object` - an object with the new top and left coordinates @example: -grid.events.on("scroll", function({top,left}){ - console.log("The grid is scrolled to "+top,left); +grid.events.on("scroll", ({ top, left }) => { + console.log("The grid is scrolled to ", top, left); }); @descr: diff --git a/docs/grid/api/grid_scroll_method.md b/docs/grid/api/grid_scroll_method.md index 909df450..a1324829 100644 --- a/docs/grid/api/grid_scroll_method.md +++ b/docs/grid/api/grid_scroll_method.md @@ -15,7 +15,7 @@ description: You can explore the scroll method of Grid in the documentation of t - `y: number` - the Y coordinate @example: -grid.scroll(75,230); +grid.scroll(75, 230); @descr: diff --git a/docs/grid/api/grid_scrollto_method.md b/docs/grid/api/grid_scrollto_method.md index 46e45357..094d7631 100644 --- a/docs/grid/api/grid_scrollto_method.md +++ b/docs/grid/api/grid_scrollto_method.md @@ -15,7 +15,7 @@ description: You can explore the scrollTo method of Grid in the documentation of - `colId: string | number` - the id of a column @example: -grid.scrollTo("15","c"); +grid.scrollTo("15", "c"); @descr: diff --git a/docs/grid/api/grid_showcolumn_method.md b/docs/grid/api/grid_showcolumn_method.md index d693239e..690b4c5a 100644 --- a/docs/grid/api/grid_showcolumn_method.md +++ b/docs/grid/api/grid_showcolumn_method.md @@ -14,7 +14,7 @@ description: You can explore the showColumn method of Grid in the documentation - `colId: string | number` - the id of a column @example: -grid.showColumn(col); +grid.showColumn("colId"); @descr: diff --git a/docs/grid/api/selection/selection_afterselect_event.md b/docs/grid/api/selection/selection_afterselect_event.md index 426b00f2..d49863c1 100644 --- a/docs/grid/api/selection/selection_afterselect_event.md +++ b/docs/grid/api/selection/selection_afterselect_event.md @@ -8,24 +8,25 @@ description: You can explore the afterSelect event of Grid in the documentation @short: fires after selecting a cell -@signature: {'afterSelect: (row: object, col: object) => void;'} +@signature: {'afterSelect: (row: object, column: object) => void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @example: -grid.selection.events.on("AfterSelect", function(row, col){ - console.log("afterSelect", row, col); +grid.selection.events.on("AfterSelect", (row, column) => { + console.log("afterSelect", row, column); }); @descr: It is also possible to use the simplified version of the event: ~~~js -grid.events.on("AfterSelect", function(row, col){ - console.log("afterSelect", row, col); +grid.events.on("AfterSelect", (row, column) => { + console.log("afterSelect", row, column); }); ~~~ diff --git a/docs/grid/api/selection/selection_afterunselect_event.md b/docs/grid/api/selection/selection_afterunselect_event.md index 2eda7792..7d2936f4 100644 --- a/docs/grid/api/selection/selection_afterunselect_event.md +++ b/docs/grid/api/selection/selection_afterunselect_event.md @@ -8,24 +8,25 @@ description: You can explore the afterUnSelect event of Grid in the documentatio @short: fires after unselecting a cell -@signature: {'afterUnSelect: (row: object, col: object) => void;'} +@signature: {'afterUnSelect: (row: object, column: object) => void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @example: -grid.selection.events.on("AfterUnSelect", function(row, col){ - console.log("afterUnSelect", row, col); +grid.selection.events.on("AfterUnSelect", (row, column) => { + console.log("afterUnSelect", row, column); }); @descr: It is also possible to use the simplified version of the event: ~~~js -grid.events.on("AfterUnSelect", function(row, col){ - console.log("afterUnSelect", row, col); +grid.events.on("AfterUnSelect", (row, column) => { + console.log("afterUnSelect", row, column); }); ~~~ diff --git a/docs/grid/api/selection/selection_beforeselect_event.md b/docs/grid/api/selection/selection_beforeselect_event.md index a9435a7e..84ded838 100644 --- a/docs/grid/api/selection/selection_beforeselect_event.md +++ b/docs/grid/api/selection/selection_beforeselect_event.md @@ -8,19 +8,20 @@ description: You can explore the beforeSelect event of Grid in the documentation @short: fires before selecting a cell -@signature: {'beforeSelect: (row: object, col: object) => boolean | void;'} +@signature: {'beforeSelect: (row: object, column: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @returns: Return `false` to prevent selecting of a cell; otherwise, `true`. @example: -grid.selection.events.on("BeforeSelect", function(row, col){ - console.log("beforeSelect", row, col); +grid.selection.events.on("BeforeSelect", (row, column) => { + console.log("beforeSelect", row, column); return false; }); @@ -28,8 +29,8 @@ grid.selection.events.on("BeforeSelect", function(row, col){ It is also possible to use the simplified version of the event: ~~~js -grid.events.on("BeforeSelect", function(row, col){ - console.log("beforeSelect", row, col); +grid.events.on("BeforeSelect", (row, column) => { + console.log("beforeSelect", row, column); return false; }); ~~~ diff --git a/docs/grid/api/selection/selection_beforeunselect_event.md b/docs/grid/api/selection/selection_beforeunselect_event.md index 229aab3c..e34bf6a2 100644 --- a/docs/grid/api/selection/selection_beforeunselect_event.md +++ b/docs/grid/api/selection/selection_beforeunselect_event.md @@ -8,19 +8,20 @@ description: You can explore the beforeUnSelect event of Grid in the documentati @short: fires before unselecting a cell -@signature: {'beforeUnSelect: (row: object, col: object) => boolean | void;'} +@signature: {'beforeUnSelect: (row: object, column: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @returns: Return `false` to prevent unselecting of a cell; otherwise, `true`. @example: -grid.selection.events.on("BeforeUnSelect", function(row, col){ - console.log("beforeUnSelect", row, col); +grid.selection.events.on("BeforeUnSelect", (row, column) => { + console.log("beforeUnSelect", row, column); return false; }); @@ -28,8 +29,8 @@ grid.selection.events.on("BeforeUnSelect", function(row, col){ It is also possible to use the simplified version of the event: ~~~js -grid.events.on("BeforeUnSelect", function(row, col){ - console.log("beforeUnSelect", row, col); +grid.events.on("BeforeUnSelect", (row, column) => { + console.log("beforeUnSelect", row, column); return false; }); ~~~ diff --git a/docs/grid/api/selection/selection_setcell_method.md b/docs/grid/api/selection/selection_setcell_method.md index 455f5628..ba8fcb2e 100644 --- a/docs/grid/api/selection/selection_setcell_method.md +++ b/docs/grid/api/selection/selection_setcell_method.md @@ -8,7 +8,7 @@ description: You can explore the setCell method of Grid in the documentation of @short: sets selection to specified cells -@signature: {'setCell(row?: object | string | number, col?: object | string | number, ctrlUp?: boolean, shiftUp?: boolean): void;'} +@signature: {'setCell(row?: object | string | number, column?: object | string | number, ctrlUp?: boolean, shiftUp?: boolean): void;'} @params: - `row: object | string | number` - an object with a cell to be selected or the id of a row diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 2a530d9e..3c141718 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -733,7 +733,7 @@ Or define unique lists of options for different column cells. For that, use a fu id: "select_example", header: [{ text: "Select example" }], editorType: "select", - options: (col, row) => getCurrentOptions(row), + options: (column, row) => getCurrentOptions(row), }, ~~~ @@ -778,7 +778,7 @@ Or define unique lists of options for different column cells. For that, use a fu header: [{ text: "Multiselect example" }], type: "string", editorType: "multiselect", - options: (col, row) => getCurrentOptions(row), + options: (column, row) => getCurrentOptions(row), minWidth: 360 }, ~~~ @@ -849,7 +849,7 @@ Or define unique lists of options for different column cells. For that, use a fu id: "combobox_example", header: [{ text: "Combobox example" }], editorType: "combobox", - options: (col, row) => getCurrentOptions(row), + options: (column, row) => getCurrentOptions(row), minWidth: 160 }, ~~~ diff --git a/docs/grid/customization.md b/docs/grid/customization.md index 21a058a4..01c7a893 100644 --- a/docs/grid/customization.md +++ b/docs/grid/customization.md @@ -239,7 +239,7 @@ It is easy to style necessary cells using the **addCellCss()** method. It takes (string,number) the id of a row - col + column (string,number) the id of a column @@ -294,7 +294,7 @@ You can mark particular cells in a grid using the **mark** property of a column (object) an object with all cells in a row - col + column (object) the config of a column (see the columns config) @@ -319,7 +319,7 @@ The function should return a string with a custom CSS class for your mark. { id: "population", header: [{ text: "Population" }], // marks specified cells in a column - mark: function (cell, data, row, col) { + mark: function (cell, data, row, column) { return cell > 100000000 ? "my_custom_mark" : "" } }, @@ -404,7 +404,7 @@ It is possible to customize the content of cells of Grid via the **template** pr (object) an object with all cells in a row - col + column (object) the config of a column @@ -418,7 +418,7 @@ const grid = new dhx.Grid("grid_container", { { width: 150, id: "population", header: [{text: "Population"}] }, { width: 150, id: "netChange", header: [{text: "Net Change"}], htmlEnable: true, - template: function (text, row, col) { + template: function (text, row, column) { return " 300000 ? "checked": "") + ">"; } } @@ -440,7 +440,7 @@ const grid = new dhx.Grid("grid_container", { { width: 150, id: "netChange", header: [{text: "Net Change"}], htmlEnable: true, tooltip: false, - template: function (text, row, col) { + template: function (text, row, column) { return "
3000000 ? "checked" : "") + " >
"; } @@ -477,7 +477,7 @@ Starting with v7.1, you can customize the content of the tooltip of a column via (object) an object with all cells in a row - col + column (object) the config of a column @@ -490,7 +490,7 @@ const grid = new dhx.Grid("grid_container", { { width: 200, id: "country", header: [{ text: "Country" }], align: "left", htmlEnable: true, - tooltipTemplate: function (value, row, col) { + tooltipTemplate: function (value, row, column) { if (row.country === "Bangladesh") { return false; // prevent a tooltip from being shown } diff --git a/docs/grid/usage.md b/docs/grid/usage.md index fac0ebc4..0160025e 100644 --- a/docs/grid/usage.md +++ b/docs/grid/usage.md @@ -30,7 +30,7 @@ It is possible to return an object with attributes of a column via its id. Use t ~~~js const column = grid.getColumn("b"); // -> -// {width: 100, id: "b", header: Array(1), $cellCss: {…}, type: "string"} +// -> { width: 100, id: "b", header: Array(1), $cellCss: {…}, type: "string" } ~~~ The method returns an object with configuration of the specified column. You can find the list of properties that the return object can contain [here](grid/api/grid_getcolumn_method.md). @@ -40,8 +40,8 @@ The method returns an object with configuration of the specified column. You can There is the [](grid/api/grid_getcellrect_method.md) method that returns an object with coordinates of a cell. The method takes as parameters the ids of the row and the column the cell belongs to: ~~~js -const rect = grid.getCellRect("1","c"); -// -> {x: 200, y: -40, height: 40, width: 200} +const rect = grid.getCellRect("1", "c"); +// -> { x: 200, y: -40, height: 40, width: 200 } ~~~ The return object includes the following attributes: @@ -73,9 +73,9 @@ It is possible to show and hide a column in the grid via the [](grid/api/grid_sh ~~~js //showing a column -grid.showColumn(col); +grid.showColumn(colId); //hiding a column -grid.hideColumn(col); +grid.hideColumn(colId); ~~~ **Related sample**: [Grid. Show / hide column](https://snippet.dhtmlx.com/n4zjwsqj) @@ -198,7 +198,7 @@ You can manipulate columns and rows spans inside the grid with the help of the c ### Adding spans -In order to add a col/row span into the grid, use the [](grid/api/grid_addspan_method.md) method. Pass an object with configuration of a span as a parameter: +In order to add a column/row span into the grid, use the [](grid/api/grid_addspan_method.md) method. Pass an object with configuration of a span as a parameter: ~~~js grid.addSpan({ @@ -242,11 +242,11 @@ These are possible fields of a span object: ### Getting spans -You can return the col/row span a cell is a part of using the [](grid/api/grid_getspan_method.md) method. It takes the ids of the row and the column the cell belongs to as parameters: +You can return the column/row span a cell is a part of using the [](grid/api/grid_getspan_method.md) method. It takes the ids of the row and the column the cell belongs to as parameters: ~~~js -const span = grid.getSpan("10","a"); -// -> {row:"10", column:"a", colspan:4, text:"Some header", css:"myCustomColspan"} +const span = grid.getSpan("10", "a"); +// -> { row: "10", column: "a", colspan: 4, text: "Some header", css: "myCustomColspan" } ~~~ As a result, you'll get an object with a span configuration, if any span includes the specified cell. Attributes of a span object are described above. @@ -256,7 +256,7 @@ As a result, you'll get an object with a span configuration, if any span include To remove an existing span, make use of the [](grid/api/grid_removespan_method.md) method. It takes the ids of the row and the column as parameters: ~~~js -grid.removeSpan("10","a"); +grid.removeSpan("10", "a"); ~~~ ## Working with data @@ -369,7 +369,7 @@ To get the current state of sorting data in Grid, use the [](grid/api/grid_getso ~~~js const state = grid.getSortingState(); -// -> {dir: "desc", by: "country"} +// -> { dir: "desc", by: "country" } ~~~ **Related sample**: [Grid. Get sorting state](https://snippet.dhtmlx.com/u2vk3ri3) @@ -381,11 +381,11 @@ You can easily edit the desired cell of a grid with the help of the [](grid/api/ - + - + @@ -394,7 +394,7 @@ You can easily edit the desired cell of a grid with the help of the [](grid/api/ For example, you can edit the first cell of the "project" column like this: ~~~js -grid.editCell(grid.data.getId(0),"project"); +grid.editCell(grid.data.getId(0), "project"); ~~~ **Related sample**: [Grid. Edit the first cell](https://snippet.dhtmlx.com/pqbax5vs) @@ -480,7 +480,7 @@ The API of DHTMLX Grid provides the possibility to set scrolls to the necessary You can scroll grid content to exact position defined by x and y coordinates via the [](grid/api/grid_scroll_method.md) method. Pass the coordinates as parameters of the method. ~~~js -grid.scroll(75,230); +grid.scroll(75, 230); ~~~ ### Scrolling to specific grid cell @@ -488,7 +488,7 @@ grid.scroll(75,230); It is also possible to scroll grid content to a particular cell. Pass the ids of the row and the column as parameters: ~~~js -grid.scrollTo("15","c"); +grid.scrollTo("15", "c"); ~~~ **Related sample**: [Grid. Controlling scroll behavior](https://snippet.dhtmlx.com/usu1rnpu) @@ -498,7 +498,7 @@ grid.scrollTo("15","c"); To return the current state of scroll, use the [](grid/api/grid_getscrollstate_method.md) method. ~~~js -const state = grid.getScrollState(); // -> {x:0,y:0} +const state = grid.getScrollState(); // -> {x:0, y:0} ~~~ It returns an object with x,y coordinates of a position the grid has been scrolled to. diff --git a/docs/treegrid/api/api_treegridcolumn_properties.md b/docs/treegrid/api/api_treegridcolumn_properties.md index 130c43c7..7d00b4b8 100644 --- a/docs/treegrid/api/api_treegridcolumn_properties.md +++ b/docs/treegrid/api/api_treegridcolumn_properties.md @@ -20,7 +20,7 @@ columns:[ { text?: string | number, tooltip?: boolean | object, - tooltipTemplate?: (value: string | undefined, header: IHeader, col: ICol) => string | boolean, + tooltipTemplate?: (value: string | undefined, header: object, column: object) => string | boolean, align?: "left" | "center" | "right", colspan?: number, rowspan?: number, @@ -44,7 +44,7 @@ columns:[ { text?: string | number, tooltip?: boolean | object, - tooltipTemplate?: (value: string | undefined, header: IHeader, col: ICol) => string | boolean, + tooltipTemplate?: (value: string | undefined, footer: object, column: object) => string | boolean, css?: any, content?: "inputFilter" | "selectFilter" | "comboFilter" | "avg" | "sum" | "max" | "min" | "count" | string, @@ -56,7 +56,7 @@ columns:[ editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "textarea", format?: string, options?: (string | { id: string | number, value: string })[] | - (col: object, row?: object) => (string | { id: string | number, value: string })[], + (column: object, row?: object) => (string | { id: string | number, value: string })[], editorConfig?: obj, adjust?: "data" | "header" | "footer" | boolean, align?: "left" | "center" | "right", @@ -68,9 +68,9 @@ columns:[ sortable?: boolean, mark?: { min?: string, max?: string } | (cell: any, columnCells: any[], row?: object, column?: object) => string, - template?: (cellValue: any, row: object, col: object) => string, + template?: (cellValue: any, row: object, column: object) => string, tooltip?: boolean | object, - tooltipTemplate?: (cellValue: any, row: object, col: object) => string, + tooltipTemplate?: (cellValue: any, row: object, column: object) => string, }, // more column objects ] @@ -122,7 +122,7 @@ columns:[ - + @@ -162,11 +162,11 @@ columns:[ - + - + @@ -174,7 +174,7 @@ columns:[ - +
rowrowId (string, number) the id of a row
colcolId (string, number) the id of a column
options(optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify editorType: "select" | "combobox" | "multiselect". The property can be:
  • an array of string values
  • an array of objects with a set of key:value pairs - attributes of options and their values:
      The id attribute sets the id for the option
      The value attribute sets the value to be displayed both in the editor and in the treegrid cell. If the id of the option is specified in the data set, the value will also be displayed in the cell on TreeGrid initialization
  • a function which takes two parameters:
      col - (required) an object with the configuration of a column
      row - (optional) an object with all cells in a row
    and must return either an array of string values or an array of objects
Related Samples:If newOptions property is enabled, all new options will be displayed in the editor regardless of the initialized options.		(optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify editorType: "select" | "combobox" | "multiselect". The property can be:
  • an array of string values
  • an array of objects with a set of key:value pairs - attributes of options and their values:
      The id attribute sets the id for the option
      The value attribute sets the value to be displayed both in the editor and in the treegrid cell. If the id of the option is specified in the data set, the value will also be displayed in the cell on TreeGrid initialization
  • a function which takes two parameters:
      column - (required) an object with the configuration of a column
      row - (optional) an object with all cells in a row
    and must return either an array of string values or an array of objects
Related Samples:If newOptions property is enabled, all new options will be displayed in the editor regardless of the initialized options.
editorConfig
mark(optional) can be either an object or a function:
  • as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
  • as a function returns a template for marking a cell(s) and takes several parameters:
    • cell - (required) the value of a cell
    • columnCells - (required) an array of all cell values in the specified column
    • row - (optional) an object with all cells in a row
    • col - (optional) an object with the configuration of a column (see the columns config)
(optional) can be either an object or a function:
  • as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
  • as a function returns a template for marking a cell(s) and takes several parameters:
    • cell - (required) the value of a cell
    • columnCells - (required) an array of all cell values in the specified column
    • row - (optional) an object with all cells in a row
    • column - (optional) an object with the configuration of a column (see the columns config)
template(optional) a function which returns a template with content for a cell(s). Takes 3 parameters:
  • cellValue - (required) the value of a cell
  • row - (required) an object with all cells in a row
  • col - (required) an object with the configuration of a column (see the columns config)
(optional) a function which returns a template with content for a cell(s). Takes 3 parameters:
  • cellValue - (required) the value of a cell
  • row - (required) an object with all cells in a row
  • column - (required) an object with the configuration of a column (see the columns config)
tooltip
tooltipTemplate(optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:
  • value - (required) the value of a cell
  • row - (required) an object with all cells in a row
  • col - (required) an object with the configuration of a column (see the columns config)
(optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:
  • value - (required) the value of a cell
  • row - (required) an object with all cells in a row
  • column - (required) an object with the configuration of a column (see the columns config)
diff --git a/docs/treegrid/api/headerfilter/getfilter_method.md b/docs/treegrid/api/headerfilter/getfilter_method.md index 68ed744f..4d813d1e 100644 --- a/docs/treegrid/api/headerfilter/getfilter_method.md +++ b/docs/treegrid/api/headerfilter/getfilter_method.md @@ -17,14 +17,14 @@ Either an HTML object or an object with Combobox configuration const filter1 = treegrid.getHeaderFilter("name").getFilter(); console.log(filter1); // -> returns Combobox -//  {config: {…}, _uid: 'u1670576316762', events: o, data: d, popup: f, …} +//  { config: {…}, _uid: 'u1670576316762', events: o, data: d, popup: f, … } const filter2 = treegrid.getHeaderFilter("native").getFilter(); console.log(filter2); // -> returns an HTML object -// {type: 1, attrs: {…}, tag: 'label', _class: 'dhx_grid-filter__label dxi dxi-menu-down', -// ref: 'native_filter', …} +// { type: 1, attrs: {…}, tag: 'label', _class: 'dhx_grid-filter__label dxi dxi-menu-down', +// ref: 'native_filter', … } @changelog: added in v8.0 \ No newline at end of file diff --git a/docs/treegrid/api/selection/selection_afterselect_event.md b/docs/treegrid/api/selection/selection_afterselect_event.md index 7b2c6b83..9f2c0608 100644 --- a/docs/treegrid/api/selection/selection_afterselect_event.md +++ b/docs/treegrid/api/selection/selection_afterselect_event.md @@ -8,15 +8,17 @@ description: You can explore the afterSelect event of TreeGrid in the documentat @short: fires after selecting a cell -@signature: {'afterSelect: (row: object, col: object) => void;'} +@signature: {'afterSelect: (row: object, column: object) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @example: -treegrid.selection.events.on("afterSelect", function(row, col){ - console.log("afterSelect", row, col); +treegrid.selection.events.on("afterSelect", (row, column) => { + console.log("afterSelect", row, column); }); @descr: @@ -24,8 +26,8 @@ treegrid.selection.events.on("afterSelect", function(row, col){ It is also possible to use the simplified version of the event: ~~~js -treegrid.events.on("afterSelect", function(row, col){ - console.log("afterSelect", row, col); +treegrid.events.on("afterSelect", (row, column) => { + console.log("afterSelect", row, column); }); ~~~ diff --git a/docs/treegrid/api/selection/selection_afterunselect_event.md b/docs/treegrid/api/selection/selection_afterunselect_event.md index 1918092a..262f7772 100644 --- a/docs/treegrid/api/selection/selection_afterunselect_event.md +++ b/docs/treegrid/api/selection/selection_afterunselect_event.md @@ -8,15 +8,17 @@ description: You can explore the afterUnSelect event of TreeGrid in the document @short: fires after unselecting a cell -@signature: {'afterUnSelect: (row: object, col: object) => void;'} +@signature: {'afterUnSelect: (row: object, column: object) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @example: -treegrid.selection.events.on("afterUnSelect", function(row, col){ - console.log("afterUnSelect", row, col); +treegrid.selection.events.on("afterUnSelect", (row, column) => { + console.log("afterUnSelect", row, column); }); @descr: @@ -24,8 +26,8 @@ treegrid.selection.events.on("afterUnSelect", function(row, col){ It is also possible to use the simplified version of the event: ~~~js -treegrid.events.on("afterUnSelect", function(row, col){ - console.log("afterUnSelect", row, col); +treegrid.events.on("afterUnSelect", (row, column) => { + console.log("afterUnSelect", row, column); }); ~~~ diff --git a/docs/treegrid/api/selection/selection_beforeselect_event.md b/docs/treegrid/api/selection/selection_beforeselect_event.md index 3e9ea46b..f720ba8f 100644 --- a/docs/treegrid/api/selection/selection_beforeselect_event.md +++ b/docs/treegrid/api/selection/selection_beforeselect_event.md @@ -8,19 +8,20 @@ description: You can explore the beforeSelect event of TreeGrid in the documenta @short: fires before selecting a cell -@signature: {'beforeSelect: (row: object, col: object) => boolean | void;'} +@signature: {'beforeSelect: (row: object, column: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @returns: Return `false` to prevent selecting of a cell; otherwise, `true`. @example: -treegrid.selection.events.on("beforeSelect", function(row, col){ - console.log("beforeSelect", row, col); +treegrid.selection.events.on("beforeSelect", (row, column) => { + console.log("beforeSelect", row, column); return false; }); @@ -29,8 +30,8 @@ treegrid.selection.events.on("beforeSelect", function(row, col){ It is also possible to use the simplified version of the event: ~~~js -treegrid.events.on("beforeSelect", function(row, col){ - console.log("beforeSelect", row, col); +treegrid.events.on("beforeSelect", (row, column) => { + console.log("beforeSelect", row, column); return false; }); ~~~ diff --git a/docs/treegrid/api/selection/selection_beforeunselect_event.md b/docs/treegrid/api/selection/selection_beforeunselect_event.md index 6a845d65..50e44295 100644 --- a/docs/treegrid/api/selection/selection_beforeunselect_event.md +++ b/docs/treegrid/api/selection/selection_beforeunselect_event.md @@ -8,19 +8,20 @@ description: You can explore the beforeUnSelect event of TreeGrid in the documen @short: fires before unselecting a cell -@signature: {'beforeUnSelect: (row: object, col: object) => boolean | void;'} +@signature: {'beforeUnSelect: (row: object, column: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: - `row: object` - the config of a row -- `col: object` - the config of a column +- `column: object` - the config of a column @returns: Return `false` to prevent unselecting of a cell; otherwise, `true`. @example: -treegrid.selection.events.on("beforeUnSelect", function(row, col){ - console.log("beforeUnSelect", row, col); +treegrid.selection.events.on("beforeUnSelect", (row, column) => { + console.log("beforeUnSelect", row, column); return false; }); @@ -29,8 +30,8 @@ treegrid.selection.events.on("beforeUnSelect", function(row, col){ It is also possible to use the simplified version of the event: ~~~js -treegrid.events.on("BeforeUnSelect", function(row, col){ - console.log("beforeUnSelect", row, col); +treegrid.events.on("BeforeUnSelect", (row, column) => { + console.log("beforeUnSelect", row, column); return false; }); ~~~ diff --git a/docs/treegrid/api/selection/selection_getcell_method.md b/docs/treegrid/api/selection/selection_getcell_method.md index 13bbe884..c0a1d8ea 100644 --- a/docs/treegrid/api/selection/selection_getcell_method.md +++ b/docs/treegrid/api/selection/selection_getcell_method.md @@ -15,7 +15,7 @@ An object with parameters of a selected cell. @example: const selectedCell = treegrid.selection.getCell(); -// -> {row: {…}, column: {…}} +// -> { row: {…}, column: {…} } @descr: diff --git a/docs/treegrid/api/selection/selection_setcell_method.md b/docs/treegrid/api/selection/selection_setcell_method.md index eaa5599e..42132c84 100644 --- a/docs/treegrid/api/selection/selection_setcell_method.md +++ b/docs/treegrid/api/selection/selection_setcell_method.md @@ -8,11 +8,11 @@ description: You can explore the setCell method of TreeGrid in the documentation @short: sets selection to a specified cell -@signature: {'setCell(row?: object, col?: object): void;'} +@signature: {'setCell(row?: object, column?: object): void;'} @params: - `row: object` - an object with a cell to be selected -- `col: object` - the config of a column +- `column: object` - the config of a column @example: const row = treegrid.data.getItem(treegrid.data.getId(0)); diff --git a/docs/treegrid/api/treegrid_aftercollapse_event.md b/docs/treegrid/api/treegrid_aftercollapse_event.md index 09ecccbc..c9853c9e 100644 --- a/docs/treegrid/api/treegrid_aftercollapse_event.md +++ b/docs/treegrid/api/treegrid_aftercollapse_event.md @@ -11,10 +11,11 @@ description: You can explore the afterCollapse event of TreeGrid in the document @signature: {'afterCollapse: (rowId: string | number) => void;'} @params: +The callback of the event is called with the following parameter: - `rowId: string | number` - the id of a collapsed row @example: -treeGrid.events.on("afterCollapse", function(rowId) { +treeGrid.events.on("afterCollapse", (rowId) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_aftercolumndrag_event.md b/docs/treegrid/api/treegrid_aftercolumndrag_event.md index baf7a70d..ca9306b3 100644 --- a/docs/treegrid/api/treegrid_aftercolumndrag_event.md +++ b/docs/treegrid/api/treegrid_aftercolumndrag_event.md @@ -8,17 +8,19 @@ description: You can explore the afterColumnDrag event of TreeGrid in the docume @short: fires after dragging of a column is finished -@signature: {'afterColumnDrag: (data: object, events: MouseEvent) => void;'} +@signature: {'afterColumnDrag: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("afterColumnDrag", function(data, events) { +treegrid.events.on("afterColumnDrag", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_aftercolumndrop_event.md b/docs/treegrid/api/treegrid_aftercolumndrop_event.md index 5809b808..3968bae4 100644 --- a/docs/treegrid/api/treegrid_aftercolumndrop_event.md +++ b/docs/treegrid/api/treegrid_aftercolumndrop_event.md @@ -8,17 +8,18 @@ description: You can explore the afterColumnDrop event of TreeGrid in the docume @short: fires before the user has finished dragging a column but after the mouse button is released -@signature: {'afterColumnDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'afterColumnDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("afterColumnDrop", function(data, events) { +treegrid.events.on("afterColumnDrop", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_aftercolumnhide_event.md b/docs/treegrid/api/treegrid_aftercolumnhide_event.md index 286344f1..ba1c1e60 100644 --- a/docs/treegrid/api/treegrid_aftercolumnhide_event.md +++ b/docs/treegrid/api/treegrid_aftercolumnhide_event.md @@ -8,13 +8,14 @@ description: You can explore the afterColumnHide event of TreeGrid in the docume @short: fires after a column is hidden -@signature: {'afterColumnHide: (col: object) => void;'} +@signature: {'afterColumnHide: (column: object) => void;'} @params: -- `col: object` - an object with a column configuration +The callback of the event is called with the following parameters: +- `column: object` - an object with a column configuration @example: -treegrid.events.on("afterColumnHide", function(column){ +treegrid.events.on("afterColumnHide", (column) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_aftercolumnshow_event.md b/docs/treegrid/api/treegrid_aftercolumnshow_event.md index b6076d81..81c8502c 100644 --- a/docs/treegrid/api/treegrid_aftercolumnshow_event.md +++ b/docs/treegrid/api/treegrid_aftercolumnshow_event.md @@ -11,10 +11,12 @@ description: You can explore the afterColumnShow event of TreeGrid in the docume @signature: {'afterColumnShow: (column: object) => void;'} @params: +The callback of the event is called with the following parameter: + - `column: object` - an object with a column configuration @example: -treegrid.events.on("afterColumnShow", function(column){ +treegrid.events.on("afterColumnShow", (column) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_aftereditend_event.md b/docs/treegrid/api/treegrid_aftereditend_event.md index 09e95e4b..2fb9518a 100644 --- a/docs/treegrid/api/treegrid_aftereditend_event.md +++ b/docs/treegrid/api/treegrid_aftereditend_event.md @@ -8,15 +8,17 @@ description: You can explore the afterEditEnd event of TreeGrid in the documenta @short: fires after editing of a cell is ended -@signature: {'afterEditEnd: (value: string | number | boolean, row: object, col: object) => void;'} +@signature: {'afterEditEnd: (value: string | number | boolean, row: object, column: object) => void;'} @params: +The callback of the event is called with the following parameters: + - `value: string | number | boolean` - the new value of a cell - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration +- `column: object` - an object with a column configuration @example: -grid.events.on("afterEditEnd", function(value,row,column){ +grid.events.on("afterEditEnd", (value, row, column) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_aftereditstart_event.md b/docs/treegrid/api/treegrid_aftereditstart_event.md index 977b1a75..9816893d 100644 --- a/docs/treegrid/api/treegrid_aftereditstart_event.md +++ b/docs/treegrid/api/treegrid_aftereditstart_event.md @@ -8,15 +8,17 @@ description: You can explore the afterEditStart event of TreeGrid in the documen @short: fires after editing of a cell has started -@signature: {'afterEditStart: (row: object, col: object, editorType: string) => void;'} +@signature: {'afterEditStart: (row: object, column: object, editorType: string) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration +- `column: object` - an object with a column configuration - `editorType: string` - the type of a cell editor: "input", "select", "datePicker", "checkbox", "combobox", "textarea", "multiselect" @example: -grid.events.on("afterEditStart", function(row,col, editorType){ +grid.events.on("afterEditStart", (row, column, editorType) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_afterexpand_event.md b/docs/treegrid/api/treegrid_afterexpand_event.md index dd6d5108..c75b5dc3 100644 --- a/docs/treegrid/api/treegrid_afterexpand_event.md +++ b/docs/treegrid/api/treegrid_afterexpand_event.md @@ -11,10 +11,12 @@ description: You can explore the afterExpand event of TreeGrid in the documentat @signature: {'afterExpand: (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: -treeGrid.events.on("afterExpand", function(rowId) { +treeGrid.events.on("afterExpand", (rowId) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_afterresizeend_event.md b/docs/treegrid/api/treegrid_afterresizeend_event.md index 9003f777..2a372d89 100644 --- a/docs/treegrid/api/treegrid_afterresizeend_event.md +++ b/docs/treegrid/api/treegrid_afterresizeend_event.md @@ -8,14 +8,16 @@ description: You can explore the afterResizeEnd event of TreeGrid in the documen @short: fires after resizing of a column is ended -@signature: {'afterResizeEnd: (column: object, events: MouseEvent) => void;'} +@signature: {'afterResizeEnd: (column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `column: object` - an object with a column configuration -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("afterResizeEnd", function(col,e){ +grid.events.on("afterResizeEnd", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_afterrowdrag_event.md b/docs/treegrid/api/treegrid_afterrowdrag_event.md index 55deeb7b..43eee474 100644 --- a/docs/treegrid/api/treegrid_afterrowdrag_event.md +++ b/docs/treegrid/api/treegrid_afterrowdrag_event.md @@ -8,18 +8,19 @@ description: You can explore the afterRowDrag event of TreeGrid in the documenta @short: fires after dragging of a row is finished -@signature: {'afterRowDrag: (data: object, events: MouseEvent) => void;'} +@signature: {'afterRowDrag: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("afterRowDrag", function(data, events) { +treegrid.events.on("afterRowDrag", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_afterrowdrop_event.md b/docs/treegrid/api/treegrid_afterrowdrop_event.md index 6ba256eb..32a799e7 100644 --- a/docs/treegrid/api/treegrid_afterrowdrop_event.md +++ b/docs/treegrid/api/treegrid_afterrowdrop_event.md @@ -8,18 +8,19 @@ description: You can explore the afterRowDrop event of TreeGrid in the documenta @short: fires before the user has finished dragging a row but after the mouse button is released -@signature: {'afterRowDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'afterRowDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("afterRowDrop", function(data, events) { +treegrid.events.on("afterRowDrop", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_afterrowhide_event.md b/docs/treegrid/api/treegrid_afterrowhide_event.md index 81bff219..534f2e26 100644 --- a/docs/treegrid/api/treegrid_afterrowhide_event.md +++ b/docs/treegrid/api/treegrid_afterrowhide_event.md @@ -11,10 +11,12 @@ description: You can explore the afterRowHide event of TreeGrid in the documenta @signature: {'afterRowHide: (row: object) => void;'} @params: +The callback of the event is called with the following parameter: + - `row: object` - an object with a row configuration @example: -treegrid.events.on("afterRowHide", function(row){ +treegrid.events.on("afterRowHide", (row) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_afterrowresize_event.md b/docs/treegrid/api/treegrid_afterrowresize_event.md index 809f4564..6b9a5013 100644 --- a/docs/treegrid/api/treegrid_afterrowresize_event.md +++ b/docs/treegrid/api/treegrid_afterrowresize_event.md @@ -8,15 +8,17 @@ description: You can explore the afterRowResize event of TreeGrid in the documen @short: fires after the height of a row is changed -@signature: afterRowResize: (row: object, events: Event, currentHeight: number) => void; +@signature: afterRowResize: (row: object, event: Event, currentHeight: number) => void; @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `events: Event` - a native event object +- `event: Event` - a native event object - `currentHeight: number` - the current height of the row @example: -treegrid.events.on("afterRowResize", function(row, events, currentHeight) { +treegrid.events.on("afterRowResize", (row, event, currentHeight) => { console.log("Current row height:", currentHeight); }); diff --git a/docs/treegrid/api/treegrid_afterrowshow_event.md b/docs/treegrid/api/treegrid_afterrowshow_event.md index deccc4f2..345ff828 100644 --- a/docs/treegrid/api/treegrid_afterrowshow_event.md +++ b/docs/treegrid/api/treegrid_afterrowshow_event.md @@ -11,10 +11,11 @@ description: You can explore the afterRowShow event of TreeGrid in the documenta @signature: {'afterRowShow: (row: object) => void;'} @params: +The callback of the event is called with the following parameter: - `row: object` - an object with a row configuration @example: -treegrid.events.on("afterRowShow", function(row){ +treegrid.events.on("afterRowShow", (row) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_aftersort_event.md b/docs/treegrid/api/treegrid_aftersort_event.md index 4f252db5..6d360dd0 100644 --- a/docs/treegrid/api/treegrid_aftersort_event.md +++ b/docs/treegrid/api/treegrid_aftersort_event.md @@ -8,15 +8,17 @@ description: You can explore the afterSort event of TreeGrid in the documentatio @short: fires after a column is sorted by clicking on its header -@signature: afterSort: (col: object, dir: string) => void; +@signature: afterSort: (column: object, dir: string) => void; @params: -- `col: object` - an object with the configuration of a column +The callback of the event is called with the following parameters: + +- `column: object` - an object with the configuration of a column - `dir: string` - the sorting direction ("desc", "asc") @example: -treegrid.events.on("afterSort", (col, dir) => { - console.log(col, dir); +treegrid.events.on("afterSort", (column, dir) => { + console.log(column, dir); }); @descr: diff --git a/docs/treegrid/api/treegrid_beforecollapse_event.md b/docs/treegrid/api/treegrid_beforecollapse_event.md index 30bbd3ee..3b562b9f 100644 --- a/docs/treegrid/api/treegrid_beforecollapse_event.md +++ b/docs/treegrid/api/treegrid_beforecollapse_event.md @@ -11,13 +11,14 @@ description: You can explore the beforeCollapse event of TreeGrid in the documen @signature: {'beforeCollapse: (rowId: string | number) => boolean | void;'} @params: +The callback of the event is called with the following parameter: - `rowId: string | number` - the id of a collapsed row @returns: Return `false` to block collapsing of a treegrid; otherwise, `true`. @example: -treeGrid.events.on("beforeCollapse", function(rowId) { +treeGrid.events.on("beforeCollapse", (rowId) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforecolumndrag_event.md b/docs/treegrid/api/treegrid_beforecolumndrag_event.md index 1cb55ea1..67b069c3 100644 --- a/docs/treegrid/api/treegrid_beforecolumndrag_event.md +++ b/docs/treegrid/api/treegrid_beforecolumndrag_event.md @@ -8,20 +8,22 @@ description: You can explore the beforeColumnDrag event of TreeGrid in the docum @short: fires before dragging of a column has started -@signature: {'beforeColumnDrag: (data: object, events: MouseEvent) => void | boolean;'} +@signature: {'beforeColumnDrag: (data: object, event: MouseEvent) => void | boolean;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to prevent dragging of a column; otherwise, `true`. @example: -treegrid.events.on("beforeColumnDrag", function(data, events){ +treegrid.events.on("beforeColumnDrag", (data, event) => { // your logic here return false; }); @@ -31,7 +33,7 @@ treegrid.events.on("beforeColumnDrag", function(data, events){ @changelog: - Before v7.0, the event took one parameter - the column id. -- Starting from v7.0, the event takes two parameters: **data** and **e**. +- Starting from v7.0, the event takes two parameters: **data** and **event**. - The event was added in v6.5 [comment]: # (@relatedapi: treegrid/api/treegrid_dragitem_config.md treegrid/api/treegrid_aftercolumndrag_event.md treegrid/api/treegrid_aftercolumndrop_event.md treegrid/api/treegrid_beforecolumndrop_event.md treegrid/api/treegrid_cancolumndrop_event.md treegrid/api/treegrid_cancelcolumndrop_event.md treegrid/api/treegrid_dragcolumnin_event.md treegrid/api/treegrid_dragcolumnout_event.md treegrid/api/treegrid_dragcolumnstart_event.md) diff --git a/docs/treegrid/api/treegrid_beforecolumndrop_event.md b/docs/treegrid/api/treegrid_beforecolumndrop_event.md index 7301966f..389cc4dd 100644 --- a/docs/treegrid/api/treegrid_beforecolumndrop_event.md +++ b/docs/treegrid/api/treegrid_beforecolumndrop_event.md @@ -8,20 +8,22 @@ description: You can explore the beforeColumnDrop event of TreeGrid in the docum @short: fires before the user has finished dragging and released the mouse button over a target column -@signature: {'beforeColumnDrop: (data: object, events: MouseEvent) => void | boolean;'} +@signature: {'beforeColumnDrop: (data: object, event: MouseEvent) => void | boolean;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to block the default action; otherwise, `true`. @example: -treegrid.events.on("beforeColumnDrop", function(data, events){ +treegrid.events.on("beforeColumnDrop", (data, event) => { // your logic here return false; }); @@ -31,7 +33,7 @@ treegrid.events.on("beforeColumnDrop", function(data, events){ @changelog: - Before v7.0, the event took two parameters - **sourceId** and **targetId**. -- In v7.0, the parameters were replaced with new ones: **data** and **e**. +- In v7.0, the parameters were replaced with new ones: **data** and **event**. - The event was added in v6.5 [comment]: # (@relatedapi: treegrid/api/treegrid_dragitem_config.md treegrid/api/treegrid_aftercolumndrag_event.md treegrid/api/treegrid_aftercolumndrop_event.md treegrid/api/treegrid_beforecolumndrag_event.md treegrid/api/treegrid_cancolumndrop_event.md treegrid/api/treegrid_cancelcolumndrop_event.md treegrid/api/treegrid_dragcolumnin_event.md treegrid/api/treegrid_dragcolumnout_event.md treegrid/api/treegrid_dragcolumnstart_event.md) diff --git a/docs/treegrid/api/treegrid_beforecolumnhide_event.md b/docs/treegrid/api/treegrid_beforecolumnhide_event.md index 24c1a8eb..b266da1c 100644 --- a/docs/treegrid/api/treegrid_beforecolumnhide_event.md +++ b/docs/treegrid/api/treegrid_beforecolumnhide_event.md @@ -8,16 +8,18 @@ description: You can explore the beforeColumnHide event of TreeGrid in the docum @short: fires before a column is hidden -@signature: {'beforeColumnHide: (col: object) => boolean | void;'} +@signature: {'beforeColumnHide: (column: object) => boolean | void;'} @params: -- `col: object` - an object with a column configuration +The callback of the event is called with the following parameter: + +- `column: object` - an object with a column configuration @returns: Return `false` to prevent a column from being hidden; otherwise, `true`. @example: -treegrid.events.on("beforeColumnHide", function(column){ +treegrid.events.on("beforeColumnHide", (column) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforecolumnshow_event.md b/docs/treegrid/api/treegrid_beforecolumnshow_event.md index a7b0c602..c7dd38db 100644 --- a/docs/treegrid/api/treegrid_beforecolumnshow_event.md +++ b/docs/treegrid/api/treegrid_beforecolumnshow_event.md @@ -8,16 +8,18 @@ description: You can explore the beforeColumnShow event of TreeGrid in the docum @short: fires before a column is shown on a page -@signature: {'beforeColumnShow: (col: object) => boolean | void;'} +@signature: {'beforeColumnShow: (column: object) => boolean | void;'} @params: -- `col: object` - an object with a column configuration +The callback of the event is called with the following parameter: + +- `column: object` - an object with a column configuration @returns: Return `false` to prevent a column from being shown; otherwise, `true`. @example: -treegrid.events.on("beforeColumnShow", function(column){ +treegrid.events.on("beforeColumnShow", (column) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforeeditend_event.md b/docs/treegrid/api/treegrid_beforeeditend_event.md index 1d04505d..5b32d420 100644 --- a/docs/treegrid/api/treegrid_beforeeditend_event.md +++ b/docs/treegrid/api/treegrid_beforeeditend_event.md @@ -8,18 +8,20 @@ description: You can explore the beforeEditEnd event of TreeGrid in the document @short: fires before editing of a cell is ended -@signature: {'beforeEditEnd: (value: string | number | boolean, row: object, col: object) => boolean | void;'} +@signature: {'beforeEditEnd: (value: string | number | boolean, row: object, column: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: + - `value: string | number | boolean` - the new value of a cell - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration +- `column: object` - an object with a column configuration @returns: Return `false` to prevent closing of an editor; otherwise, `true`. @example: -grid.events.on("beforeEditEnd", function(value,row,column){ +grid.events.on("beforeEditEnd", (value, row, column) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforeeditstart_event.md b/docs/treegrid/api/treegrid_beforeeditstart_event.md index c949e8a9..5f2df8f9 100644 --- a/docs/treegrid/api/treegrid_beforeeditstart_event.md +++ b/docs/treegrid/api/treegrid_beforeeditstart_event.md @@ -8,18 +8,20 @@ description: You can explore the beforeEditStart event of TreeGrid in the docume @short: fires before editing of a cell has started -@signature: {'beforeEditStart: (row: object, col: object, editorType: string) => boolean | void;'} +@signature: {'beforeEditStart: (row: object, column: object, editorType: string) => boolean | void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `editorType: string` - the type of a cell editor:"input", "select", "datePicker", "checkbox", "combobox", "textarea", "multiselect" +- `column: object` - an object with a column configuration +- `editorType: string` - the type of a cell editor: "input", "select", "datePicker", "checkbox", "combobox", "textarea", "multiselect" @returns: Return `false` to block editing of a cell; otherwise, `true`. @example: -grid.events.on("beforeEditStart", function(row,col,editorType){ +grid.events.on("beforeEditStart", (row, column, editorType) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforeexpand_event.md b/docs/treegrid/api/treegrid_beforeexpand_event.md index 838ae1ea..0c603109 100644 --- a/docs/treegrid/api/treegrid_beforeexpand_event.md +++ b/docs/treegrid/api/treegrid_beforeexpand_event.md @@ -11,13 +11,15 @@ description: You can explore the beforeExpand event of TreeGrid in the documenta @signature: {'beforeExpand: (rowId: string | number) => boolean | void;'} @params: +The callback of the event is called with the following parameters: + - `rowId: string | number` - the id of an expanded row @returns: Return `false` to block expanding of a treegrid; otherwise, `true`. @example: -treeGrid.events.on("beforeExpand", function(rowId) { +treeGrid.events.on("beforeExpand", (rowId) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforefilter_event.md b/docs/treegrid/api/treegrid_beforefilter_event.md index 9e390d90..05be2117 100644 --- a/docs/treegrid/api/treegrid_beforefilter_event.md +++ b/docs/treegrid/api/treegrid_beforefilter_event.md @@ -11,6 +11,8 @@ description: You can explore the beforeFilter event of TreeGrid in the documenta @signature: {'beforeFilter:({ value: string, colId?: string | number }) => void | boolean;'} @params: +The callback of the event is called with the following parameters: + - `value: string` - required, the entered value by which data must be filtered - `colId: string | number` - optional, the ID of a column @@ -18,8 +20,8 @@ description: You can explore the beforeFilter event of TreeGrid in the documenta Return `false` to block the filtering process; otherwise, `true`. @example: -treegrid.events.on("beforeFilter", (value, id) => { - console.log("The", id, "column is filtered by", value, "value"); +treegrid.events.on("beforeFilter", (value, colId) => { + console.log("The", colId, "column is filtered by", value, "value"); // return false; }); diff --git a/docs/treegrid/api/treegrid_beforeresizestart_event.md b/docs/treegrid/api/treegrid_beforeresizestart_event.md index 8b012e04..f710409a 100644 --- a/docs/treegrid/api/treegrid_beforeresizestart_event.md +++ b/docs/treegrid/api/treegrid_beforeresizestart_event.md @@ -8,17 +8,19 @@ description: You can explore the beforeResizeStart event of TreeGrid in the docu @short: fires before resizing of a column has started -@signature: {'beforeResizeStart: (col: object, events: MouseEvent) => boolean | void;'} +@signature: {'beforeResizeStart: (column: object, event: MouseEvent) => boolean | void;'} @params: -- `col: object` - an object with a column configuration -- `events: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to block resizing of a column; otherwise, `true`. @example: -grid.events.on("beforeResizeStart", function(col,e){ +grid.events.on("beforeResizeStart", (column, event) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforerowdrag_event.md b/docs/treegrid/api/treegrid_beforerowdrag_event.md index 6604263b..2082865c 100644 --- a/docs/treegrid/api/treegrid_beforerowdrag_event.md +++ b/docs/treegrid/api/treegrid_beforerowdrag_event.md @@ -8,21 +8,22 @@ description: You can explore the beforeRowDrag event of TreeGrid in the document @short: fires before dragging of a row has started -@signature: {'beforeRowDrag: (data: object, events: MouseEvent) => void | boolean;'} +@signature: {'beforeRowDrag: (data: object, event: MouseEvent) => void | boolean;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to prevent dragging of a row; otherwise, `true`. @example: -treegrid.events.on("beforeRowDrag", function(data, events){ +treegrid.events.on("beforeRowDrag", (data, event) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforerowdrop_event.md b/docs/treegrid/api/treegrid_beforerowdrop_event.md index 0772fc9f..33820bc5 100644 --- a/docs/treegrid/api/treegrid_beforerowdrop_event.md +++ b/docs/treegrid/api/treegrid_beforerowdrop_event.md @@ -8,21 +8,22 @@ description: You can explore the beforeRowDrop event of TreeGrid in the document @short: fires before the user has finished dragging and released the mouse button over a target row -@signature: {'beforeRowDrop: (data: object, events: MouseEvent) => void | boolean;'} +@signature: {'beforeRowDrop: (data: object, event: MouseEvent) => void | boolean;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @returns: Return `false` to block the default action; otherwise, `true`. @example: -treegrid.events.on("beforeRowDrop", function(data, events){ +treegrid.events.on("beforeRowDrop", (data, event) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforerowhide_event.md b/docs/treegrid/api/treegrid_beforerowhide_event.md index 9b2bafc6..835a0c5f 100644 --- a/docs/treegrid/api/treegrid_beforerowhide_event.md +++ b/docs/treegrid/api/treegrid_beforerowhide_event.md @@ -11,13 +11,15 @@ description: You can explore the beforeRowHide event of TreeGrid in the document @signature: {'beforeRowHide: (row: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration @returns: Return `false` to prevent a row from being hidden; otherwise, `true`. @example: -treegrid.events.on("beforeRowHide", function(row){ +treegrid.events.on("beforeRowHide", (row) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforerowresize_event.md b/docs/treegrid/api/treegrid_beforerowresize_event.md index e9602324..052eee6b 100644 --- a/docs/treegrid/api/treegrid_beforerowresize_event.md +++ b/docs/treegrid/api/treegrid_beforerowresize_event.md @@ -8,18 +8,20 @@ description: You can explore the beforeRowResize event of TreeGrid in the docume @short: fires before the height of a row is changed -@signature: beforeRowResize: (row: object, events: Event, currentHeight: number) => boolean | void; +@signature: beforeRowResize: (row: object, event: Event, currentHeight: number) => boolean | void; @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `events: Event` - a native event object +- `event: Event` - a native event object - `currentHeight: number` - the current height of the row @returns: Return `false` to block resizing of a row; otherwise, `true`. @example: -treegrid.events.on("beforeRowResize", function(row, events, currentHeight) { +treegrid.events.on("beforeRowResize", (row, event, currentHeight) => { console.log("Current row height:", currentHeight); return true; }); diff --git a/docs/treegrid/api/treegrid_beforerowshow_event.md b/docs/treegrid/api/treegrid_beforerowshow_event.md index d434fab6..db95f57b 100644 --- a/docs/treegrid/api/treegrid_beforerowshow_event.md +++ b/docs/treegrid/api/treegrid_beforerowshow_event.md @@ -11,13 +11,15 @@ description: You can explore the beforeRowShow event of TreeGrid in the document @signature: {'beforeRowShow: (row: object) => boolean | void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration @returns: Return `false` to prevent a row from being shown; otherwise, `true`. @example: -treegrid.events.on("beforeRowShow", function(row){ +treegrid.events.on("beforeRowShow", (row) => { // your logic here return false; }); diff --git a/docs/treegrid/api/treegrid_beforesort_event.md b/docs/treegrid/api/treegrid_beforesort_event.md index 15fb6d32..48a48e55 100644 --- a/docs/treegrid/api/treegrid_beforesort_event.md +++ b/docs/treegrid/api/treegrid_beforesort_event.md @@ -8,18 +8,20 @@ description: You can explore the beforeSort event of TreeGrid in the documentati @short: fires before a column is sorted by clicking on its header -@signature: beforeSort: (col: object, dir: string) => void | boolean; +@signature: beforeSort: (column: object, dir: string) => void | boolean; @params: -- `col: object` - an object with the configuration of a column +The callback of the event is called with the following parameters: + +- `column: object` - an object with the configuration of a column - `dir: string` - the sorting direction ("desc", "asc") @returns: Return `false` to prevent a column from being sorted; otherwise, `true`. @example: -treegrid.events.on("beforeSort", (col, dir) => { - console.log("beforeSort", col, dir); +treegrid.events.on("beforeSort", (column, dir) => { + console.log("beforeSort", column, dir); // return false; }); diff --git a/docs/treegrid/api/treegrid_cancelcolumndrop_event.md b/docs/treegrid/api/treegrid_cancelcolumndrop_event.md index d84ba2ac..9b048c66 100644 --- a/docs/treegrid/api/treegrid_cancelcolumndrop_event.md +++ b/docs/treegrid/api/treegrid_cancelcolumndrop_event.md @@ -8,17 +8,19 @@ description: You can explore the cancelColumnDrop event of TreeGrid in the docum @short: fires on moving a mouse pointer out of borders of a column while dragging the column -@signature: {'cancelColumnDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'cancelColumnDrop: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("cancelColumnDrop", function(data, events) { +treegrid.events.on("cancelColumnDrop", (data, events) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_cancelrowdrop_event.md b/docs/treegrid/api/treegrid_cancelrowdrop_event.md index 3e585632..fc3da25d 100644 --- a/docs/treegrid/api/treegrid_cancelrowdrop_event.md +++ b/docs/treegrid/api/treegrid_cancelrowdrop_event.md @@ -8,17 +8,19 @@ description: You can explore the cancelRowDrop event of TreeGrid in the document @short: fires on moving a mouse pointer out of borders of a row while dragging the row -@signature: {'cancelRowDrop: (data: object, events: MouseEvent) => any;'} +@signature: {'cancelRowDrop: (data: object, event: MouseEvent) => any;'} @params: +The callback of the event is called with the following parameters: + - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("cancelRowDrop", function(data, events) { +treegrid.events.on("cancelRowDrop", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_cancolumndrop_event.md b/docs/treegrid/api/treegrid_cancolumndrop_event.md index 74abd86c..090d6cf0 100644 --- a/docs/treegrid/api/treegrid_cancolumndrop_event.md +++ b/docs/treegrid/api/treegrid_cancolumndrop_event.md @@ -8,17 +8,19 @@ description: You can explore the canColumnDrop event of TreeGrid in the document @short: fires when a dragged column is placed over a target column -@signature: {'canColumnDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'canColumnDrop: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("canColumnDrop", function(data, events) { +treegrid.events.on("canColumnDrop", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_canrowdrop_event.md b/docs/treegrid/api/treegrid_canrowdrop_event.md index fa44a47f..28218ed5 100644 --- a/docs/treegrid/api/treegrid_canrowdrop_event.md +++ b/docs/treegrid/api/treegrid_canrowdrop_event.md @@ -8,18 +8,19 @@ description: You can explore the canRowDrop event of TreeGrid in the documentati @short: fires when a dragged row is placed over a target row -@signature: {'canRowDrop: (data: object, events: MouseEvent) => void;'} +@signature: {'canRowDrop: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("canRowDrop", function(data, events) { +treegrid.events.on("canRowDrop", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_cellclick_event.md b/docs/treegrid/api/treegrid_cellclick_event.md index ac4e4990..08dcc8fe 100644 --- a/docs/treegrid/api/treegrid_cellclick_event.md +++ b/docs/treegrid/api/treegrid_cellclick_event.md @@ -8,15 +8,17 @@ description: You can explore the cellClick event of TreeGrid in the documentatio @short: fires on click on a grid cell -@signature: {'cellClick: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellClick: (row: object, column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellClick", function(row,column,e){ +grid.events.on("cellClick", (row, column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_celldblclick_event.md b/docs/treegrid/api/treegrid_celldblclick_event.md index 78ea37ba..a8a38ae2 100644 --- a/docs/treegrid/api/treegrid_celldblclick_event.md +++ b/docs/treegrid/api/treegrid_celldblclick_event.md @@ -8,15 +8,17 @@ description: You can explore the cellDblClick event of TreeGrid in the documenta @short: fires on double-click on a grid cell -@signature: {'cellDblClick: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellDblClick: (row: object, column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellDblClick", function(row,column,e){ +grid.events.on("cellDblClick", (row, column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_cellmousedown_event.md b/docs/treegrid/api/treegrid_cellmousedown_event.md index de286efb..78206bf7 100644 --- a/docs/treegrid/api/treegrid_cellmousedown_event.md +++ b/docs/treegrid/api/treegrid_cellmousedown_event.md @@ -8,15 +8,17 @@ description: You can explore the cellMouseDown event of TreeGrid in the document @short: fires before releasing the left mouse button when clicking on a grid cell -@signature: {'cellMouseDown: (row: object, col: object, e: MouseEvent & TouchEvent) => void;'} +@signature: {'cellMouseDown: (row: object, column: object, event: MouseEvent & TouchEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `e: MouseEvent | TouchEvent` - a native HTML event object +- `column: object` - an object with a column configuration +- `event: MouseEvent | TouchEvent` - a native HTML event object @example: -grid.events.on("cellMouseDown", function(row,column,e){ +grid.events.on("cellMouseDown", (row, column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_cellmouseover_event.md b/docs/treegrid/api/treegrid_cellmouseover_event.md index dd08199a..6d5f0dea 100644 --- a/docs/treegrid/api/treegrid_cellmouseover_event.md +++ b/docs/treegrid/api/treegrid_cellmouseover_event.md @@ -8,15 +8,17 @@ description: You can explore the cellMouseOver event of TreeGrid in the document @short: fires on moving the mouse pointer over a grid cell -@signature: {'cellMouseOver: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellMouseOver: (row: object, column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellMouseOver", function(row,column,e){ +grid.events.on("cellMouseOver", (row, column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_cellrightclick_event.md b/docs/treegrid/api/treegrid_cellrightclick_event.md index 7c16b73b..c44ee5e1 100644 --- a/docs/treegrid/api/treegrid_cellrightclick_event.md +++ b/docs/treegrid/api/treegrid_cellrightclick_event.md @@ -8,15 +8,17 @@ description: You can explore the cellRightClick event of TreeGrid in the documen @short: fires on right click on a grid cell -@signature: {'cellRightClick: (row: object, col: object, e: MouseEvent) => void;'} +@signature: {'cellRightClick: (row: object, column: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `row: object` - an object with a row configuration -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("cellRightClick", function(row,column,e){ +grid.events.on("cellRightClick", (row, column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_dragcolumnin_event.md b/docs/treegrid/api/treegrid_dragcolumnin_event.md index 65b92839..de100b70 100644 --- a/docs/treegrid/api/treegrid_dragcolumnin_event.md +++ b/docs/treegrid/api/treegrid_dragcolumnin_event.md @@ -8,17 +8,19 @@ description: You can explore the dragColumnIn event of TreeGrid in the documenta @short: fires when a column is dragged to another potential target -@signature: {'dragColumnIn: (data: object, events: MouseEvent) => void;'} +@signature: {'dragColumnIn: (data: object, event: MouseEvent) => void;'} @params: +The callback of the event is called with the following parameters: + - `data: object` - data object. It contains the following parameters: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("dragColumnIn", function(data, events) { +treegrid.events.on("dragColumnIn", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_dragcolumnout_event.md b/docs/treegrid/api/treegrid_dragcolumnout_event.md index d51a0043..a8073eb9 100644 --- a/docs/treegrid/api/treegrid_dragcolumnout_event.md +++ b/docs/treegrid/api/treegrid_dragcolumnout_event.md @@ -8,17 +8,19 @@ description: You can explore the dragColumnOut event of TreeGrid in the document @short: fires when a column is dragged out of a potential target -@signature: {'dragColumnOut: (data: object, events: MouseEvent) => void;'} +@signature: {'dragColumnOut: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("dragColumnOut", function(data, events) { +treegrid.events.on("dragColumnOut", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_dragcolumnstart_event.md b/docs/treegrid/api/treegrid_dragcolumnstart_event.md index 713e4c99..46472639 100644 --- a/docs/treegrid/api/treegrid_dragcolumnstart_event.md +++ b/docs/treegrid/api/treegrid_dragcolumnstart_event.md @@ -8,17 +8,19 @@ description: You can explore the dragColumnStart event of TreeGrid in the docume @short: fires when dragging of a column has started -@signature: {'dragColumnStart: (data: object, events: MouseEvent) => void;'} +@signature: {'dragColumnStart: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a column, from which the dragging process has started - `source: array` - an array with ids of dragged columns - `target: string | number` - the id of a potential target column -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("dragColumnStart", function(data, events) { +treegrid.events.on("dragColumnStart", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_dragrowin_event.md b/docs/treegrid/api/treegrid_dragrowin_event.md index e9d19906..df163c6e 100644 --- a/docs/treegrid/api/treegrid_dragrowin_event.md +++ b/docs/treegrid/api/treegrid_dragrowin_event.md @@ -8,18 +8,20 @@ description: You can explore the dragRowIn event of TreeGrid in the documentatio @short: fires when a row is dragged to another potential target -@signature: {'dragRowIn: (data: object, events: MouseEvent) => void;'} +@signature: {'dragRowIn: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object + @example: -treegrid.events.on("dragRowIn", function(data, events) { +treegrid.events.on("dragRowIn", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_dragrowout_event.md b/docs/treegrid/api/treegrid_dragrowout_event.md index dc58ff7e..b37f8ce1 100644 --- a/docs/treegrid/api/treegrid_dragrowout_event.md +++ b/docs/treegrid/api/treegrid_dragrowout_event.md @@ -8,18 +8,19 @@ description: You can explore the dragRowOut event of TreeGrid in the documentati @short: fires when a row is dragged out of a potential target -@signature: {'dragRowOut: (data: object, events: MouseEvent) => void;'} +@signature: {'dragRowOut: (data: object, event: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row -- `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object +- `event: MouseEvent` - a native HTML event object @example: -treegrid.events.on("dragRowOut", function(data, events) { +treegrid.events.on("dragRowOut", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_dragrowstart_event.md b/docs/treegrid/api/treegrid_dragrowstart_event.md index 9b10e063..1d184f08 100644 --- a/docs/treegrid/api/treegrid_dragrowstart_event.md +++ b/docs/treegrid/api/treegrid_dragrowstart_event.md @@ -11,15 +11,16 @@ description: You can explore the dragRowStart event of TreeGrid in the documenta @signature: {'dragRowStart: (data: object, events: MouseEvent) => void;'} @params: -- `data: object` - data object. It contains the following parameters: +The callback of the event is called with the following parameters: + +- `data: object` - data object. It contains the following properties: - `start: string | number` - the id of a row, from which the dragging process has started - `source: array` - an array with ids of dragged rows - `target: string | number` - the id of a potential target row - `events: MouseEvent` - a native HTML event object -- `events: MouseEvent` - a native HTML event object @example: -treegrid.events.on("dragRowStart", function(data, events) { +treegrid.events.on("dragRowStart", (data, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_editcell_method.md b/docs/treegrid/api/treegrid_editcell_method.md index 27e23dbd..43434c90 100644 --- a/docs/treegrid/api/treegrid_editcell_method.md +++ b/docs/treegrid/api/treegrid_editcell_method.md @@ -16,7 +16,7 @@ description: You can explore the editCell method of TreeGrid in the documentatio - `editorType: string` - optional, the type of an editor used in a cell: "input", "select", "datePicker", "checkbox", "combobox", "textarea", "multiselect" @example: -grid.editCell(grid.data.getId(0),"project"); +grid.editCell(grid.data.getId(0), "project"); @descr: diff --git a/docs/treegrid/api/treegrid_eventhandlers_config.md b/docs/treegrid/api/treegrid_eventhandlers_config.md index a54d371b..1bbf5e02 100644 --- a/docs/treegrid/api/treegrid_eventhandlers_config.md +++ b/docs/treegrid/api/treegrid_eventhandlers_config.md @@ -11,7 +11,7 @@ description: You can explore the eventHandlers config of TreeGrid in the documen ~~~js eventHandlers?: { [eventName: string]: { - [className: string]: (events: Event, item: object) => void; + [className: string]: (event: Event, item: object) => void; }; }; ~~~ @@ -27,7 +27,7 @@ The **eventHandlers** object includes a set of *key:value* pairs, where: value - an object that contains a key:value pair, where:
  1. key is the CSS class name that the handler will be applied to
  2. value is a function that takes two parameters:
+ an object that contains a key:value pair, where:
  1. key is the CSS class name that the handler will be applied to
  2. value is a function that takes two parameters:
@@ -41,7 +41,7 @@ const treeGrid = new dhx.TreeGrid("treegrid", { header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }], htmlEnable: true, // define a custom template for the column's cells - template: function (text, row, col) { + template: (text, row, column) => { return text ? "
$ " + text + "
" : ""; } }, @@ -51,13 +51,13 @@ const treeGrid = new dhx.TreeGrid("treegrid", { eventHandlers: { // add an event handler to the header cell onclick: { - header_book: function(event, data) { + header_book: (event, data) => { console.log(JSON.stringify(data.col, null, 2)); } }, // add an event handler to the HTML element of the custom template of cells onmouseover: { - cell__template: function (event, data) { + cell__template: (event, data) => { console.log(JSON.stringify(data.row, null, 2)); } } @@ -97,7 +97,7 @@ const grid = new dhx.Grid("grid", { data: data, eventHandlers: { onmouseover: { - cell__html: function(event, data) { + cell__html: (event, data) => { console.log(JSON.stringify(data.col, null, 2)); } } diff --git a/docs/treegrid/api/treegrid_expand_event.md b/docs/treegrid/api/treegrid_expand_event.md index 8e176c0c..0eb87423 100644 --- a/docs/treegrid/api/treegrid_expand_event.md +++ b/docs/treegrid/api/treegrid_expand_event.md @@ -11,10 +11,12 @@ description: You can explore the expand event of TreeGrid in the documentation o @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: -grid.events.on("expand", function(rowId){ +grid.events.on("expand", (rowId) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_filterchange_event.md b/docs/treegrid/api/treegrid_filterchange_event.md index dfbe72f5..dc71a748 100644 --- a/docs/treegrid/api/treegrid_filterchange_event.md +++ b/docs/treegrid/api/treegrid_filterchange_event.md @@ -11,12 +11,14 @@ description: You can explore the filterChange event of TreeGrid in the documenta @signature: {'filterChange: (value: string, colId: string | number, filterId: "inputFilter" | "selectFilter" | "comboFilter") => void;'} @params: +The callback of the event is called with the following parameters: + - `value: string` - an entered value - `colId: string | number` - the id of a column - `filterId: string` - the type of a filter: "inputFilter", "selectFilter", "comboFilter" @example: -grid.events.on("filterChange", function(value,colId,filter){ +grid.events.on("filterChange", (value, colId, filter) => { console.log("You've entered "+value+" into the "+colId+" column"); }); diff --git a/docs/treegrid/api/treegrid_footercellclick_event.md b/docs/treegrid/api/treegrid_footercellclick_event.md index eacfd0be..a17c57ed 100644 --- a/docs/treegrid/api/treegrid_footercellclick_event.md +++ b/docs/treegrid/api/treegrid_footercellclick_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellClick event of TreeGrid in the docume @short: fires on click on a grid footer cell -@signature: {'footerCellClick: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellClick", function(column,e){ +grid.events.on("footerCellClick", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_footercelldblclick_event.md b/docs/treegrid/api/treegrid_footercelldblclick_event.md index 9edc8e92..92037c7a 100644 --- a/docs/treegrid/api/treegrid_footercelldblclick_event.md +++ b/docs/treegrid/api/treegrid_footercelldblclick_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellDblClick event of TreeGrid in the doc @short: fires on double-click on a grid footer cell -@signature: {'footerCellDblClick: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellDblClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellDblClick", function(column,e){ +grid.events.on("footerCellDblClick", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_footercellmousedown_event.md b/docs/treegrid/api/treegrid_footercellmousedown_event.md index be88f628..aa981731 100644 --- a/docs/treegrid/api/treegrid_footercellmousedown_event.md +++ b/docs/treegrid/api/treegrid_footercellmousedown_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellMouseDown event of TreeGrid in the do @short: fires on moving the mouse pointer over a grid footer cell -@signature: {'footerCellMouseDown: (col: object, e: MouseEvent & TouchEvent) => void;'} +@signature: {'footerCellMouseDown: (column: object, event: MouseEvent & TouchEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent | TouchEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent | TouchEvent` - a native HTML event object @example: -grid.events.on("footerCellMouseDown", function(column,e){ +grid.events.on("footerCellMouseDown", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_footercellmouseover_event.md b/docs/treegrid/api/treegrid_footercellmouseover_event.md index 1e7c686b..a04db01b 100644 --- a/docs/treegrid/api/treegrid_footercellmouseover_event.md +++ b/docs/treegrid/api/treegrid_footercellmouseover_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellMouseOver event of TreeGrid in the do @short: fires on moving the mouse pointer over a grid footer cell -@signature: {'footerCellMouseOver: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellMouseOver: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellMouseOver ", function(column,e){ +grid.events.on("footerCellMouseOver ", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_footercellrightclick_event.md b/docs/treegrid/api/treegrid_footercellrightclick_event.md index 6f950f04..903389bb 100644 --- a/docs/treegrid/api/treegrid_footercellrightclick_event.md +++ b/docs/treegrid/api/treegrid_footercellrightclick_event.md @@ -8,14 +8,16 @@ description: You can explore the footerCellRightClick event of TreeGrid in the d @short: fires on right click on a grid footer cell -@signature: {'footerCellRightClick: (col: object, e: MouseEvent) => void;'} +@signature: {'footerCellRightClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("footerCellRightClick", function(column,e){ +grid.events.on("footerCellRightClick", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_getcellrect_method.md b/docs/treegrid/api/treegrid_getcellrect_method.md index 8b5e5083..a8f1a959 100644 --- a/docs/treegrid/api/treegrid_getcellrect_method.md +++ b/docs/treegrid/api/treegrid_getcellrect_method.md @@ -18,8 +18,8 @@ description: You can explore the getCellRect method of TreeGrid in the documenta An object with parameters of a cell. @example: -const rect = treegrid.getCellRect("1","c"); -// -> {x: 200, y: -40, height: 40, width: 200} +const rect = treegrid.getCellRect("1", "c"); +// -> { x: 200, y: -40, height: 40, width: 200 } @descr: diff --git a/docs/treegrid/api/treegrid_getcolumn_method.md b/docs/treegrid/api/treegrid_getcolumn_method.md index f67d8343..1a6c8104 100644 --- a/docs/treegrid/api/treegrid_getcolumn_method.md +++ b/docs/treegrid/api/treegrid_getcolumn_method.md @@ -18,7 +18,7 @@ An object with attributes of a column. @example: const column = treegrid.getColumn("b"); // -> -// {width: 100, id: "b", header: Array(1), $cellCss: {…}, type: "string"} +// { width: 100, id: "b", header: Array(1), $cellCss: {…}, type: "string" } @descr: diff --git a/docs/treegrid/api/treegrid_getscrollstate_method.md b/docs/treegrid/api/treegrid_getscrollstate_method.md index a3104272..b9579e77 100644 --- a/docs/treegrid/api/treegrid_getscrollstate_method.md +++ b/docs/treegrid/api/treegrid_getscrollstate_method.md @@ -14,7 +14,7 @@ description: You can explore the getScrollState method of TreeGrid in the docume An object with x, y coordinates of a position the grid has been scrolled to. @example: -const state = treegrid.getScrollState(); // -> {x:0,y:0} +const state = treegrid.getScrollState(); // -> { x:0, y:0 } @descr: diff --git a/docs/treegrid/api/treegrid_getsortingstate_method.md b/docs/treegrid/api/treegrid_getsortingstate_method.md index 192aadde..cea2990e 100644 --- a/docs/treegrid/api/treegrid_getsortingstate_method.md +++ b/docs/treegrid/api/treegrid_getsortingstate_method.md @@ -15,7 +15,7 @@ An object with the current state of sorting data in the treegrid. @example: const state = treegrid.getSortingState(); -// -> {dir: "desc", by: "country"} +// -> { dir: "desc", by: "country" } @descr: @@ -31,7 +31,7 @@ The return object includes the following attributes: by - (string)the id of a column that the treegrid is sorted by + (string) the id of a column that the treegrid is sorted by diff --git a/docs/treegrid/api/treegrid_getspan_method.md b/docs/treegrid/api/treegrid_getspan_method.md index f579d0c6..57b9380d 100644 --- a/docs/treegrid/api/treegrid_getspan_method.md +++ b/docs/treegrid/api/treegrid_getspan_method.md @@ -18,8 +18,8 @@ description: You can explore the getSpan method of TreeGrid in the documentation An object with configuration of a span. @example: -const span = treegrid.getSpan("10","a"); -// -> {row:"10", column:"a", colspan:4, text:"Some header", css:"myCustomColspan"} +const span = treegrid.getSpan("10", "a"); +// -> { row:"10", column:"a", colspan:4, text:"Some header", css:"myCustomColspan" } @descr: @@ -32,7 +32,7 @@ A returned **span** object contains the following properties: (string|number) mandatory, the id of a row - col + column (string|number) mandatory, the id of a column diff --git a/docs/treegrid/api/treegrid_grouptitletemplate_config.md b/docs/treegrid/api/treegrid_grouptitletemplate_config.md index 3231d3e2..038572bd 100644 --- a/docs/treegrid/api/treegrid_grouptitletemplate_config.md +++ b/docs/treegrid/api/treegrid_grouptitletemplate_config.md @@ -16,7 +16,7 @@ const treegrid = new dhx.TreeGrid("treegrid_container", { // columns config ], - groupTitleTemplate: function(groupName, groupItems){ + groupTitleTemplate: (groupName, groupItems) => { return groupName + "count:" + groupItems.length } }); diff --git a/docs/treegrid/api/treegrid_headercellclick_event.md b/docs/treegrid/api/treegrid_headercellclick_event.md index f3d64be3..a44ab74c 100644 --- a/docs/treegrid/api/treegrid_headercellclick_event.md +++ b/docs/treegrid/api/treegrid_headercellclick_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellClick event of TreeGrid in the docume @short: fires on click on a grid header cell -@signature: {'headerCellClick: (col: object, e: MouseEvent) => void;'} +@signature: {'headerCellClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellClick", function(column,e){ +grid.events.on("headerCellClick", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_headercelldblclick_event.md b/docs/treegrid/api/treegrid_headercelldblclick_event.md index 962fe92f..0af36229 100644 --- a/docs/treegrid/api/treegrid_headercelldblclick_event.md +++ b/docs/treegrid/api/treegrid_headercelldblclick_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellDblClick event of TreeGrid in the doc @short: fires on double-click on a grid footer cell -@signature: {'headerCellDblClick: (col: object, e: MouseEvent) => void;'} +@signature: {'headerCellDblClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellDblClick", function(column,e){ +grid.events.on("headerCellDblClick", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_headercellmousedown_event.md b/docs/treegrid/api/treegrid_headercellmousedown_event.md index 684e13f8..91065a6e 100644 --- a/docs/treegrid/api/treegrid_headercellmousedown_event.md +++ b/docs/treegrid/api/treegrid_headercellmousedown_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellMouseDown event of TreeGrid in the do @short: fires on moving the mouse pointer over a grid header cell -@signature: {'headerCellMouseDown: (col: object, e: MouseEvent & TouchEvent) => void;'} +@signature: {'headerCellMouseDown: (column: object, event: MouseEvent & TouchEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent | TouchEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent | TouchEvent` - a native HTML event object @example: -grid.events.on("headerCellMouseDown", function(column,e){ +grid.events.on("headerCellMouseDown", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_headercellmouseover_event.md b/docs/treegrid/api/treegrid_headercellmouseover_event.md index cd95d25b..4bf94567 100644 --- a/docs/treegrid/api/treegrid_headercellmouseover_event.md +++ b/docs/treegrid/api/treegrid_headercellmouseover_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellMouseOver event of TreeGrid in the do @short: fires on moving the mouse pointer over a grid header cell -@signature: {'headerCellMouseOver: (col: object, e: MouseEvent) => void;'} +@signature: {'headerCellMouseOver: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellMouseOver", function(column,e){ +grid.events.on("headerCellMouseOver", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_headercellrightclick_event.md b/docs/treegrid/api/treegrid_headercellrightclick_event.md index 4a1237af..0951b1a5 100644 --- a/docs/treegrid/api/treegrid_headercellrightclick_event.md +++ b/docs/treegrid/api/treegrid_headercellrightclick_event.md @@ -8,14 +8,16 @@ description: You can explore the headerCellRightClick event of TreeGrid in the d @short: fires on right click on a grid header cell -@signature: {'headerCellRightClick: (col: object, e: MouseEvent) => void;'} +@signature: {'headerCellRightClick: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("headerCellRightClick", function(column,e){ +grid.events.on("headerCellRightClick", (column, event) => { // your logic here }); diff --git a/docs/treegrid/api/treegrid_hidecolumn_method.md b/docs/treegrid/api/treegrid_hidecolumn_method.md index 36492120..85a5e73d 100644 --- a/docs/treegrid/api/treegrid_hidecolumn_method.md +++ b/docs/treegrid/api/treegrid_hidecolumn_method.md @@ -14,7 +14,7 @@ description: You can explore the hideColumn method of TreeGrid in the documentat - `colId: string | number` - the id of a column @example: -grid.hideColumn(col); +grid.hideColumn("colId"); @descr: diff --git a/docs/treegrid/api/treegrid_removespan_method.md b/docs/treegrid/api/treegrid_removespan_method.md index 9b141563..28d6bccb 100644 --- a/docs/treegrid/api/treegrid_removespan_method.md +++ b/docs/treegrid/api/treegrid_removespan_method.md @@ -6,7 +6,7 @@ description: You can explore the removeSpan method of TreeGrid in the documentat # removeSpan() -@short: removes a cols/rows span +@short: removes a columns/rows span @signature: {'removeSpan(rowId: string | number, colId: string | number): void;'} @@ -15,7 +15,7 @@ description: You can explore the removeSpan method of TreeGrid in the documentat - `colId: string | number` - the id of a column @example: -grid.removeSpan("10","a"); +grid.removeSpan("10", "a"); @descr: diff --git a/docs/treegrid/api/treegrid_resize_event.md b/docs/treegrid/api/treegrid_resize_event.md index 2da3a008..d1626e12 100644 --- a/docs/treegrid/api/treegrid_resize_event.md +++ b/docs/treegrid/api/treegrid_resize_event.md @@ -8,14 +8,16 @@ description: You can explore the resize event of TreeGrid in the documentation o @short: fires on resizing a column -@signature: {'resize: (col: object, e: MouseEvent) => void;'} +@signature: {'resize: (column: object, event: MouseEvent) => void;'} @params: -- `col: object` - an object with a column configuration -- `e: MouseEvent` - a native HTML event object +The callback of the event is called with the following parameters: + +- `column: object` - an object with a column configuration +- `event: MouseEvent` - a native HTML event object @example: -grid.events.on("resize", function(col,e){ +grid.events.on("resize", (column, event) => { // your code here }); diff --git a/docs/treegrid/api/treegrid_rowcss_config.md b/docs/treegrid/api/treegrid_rowcss_config.md index 7d69da6a..6e0e7a6b 100644 --- a/docs/treegrid/api/treegrid_rowcss_config.md +++ b/docs/treegrid/api/treegrid_rowcss_config.md @@ -24,7 +24,7 @@ const treegrid = new dhx.TreeGrid("treegrid_container", { columns: [ // columns config ], - rowCss: function (row) { return row.custom ? "my_custom_row" : "" }, + rowCss: (row) => { return row.custom ? "my_custom_row" : "" }, data: dataset }); diff --git a/docs/treegrid/api/treegrid_scroll_event.md b/docs/treegrid/api/treegrid_scroll_event.md index 6b927d67..28b9b0f6 100644 --- a/docs/treegrid/api/treegrid_scroll_event.md +++ b/docs/treegrid/api/treegrid_scroll_event.md @@ -11,11 +11,13 @@ description: You can explore the scroll event of TreeGrid in the documentation o @signature: {'scroll: (scrollState: object) => void;'} @params: -- `scrollState: object` - an object with new top and left coordinates +The callback of the event is called with the following parameters: + +- `scrollState: object` - an object with the new top and left coordinates @example: -grid.events.on("scroll", function({top,left}){ - console.log("The grid is scrolled to "+top,left); +grid.events.on("scroll", ({ top, left }) => { + console.log("The grid is scrolled to ", top, left); }); @descr: diff --git a/docs/treegrid/api/treegrid_scroll_method.md b/docs/treegrid/api/treegrid_scroll_method.md index 97ceadba..29a20ca6 100644 --- a/docs/treegrid/api/treegrid_scroll_method.md +++ b/docs/treegrid/api/treegrid_scroll_method.md @@ -6,7 +6,7 @@ description: You can explore the scroll method of TreeGrid in the documentation # scroll() -@short: scrolls a grid according to specified coordinates +@short: scrolls a grid according to the specified coordinates @signature: {'scroll(x?: number, y?: number): void;'} @@ -15,7 +15,7 @@ description: You can explore the scroll method of TreeGrid in the documentation - `y: number` - the Y coordinate @example: -grid.scroll(75,230); +grid.scroll(75, 230); @descr: diff --git a/docs/treegrid/api/treegrid_scrollto_method.md b/docs/treegrid/api/treegrid_scrollto_method.md index b6947103..df16d678 100644 --- a/docs/treegrid/api/treegrid_scrollto_method.md +++ b/docs/treegrid/api/treegrid_scrollto_method.md @@ -15,7 +15,7 @@ description: You can explore the scrollTo method of TreeGrid in the documentatio - `colId: string | number` - the id of a column @example: -grid.scrollTo("15","c"); +grid.scrollTo("15", "c"); @descr: diff --git a/docs/treegrid/api/treegrid_setcolumns_method.md b/docs/treegrid/api/treegrid_setcolumns_method.md index 825afa69..098620ca 100644 --- a/docs/treegrid/api/treegrid_setcolumns_method.md +++ b/docs/treegrid/api/treegrid_setcolumns_method.md @@ -8,10 +8,10 @@ description: You can explore the setColumns method of TreeGrid in the documentat @short: sets configuration for TreeGrid columns -@signature: {'setColumns(col: object[]): void;'} +@signature: {'setColumns(columns: object[]): void;'} @params: -- `col: array` - an array of objects with configuration of columns +- `columns: array` - an array of objects with configuration of columns @example: grid.setColumns([ diff --git a/docs/treegrid/api/treegrid_showcolumn_method.md b/docs/treegrid/api/treegrid_showcolumn_method.md index a6443a92..d502a8b6 100644 --- a/docs/treegrid/api/treegrid_showcolumn_method.md +++ b/docs/treegrid/api/treegrid_showcolumn_method.md @@ -14,7 +14,7 @@ description: You can explore the showColumn method of TreeGrid in the documentat - `colId: string | number` - the id of a column @example: -grid.showColumn(col); +grid.showColumn("colId"); @descr: diff --git a/docs/treegrid/configuration.md b/docs/treegrid/configuration.md index dc9ebe9b..ca32b9a3 100644 --- a/docs/treegrid/configuration.md +++ b/docs/treegrid/configuration.md @@ -743,7 +743,7 @@ Or define unique lists of options for different column cells. For that, use a fu id: "select_example", header: [{ text: "Select example" }], editorType: "select", - options: (col, row) => getCurrentOptions(row), + options: (column, row) => getCurrentOptions(row), }, ~~~ @@ -788,7 +788,7 @@ Or define unique lists of options for different column cells. For that, use a fu header: [{ text: "Multiselect example" }], type: "string", editorType: "multiselect", - options: (col, row) => getCurrentOptions(row), + options: (column, row) => getCurrentOptions(row), minWidth: 360 }, ~~~ diff --git a/docs/treegrid/customization.md b/docs/treegrid/customization.md index 8e1c8412..277de6cc 100644 --- a/docs/treegrid/customization.md +++ b/docs/treegrid/customization.md @@ -239,7 +239,7 @@ It is easy to style necessary cells using the [addCellCss()](treegrid/api/treegr (string|number) the id of a row - col + column (string|number) the id of a column @@ -286,7 +286,7 @@ You can mark particular cells in a treegrid using the **mark** property of a col (object) an object with all cells in a row - col + column (object) the config of a column (see the columns config) @@ -316,7 +316,7 @@ The function should return a string with a cusotm CSS class for your mark. { text: "Price" } ], // marks specified cells in a column - mark: function (cell, data, row, col) { + mark: function (cell, data, row, column) { return cell > 10 ? "my_custom_mark" : "" } }, @@ -406,7 +406,7 @@ It is possible to customize the content of cells of TreeGrid via the **template* (object) an object with all cells in a row - col + column (object) the config of a column @@ -422,7 +422,7 @@ const treeGrid = new dhx.TreeGrid("treegrid_container", { { text: "Terms and conditions", colspan: 2 }, { text: "Price" } ], - template: function (text, row, col) { + template: function (text, row, column) { return text?"$ "+text :""; } }, @@ -446,7 +446,7 @@ const treeGrid = new dhx.TreeGrid("treegrid_container", { width: 160, id: "price", type: "string", header: [{ text: "Terms and conditions", colspan: 2 }, { text: "Price" }], htmlEnable: true, - template: function (text, row, col) { + template: function (text, row, column) { return text ? "
$ " + text + "
" : ""; } }, @@ -482,7 +482,7 @@ Starting with v7.1, you can customize the content of the tooltip of a column via (object) an object with all cells in a row - col + column (object) the config of a column @@ -490,7 +490,7 @@ Starting with v7.1, you can customize the content of the tooltip of a column via
~~~js {1-9,15,19} -function rowDataTemplate(value, row, col) { +function rowDataTemplate(value, row, column) { if (!value) { return; } diff --git a/docs/treegrid/usage.md b/docs/treegrid/usage.md index 1be516f9..89cf0220 100644 --- a/docs/treegrid/usage.md +++ b/docs/treegrid/usage.md @@ -73,9 +73,9 @@ It is possible to show and hide a column in the grid via the [](treegrid/api/tre ~~~js //showing a column -treegrid.showColumn(col); +treegrid.showColumn(column); //hiding a column -treegrid.hideColumn(col); +treegrid.hideColumn(column); ~~~ **Related sample**: [TreeGrid. Show/hide column](https://snippet.dhtmlx.com/1gekn97m) @@ -193,7 +193,7 @@ You can manipulate columns and rows spans inside the grid with the help of corre ### Adding spans -In order to add a col/row span into the grid, use the [](treegrid/api/treegrid_addspan_method.md) method. Pass an object with configuration of a span as a parameter: +In order to add a column/row span into the grid, use the [](treegrid/api/treegrid_addspan_method.md) method. Pass an object with configuration of a span as a parameter: ~~~js treegrid.addSpan({ @@ -236,7 +236,7 @@ These are possible fields of a span object: ### Getting spans -You can return the col/row span a cell is a part of using the [](treegrid/api/treegrid_getspan_method.md) method. It takes the ids of the row and the column the cell belongs to as parameters: +You can return the column/row span a cell is a part of using the [](treegrid/api/treegrid_getspan_method.md) method. It takes the ids of the row and the column the cell belongs to as parameters: ~~~js const span = treegrid.getSpan("10","a");