smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
970 lines (968 loc) • 161 kB
TypeScript
import {BaseElement, Animation} from "./smart.element"
import {DataAdapter} from "./smart.dataadapter"
import {Chart} from "./smart.chart"
export interface GridProperties {
/**
* An object containing settings related to the grid's appearance.
* Default value: [object Object]
*/
appearance?: GridAppearance;
/**
* An object containing settings related to the grid's behavior.
* Default value: [object Object]
*/
behavior?: GridBehavior;
/**
* 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:
*/
currentUser?: string | number;
/**
* Describes the column header settings.
* Default value: [object Object]
*/
columnHeader?: GridColumnHeader;
/**
* The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..
* Default value: [object Object]
*/
clipboard?: GridClipboard;
/**
* The columns property is used to describe all columns displayed in the grid.
* 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]
*/
columnMenu?: GridColumnMenu;
/**
* Describes the settings of the column groups.
* Default value:
*/
columnGroups?: GridColumnGroup[];
/**
*
* Default value: false
*/
dropDownMode?: boolean;
/**
* Sets or gets details about conditional formatting to be applied to the Grid's cells.
* Default value: null
*/
conditionalFormatting?: GridConditionalFormatting[];
/**
* Sets the Grid Charting Data Visualization.
* Default value: [object Object]
*/
charting?: GridCharting;
/**
* Sets the TreeGrid checkboxes.
* Default value: [object Object]
*/
checkBoxes?: GridCheckBoxes;
/**
* Sets the Grid Data Export options.
* Default value: [object Object]
*/
dataExport?: GridDataExport;
/**
* Sets the grid's data source. The value of dataSource can be an instance of JQX.DataAdapter or an Array.
* Default value: null
*/
dataSource?: any;
/**
* Sets the grid's data source settings when the dataSource property is set to an Array or URL.
* Default value: [object Object]
*/
dataSourceSettings?: GridDataSourceSettings;
/**
* Describes the grid's editing settings.
* Default value: [object Object]
*/
editing?: GridEditing;
/**
* Describes the grid's filtering settings.
* Default value: [object Object]
*/
filtering?: GridFiltering;
/**
* Describes the footer settings of the grid.
* Default value: [object Object]
*/
footer?: GridFooter;
/**
* Sets or gets whether Excel-like formulas can be passed as cell values. Formulas are always preceded by the = sign and are re-evaluated when cell values are changed. This feature depends on the third-party free plug-in formula-parser (the file formula-parser.min.js has to be referenced).
* Default value: false
*/
formulas?: boolean;
/**
* Describes the grid's grouping settings.
* Default value: [object Object]
*/
grouping?: GridGrouping;
/**
* Describes the settings for the group header.
* Default value: [object Object]
*/
groupHeader?: GridGroupHeader;
/**
* Describes the header settings of the grid.
* Default value: [object Object]
*/
header?: GridHeader;
/**
* An object containing settings related to the grid's layout.
* Default value: [object Object]
*/
layout?: GridLayout;
/**
* Sets or gets the unlockKey which unlocks the product.
* Default value: ""
*/
unlockKey?: string;
/**
* Sets or gets the language. Used in conjunction with the property messages.
* Default value: "en"
*/
locale?: string;
/**
* Keys handling. You can define a key like "Enter": "Tab" or set a function as a value. When the key is pressed, it will be mapped to the other key, action such as 'copy', 'copyPrev', 'copyNext' or 'delete' or just a function defined in your document.
* Default value: null
*/
keys?: any;
/**
* Sets the messages values.
* Default value: * [object Object]
*/
messages?: any;
/**
* Callback function, which is called when the Grid needs a cell value to render it. When you implement this function, you can override the default cell value rendering.
* Default value: null
*/
onCellValue?: {(cell: GridCell): void};
/**
* Callback function, which is called when a cell value will be updated. This function is useful if you want to make Ajax call to a server to validate the cell changes. If the changes are validated, invoke the confirm function.
* Default value: null
*/
onCellUpdate?: {(cells: GridCell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void};
/**
* Callback function, which is called when a cell is rendered. This function is useful if you want to customize GridCell properties, before the cell is rendered.
* Default value: null
*/
onCellRender?: {(cell: GridCell): void};
/**
* Callback function, which is called when a cell edit starts. If you return false, the edit will be canceled.
* Default value: null
*/
onCellBeginEdit?: {(id: string, dataField: string, value: any): boolean};
/**
* Callback function, which is called when a cell edit ends. It is used along with the 'editing.readOnlyEdit' property when it is set to true and the purpose of this function is to update the Grid cell after editing.
* Default value: null
*/
onCellEditRequest?: {(id: string, dataField: string, value: any, oldValue: any, data: any): void};
/**
* Callback function, which is called when a cell value is changed.
* Default value: null
*/
onCellValueChanged?: {(id: string, dataField: string, value: any): boolean};
/**
* Callback function() called before the grid has been initialized and the Grid's Virtual DOM is not created.
* Default value: null
*/
onBeforeInit?: {(): void};
/**
* Callback function() called when the grid is initializing and the Grid's Virtual DOM is created.
* Default value: null
*/
onInit?: {(): void};
/**
* Callback function() called after the grid has been initialized and the Grid's Virtual DOM is created.
* Default value: null
*/
onAfterInit?: {(): void};
/**
* Callback function(chart: JQX.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings.
* Default value: null
*/
onChartInit?: any;
/**
* Callback function() called when the grid has been rendered.
* 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
*/
onKey?: {(event: KeyboardEvent): void};
/**
* Callback function, which is called when a row is initializing. This function can be used to customize the row settings.
* Default value: null
*/
onRowInit?: {(index: number, row: GridRow): void};
/**
* Callback function, which is called when a row detail is initializing. Row details are displayed below the row's data or in a separate dialog.
* Default value: null
*/
onRowDetailInit?: {(index: number, row: GridRow, details: HTMLElement): void};
/**
* Callback function, which is called when a row detail is udpating.
* 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
*/
onRowInserted?: {(index: number[], row: GridRow[]): void};
/**
* Callback function, which is called when a row has been removed.
* Default value: null
*/
onRowRemoved?: {(indexes: number[], rows: GridRow[]): void};
/**
* Callback function, which is called when row's cell values will be updated. This function is useful if you want to make Ajax call to a server to validate the edit changes. If the changes are validated, invoke the confirm function.
* Default value: null
*/
onRowUpdate?: {(index: number[], row: GridRow[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void};
/**
* Callback function, called when a row has been updated.
* 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
*/
onColumnInit?: {(index: number, column: GridColumn): void};
/**
* Callback function, which called when a column has been inserted.
* Default value: null
*/
onColumnInserted?: {(index: number, column: GridColumn): void};
/**
* Callback function, which is called when a column has been removed.
* Default value: null
*/
onColumnRemoved?: {(index: number, column: GridColumn): void};
/**
* Callback function, which is called when a column has been updated.
* 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};
/**
* Describes the paging settings.
* Default value: [object Object]
*/
paging?: GridPaging;
/**
* Describes the pager settings.
* Default value: [object Object]
*/
pager?: GridPager;
/**
* Sets the row details.
* Default value: [object Object]
*/
rowDetail?: GridRowDetail;
/**
* 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 value indicating whether the element is aligned to support locales using right-to-left fonts.
* Default value: false
*/
rightToLeft?: boolean;
/**
* The rows property is used to describe all rows displayed in the grid.
* Default value:
*/
rows?: GridRow[];
/**
* Sets the scroll mode settings.
* Default value: physical
*/
scrolling?: Scrolling | string;
/**
* Describes the summary row settings.
* Default value: [object Object]
*/
summaryRow?: GridSummaryRow;
/**
* Sets the grid's state settings.
* Default value: [object Object]
*/
stateSettings?: GridStateSettings;
/**
* Describes the selection settings.
* Default value: [object Object]
*/
selection?: GridSelection;
/**
* Describes sorting settings.
* Default value: [object Object]
*/
sorting?: GridSorting;
/**
* Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties.
* Default value: []
*/
users?: any[];
/**
* Sets the grid's image and filter upload settings for the image and attachment columns.
* Default value: [object Object]
*/
uploadSettings?: GridUploadSettings;
/**
* Sets the current data view. The possible values are 'grid', 'kanban' and 'card'.
* Default value: "grid"
*/
view?: string;
}
/**
Data Grid UI Component that covers everything from paging, sorting, grouping, filtering, and editing to row and column virtualization, right-to-left layout, export to Excel and PDF and Accessibility.
*/
export interface Grid extends BaseElement, GridProperties {
/* Get a member by its name */
[name: string]: any;
/**
* 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;
/**
* This event is triggered, when the Grid's header toolbar is displayed and the 'OK' button of a header dropdown is clicked. For example, when you open the columns customize panel, reorder columns and click the 'OK' button.
* @param event. The custom event. Custom data event was created with: ev.detail(type)
* type - The type of dropdown. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'
*/
onBatchChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the Grid's header toolbar is displayed and the 'Cancel' button of a header dropdown is clicked.
* @param event. The custom event. Custom data event was created with: ev.detail(type)
* type - The type of dropdown. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'
*/
onBatchCancel?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the selection is changed. When you select with a drag, the event is triggered when the drag starts and ends.
* @param event. The custom event. Custom data event was created with: ev.detail(started, finished, originalEvent)
* started - The flag is <em>true</em>, when the selection starts. The flag is <em>false</em>, when the selection ends and when the user changes the selection by dragging.
* finished - The flag is <em>true</em>, when the selection ends. The flag is <em>false</em>, when the selection starts and when the user changes the selection by dragging.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
*/
onChange: ((this: any, ev: Event) => any) | null;
/**
* This event is triggered, when the user clicks on the header of a column.
* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, originalEvent)
* column - The clicked column.
* dataField - The column's data field.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
*/
onColumnClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user double clicks on the header of a column.
* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, originalEvent)
* column - The double-clicked column.
* dataField - The column's data field.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
*/
onColumnDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user resized a column.
* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, oldWidth, width)
* column - The resized column.
* dataField - The column's data field.
* oldWidth - The old width of the column.
* width - The new width of the column.
*/
onColumnResize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user starts a column drag.
* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, originalEvent)
* column - The column.
* dataField - The column's data field.
* index - The column's index
* originalEvent - The origianl Event object.
*/
onColumnDragStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when a column property is changed.
* @param event. The custom event. Custom data event was created with: ev.detail(column, propertyName, oldValue, value)
* column - The resized column.
* propertyName - The changed property's name.
* oldValue - The old value(s) of the column.
* value - The new value(s) of the column.
*/
onColumnChange?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user drags a column.
* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, data, originalEvent)
* column - The column.
* dataField - The column's data field.
* index - The column's index
* data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
* originalEvent - The origianl Event object.
*/
onColumnDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user drops a column.
* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, newIndex, data, originalEvent)
* column - The column.
* dataField - The column's data field.
* index - The column's index
* newIndex - The column's new index
* data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
* originalEvent - The origianl Event object.
*/
onColumnDragEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user reorders a column.
* @param event. The custom event. Custom data event was created with: ev.detail(column, dataField, index, newIndex, data, originalEvent)
* column - The column.
* dataField - The column's data field.
* index - The column's index
* newIndex - The column's new index
* data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
* originalEvent - The origianl Event object.
*/
onColumnReorder?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user enters a comment in the row edit dialog.
* @param event. The custom event. Custom data event was created with: ev.detail(id, comment)
* id - The row's id.
* 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.
*/
onCommentAdd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user removes a comment in the row edit dialog.
* @param event. The custom event. Custom data event was created with: ev.detail(id, comment)
* id - The row's id.
* 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)
* row - The row.
* id - The row's id
* index - The row's index
* originalEvent - The origianl Event object.
*/
onRowDragStart?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user drags a row.
* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, data, originalEvent)
* row - The row.
* id - The row's id
* index - The row's index
* data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
* originalEvent - The origianl Event object.
*/
onRowDragging?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user drags a row.
* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, newIndex, data, originalEvent)
* row - The row.
* id - The row's id
* index - The row's index
* newIndex - The row's new index
* data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
* originalEvent - The origianl Event object.
*/
onRowDragEnd?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user reorders a row.
* @param event. The custom event. Custom data event was created with: ev.detail(row, id, index, newIndex, data, originalEvent)
* row - The row.
* id - The row's id
* index - The row's index
* newIndex - The row's new index
* data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
* originalEvent - The origianl Event object.
*/
onRowReorder?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user expands a row of the grid. The Grid is in TreeGrid/Grouping mode.
* @param event. The custom event. Custom data event was created with: ev.detail(row, id, originalEvent)
* row - The expanded row.
* id - The row's id
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
*/
onRowExpand?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user collapsed a row of the grid. The Grid is in TreeGrid/Grouping mode.
* @param event. The custom event. Custom data event was created with: ev.detail(row, id, originalEvent)
* row - The collapsed row.
* id - The row's id
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
*/
onRowCollapse?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user clicks on a row of the grid.
* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
* row - The clicked row.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
* id - Gets the row id.
* data - Gets the row data.
* isRightClick - Gets whether the pointing device's right button is clicked.
* pageX - Gets the click's X position.
* pageY - Gets the click's Y position.
*/
onRowClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user double clicks on a row of the grid.
* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, data, isRightClick, pageX, pageY)
* row - The double-clicked row.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
* id - Gets the row id.
* data - Gets the row data.
* isRightClick - Gets whether the pointing device's right button is clicked.
* pageX - Gets the click's X position.
* pageY - Gets the click's Y position.
*/
onRowDoubleClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user resized a row.
* @param event. The custom event. Custom data event was created with: ev.detail(row, id, oldHeight, height)
* row - The resized row.
* id - Gets the row id.
* oldHeight - The old height of the row.
* height - The new height of the row.
*/
onRowResize?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user clicks on the row header's star.
* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent, id, value)
* row - The clicked row.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
* id - Gets the row id.
* value - Gets whether the row is starred or not.
*/
onRowStarred?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user clicks on a cell of the grid.
* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
* cell - The clicked cell.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
* id - Gets the row id.
* dataField - Gets the column dataField.
* value - Gets the cell value.
* isRightClick - Gets whether the pointing device's right button is clicked.
* pageX - Gets the click's X position.
* pageY - Gets the click's Y position.
*/
onCellClick?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user double clicks on a cell of the grid.
* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
* cell - The double-clicked cell.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
* id - Gets the row id.
* dataField - Gets the column dataField.
* value - Gets the cell value.
* isRightClick - Gets whether the pointing device's right button is clicked.
* pageX - Gets the click's X position.
* pageY - Gets the click's Y position.
*/
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, 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;
/**
* This event is triggered, when a filter is added or removed.
* @param event. The custom event. Custom data event was created with: ev.detail(columns, data, expressions)
* columns - Array of columns.
* data - Array of {dataField: string, filter: object}. <em>dataField</em> is the column's data field. <em>filter</em> is a FilterGroup object.
* expressions - Array of {dataField: string, filter: string}. <em>dataField</em> is the column's data field. <em>filter</em> is a filter expression like 'startsWith B'. In each array item, you will have an object with column's name and filter string. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '<= 3 and >= 8']], [['firstName', 'EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']], [['lastName','CONTAINS' 'burke' or 'CONTAINS' 'peterson']]. Filter conditions used in the filter expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
*/
onFilter?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the rows grouping is changed.
* @param event. The custom event. Custom data event was created with: ev.detail(groups)
* groups - Array of column data fields.
*/
onGroup?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the add new column dialog is opened.
* @param event. The custom event. Custom data event was created with: ev.detail(dataField)
* dataField - The column data field.
*/
onOpenColumnDialog?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the add new column dialog is closed.
* @param event. The custom event. Custom data event was created with: ev.detail(dataField)
* dataField - The column data field.
*/
onCloseColumnDialog?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the grid is resized.
* @param event. The custom event. */
onResize: ((ev: Event) => any) | null;
/**
* This event is triggered when the user touches and holds on the row for at least 300ms.
* @param event. The custom event. Custom data event was created with: ev.detail(row, originalEvent)
* row - The tapped row.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
*/
onRowTap?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered when the user touches and holds on the cell for at least 300ms.
* @param event. The custom event. Custom data event was created with: ev.detail(cell, originalEvent)
* cell - The tapped row.
* originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
*/
onCellTap?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user changes the pages.
* @param event. The custom event. */
onPage?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when a sorting column is added or removed.
* @param event. The custom event. Custom data event was created with: ev.detail(columns, data, sortDataFields, sortDataTypes, sortOrders, sortIndexes)
* columns - Array of columns.
* data - Array of {dataField: string, sortOrder: string, sortIndex: number}. <em>dataField</em> is the column's data field. <em>sortOrder</em> is 'asc' or 'desc', <em>sortIndex</em> is the index of the column in multi column sorting.
* sortDataFields - Array of column data fields.
* sortDataTypes - Array of column data types. The values in the array would be 'string', 'date', 'boolean' or 'number'.
* sortOrders - Array of column orders. The values in the array would be 'asc' or 'desc'.
* sortIndexes - Array of column sort indexes. When multiple sorting is applied the sort index is an important parameter as it specifies the priority of sorting.
*/
onSort?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user reaches the bottom of the grid.
* @param event. The custom event. */
onScrollBottomReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* This event is triggered, when the user reaches the top of the grid.
* @param event. The custom event. */
onScrollTopReached?: ((this: any, ev: Event) => any) | ((this: any, ev: CustomEvent<any>) => any) | null;
/**
* 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 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?: {(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'
* @returns {boolean}
*/
addNewRow(position?: string): boolean;
/**
* Adds a new column.
* @param {any} column. A Grid column object. See 'columns' property.
* @returns {boolean}
*/
addNewColumn(column: any): boolean;
/**
* Adds a new unbound row to the top or bottom. Unbound rows are not part of the Grid's dataSource. They become part of the dataSource, after an unbound row is edited.
* @param {number} count. The count of unbound rows.
* @param {string} position?. 'near' or 'far'
* @returns {boolean}
*/
addUnboundRow(count: number, position?: string): boolean;
/**
* 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', '<= 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', '<= 3 and >= 8']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', '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.
*/
addFilter(dataField: string, filter: string, refreshFilters?: boolean): void;
/**
* Groups the Grid by a data field. This method will add a group to the Grid when grouping is enabled.
* @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
*/
addGroup(dataField: string): void;
/**
* Sorts the Grid by a data field. This method will add a sorting to the Grid when sorting is enabled.
* @param {string} dataField. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
* @param {string} sortOrder. column's sort order. Use 'asc' or 'desc'.
*/
addSort(dataField: string, sortOrder: string): void;
/**
* Auto-sizes grid rows. This method will update the <em>height</em> of all Grid rows.
*/
autoSizeRows(): void;
/**
* 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}
*/
areAllRowsSelected(): boolean;
/**
* Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
*/
beginUpdate(): void;
/**
* Begins row, cell or column. This method allows you to programmatically start a cell, row or column editing. After calling it, an editor HTMLElement will be created and displayed in the Grid.
* @param {string | number} rowId. row bound id
* @param {string} dataField?. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
*/
beginEdit(rowId: string | number, dataField?: string): void;
/**
* Clears all filters. Refreshes the view and updates all filter input components.
*/
clearFilter(): void;
/**
* Clears all data groups. Refreshes the view and updates the DataGrid component.
*/
clearGroups(): void;
/**
* Clears all sorting. Refreshes the view and updates the DataGrid component.
*/
clearSort(): void;
/**
* Clears the selection that user have made. All row, cell and column selection highlights will be removed.
*/
clearSelection(): void;
/**
* Cancels the editing. This method closes the cell editor and cancels the changes.
*/
cancelEdit(): void;
/**
* Checks a TreeGrid row. This method updates the row's check-box.
* @param {string | number} rowId. row bound id
*/
checkRow(rowId: string | number): void;
/**
* Checks all TreeGrid or Grouping rows. This method updates all check-boxes in the TreeGrid or Grouping rows.
*/
checkAllRows(): void;
/**
* Clears the user selection and empties the data source. The Grid will display 'No Rows' in the view.
*/
clearRows(): void;
/**
* Closes the column drop-down menu.
*/
closeMenu(): void;
/**
* Collapses a TreeGrid or Grouping row.
* @param {string | number} rowId. row bound id
*/
collapseRow(rowId: string | number): void;
/**
* Collapses all TreeGrid or Grouping rows.
*/
collapseAllRows(): void;
/**
* Creates a Chart, when charting is enabled.
* @param {string} type. Chart's type
* @param {any} dataSource?. Chart's data source
*/
createChart(type: string, dataSource?: any): void;
/**
* 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 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?: {(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
* @param {string} dataField?. column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.
* @returns {boolean}
*/
ensureVisible(rowId: string | number, dataField?: string): boolean;
/**
* Ends the editing. This method confirms all changes and closes the opened cell editor(s).
*/
endEdit(): void;
/**
* Ends the update operation. This method will resume the rendering and will refresh the Grid.
* @param {boolean} refresh?. The flag that control the calls of the refresh method.
*/
endUpdate(refresh?: boolean): void;
/**
* 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.
*/
expandAllRows(): void;
/**
* Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the <em>dataExport</em> property.
* @param {string} Dataformat. 'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
* @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer to the Smart Export Documentation.
* @param {any} dataCallback?. A callback that allows to change the exported data.
*/
exportData(Dataformat: string, callback?: any, dataCallback?: any): 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','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', '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[];
/**
* Filter by all columns. This method works like a global filter and applies a filter to all grid columns.
* @param {string} query. Filter query to filter by.
* @param {string} dataType?. Optionally filter by a specific data type like 'string', 'boolean', 'date', 'number'.
*/
filterBy(query: string, dataType?: string): void;
/**
* Navigates to a page, when paging is enabled.
* @param {number} index. page index
*/
goToPage(index: number): void;
/**
* Navigates to the next page, when grid paging is enabled.
*/
nextPage(): void;
/**
* Navigates to the prev page, when grid paging is enabled.
*/
prevPage(): void;
/**
* Navigates to the first page, when grid paging is enabled.
*/
firstPage(): void;
/**
* 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}
*/
getVerticalScrollMax(): number;
/**
* Gets the position of the vertical scrollbar.
* @returns {number}
*/
getVerticalScrollValue(): number;
/**
* Gets the maximum position of the horizontal scrollbar. You can use this method in combination with the setHorizontalScrollValue to apply a new scroll position.
* @returns {number}
*/
getHorizontalScrollMax(): number;
/**
* Gets the position of the horizontal scrollbar.
* @returns {number}
*/
getHorizontalScrollValue(): number;
/**
* Gets the columns array. Each item in the array contains the column properties which are dynamically set by the user interaction and the columns initialization data properties such as: 'label', 'dataField', 'dataType', 'visible'.
* @returns {any}
*/
getColumns(): any;
/**
* Gets the editing cell(s), when the grid is editing.
* @returns {any[]}
*/
getEditCells(): any[];
/**
* Gets the groups array.
* @returns {any[]}
*/
getGroups(): any[];
/**
* Gets an array of columns with applied sorting. Each member in the array is with column's data field used as a key and 'sortOrder' and 'sortIndex' as a value.
* @returns
*/
getSortedColumns(): {[dataField: string]: { sortOrder: string,