@smart-webcomponents-angular/window 13.1.70 → 14.2.0

package/index.d.ts

@@ -1,6 +1,3 @@
-
-import { NgElement } from '@angular/elements';
-
 export interface AccordionProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -5755,6 +5752,11 @@ export interface ComboBoxProperties {
    * Default value: 2
    */
   minLength?: number;
+  /**
+   * Determines the maximum number of characters inside the input.
+   * Default value: -1
+   */
+  maxLength?: number;
   /**
    * Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
    * Default value: ""
@@ -6681,11 +6683,6 @@ export declare type DataAdapterVirtualDataSourceOnExpandDetailsAction = 'sort' |
 /**Request action type */
 export declare type DataAdapterVirtualDataSourceDetailsAction = 'sort' | 'filter' | 'dataBind' | 'scroll' | 'group' | 'expand' | 'pageIndexChange' | 'pageSizeChange';
 export interface DateInputProperties {
-  /**
-   * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
-   * Default value: advanced
-   */
-  animation?: Animation | string;
   /**
    * Determines whether the calendar button pop-up will be closed automatically when date or time is selected through it.
    * Default value: false
@@ -6700,7 +6697,7 @@ export interface DateInputProperties {
    * Determines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. Intl.DateTimeFormat is used to format date strings in JavaScript. By default the date format is 'numeric'. The default value is: { day: 'numeric', month: 'numeric', year: 'numeric' }
    * Default value: { day: 'numeric', month: 'numeric', year: 'numeric' }
    */
-  dateTimeFormat?: DateTimeFormat;
+  dateTimeFormat?: any;
   /**
    * Enables or disables the element.
    * Default value: false
@@ -6721,6 +6718,11 @@ export interface DateInputProperties {
    * Default value: 
    */
   dropDownWidth?: string | number;
+  /**
+   * Sets the format string. When this property is set, the dateTimeFormat property will be disabled and the formatting will use the value of the formatString. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
+   * Default value: ""
+   */
+  formatString?: string;
   /**
    * Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
    * Default value: "off"
@@ -6849,25 +6851,6 @@ export interface DateInput extends BaseElement, DateInputProperties {
   setValue(value: string | Date): void;
 }
 
-/**Determines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. Intl.DateTimeFormat is used to format date strings in JavaScript. By default the date format is 'numeric'. The default value is: { day: 'numeric', month: 'numeric', year: 'numeric' } */
-export interface DateTimeFormat {
-  /**
-   * Day format.
-   * Default value: numeric
-   */
-  day?: DateTimeFormatDay | string;
-  /**
-   * Month format.
-   * Default value: numeric
-   */
-  month?: DateTimeFormatMonth | string;
-  /**
-   * Year format.
-   * Default value: numeric
-   */
-  year?: DateTimeFormatYear | string;
-}
-
 declare global {
     interface Document {
         createElement(tagName: "smart-date-input"): DateInput;
@@ -6878,12 +6861,6 @@ declare global {
     }
 }
 
-/**Day format. */
-export declare type DateTimeFormatDay = 'numeric' | '2-digit';
-/**Month format. */
-export declare type DateTimeFormatMonth = 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
-/**Year format. */
-export declare type DateTimeFormatYear = 'numeric' | '2-digit';
 export interface DateRangeInputProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -7220,7 +7197,7 @@ export interface DateTimePickerProperties {
    */
   footer?: boolean;
   /**
-   * Determines the pattern that is used to display the value in.
+   * Determines the pattern that is used to display the value in. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
    * Default value: "dd-MMM-yy HH:mm:ss.fff"
    */
   formatString?: string;
@@ -9673,7 +9650,7 @@ declare global {
 	}
 }
 
-export interface BaseElement extends NgElement, ElementProperties {
+export interface BaseElement extends HTMLElement, ElementProperties {
   /**
    * This event is triggered when the element is resized.
 	* @param event. The custom event.    */
@@ -13764,6 +13741,11 @@ export interface GridProperties {
    * Default value: []
    */
   columns?: {label: string, dataField: string}[] | string[] | number | GridColumn[];
+  /**
+   * Context Menu is the drop-down menu displayed after right-clicking a Grid row. It allows you to delete row, edit cell or row depending on the edit mode. The 'contextMenuItemCustom' dataSource option allows you to add custom menu item to the context menu. You can replace the context menu by using the 'selector' property and setting it to ID of a Smart.Menu component.
+   * Default value: [object Object]
+   */
+  contextMenu?: GridContextMenu;
   /**
    * Column Menu is the drop-down menu displayed after clicking the column header's drop-down button, which is displayed when you hover the column header. It allows you to customize column settings. For example: Sort, Filter or Group the Grid by the current column.
    * Default value: [object Object]
@@ -13864,6 +13846,11 @@ export interface GridProperties {
    * Default value: null
    */
   onRender?: any;
+  /**
+   * Callback function() called when the grid has been rendered for first time and bindings are completed. The component is ready.
+   * Default value: null
+   */
+  onLoad?: any;
   /**
    * Callback function(event: KeyboardEvent) called when the grid is on focus and a keyboard key is pressed.
    * Default value: null
@@ -13884,6 +13871,16 @@ export interface GridProperties {
    * Default value: null
    */
   onRowDetailUpdated?: {(index: number, row: GridRow, details: HTMLElement): void};
+  /**
+   * Callback function which is called when a row history is updated. The row history for edits is recorded when the 'storeHistory' property is enabled.
+   * Default value: null
+   */
+  onRowHistory?: {(index: number, row: GridRow, history: any[]): void};
+  /**
+   * Callback function which is called when a row style is updated. The row style can be changed by using the row dialog or the 'setRowStyle' method.
+   * Default value: null
+   */
+  onRowStyle?: {(index: number, row: GridRow, history: any[]): void};
   /**
    * Callback function which is called when a row has been inserted.
    * Default value: null
@@ -13904,6 +13901,16 @@ export interface GridProperties {
    * Default value: null
    */
   onRowUpdated?: {(index: number[], row: GridRow[]): void};
+  /**
+   * Callback function called by the Grid when defined. It is used to get the CSS class applied to a row.
+   * Default value: null
+   */
+  onRowClass?: {(index: number, data: any, row: GridRow[]): void};
+  /**
+   * Callback function called by the Grid when defined. It is used to get the CSS class applied to a cell.
+   * Default value: null
+   */
+  onCellClass?: {(index: number, dataField: string, cellValue: any, data: any, row: GridRow[]): void};
   /**
    * Callback function, which is called when a column has been initialized. This function can be used to customize the column settings.
    * Default value: null
@@ -13924,11 +13931,21 @@ export interface GridProperties {
    * Default value: null
    */
   onColumnUpdated?: {(index: number, column: GridColumn): void};
+  /**
+   * Callback function, which is called when a column has been cloned.
+   * Default value: null
+   */
+  onColumnClone?: {(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void};
   /**
    * Callback function, which is called when a command is executed. The name argument is the command's name. The command argument is the command's function. details are built in command arguments passed by the Grid. The handled parameter allows you to cancel built-in command, because when you set it to true the Grid will not execute the default command's behavior.
    * Default value: null
    */
   onCommand?: {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void};
+  /**
+   * Sets or gets the rows  CSS class rules. Different CSS class names are conditionally applied. Example: rowCSSRules: { 'cell-class-1': settings => settings.data.quantity === 5, 'cell-class-2': settings => settings.data.quantity < 5, 'cell-class-3': settings => settings.data.quantity > 5 }.  The settings object contains the following properties: index, data, row, api.
+   * Default value: null
+   */
+  rowCSSRules?: any;
   /**
    * Sets or gets the id of the current user. Has to correspond to the id of an item from the users property/array. Depending on the current user, different privileges are enabled. If no current user is set, privileges depend on the element's properties.
    * Default value: 
@@ -14013,13 +14030,15 @@ export interface Grid extends BaseElement, GridProperties {
   /* Get a member by its name */
   [name: string]: any;
   /**
-   * This event is triggered, when the edit begins.
-	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell)
+   * This event is triggered, when the edit begins. After the event occurs, editing starts. If you need to prevent the editing for specific cells, rows or columns, you can call event.preventDefault();.
+	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell, data, value)
    *  id - The edited row id.
    *  dataField - The edited column data field.
    *  row - The edited row.
    *  column - The edited column.
    *  cell - The edited cell.
+   *  data - The edited row's data.
+   *  value - The edited cell's value.
    */
   onBeginEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
@@ -14122,6 +14141,14 @@ export interface Grid extends BaseElement, GridProperties {
    *  comment - The comment object. The comment object has 'text: string', 'id: string', 'userId: string | number', and 'time: date' fields. The 'text' is the comment's text. 'id' is the comment's unique id, 'userId' is the user's id who entered the comment and 'time' is a javascript date object.
    */
   onCommentRemove?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered, when the user clicks on a context menu item.
+	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, command)
+   *  id - The row's id.
+   *  dataField - The column's data field.
+   *  command - Command function.
+   */
+  onContextMenuItemClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the user starts a row drag.
 	* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, originalEvent)
@@ -14245,12 +14272,14 @@ export interface Grid extends BaseElement, GridProperties {
   onCellDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
    * This event is triggered, when the edit ends.
-	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell)
+	* @param event. The custom event. Custom data event was created with: ev.detail(id, dataField, row, column, cell, data, value)
    *  id - The edited row id.
    *  dataField - The edited column data field.
    *  row - The edited row.
    *  column - The edited column.
    *  cell - The edited cell.
+   *  data - The edited row's data.
+   *  value - The edited cell's value.
    */
   onEndEdit?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
@@ -14324,9 +14353,9 @@ export interface Grid extends BaseElement, GridProperties {
    * Adds a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {any} data. row data matching the data source
    * @param {boolean} insertAtBottom?. Determines whether to add the new row to the bottom or top of the collection. The default value is 'true'
-   * @param {any} callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
+   * @param  callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
    */
-  addRow(data: any, insertAtBottom?: boolean, callback?: any): void;
+  addRow(data: any, insertAtBottom?: boolean, callback?: {(row: GridRow): void}): void;
   /**
    * Adds a new row and puts it into edit mode. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {string} position?. 'near' or 'far'
@@ -14347,7 +14376,7 @@ export interface Grid extends BaseElement, GridProperties {
    */
   addUnboundRow(count: number, position?: string): boolean;
   /**
-   * Adds a filter to a column. This method will apply a filter to the Grid data.
+   * Adds a filter to a column. This method will apply a filter to the Grid data. Example for adding multiple filters to a column: grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"']). Example for adding single filter to a column: grid.addFilter('lastName', 'CONTAINS "burke"'). Example for adding numeric filter:  grid.addFilter('quantity', '&lt;= 5')
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
    * @param {string} filter. Filter expression like: 'startsWith B'. Example 2: ['contains Andrew or contains Nancy'], Example 3:  ['quantity', '&lt;= 3 and &gt;= 8'].  Filter conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
    * @param {boolean} refreshFilters?. Set this to false, if you will use multiple 'addFilter' calls. By doing this, you will avoid unnecessary renders.
@@ -14372,6 +14401,11 @@ export interface Grid extends BaseElement, GridProperties {
    * Auto-sizes grid columns. This method will update the <em>width</em> of all Grid columns.
    */
   autoSizeColumns(): void;
+  /**
+   * Auto-sizes grid column. This method will update the <em>width</em> of a Grid column by measuring the cells and column header label width.
+   * @param {string} dataField?. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
+   */
+  autoSizeColumn(dataField?: string): void;
   /**
    * This method returns true, if all rows in the Grid are selected.
    * @returns {boolean}
@@ -14442,9 +14476,9 @@ export interface Grid extends BaseElement, GridProperties {
   /**
    * Delete a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {string | number} rowId. row bound id
-   * @param {any} callback?. Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.
+   * @param  callback?. Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.
    */
-  deleteRow(rowId: string | number, callback?: any): void;
+  deleteRow(rowId: string | number, callback?: {(row: GridRow): void}): void;
   /**
    * Scrolls to a row or cell. This method scrolls to a row or cell, when scrolling is necessary. If pagination is enabled, it will automatically change the page.
    * @param {string | number} rowId. row bound id
@@ -14462,10 +14496,15 @@ export interface Grid extends BaseElement, GridProperties {
    */
   endUpdate(refresh?: boolean): void;
   /**
-   * Expands a TreeGrid or Grouping row.
+   * Expands a TreeGrid or Grouping row. For example, if you want to expand the first group, then its second sub grup, then the first sub sub group, you can use: grid.expandRow('0.1.0');
    * @param {string | number} rowId. row bound id
    */
   expandRow(rowId: string | number): void;
+  /**
+   * Expands rows to a given group level. For example 'grid.expandRowsToGroupLevel(1);' means that all groups at the root level will be expanded.
+   * @param {number} level. row group level
+   */
+  expandRowsToGroupLevel(level: number): void;
   /**
    * Expands all TreeGrid or Grouping rows.
    */
@@ -14475,6 +14514,20 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {string} Dataformat. 'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
    */
   exportData(Dataformat: string): void;
+  /**
+   * Finds entries by using a query and returns an array of row ids. Example: const rows = grid.find('nancy'); returns all rows that have 'nancy' value. Example 2: const rows = grid.find('nancy, davolio'); returns all rows that have 'nancy' and 'davolio' values in the same row. Example 3: const rows = grid.find(5, 'quantity', '>'); returns all rows where the value of the 'quantity' field is > 5. 
+   * @param {string} query. Search query
+   * @param {string} dataField?. Column data field.
+   * @param {string} condition?. Conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
+   * @returns {any[]}
+   */
+  find(query: string, dataField?: string, condition?: string): any[];
+  /**
+   * Finds entries by using a query and returns an array of cells. Each cell in the array is also an array in this format: [id, dataField, value]. Example: const cells = grid.findCells('nancy'); returns all cells that have 'nancy' value. Example 2: const cells = grid.findCells('nancy, davolio'); returns all cells that have 'nancy' and 'davolio' values.
+   * @param {string} query. Search query. You can enter multiple search strings, by using ','. Example: 'nancy, davolio'
+   * @returns {any[]}
+   */
+  findCells(query: string): any[];
   /**
    * Navigates to a page, when paging is enabled.
    * @param {number} index. page index
@@ -14496,6 +14549,22 @@ export interface Grid extends BaseElement, GridProperties {
    * Navigates to the last page, when grid paging is enabled.
    */
   lastPage(): void;
+  /**
+   * Focuses and selects a cell or row. The keyboard navigation starts from the focused cell or row. Any previously applied selection will be cleared after calling this method.
+   * @param {string | number} rowId. row bound id
+   * @param {string} dataField?. column bound data field
+   */
+  focusAndSelect(rowId: string | number, dataField?: string): void;
+  /**
+   * Iterates through each row in the grid and calls the callback for each row. This is similar to the forEach method on a JavaScript array. This is called for each row, ignoring grouping, filtering or sorting applied in the Grid.
+   * @param {any} rowCallback. Callback function with a row object as parameter. Example: grid.forEachRow((row) => { console.log(row.id) });
+   */
+  forEachRow(rowCallback: any): void;
+  /**
+   * Similar to forEachRow. Iterates through each row in the grid and calls the callback for each row. This method takes into account filtering and sorting applied to the Grid.
+   * @param {any} rowCallback. Callback function with a row object as parameter. Example: grid.forEachRow((row) => { console.log(row.id) });
+   */
+  forEachRowAfterFilterAndSort(rowCallback: any): void;
   /**
    * Gets the maximum position of the vertical scrollbar. You can use this method in combination with the setVerticalScrollValue to apply a new scroll position.
    * @returns {number}
@@ -14521,6 +14590,11 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any}
    */
   getColumns(): any;
+  /**
+   * Gets the editing cell(s), when the grid is editing.
+   * @returns {any[]}
+   */
+  getEditCells(): any[];
   /**
    * Gets the groups array.
    * @returns {any[]}
@@ -14537,10 +14611,20 @@ export interface Grid extends BaseElement, GridProperties {
    */
   getSelection(): any;
   /**
-   * Gets the selected row ids.
+   * Gets an Array where each item is an Array of row id and row data. If the Grid is used in virtual mode, the row data parameter is empty object, because the data is loaded on demand.
    * @returns {any[]}
    */
   getSelectedRows(): any[];
+  /**
+   * Gets the selected row ids.
+   * @returns {any[]}
+   */
+  getSelectedRowIds(): any[];
+  /**
+   * Gets the selected row indexes.
+   * @returns {any[]}
+   */
+  getSelectedRowIndexes(): any[];
   /**
    * Gets the selected cells. The method returns an array of cell. Each cell is an array with row id, column data field and cell value.
    * @returns {any[]}
@@ -14578,6 +14662,12 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any}
    */
   getCellValue(rowId: string | number, dataField: string): any;
+  /**
+   * Gets a column. Returns a Grid column object.
+   * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
+   * @returns {GridColumn}
+   */
+  getColumn(dataField: string): GridColumn;
   /**
    * Gets a value of a column.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -14592,6 +14682,18 @@ export interface Grid extends BaseElement, GridProperties {
    * @returns {any}
    */
   getRowProperty(rowId: string | number, propertyName: string): any;
+  /**
+   * Gets a row. Returns a Grid row object.
+   * @param {string | number} rowId. row bound id
+   * @returns {GridRow}
+   */
+  getRow(rowId: string | number): GridRow;
+  /**
+   * Gets a row by its index. Returns a Grid row object.
+   * @param {number} rowIndex. row bound index
+   * @returns {GridRow}
+   */
+  getRowByIndex(rowIndex: number): GridRow;
   /**
    * Gets the Data source data associated to the row.
    * @param {string | number} rowId. row bound id
@@ -14599,11 +14701,11 @@ export interface Grid extends BaseElement, GridProperties {
    */
   getRowData(rowId: string | number): any;
   /**
-   * Gets the Row's id.
+   * Gets the Row's id by a row index.
    * @param {number} rowIndex. row index
-   * @returns {any}
+   * @returns {string | number}
    */
-  getRowId(rowIndex: number): any;
+  getRowId(rowIndex: number): string | number;
   /**
    * Gets whether a column's drop-down menu is opened.
    * @returns {boolean}
@@ -14641,14 +14743,20 @@ export interface Grid extends BaseElement, GridProperties {
    * Inserts a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {any} data. row data matching the data source
    * @param {number} index?. Determines the insert index. The default value is the last index.
-   * @param {any} callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
+   * @param  callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
    */
-  insertRow(data: any, index?: number, callback?: any): void;
+  insertRow(data: any, index?: number, callback?: {(row: GridRow): void}): void;
   /**
    * Opens a column drop-down menu.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
    */
   openMenu(dataField: string): void;
+  /**
+   * Opens a context menu. Note that context menu should be enabled.
+   * @param {number} left. Left Position.
+   * @param {number} top. Top Position.
+   */
+  openContextMenu(left: number, top: number): void;
   /**
    * Prints the Grid data. The method uses the options of the <em>dataExport</em> property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use  the <em>dataExport</em> property.
    */
@@ -14746,6 +14854,24 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {number[]} rowIndex. Array of row indexes
    */
   selectRowsByIndex(rowIndex: number[]): void;
+  /**
+   * Selects rows by using a query. Example: grid.selectRowsByQuery('nancy'); selects all rows that have 'nancy' value. Example 2: grid.selectRowsByQuery('nancy, davolio'); selects all rows that have 'nancy' and 'davolio' values in the same row. Example 3: grid.selectRowsByQuery(5, 'quantity', '>'); selects all rows where the value of the 'quantity' field is > 5. 
+   * @param {string} query. Search query
+   * @param {string} dataField?. Column data field.
+   * @param {string} condition?. Conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
+   */
+  selectRowsByQuery(query: string, dataField?: string, condition?: string): void;
+  /**
+   * Selects multiple cells by their ids and dataFields. Example: grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']); - selects the 'firstName', 'quantity' and 'date' cells from the first, second and third rows.
+   * @param {(string | number)[]} rowIds. Array of row ids
+   * @param {string[]} dataFields. Array of data fields.
+   */
+  selectCells(rowIds: (string | number)[], dataFields: string[]): void;
+  /**
+   * Selects cells by using a query. Example: grid.selectCellsByQuery('nancy'); selects all cells that have 'nancy' value. Example 2: grid.selectCellsByQuery('nancy, davolio'); selects all cells that have 'nancy' and 'davolio' values in the same row. 
+   * @param {string} query. Search query
+   */
+  selectCellsByQuery(query: string): void;
   /**
    * Sets a new value to a cell.
    * @param {string | number} rowId. row bound id
@@ -14753,6 +14879,11 @@ export interface Grid extends BaseElement, GridProperties {
    * @param {string | number | Date | boolean} value. New Cell value.
    */
   setCellValue(rowId: string | number, dataField: string, value: string | number | Date | boolean): void;
+  /**
+   * Sets new columns to the Grid. The grid will redraw all the column headers, and then redraw all of the rows. By using 'setColumns', the grid will compare the new columns passed as argument to the method with existing columns. The Grid will automatically create new columns, keep old columns if they already exist and remove columns which are not in the 'setColumns' method argument. The benefit of that is that the state of the column like(sort, filter, width or other) will be kept, if the column exsits after the new columns are applied.
+   * @param {GridColumn[]} columns. Columns array.
+   */
+  setColumns(columns: GridColumn[]): void;
   /**
    * Sets a property to a column.
    * @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
@@ -14770,16 +14901,16 @@ export interface Grid extends BaseElement, GridProperties {
   /**
    * Sets a style to a row.
    * @param {string | number} rowId. row bound id
-   * @param {any} rowStyle. The row style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
+   * @param  rowStyle. The row style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
    */
-  setRowStyle(rowId: string | number, rowStyle: any): void;
+  setRowStyle(rowId: string | number, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
   /**
    * Sets a style to a row.
    * @param {string | number} rowId. row bound id
    * @param {string} dataField. Column bound field name.
-   * @param {any} rowStyle. The cell style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
+   * @param  rowStyle. The cell style object. The object may have one or all of the following properties: 'background', 'color', 'fontSize', 'fontFamily', 'textDecoration', 'fontStyle', 'fontWeight'.
    */
-  setCellStyle(rowId: string | number, dataField: string, rowStyle: any): void;
+  setCellStyle(rowId: string | number, dataField: string, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): void;
   /**
    * Sets the position of the vertical scrollbar. You can use this method in combination with the getVerticalScrollValue and getVerticalScrollMax.
    * @param {number} value. The new scroll position
@@ -14799,9 +14930,9 @@ export interface Grid extends BaseElement, GridProperties {
    * Updates a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
    * @param {string | number} rowId. row bound id
    * @param {any} data. row data matching the data source
-   * @param {any} callback?. Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.
+   * @param  callback?. Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.
    */
-  updateRow(rowId: string | number, data: any, callback?: any): void;
+  updateRow(rowId: string | number, data: any, callback?: {(row: GridRow): void}): void;
   /**
    * Unselects a row, cell or column.
    * @param {string | number} rowId. row bound id
@@ -14946,6 +15077,11 @@ export interface GridAppearance {
    * Default value: false
    */
   showRowHeader?: boolean;
+  /**
+   * Shows or hides Row headers. In TreeGrid, the non-leaf tree items are displayed as normal rows. If this property is set to true, they are displayed as headers similar to the grouping rendering.
+   * Default value: false
+   */
+  showTreeRowHeader?: boolean;
   /**
    * Shows row indexes in the row header. The showRowHeader property should be true
    * Default value: false
@@ -14976,6 +15112,11 @@ export interface GridAppearance {
    * Default value: true
    */
   showColumnHeaderLines?: boolean;
+  /**
+   * Shows drag icon on the column header when drag is enabled. The icon is displayed when you move the mouse cursor to the column header's left edge.
+   * Default value: false
+   */
+  showColumnHeaderDragIcon?: boolean;
   /**
    * Shows column lines.
    * Default value: true
@@ -14993,12 +15134,12 @@ export interface GridAppearance {
   showColumnGroupsInColumnPanel?: boolean;
   /**
    * Shows filtered column background, when filter is applied.
-   * Default value: true
+   * Default value: false
    */
   showFilterColumnBackground?: boolean;
   /**
    * Shows sorted column background, when sorting is applied.
-   * Default value: true
+   * Default value: false
    */
   showSortColumnBackground?: boolean;
   /**
@@ -15056,6 +15197,11 @@ export interface GridAppearance {
    * Default value: false
    */
   showVerticalScrollBarOnFixedColumns?: boolean;
+  /**
+   * Shows the today's date as 'Today' vs '7/8/2022'. When the property is set to false, it will display the date.
+   * Default value: true
+   */
+  showTodayDateAsString?: boolean;
 }
 
 /**An object containing settings related to the grid's behavior. */
@@ -15157,7 +15303,7 @@ export interface GridClipboard {
    * Sets or gets a callback on paste.
    * Default value: null
    */
-  onPasteValue?: any;
+  onPasteValue?: {(args: {value: any, oldValue: any, dataField: string, id: string | number}): void};
 }
 
 export interface GridColumn {
@@ -15242,15 +15388,20 @@ export interface GridColumn {
    */
   cellsVerticalAlign?: VerticalAlignment | string;
   /**
-   * Sets or gets the column's header CSS class name.
+   * Sets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.
    * Default value: ""
    */
   className?: string;
   /**
-   * Sets or gets the column's cells CSS class name.
-   * Default value: ""
+   * Sets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }
+   * Default value: 
    */
-  cellsClassName?: string;
+  cellsClassName?: any;
+  /**
+   * Sets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value &lt;5, 'three': settings => settings.value === 3 }.  The settings object contains the following properties: index, value, dataField, row, api.
+   * Default value: null
+   */
+  cellsCSSRules?: any;
   /**
    * Sets the name of the column group.
    * Default value: ""
@@ -15282,7 +15433,7 @@ export interface GridColumn {
    */
   element?: HTMLElement;
   /**
-   * Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): object', 'onRender(int row, string column, object editor, object rowData): object', 'setValue(object value): void' and 'getValue(object value): object' callback functions.
+   * Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.
    * Default value: null
    */
   editor?: any;
@@ -15305,7 +15456,7 @@ export interface GridColumn {
    * Sets or gets the column's format function.
    * Default value: null
    */
-  formatFunction?: any;
+  formatFunction?: {(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, oldValue?: any, value?: any, template?: any}): void};
   /**
    * Sets or gets the column's format settings. You can use any of the build in formatting options or to NumberFormat object like that: 'Intl: {  NumberFormat: {  style: \'currency\', currency: \'EUR\' }}' or DateTimeFormat object like that: 'Intl: {  DateTimeFormat: {  dateStyle: \'full\' }}''
    * Default value: [object Object]
@@ -15316,6 +15467,16 @@ export interface GridColumn {
    * Default value: ""
    */
   group?: string;
+  /**
+   * This function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.
+   * Default value: null
+   */
+  getCellValue?: any;
+  /**
+   * Gets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu.  The function works in combination with updateFilterPanel
+   * Default value: null
+   */
+  getFilterPanel?: any;
   /**
    * Sets or gets the column's icon. Expects CSS class name.
    * Default value: ""
@@ -15326,11 +15487,21 @@ export interface GridColumn {
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
+   * Default value: 
+   */
+  labelTemplate?: string | HTMLTemplateElement | HTMLElement | {(label: string): string};
   /**
    * Sets or gets the minimum width.
    * Default value: 30
    */
   minWidth?: number;
+  /**
+   * Sets or gets the column's rowSpan function. Allows you to dynamically span cells.
+   * Default value: null
+   */
+  rowSpan?: {(cellValue: any, rowIndex: number, data: any): number};
   /**
    * Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.
    * Default value: null
@@ -15341,6 +15512,11 @@ export interface GridColumn {
    * Default value: null
    */
   sortIndex?: number;
+  /**
+   * Sets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) =&gt; { if (value1 === value2) return 0; return value1 &lt;value2; }
+   * Default value: null
+   */
+  sortComparator?: any;
   /**
    * Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
    * Default value: true
@@ -15381,6 +15557,11 @@ export interface GridColumn {
    * Default value: 
    */
   summary?: string[];
+  /**
+   * Updates the column's filter panel. The function works in combination with getFilterPanel
+   * Default value: null
+   */
+  updateFilterPanel?: any;
   /**
    * Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
    * Default value: true
@@ -15388,6 +15569,83 @@ export interface GridColumn {
   visible?: boolean;
 }
 
+/**Context Menu is the drop-down menu displayed after right-clicking a Grid row. It allows you to delete row, edit cell or row depending on the edit mode. The 'contextMenuItemCustom' dataSource option allows you to add custom menu item to the context menu. You can replace the context menu by using the 'selector' property and setting it to ID of a Smart.Menu component. */
+export interface GridContextMenu {
+  /**
+   * Sets or gets whether the context menu is enabled. If the value is false, the context menu will not be displayed, when user right clicks on a row.
+   * Default value: false
+   */
+  enabled?: boolean;
+  /**
+   * Sets the data sources to the context menu.
+   * Default value: [object Object]
+   */
+  dataSource?: GridContextMenuDataSource;
+  /**
+   * Sets the ID or CSS Class of a Smart.Menu component to be used as a context menu for the Grid.
+   * Default value: ""
+   */
+  selector?: string;
+  /**
+   * Sets the width of the context menu.
+   * Default value: 250
+   */
+  width?: number;
+  /**
+   * Sets the height of the context menu.
+   * Default value: null
+   */
+  height?: number | null;
+}
+
+/**Sets the data sources to the context menu. */
+export interface GridContextMenuDataSource {
+  /**
+   * Describes the delete item.
+   * Default value: [object Object]
+   */
+  contextMenuItemDelete?: GridCommand;
+  /**
+   * Describes the edit item.
+   * Default value: [object Object]
+   */
+  contextMenuItemEdit?: GridCommand;
+  /**
+   * Describes the custom item.
+   * Default value: [object Object]
+   */
+  contextMenuItemCustom?: GridCommand;
+}
+
+/**Describes the delete item. */
+export interface GridCommand {
+  /**
+   * Sets the command of the context menu item.
+   * Default value: "contextMenuItemDeleteCommand"
+   */
+  command?: string;
+  /**
+   * Enables the context menu item.
+   * Default value: true
+   */
+  enabled?: boolean;
+  /**
+   * Sets the visibility of the context menu item.
+   * Default value: true
+   */
+  visible?: boolean;
+  /**
+   * Sets the icon of the context menu item.
+   * Default value: "jqx-icon-delete"
+   */
+  icon?: string;
+  /**
+   * Sets the label of the context menu item.
+   * Default value: ""
+   */
+  label?: string;
+}
+
 /**Column Menu is the drop-down menu displayed after clicking the column header's drop-down button, which is displayed when you hover the column header. It allows you to customize column settings. For example: Sort, Filter or Group the Grid by the current column. */
 export interface GridColumnMenu {
   /**
@@ -15443,7 +15701,7 @@ export interface GridColumnMenuDataSource {
    * Describes the settings of the column menu item duplicate.
    * Default value: [object Object]
    */
-  columnMenuItemDuplicate?: GridCommand;
+  columnMenuItemClone?: GridCommand;
   /**
    * Describes the settings of the column menu item insert left.
    * Default value: [object Object]
@@ -15464,6 +15722,11 @@ export interface GridColumnMenuDataSource {
    * Default value: [object Object]
    */
   columnMenuItemSortDesc?: GridCommand;
+  /**
+   * Describes the settings of the column menu item to add sorting.
+   * Default value: [object Object]
+   */
+  columnMenuItemSort?: GridCommand;
   /**
    * Describes the settings of the column menu item remove sort.
    * Default value: [object Object]
@@ -15501,41 +15764,17 @@ export interface GridColumnMenuDataSource {
   columnMenuItemDelete?: GridCommand;
 }
 
-/**Describes the settings of the column menu customize type */
-export interface GridCommand {
-  /**
-   * Sets the command of the column menu customize type.
-   * Default value: "customizeTypeCommand"
-   */
-  command?: string;
-  /**
-   * Enables the column menu customize type.
-   * Default value: true
-   */
-  enabled?: boolean;
-  /**
-   * Sets the visibility of the column menu customize type.
-   * Default value: false
-   */
-  visible?: boolean;
-  /**
-   * Sets the icon of the column menu customize type.
-   * Default value: "jqx-icon-customize"
-   */
-  icon?: string;
-  /**
-   * Sets the label of the column menu customize type.
-   * Default value: ""
-   */
-  label?: string;
-}
-
 export interface GridColumnGroup {
   /**
    * Sets the label.
    * Default value: ""
    */
   label?: string;
+  /**
+   * Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
+   * Default value: 
+   */
+  labelTemplate?: string | HTMLTemplateElement | HTMLElement | {(label: string): string};
   /**
    * Sets the align.
    * Default value: center
@@ -15617,7 +15856,7 @@ export interface GridCharting {
    * Sets or gets the chart's container.
    * Default value: null
    */
-  appendTo?: any;
+  appendTo?: string | HTMLElement;
   /**
    * Sets or gets the charting dialog.
    * Default value: [object Object]
@@ -15805,12 +16044,12 @@ export interface GridDataSourceSettings {
    */
   mapChar?: string;
   /**
-   * Sets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.
+   * Sets the virtual data source function which is called each time the Grid requests data. Example for calling the callback function with the new data set: resultCallbackFunction({dataSource: data}); Demos using 'virtualDataSource' are available on the Grid demos page. Example: https://www.htmlelements.com/demos/grid/virtualscroll/
    * Default value: null
    */
-  virtualDataSource?: any;
+  virtualDataSource?: {(resultCallbackFunction: any, details: DataAdapterVirtualDataSourceDetails): void};
   /**
-   * Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too
+   * Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too. Example: https://www.htmlelements.com/demos/grid/virtual-tree-grid/
    * Default value: null
    */
   virtualDataSourceOnExpand?: any;
@@ -16117,6 +16356,11 @@ export interface GridFiltering {
    * Default value: false
    */
   enabled?: boolean;
+  /**
+   * Determines the filtering operator used in the Grid. By default filters are applied with 'and' operator i.e returns a set of rows matching the filter expressions of columnA AND columnB. The other option is to return a set of rows matching the filter expressions of columnA OR columnB. For example: grid.filtering.operator = 'or'; grid.addFilter('lastName', 'contains "davolio"') grid.addFilter('firstName', 'contains "Antoni"'); - that code will apply two filters to the Grid and will return all rows where firstName is 'Antoni' or the lastName is 'Davolio'
+   * Default value: "and"
+   */
+  operator?: string;
   /**
    * An array of filtering conditions to apply to the DataGrid. Each member of the filter array is an array with two members. The first one is the column dataField to apply the filter to. The second one is the filtering condition. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '&lt;= 3 and &gt;= 8']]. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - [['firstName', 'EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']]. Example with a string filter applied to a string column - [['lastName','CONTAINS' 'burke' or 'CONTAINS' 'peterson']]. Filter conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
    * Default value: 
@@ -16228,6 +16472,11 @@ export interface GridGrouping {
    * Default value: false
    */
   autoExpandAll?: boolean;
+  /**
+   * Automatically expands all groups to a given level.
+   * Default value: 0
+   */
+  autoExpandToLevel?: number;
   /**
    * Automatically hides all grouped columns.
    * Default value: false
@@ -16239,20 +16488,20 @@ export interface GridGrouping {
    */
   expandMode?: GridGroupingExpandMode | string;
   /**
-   * Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level.
-   * Default value: advanced
+   * Sets or gets the column's format function.
+   * Default value: null
    */
-  renderMode?: GridGroupingRenderMode | string;
+  formatFunction?: {(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, value?: any, template?: any}): void};
   /**
    * Sets the group row height.
    * Default value: 50
    */
   groupRowHeight?: string | number;
   /**
-   * Sets the indent of the group toggle button.
-   * Default value: 16
+   * Sets or gets the data fields to group by.
+   * Default value: []
    */
-  toggleButtonIndent?: number;
+  groupBy?: string[];
   /**
    * Sets the indent of the group.
    * Default value: 16
@@ -16263,6 +16512,21 @@ export interface GridGrouping {
    * Default value: [object Object]
    */
   groupBar?: GridGroupingGroupBar;
+  /**
+   * Expands a group in the first grid render. Example: onGroupDefaultExpanded: (dataItem) =&gt;{ return dataItem.label === 'Peppermint Mocha Twist' }
+   * Default value: null
+   */
+  onGroupDefaultExpanded?: any;
+  /**
+   * Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. In 'multipleColumns' mode, each group is displayed in its column.
+   * Default value: advanced
+   */
+  renderMode?: GridGroupingRenderMode | string;
+  /**
+   * Sets the indent of the group toggle button.
+   * Default value: 16
+   */
+  toggleButtonIndent?: number;
   /**
    * Describes the group summary row's settings.
    * Default value: [object Object]
@@ -16320,6 +16584,11 @@ export interface GridPaging {
    * Default value: 10
    */
   pageSize?: number;
+  /**
+   * Sets the number of hierarchical rows per page. For example, displays 2 root groups per page, when grouping is enabled.
+   * Default value: 2
+   */
+  pageHierarchySize?: number;
   /**
    * Sets the start page.
    * Default value: 0
@@ -16523,7 +16792,7 @@ export interface GridRowDetail {
    * Sets the template of the row details.
    * Default value: 
    */
-  template?: any;
+  template?: string | HTMLTemplateElement;
   /**
    * Sets the visibility of the Column which allows you to dynamically expand/collapse the row details.
    * Default value: true
@@ -16584,12 +16853,12 @@ export interface GridHeader {
    * Sets a template for the header.
    * Default value: 
    */
-  template?: string | HTMLTemplateElement;
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
   /**
    * This callback function can be used for customization of the Header toolbar. The Toolbar HTML Element is passed as an argument.
    * Default value: null
    */
-  onInit?: any;
+  onInit?: {(element: HTMLElement): void};
   /**
    * Determines the buttons displayed in the Grid header. 'columns' displays a button opening the columns chooser panel. 'filter'  displays a button opening the filtering panel.  'group' displays a button opening the grouping panel. 'sort'  displays a button opening the sorting panel. 'format'  displays a button opening the conditional formatting panel. 'search' displays a button opening the search panel.
    * Default value: [ "columns", "filter", "group", "sort", "format", "search" ]
@@ -16608,7 +16877,7 @@ export interface GridFooter {
    * Sets a template for the footer.
    * Default value: 
    */
-  template?: string | HTMLTemplateElement;
+  template?: string | HTMLTemplateElement | {(element: HTMLElement): void};
 }
 
 export interface GridRow {
@@ -16986,16 +17255,36 @@ export interface GridSorting {
    * Default value: 
    */
   sort?: string[];
+  /**
+   * Maintains sorting when user edits data in the sorted column. The feature is useful when you want to apply sort just once and you set the property to false.
+   * Default value: true
+   */
+  maintainSort?: boolean;
   /**
    * Sets the count of allowed sorting columns. When the property value is set to 'many', users can sort data by multiple columns.
    * Default value: one
    */
   mode?: GridSortingMode | string;
+  /**
+   * Sets the command key. The property is used in the multi-column sorting. If commandKey='Control', users will be able to sort by multiple columns only while holding the 'Control' key.
+   * Default value: Default
+   */
+  commandKey?: GridSortingCommandKey | string;
   /**
    * Enables switching between the three sort states: ascending, descending and not sorted.
    * Default value: true
    */
   sortToggleThreeStates?: boolean;
+  /**
+   * Enables switching between the sort states on column click. This is the default behavior.
+   * Default value: true
+   */
+  sortToggleOnClick?: boolean;
+  /**
+   * Enables switching between the sort states on column click and holding down the command key.
+   * Default value: false
+   */
+  sortToggleOnClickAndCommandKey?: boolean;
 }
 
 declare global {
@@ -17046,8 +17335,8 @@ export declare type GridFilteringFilterRowApplyMode = 'auto' | 'click';
 export declare type GridFilteringFilterMenuMode = 'default' | 'excel';
 /**Sets the group expand mode. */
 export declare type GridGroupingExpandMode = 'buttonClick' | 'rowClick';
-/**Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. */
-export declare type GridGroupingRenderMode = 'basic' | 'compact' | 'advanced';
+/**Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level. In 'multipleColumns' mode, each group is displayed in its column. */
+export declare type GridGroupingRenderMode = 'basic' | 'compact' | 'advanced' | 'multipleColumns';
 /**Sets the ellipsis display mode. */
 export declare type GridPagerAutoEllipsis = 'none' | 'before' | 'after' | 'both';
 /**Sets or gets whether the selection allows you to select 'one', 'many' or a variation of 'many' called 'extended'. 'one' allows you to have only single cell or row selected. 'many'  */
@@ -17058,6 +17347,8 @@ export declare type GridSelectionAction = 'none' | 'click' | 'doubleClick';
 export declare type GridSelectionCheckBoxesSelectAllMode = 'none' | 'page' | 'all';
 /**Sets the count of allowed sorting columns. When the property value is set to 'many', users can sort data by multiple columns. */
 export declare type GridSortingMode = 'one' | 'many';
+/**Sets the command key. The property is used in the multi-column sorting. If commandKey='Control', users will be able to sort by multiple columns only while holding the 'Control' key. */
+export declare type GridSortingCommandKey = 'Default' | 'Alt' | 'Control' | 'Shift';
 export interface GroupPanelProperties {
   /**
    * Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
@@ -17473,6 +17764,11 @@ export interface KanbanProperties {
    * Default value: true
    */
   allowDrop?: boolean;
+  /**
+   * This property changes the visual appeal of the Kanban columns and tasks. When set to true and the Kanban columns have their 'color' property set, the color is also applied to the tasks and edit dialog.
+   * Default value: false
+   */
+  applyColumnColorToTasks?: boolean;
   /**
    * Enables or disables auto load state from the browser's localStorage. Information about tasks and their position and selected state, filtering, sorting, collapsed columns, as well as the values of the properties taskActions, taskComments, taskDue, taskPriority, taskProgress, taskTags, and taskUserIcon is loaded.
    * Default value: true
@@ -17483,6 +17779,11 @@ export interface KanbanProperties {
    * Default value: false
    */
   autoSaveState?: boolean;
+  /**
+   * Automatically updates the columns height depending on the tasks inside the column. The effect of this property is observed when 'columnColorEntireSurface' is true.
+   * Default value: false
+   */
+  autoColumnHeight?: boolean;
   /**
    * Allows collapsing the card content.
    * Default value: false
@@ -17603,6 +17904,31 @@ export interface KanbanProperties {
    * Default value:    * { 'en': { 'addFilter': '+ Add filter', 'and': 'And', 'apply': 'Apply', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'Cancel', 'CONTAINS': 'contains', 'CONTAINS_CASE_SENSITIVE': 'contains (case sensitive)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'does not contain', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'does not contain (case sensitive)', 'EMPTY': 'empty', 'ENDS_WITH': 'ends with', 'ENDS_WITH_CASE_SENSITIVE': 'ends with (case sensitive)', 'EQUAL': 'equal', 'EQUAL_CASE_SENSITIVE': 'equal (case sensitive)', 'filter': 'Filter', 'filteredByMultiple': '%', 'removeComment': 'Remove comment', 'promptColumn': 'Are you sure you want to remove this column?'} }
    */
   messages?: any;
+  /**
+   * Callback function which can be used for customizing the tasks rendering. The Kanban calls it with 2 arguments - task html element and task data.
+   * Default value: null
+   */
+  onTaskRender?: any;
+  /**
+   * Callback function which can be used for customizing the filter items. The function is called with 1 argument - Array of items which will be displayed in the filter drop down. You can modify that array to remove or update items to filter by.
+   * Default value: null
+   */
+  onFilterPrepare?: any;
+  /**
+   * Callback function which can be used for customizing the sort items. The function is called with 1 argument - Array of items which will be displayed in the sort drop down. You can modify that array to remove or update items to sort by.
+   * Default value: null
+   */
+  onSortPrepare?: any;
+  /**
+   * Callback function which can be used for customizing the column header rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
+   * Default value: null
+   */
+  onColumnHeaderRender?: any;
+  /**
+   * Callback function which can be used for customizing the column footer rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
+   * Default value: null
+   */
+  onColumnFooterRender?: any;
   /**
    * Determines selection mode.
    * Default value: zeroOrOne
@@ -17623,6 +17949,11 @@ export interface KanbanProperties {
    * Default value: false
    */
   rightToLeft?: boolean;
+  /**
+   * Sets or gets whether the edit dialog is displayed in readonly mode. In that mode it shows only the task details, but the editing is disabled. However, if comments are enabled, you will be able to add comments in the dialog.
+   * Default value: false
+   */
+  readonly?: boolean;
   /**
    * Describes the swimlanes in the kanban board. Sub-columns are not applicable when swimlanes are present.
    * Default value: 
@@ -17648,6 +17979,11 @@ export interface KanbanProperties {
    * Default value: false
    */
   taskActions?: boolean;
+  /**
+   * Represents a callback function which is called when the task actions menu is created. The task actions element is passed as parameter and allows you to customize the menu. Example: (list) => { list.innerHTML = 'Custom Item'; list.onclick = () => { alert('clicked'); }}
+   * Default value: null
+   */
+  taskActionsRendered?: any;
   /**
    * Toggles the visibility of the task comments icon.
    * Default value: false
@@ -17907,7 +18243,14 @@ export interface Kanban extends BaseElement, KanbanProperties {
 	* @param event. The custom event.    */
   onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
-   * This event is triggered when a new task is added.
+   * This event is triggered before a new task is added. You can use the event.detail.value and event.detail.id to customize the new Task before adding it to the Kanban. Example: kanban.onTaskBeforeAdd = (event) => { const data = event.detail.value; const id = event.detail.id; event.detail.id = 'BG12';}
+	* @param event. The custom event. Custom data event was created with: ev.detail(value, id)
+   *  value - The task data that is added to the Kanban.
+   *  id - The task data id.
+   */
+  onTaskBeforeAdd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
+  /**
+   * This event is triggered when a new task is added. Example: kanban.onTaskAdd = (event) => { const data = event.detail.value; const id = event.detail.id; }
 	* @param event. The custom event. Custom data event was created with: ev.detail(value, id)
    *  value - The task data that is added to the Kanban.
    *  id - The task data id.
@@ -17943,15 +18286,15 @@ export interface Kanban extends BaseElement, KanbanProperties {
    */
   onTaskDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
   /**
-   * Adds filtering
-   * @param {string[]} filters. Filter information
-   * @param {string} operator?. Logical operator between the filters of different fields
+   * Adds filtering. Example: const filterGroup = new Smart.FilterGroup(); const filterObject = filterGroup.createFilter('string', 'Italy', 'contains'); filterGroup.addFilter('and', filterObject); kanban.addFilter([['Country', filterGroup]]);
+   * @param {any} filters. Filter information. Example: kanban.addFilter([['Country', filterGroup]]);. Each array item is a sub array with two items - 'dataField' and 'filterGroup' object. The 'dataField' is any valid data field from the data source bound to the Kanban like 'dueDate', 'startDate' or custom fields like 'Country'. Filter conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
+   * @param {string} operator?. Logical operator between the filters of different fields. Possible values are: 'and', 'or'. 
    */
-  addFilter(filters: string[], operator?: string): void;
+  addFilter(filters: any, operator?: string): void;
   /**
-   * Adds sorting
+   * Adds sorting. Example: kanban.addSort(['Country'], 'ascending');
    * @param {[] | string} dataFields. The data field(s) to sort by
-   * @param {[] | string} orderBy. The sort direction(s) to sort the data field(s) by
+   * @param {[] | string} orderBy. The sort direction(s) to sort the data field(s) by. Possible values are: 'ascending' and 'descending'.
    */
   addSort(dataFields: [] | string, orderBy: [] | string): void;
   /**
@@ -18224,21 +18567,6 @@ export interface KanbanDataSource {
    * Default value: null
    */
   dueDate?: Date;
-  /**
-   * Callback function which can be used for customizing the tasks rendering. The Kanban calls it with 2 arguments - task html element and task data.
-   * Default value: null
-   */
-  onTaskRender?: any;
-  /**
-   * Callback function which can be used for customizing the column header rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
-   * Default value: null
-   */
-  onColumnHeaderRender?: any;
-  /**
-   * Callback function which can be used for customizing the column footer rendering. The Kanban calls it with 3 arguments - column header html element and column data and column data field.
-   * Default value: null
-   */
-  onColumnFooterRender?: any;
   /**
    * The task's priority.
    * Default value: "normal"
@@ -21642,12 +21970,14 @@ export interface NumberInput extends BaseElement, NumberInputProperties {
    * Returns the value in the desired format.
    * @param {string | number} value. The value to be formatted by the method. 
    * @param {any} format?. The object that contains the formatting properties. The argument should contain Intl.NumberFormat valid properties. For example, { style: 'currency', currency: 'EUR' }
+   * @returns {string}
    */
-  getFormattedValue(value: string | number, format?: any): void;
+  getFormattedValue(value: string | number, format?: any): string;
   /**
    * Returns the number of the input.
+   * @returns {number}
    */
-  getValue(): void;
+  getValue(): number;
   /**
    * Selects the text inside the input or if it is <b>readonly</b> then the element is focused.
    */
@@ -24395,6 +24725,11 @@ export interface SchedulerProperties {
    * Default value: 30
    */
   autoScrollStep?: number;
+  /**
+   * Determines whether the all day cells in Day and Week views automatically change their height depending on the events count in these cells. 
+   * Default value: false
+   */
+  autoHeightAllDayCells?: boolean;
   /**
    * Determines the color scheme for the event background selector in the event window editor. 
    * Default value: #D50000,#E67C73,#F4511E,#F6BF26,#33B679,#0B8043,#039BE5,#3F51B5,#7986CB,#8E24AA,#616161,
@@ -24817,7 +25152,7 @@ export interface SchedulerProperties {
   timeRulerTicks?: boolean;
   /**
    * Determines the timeZone for the element. By default if the local time zone is used if the property is not set.
-   * Default value: 
+   * Default value: Local
    */
   timeZone?: SchedulerTimeZone | string;
   /**
@@ -24860,6 +25195,11 @@ export interface SchedulerProperties {
    * Default value: menu
    */
   viewSelectorType?: SchedulerViewSelectorType | string;
+  /**
+   * Determines the Start Date rule. The Week and TimelineWeek views start by default from the current date taking into account the firstDayOfWeek property. When this property is set to 'dateCurrent', these views will start from the value of the 'dateCurrent'.
+   * Default value: firstDayOfWeek
+   */
+  viewStartDay?: SchedulerViewStartDay | string;
   /**
    * Determines the format of the week days inside the element. 
    * Default value: short
@@ -25167,6 +25507,16 @@ export interface Scheduler extends BaseElement, SchedulerProperties {
    * @param {any} eventObj. An object describing a Scheduler event that is not already present in the element.
    */
   addEvent(eventObj: any): void;
+  /**
+   * Adds a new view. Example: scheduler.addView('week', 'My View', 'myView', false, false, 10); scheduler.setView('myView');
+   * @param {string} type. The view type.
+   * @param {string} label. The view's label displayed in the header.
+   * @param {string} value. The view's value used to identify the view.
+   * @param {boolean} hideWeekend. Determines whether to hide the weekend.
+   * @param {boolean} hideNonworkingWeekdays. Determines whether to hide the non working days.
+   * @param {number} additionalDays. Determines whether to add additional days to the view.
+   */
+  addView(type: string, label: string, value: string, hideWeekend: boolean, hideNonworkingWeekdays: boolean, additionalDays: number): void;
   /**
    * Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
    */
@@ -25184,6 +25534,11 @@ export interface Scheduler extends BaseElement, SchedulerProperties {
    * Ends the update operation. This method will resume the rendering and will refresh the element.
    */
   endUpdate(): void;
+  /**
+   * Returns an array of the start and end view dates.
+   * @returns {Date[]}
+   */
+  getViewDates(): Date[];
   /**
    * Refereshes the Scheduler by recalculating the Scrollbars. 
    * @param {boolean} fullRefresh?. If set the Scheduler will be re-rendered completely.
@@ -25238,6 +25593,11 @@ export interface Scheduler extends BaseElement, SchedulerProperties {
    * @param {any[]} state?. An Array containing a valid structure of Scheduler events.
    */
   saveState(state?: any[]): void;
+  /**
+   * Sets the Scheduler's view. Example: scheduler.addView('week', 'My View', 'myView', false, false, 10); scheduler.setView('myView');
+   * @param {string} view?. The view's value. For example: 'day'. 
+   */
+  setView(view?: string): void;
   /**
    * Checks whether the Scheduler contains the event.
    * @param {any} eventObj. A Scheduler event object.
@@ -25673,17 +26033,12 @@ export declare type SchedulerTimelineDayScale = 'hour' | 'halfHour' | 'quarterHo
 export declare type SchedulerTimeZone = 'Local' | 'Dateline Standard Time' | 'UTC-11' | 'Hawaiteratoran Standard Time' | 'Alaskan Standard Time' | 'Pacific Standard Time (Mexico)' | 'Pacific Standard Time' | 'US Mountain Standard Time' | 'Mountain Standard Time (Mexico)' | 'Mountain Standard Time' | 'Central Standard Time' | 'Central America Standard Time' | 'Canada Central Standard Time' | 'Central Standard Time (Mexico)' | 'SA Pacific Standard Time' | 'Eastern Standard Time' | 'US Eastern Standard Time' | 'Venezuela Standard Time' | 'Atlantic Standard Time' | 'Paraguay Standard Time' | 'Central Brazilian Standard Time' | 'Pacific SA Standard Time' | 'SA Western Standard Time' | 'Newfoundland Standard Time' | 'SA Eastern Standard Time' | 'Argentina Standard Time' | 'E. South America Standard Time' | 'Bahia Standard Time' | 'Montevideo Standard Time' | 'Greenland Standard Time' | 'UTC-02' | 'Mid-Atlantic Standard Time' | 'Azores Standard Time' | 'Cape Verde Standard Time' | 'Morocco Standard Time' | 'UTC' | 'GMT Standard Time' | 'Greenwich Standard Time' | 'Central European Standard Time' | 'Namibia Standard Time' | 'W. Central Africa Standard Time' | 'W. Europe Standard Time' | 'Central Europe Standard Time' | 'Romance Standard Time' | 'FLE Standard Time' | 'South Africa Standard Time' | 'Turkey Standard Time' | 'GTB Standard Time' | 'Libya Standard Time' | 'E. Europe Standard Time' | 'Jordan Standard Time' | 'Middle East Standard Time' | 'Egypt Standard Time' | 'Syria Standard Time' | 'Israel Standard Time' | 'Arab Standard Time' | 'E. Africa Standard Time' | 'Arabic Standard Time' | 'Kaliningrad Standard Time' | 'Iran Standard Time' | 'Mauritius Standard Time' | 'Georgian Standard Time' | 'Caucasus Standard Time' | 'Arabian Standard Time' | 'Azerbaijan Standard Time' | 'Russian Standard Time' | 'Afghanistan Standard Time' | 'Pakistan Standard Time' | 'West Asia Standard Time' | 'India Standard Time' | 'Sri Lanka Standard Time' | 'Nepal Standard Time' | 'Central Asia Standard Time' | 'Bangladesh Standard Time' | 'Ekaterinburg Standard Time' | 'Myanmar Standard Time' | 'SE Asia Standard Time' | 'N. Central Asia Standard Time' | 'Ulaanbaatar Standard Time' | 'China Standard Time' | 'Singapore Standard Time' | 'North Asia Standard Time' | 'Taipei Standard Time' | 'W. Australia Standard Time' | 'Korea Standard Time' | 'North Asia East Standard Time' | 'Tokyo Standard Time' | 'AUS Central Standard Time' | 'Cen. Australia Standard Time' | 'West Pacific Standard Time' | 'Tasmania Standard Time' | 'E. Australia Standard Time' | 'AUS Eastern Standard Time' | 'Yakutsk Standard Time' | 'Vladivostok Standard Time' | 'Central Pacific Standard Time' | 'Magadan Standard Time' | 'Kamchatka Standard Time' | 'Fiji Standard Time' | 'New Zealand Standard Time' | 'UTC+12' | 'Tonga Standard Time' | 'Samoa Standard Time';
 /**Indicates the current Scheduler viewType. Custom views must contain a valid <b>type</b> property that corresponds to one of the view types. This property should not be set. */
 export declare type SchedulerViewType = 'day' | 'week' | 'month' | 'agenda' | 'timelineDay' | 'timelineWeek' | 'timelineMonth';
-/**Determines the viewing date range of the timeline. The property should be set to an array of strings or view objects. When you set it to a string, you should use any of the following: 'day', 'week', 'month', 'agenda', 'timelineDay', 'timelineWeek', 'timelineMonth'. Custom views can be defined as objects instead of strings. The view object should contain the following properties: <b>label</b> - the label for the view.
-<b>value</b> - the value for the view. The value is the unique identifier for the view.
-<b>type</b> - the type of view. The type should be one of the default allowed values for a view.
-<b>hideWeekend</b> - an Optional property that allows to hide the weekend only for this specific view.
-<b>hideNonworkingWeekdays</b> - an Optional property that allows to hide the nonwrking weekdays for this specific view.
-<b>shortcutKey</b> - an Optional property that allows to set a custom shortcut key for the view.
-<b>hideHours</b> - an Optional property applicable only to <b>timelineWeek</b> view that allows to hide the hour cells and only show the day cells.
- */
-export declare type SchedulerViews = 'day' | 'week' | 'month' | 'agenda' | 'timelineDay' | 'timelineWeek' | 'timelineMonth';
+
+export declare type SchedulerViews = SchedulerViewType[] | object[] | string[];
 /**Determines type of the view selector located in the header of the element. */
 export declare type SchedulerViewSelectorType = 'auto' | 'tabs' | 'menu';
+/**Determines the Start Date rule. The Week and TimelineWeek views start by default from the current date taking into account the firstDayOfWeek property. When this property is set to 'dateCurrent', these views will start from the value of the 'dateCurrent'. */
+export declare type SchedulerViewStartDay = 'firstDayOfWeek' | 'dateCurrent';
 /**Determines the format of the week days inside the element.  */
 export declare type WeekDayFormat = 'short' | 'long' | 'narrow';
 export interface ScrollBarProperties {
@@ -27288,6 +27643,16 @@ export interface TableProperties {
    * Default value: null
    */
   onInit?: { (): void };
+  /**
+   * A callback function executed after the Table is being initialized.
+   * Default value: null
+   */
+  onLoad?: { (): void };
+  /**
+   * A callback function executed when the Table's update is finished in the endUpdate method.
+   * Default value: null
+   */
+  onUpdateComplete?: { (): void };
   /**
    * Sets or gets the page size (when paging is enabled).
    * Default value: 10
@@ -27499,7 +27864,7 @@ export interface Table extends BaseElement, TableProperties {
   /**
    * Adds a filter to a specific column.
    * @param {string} dataField. The column's data field.
-   * @param {any} filter. FilterGroup object.
+   * @param {any} filter. FilterGroup object or a Filter expression. Filter expression like: 'startsWith B'. Example 2: ['contains Andrew or contains Nancy'], Example 3:  ['quantity', '&lt;= 3 and &gt;= 8'].  Filter conditions which you can use in the expressions: '=', 'EQUAL','&lt;&gt;', 'NOT_EQUAL', '!=', '&lt;', 'LESS_THAN','&gt;', 'GREATER_THAN', '&lt;=', 'LESS_THAN_OR_EQUAL', '&gt;=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
    */
   addFilter(dataField: string, filter: any): void;
   /**
@@ -29973,6 +30338,11 @@ export interface TreeProperties {
    * Default value: false
    */
   filterable?: boolean;
+  /**
+   * Applies a filter only after the 'Enter' key is pressed.
+   * Default value: false
+   */
+  filterOnEnter?: boolean;
   /**
    * Sets custom text for placeholder in the filter input.
    * Default value: ""