smart-webcomponents-react
Version:
[](https://jqwidgets.com/license/)
1,317 lines (1,313 loc) • 97.6 kB
JavaScript
"use client";
import '../source/modules/smart.grid'
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
//require('../source/modules/smart.grid');
}
import React from 'react';
import ReactDOM from 'react-dom/client';
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
/**
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.
*/
class Grid extends React.Component {
// Gets the id of the React component.
get id() {
if (!this._id) {
this._id = 'Grid' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return this._id;
}
/** An object containing settings related to the grid's appearance.
* Property type: GridAppearance
*/
get appearance() {
return this.nativeElement ? this.nativeElement.appearance : undefined;
}
set appearance(value) {
if (this.nativeElement) {
this.nativeElement.appearance = value;
}
}
/** An object containing settings related to the grid's AI integration.
* Property type: AI
*/
get ai() {
return this.nativeElement ? this.nativeElement.ai : undefined;
}
set ai(value) {
if (this.nativeElement) {
this.nativeElement.ai = value;
}
}
/** An object containing settings related to the grid's behavior.
* Property type: GridBehavior
*/
get behavior() {
return this.nativeElement ? this.nativeElement.behavior : undefined;
}
set behavior(value) {
if (this.nativeElement) {
this.nativeElement.behavior = value;
}
}
/** 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.
* Property type: string | number
*/
get currentUser() {
return this.nativeElement ? this.nativeElement.currentUser : undefined;
}
set currentUser(value) {
if (this.nativeElement) {
this.nativeElement.currentUser = value;
}
}
/** Describes the column header settings.
* Property type: GridColumnHeader
*/
get columnHeader() {
return this.nativeElement ? this.nativeElement.columnHeader : undefined;
}
set columnHeader(value) {
if (this.nativeElement) {
this.nativeElement.columnHeader = value;
}
}
/** The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..
* Property type: GridClipboard
*/
get clipboard() {
return this.nativeElement ? this.nativeElement.clipboard : undefined;
}
set clipboard(value) {
if (this.nativeElement) {
this.nativeElement.clipboard = value;
}
}
/** The columns property is used to describe all columns displayed in the grid.
* Property type: {label: string, dataField: string}[] | string[] | number | GridColumn[]
*/
get columns() {
return this.nativeElement ? this.nativeElement.columns : undefined;
}
set columns(value) {
if (this.nativeElement) {
this.nativeElement.columns = value;
}
}
/** 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.
* Property type: GridContextMenu
*/
get contextMenu() {
return this.nativeElement ? this.nativeElement.contextMenu : undefined;
}
set contextMenu(value) {
if (this.nativeElement) {
this.nativeElement.contextMenu = value;
}
}
/** 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.
* Property type: GridColumnMenu
*/
get columnMenu() {
return this.nativeElement ? this.nativeElement.columnMenu : undefined;
}
set columnMenu(value) {
if (this.nativeElement) {
this.nativeElement.columnMenu = value;
}
}
/** Describes the settings of the column groups.
* Property type: GridColumnGroup[]
*/
get columnGroups() {
return this.nativeElement ? this.nativeElement.columnGroups : undefined;
}
set columnGroups(value) {
if (this.nativeElement) {
this.nativeElement.columnGroups = value;
}
}
/**
* Property type: boolean
*/
get dropDownMode() {
return this.nativeElement ? this.nativeElement.dropDownMode : undefined;
}
set dropDownMode(value) {
if (this.nativeElement) {
this.nativeElement.dropDownMode = value;
}
}
/** Sets or gets details about conditional formatting to be applied to the Grid's cells.
* Property type: GridConditionalFormatting[]
*/
get conditionalFormatting() {
return this.nativeElement ? this.nativeElement.conditionalFormatting : undefined;
}
set conditionalFormatting(value) {
if (this.nativeElement) {
this.nativeElement.conditionalFormatting = value;
}
}
/** Sets the Grid Charting Data Visualization.
* Property type: GridCharting
*/
get charting() {
return this.nativeElement ? this.nativeElement.charting : undefined;
}
set charting(value) {
if (this.nativeElement) {
this.nativeElement.charting = value;
}
}
/** Sets the TreeGrid checkboxes.
* Property type: GridCheckBoxes
*/
get checkBoxes() {
return this.nativeElement ? this.nativeElement.checkBoxes : undefined;
}
set checkBoxes(value) {
if (this.nativeElement) {
this.nativeElement.checkBoxes = value;
}
}
/** Sets the Grid Data Export options.
* Property type: GridDataExport
*/
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
if (this.nativeElement) {
this.nativeElement.dataExport = value;
}
}
/** Sets the grid's data source. The value of dataSource can be an instance of JQX.DataAdapter or an Array.
* Property type: any
*/
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
if (this.nativeElement) {
this.nativeElement.dataSource = value;
}
}
/** Sets the grid's data source settings when the dataSource property is set to an Array or URL.
* Property type: GridDataSourceSettings
*/
get dataSourceSettings() {
return this.nativeElement ? this.nativeElement.dataSourceSettings : undefined;
}
set dataSourceSettings(value) {
if (this.nativeElement) {
this.nativeElement.dataSourceSettings = value;
}
}
/** Describes the grid's editing settings.
* Property type: GridEditing
*/
get editing() {
return this.nativeElement ? this.nativeElement.editing : undefined;
}
set editing(value) {
if (this.nativeElement) {
this.nativeElement.editing = value;
}
}
/** Describes the grid's filtering settings.
* Property type: GridFiltering
*/
get filtering() {
return this.nativeElement ? this.nativeElement.filtering : undefined;
}
set filtering(value) {
if (this.nativeElement) {
this.nativeElement.filtering = value;
}
}
/** Describes the footer settings of the grid.
* Property type: GridFooter
*/
get footer() {
return this.nativeElement ? this.nativeElement.footer : undefined;
}
set footer(value) {
if (this.nativeElement) {
this.nativeElement.footer = value;
}
}
/** 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).
* Property type: boolean
*/
get formulas() {
return this.nativeElement ? this.nativeElement.formulas : undefined;
}
set formulas(value) {
if (this.nativeElement) {
this.nativeElement.formulas = value;
}
}
/** Describes the grid's grouping settings.
* Property type: GridGrouping
*/
get grouping() {
return this.nativeElement ? this.nativeElement.grouping : undefined;
}
set grouping(value) {
if (this.nativeElement) {
this.nativeElement.grouping = value;
}
}
/** Describes the settings for the group header.
* Property type: GridGroupHeader
*/
get groupHeader() {
return this.nativeElement ? this.nativeElement.groupHeader : undefined;
}
set groupHeader(value) {
if (this.nativeElement) {
this.nativeElement.groupHeader = value;
}
}
/** Describes the header settings of the grid.
* Property type: GridHeader
*/
get header() {
return this.nativeElement ? this.nativeElement.header : undefined;
}
set header(value) {
if (this.nativeElement) {
this.nativeElement.header = value;
}
}
/** An object containing settings related to the grid's layout.
* Property type: GridLayout
*/
get layout() {
return this.nativeElement ? this.nativeElement.layout : undefined;
}
set layout(value) {
if (this.nativeElement) {
this.nativeElement.layout = value;
}
}
/** Sets or gets the unlockKey which unlocks the product.
* Property type: string
*/
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
if (this.nativeElement) {
this.nativeElement.unlockKey = value;
}
}
/** Sets or gets the language. Used in conjunction with the property messages.
* Property type: string
*/
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
if (this.nativeElement) {
this.nativeElement.locale = value;
}
}
/** 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.
* Property type: any
*/
get keys() {
return this.nativeElement ? this.nativeElement.keys : undefined;
}
set keys(value) {
if (this.nativeElement) {
this.nativeElement.keys = value;
}
}
/** Sets the messages values.
* Property type: any
*/
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
if (this.nativeElement) {
this.nativeElement.messages = value;
}
}
/** Callback function(chart: JQX.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings.
* Property type: {(cell: GridCell): void}
*/
get onCellValue() {
return this.nativeElement ? this.nativeElement.onCellValue : undefined;
}
set onCellValue(value) {
if (this.nativeElement) {
this.nativeElement.onCellValue = value;
}
}
/** Callback function() called when the grid has been rendered.
* Property type: {(cells: GridCell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}
*/
get onCellUpdate() {
return this.nativeElement ? this.nativeElement.onCellUpdate : undefined;
}
set onCellUpdate(value) {
if (this.nativeElement) {
this.nativeElement.onCellUpdate = value;
}
}
/** Callback function() called when the grid has been rendered for first time and bindings are completed. The component is ready.
* Property type: {(cell: GridCell): void}
*/
get onCellRender() {
return this.nativeElement ? this.nativeElement.onCellRender : undefined;
}
set onCellRender(value) {
if (this.nativeElement) {
this.nativeElement.onCellRender = value;
}
}
/** Describes the paging settings.
* Property type: {(id: string, dataField: string, value: any): boolean}
*/
get onCellBeginEdit() {
return this.nativeElement ? this.nativeElement.onCellBeginEdit : undefined;
}
set onCellBeginEdit(value) {
if (this.nativeElement) {
this.nativeElement.onCellBeginEdit = value;
}
}
/** Describes the pager settings.
* Property type: {(id: string, dataField: string, value: any, oldValue: any, data: any): void}
*/
get onCellEditRequest() {
return this.nativeElement ? this.nativeElement.onCellEditRequest : undefined;
}
set onCellEditRequest(value) {
if (this.nativeElement) {
this.nativeElement.onCellEditRequest = value;
}
}
/** Sets the row details.
* Property type: {(id: string, dataField: string, value: any): boolean}
*/
get onCellValueChanged() {
return this.nativeElement ? this.nativeElement.onCellValueChanged : undefined;
}
set onCellValueChanged(value) {
if (this.nativeElement) {
this.nativeElement.onCellValueChanged = value;
}
}
/** 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.
* Property type: {(): void}
*/
get onBeforeInit() {
return this.nativeElement ? this.nativeElement.onBeforeInit : undefined;
}
set onBeforeInit(value) {
if (this.nativeElement) {
this.nativeElement.onBeforeInit = value;
}
}
/** Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
* Property type: {(): void}
*/
get onInit() {
return this.nativeElement ? this.nativeElement.onInit : undefined;
}
set onInit(value) {
if (this.nativeElement) {
this.nativeElement.onInit = value;
}
}
/** The rows property is used to describe all rows displayed in the grid.
* Property type: {(): void}
*/
get onAfterInit() {
return this.nativeElement ? this.nativeElement.onAfterInit : undefined;
}
set onAfterInit(value) {
if (this.nativeElement) {
this.nativeElement.onAfterInit = value;
}
}
/** Sets the scroll mode settings.
* Property type: any
*/
get onChartInit() {
return this.nativeElement ? this.nativeElement.onChartInit : undefined;
}
set onChartInit(value) {
if (this.nativeElement) {
this.nativeElement.onChartInit = value;
}
}
/** Describes the summary row settings.
* Property type: any
*/
get onRender() {
return this.nativeElement ? this.nativeElement.onRender : undefined;
}
set onRender(value) {
if (this.nativeElement) {
this.nativeElement.onRender = value;
}
}
/** Sets the grid's state settings.
* Property type: any
*/
get onLoad() {
return this.nativeElement ? this.nativeElement.onLoad : undefined;
}
set onLoad(value) {
if (this.nativeElement) {
this.nativeElement.onLoad = value;
}
}
/** Describes the selection settings.
* Property type: {(event: KeyboardEvent): void}
*/
get onKey() {
return this.nativeElement ? this.nativeElement.onKey : undefined;
}
set onKey(value) {
if (this.nativeElement) {
this.nativeElement.onKey = value;
}
}
/** Describes sorting settings.
* Property type: {(index: number, row: GridRow): void}
*/
get onRowInit() {
return this.nativeElement ? this.nativeElement.onRowInit : undefined;
}
set onRowInit(value) {
if (this.nativeElement) {
this.nativeElement.onRowInit = value;
}
}
/** Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties.
* Property type: {(index: number, row: GridRow, details: HTMLElement): void}
*/
get onRowDetailInit() {
return this.nativeElement ? this.nativeElement.onRowDetailInit : undefined;
}
set onRowDetailInit(value) {
if (this.nativeElement) {
this.nativeElement.onRowDetailInit = value;
}
}
/** Sets the grid's image and filter upload settings for the image and attachment columns.
* Property type: {(index: number, row: GridRow, details: HTMLElement): void}
*/
get onRowDetailUpdated() {
return this.nativeElement ? this.nativeElement.onRowDetailUpdated : undefined;
}
set onRowDetailUpdated(value) {
if (this.nativeElement) {
this.nativeElement.onRowDetailUpdated = value;
}
}
/** Sets the current data view. The possible values are 'grid', 'kanban' and 'card'.
* Property type: {(index: number, row: GridRow, history: any[]): void}
*/
get onRowHistory() {
return this.nativeElement ? this.nativeElement.onRowHistory : undefined;
}
set onRowHistory(value) {
if (this.nativeElement) {
this.nativeElement.onRowHistory = value;
}
}
/** undefined
* Property type: {(index: number, row: GridRow, history: any[]): void}
*/
get onRowStyle() {
return this.nativeElement ? this.nativeElement.onRowStyle : undefined;
}
set onRowStyle(value) {
if (this.nativeElement) {
this.nativeElement.onRowStyle = value;
}
}
/** undefined
* Property type: {(index: number[], row: GridRow[]): void}
*/
get onRowInserted() {
return this.nativeElement ? this.nativeElement.onRowInserted : undefined;
}
set onRowInserted(value) {
if (this.nativeElement) {
this.nativeElement.onRowInserted = value;
}
}
/** undefined
* Property type: {(indexes: number[], rows: GridRow[]): void}
*/
get onRowRemoved() {
return this.nativeElement ? this.nativeElement.onRowRemoved : undefined;
}
set onRowRemoved(value) {
if (this.nativeElement) {
this.nativeElement.onRowRemoved = value;
}
}
/** undefined
* Property type: {(index: number[], row: GridRow[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}
*/
get onRowUpdate() {
return this.nativeElement ? this.nativeElement.onRowUpdate : undefined;
}
set onRowUpdate(value) {
if (this.nativeElement) {
this.nativeElement.onRowUpdate = value;
}
}
/** undefined
* Property type: {(index: number[], row: GridRow[]): void}
*/
get onRowUpdated() {
return this.nativeElement ? this.nativeElement.onRowUpdated : undefined;
}
set onRowUpdated(value) {
if (this.nativeElement) {
this.nativeElement.onRowUpdated = value;
}
}
/** undefined
* Property type: {(index: number, data: any, row: GridRow[]): void}
*/
get onRowClass() {
return this.nativeElement ? this.nativeElement.onRowClass : undefined;
}
set onRowClass(value) {
if (this.nativeElement) {
this.nativeElement.onRowClass = value;
}
}
/** undefined
* Property type: {(index: number, dataField: string, cellValue: any, data: any, row: GridRow[]): void}
*/
get onCellClass() {
return this.nativeElement ? this.nativeElement.onCellClass : undefined;
}
set onCellClass(value) {
if (this.nativeElement) {
this.nativeElement.onCellClass = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnInit() {
return this.nativeElement ? this.nativeElement.onColumnInit : undefined;
}
set onColumnInit(value) {
if (this.nativeElement) {
this.nativeElement.onColumnInit = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnInserted() {
return this.nativeElement ? this.nativeElement.onColumnInserted : undefined;
}
set onColumnInserted(value) {
if (this.nativeElement) {
this.nativeElement.onColumnInserted = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnRemoved() {
return this.nativeElement ? this.nativeElement.onColumnRemoved : undefined;
}
set onColumnRemoved(value) {
if (this.nativeElement) {
this.nativeElement.onColumnRemoved = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnUpdated() {
return this.nativeElement ? this.nativeElement.onColumnUpdated : undefined;
}
set onColumnUpdated(value) {
if (this.nativeElement) {
this.nativeElement.onColumnUpdated = value;
}
}
/** undefined
* Property type: {(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void}
*/
get onColumnClone() {
return this.nativeElement ? this.nativeElement.onColumnClone : undefined;
}
set onColumnClone(value) {
if (this.nativeElement) {
this.nativeElement.onColumnClone = value;
}
}
/** undefined
* Property type: {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void}
*/
get onCommand() {
return this.nativeElement ? this.nativeElement.onCommand : undefined;
}
set onCommand(value) {
if (this.nativeElement) {
this.nativeElement.onCommand = value;
}
}
/** undefined
* Property type: GridPaging
*/
get paging() {
return this.nativeElement ? this.nativeElement.paging : undefined;
}
set paging(value) {
if (this.nativeElement) {
this.nativeElement.paging = value;
}
}
/** undefined
* Property type: GridPager
*/
get pager() {
return this.nativeElement ? this.nativeElement.pager : undefined;
}
set pager(value) {
if (this.nativeElement) {
this.nativeElement.pager = value;
}
}
/** undefined
* Property type: GridRowDetail
*/
get rowDetail() {
return this.nativeElement ? this.nativeElement.rowDetail : undefined;
}
set rowDetail(value) {
if (this.nativeElement) {
this.nativeElement.rowDetail = value;
}
}
/** undefined
* Property type: any
*/
get rowCSSRules() {
return this.nativeElement ? this.nativeElement.rowCSSRules : undefined;
}
set rowCSSRules(value) {
if (this.nativeElement) {
this.nativeElement.rowCSSRules = value;
}
}
/** undefined
* Property type: boolean
*/
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
if (this.nativeElement) {
this.nativeElement.rightToLeft = value;
}
}
/** undefined
* Property type: GridRow[]
*/
get rows() {
return this.nativeElement ? this.nativeElement.rows : undefined;
}
set rows(value) {
if (this.nativeElement) {
this.nativeElement.rows = value;
}
}
/** undefined
* Property type: Scrolling | string
*/
get scrolling() {
return this.nativeElement ? this.nativeElement.scrolling : undefined;
}
set scrolling(value) {
if (this.nativeElement) {
this.nativeElement.scrolling = value;
}
}
/** undefined
* Property type: GridSummaryRow
*/
get summaryRow() {
return this.nativeElement ? this.nativeElement.summaryRow : undefined;
}
set summaryRow(value) {
if (this.nativeElement) {
this.nativeElement.summaryRow = value;
}
}
/** undefined
* Property type: GridStateSettings
*/
get stateSettings() {
return this.nativeElement ? this.nativeElement.stateSettings : undefined;
}
set stateSettings(value) {
if (this.nativeElement) {
this.nativeElement.stateSettings = value;
}
}
/** undefined
* Property type: GridSelection
*/
get selection() {
return this.nativeElement ? this.nativeElement.selection : undefined;
}
set selection(value) {
if (this.nativeElement) {
this.nativeElement.selection = value;
}
}
/** undefined
* Property type: GridSorting
*/
get sorting() {
return this.nativeElement ? this.nativeElement.sorting : undefined;
}
set sorting(value) {
if (this.nativeElement) {
this.nativeElement.sorting = value;
}
}
/** undefined
* Property type: any[]
*/
get users() {
return this.nativeElement ? this.nativeElement.users : undefined;
}
set users(value) {
if (this.nativeElement) {
this.nativeElement.users = value;
}
}
/** undefined
* Property type: GridUploadSettings
*/
get uploadSettings() {
return this.nativeElement ? this.nativeElement.uploadSettings : undefined;
}
set uploadSettings(value) {
if (this.nativeElement) {
this.nativeElement.uploadSettings = value;
}
}
/** undefined
* Property type: string
*/
get view() {
return this.nativeElement ? this.nativeElement.view : undefined;
}
set view(value) {
if (this.nativeElement) {
this.nativeElement.view = value;
}
}
// Gets the properties of the React component.
get properties() {
return ["appearance", "ai", "behavior", "currentUser", "columnHeader", "clipboard", "columns", "contextMenu", "columnMenu", "columnGroups", "dropDownMode", "conditionalFormatting", "charting", "checkBoxes", "dataExport", "dataSource", "dataSourceSettings", "editing", "filtering", "footer", "formulas", "grouping", "groupHeader", "header", "layout", "unlockKey", "locale", "keys", "messages", "onCellValue", "onCellUpdate", "onCellRender", "onCellBeginEdit", "onCellEditRequest", "onCellValueChanged", "onBeforeInit", "onInit", "onAfterInit", "onChartInit", "onRender", "onLoad", "onKey", "onRowInit", "onRowDetailInit", "onRowDetailUpdated", "onRowHistory", "onRowStyle", "onRowInserted", "onRowRemoved", "onRowUpdate", "onRowUpdated", "onRowClass", "onCellClass", "onColumnInit", "onColumnInserted", "onColumnRemoved", "onColumnUpdated", "onColumnClone", "onCommand", "paging", "pager", "rowDetail", "rowCSSRules", "rightToLeft", "rows", "scrolling", "summaryRow", "stateSettings", "selection", "sorting", "users", "uploadSettings", "view"];
}
// Gets the events of the React component.
get eventListeners() {
return ["onBeginEdit", "onBatchChange", "onBatchCancel", "onChange", "onColumnClick", "onColumnDoubleClick", "onColumnResize", "onColumnDragStart", "onColumnChange", "onColumnDragging", "onColumnDragEnd", "onColumnReorder", "onCommentAdd", "onCommentRemove", "onContextMenuItemClick", "onRowDragStart", "onRowDragging", "onRowDragEnd", "onRowReorder", "onRowExpand", "onRowCollapse", "onRowClick", "onRowDoubleClick", "onRowResize", "onRowStarred", "onCellClick", "onCellDoubleClick", "onEndEdit", "onFilter", "onGroup", "onOpenColumnDialog", "onCloseColumnDialog", "onResize", "onRowTap", "onCellTap", "onPage", "onSort", "onScrollBottomReached", "onScrollTopReached", "onCreate", "onReady"];
}
/** 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 {{(row: GridRow): void}} callback?. Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
*/
addRow(data, insertAtBottom, callback) {
if (this.nativeElement.isRendered) {
this.nativeElement.addRow(data, insertAtBottom, callback);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addRow(data, insertAtBottom, callback);
});
}
}
/** 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) {
const result = this.nativeElement.addNewRow(position);
return result;
}
/** Adds a new column.
* @param {any} column. A Grid column object. See 'columns' property.
* @returns {boolean}
*/
addNewColumn(column) {
const result = this.nativeElement.addNewColumn(column);
return result;
}
/** 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, position) {
const result = this.nativeElement.addUnboundRow(count, position);
return result;
}
/** 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, filter, refreshFilters) {
if (this.nativeElement.isRendered) {
this.nativeElement.addFilter(dataField, filter, refreshFilters);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addFilter(dataField, filter, refreshFilters);
});
}
}
/** 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) {
if (this.nativeElement.isRendered) {
this.nativeElement.addGroup(dataField);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addGroup(dataField);
});
}
}
/** 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, sortOrder) {
if (this.nativeElement.isRendered) {
this.nativeElement.addSort(dataField, sortOrder);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addSort(dataField, sortOrder);
});
}
}
/** Auto-sizes grid rows. This method will update the height of all Grid rows.
*/
autoSizeRows() {
if (this.nativeElement.isRendered) {
this.nativeElement.autoSizeRows();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.autoSizeRows();
});
}
}
/** Auto-sizes grid columns. This method will update the width of all Grid columns.
*/
autoSizeColumns() {
if (this.nativeElement.isRendered) {
this.nativeElement.autoSizeColumns();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.autoSizeColumns();
});
}
}
/** Auto-sizes grid column. This method will update the width 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) {
if (this.nativeElement.isRendered) {
this.nativeElement.autoSizeColumn(dataField);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.autoSizeColumn(dataField);
});
}
}
/** This method returns true, if all rows in the Grid are selected.
* @returns {boolean}
*/
areAllRowsSelected() {
const result = this.nativeElement.areAllRowsSelected();
return result;
}
/** Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
*/
beginUpdate() {
if (this.nativeElement.isRendered) {
this.nativeElement.beginUpdate();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.beginUpdate();
});
}
}
/** 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, dataField) {
if (this.nativeElement.isRendered) {
this.nativeElement.beginEdit(rowId, dataField);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.beginEdit(rowId, dataField);
});
}
}
/** Clears all filters. Refreshes the view and updates all filter input components.
*/
clearFilter() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearFilter();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearFilter();
});
}
}
/** Clears all data groups. Refreshes the view and updates the DataGrid component.
*/
clearGroups() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearGroups();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearGroups();
});
}
}
/** Clears all sorting. Refreshes the view and updates the DataGrid component.
*/
clearSort() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearSort();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearSort();
});
}
}
/** Clears the selection that user have made. All row, cell and column selection highlights will be removed.
*/
clearSelection() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearSelection();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearSelection();
});
}
}
/** Cancels the editing. This method closes the cell editor and cancels the changes.
*/
cancelEdit() {
if (this.nativeElement.isRendered) {
this.nativeElement.cancelEdit();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.cancelEdit();
});
}
}
/** Checks a TreeGrid row. This method updates the row's check-box.
* @param {string | number} rowId. row bound id
*/
checkRow(rowId) {
if (this.nativeElement.isRendered) {
this.nativeElement.checkRow(rowId);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.checkRow(rowId);
});
}
}
/** Checks all TreeGrid or Grouping rows. This method updates all check-boxes in the TreeGrid or Grouping rows.
*/
checkAllRows() {
if (this.nativeElement.isRendered) {
this.nativeElement.checkAllRows();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.checkAllRows();
});
}
}
/** Clears the user selection and empties the data source. The Grid will display 'No Rows' in the view.
*/
clearRows() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearRows();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearRows();
});
}
}
/** Closes the column drop-down menu.
*/
closeMenu() {
if (this.nativeElement.isRendered) {
this.nativeElement.closeMenu();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.closeMenu();
});
}
}
/** Collapses a TreeGrid or Grouping row.
* @param {string | number} rowId. row bound id
*/
collapseRow(rowId) {
if (this.nativeElement.isRendered) {
this.nativeElement.collapseRow(rowId);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.collapseRow(rowId);
});
}
}
/** Collapses all TreeGrid or Grouping rows.
*/
collapseAllRows() {
if (this.nativeElement.isRendered) {
this.nativeElement.collapseAllRows();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.collapseAllRows();
});
}
}
/** Creates a Chart, when charting is enabled.
* @param {string} type. Chart's type
* @param {any} dataSource?. Chart's data source
*/
createChart(type, dataSource) {
if (this.nativeElement.isRendered) {
this.nativeElement.createChart(type, dataSource);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.createChart(type, dataSource);
});
}
}
/** 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 {{(row: GridRow): void}} callback?. Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.
*/
deleteRow(rowId, callback) {
if (this.nativeElement.isRendered) {
this.nativeElement.deleteRow(rowId, callback);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.deleteRow(rowId, callback);
});
}
}
/** 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, dataField) {
const result = this.nativeElement.ensureVisible(rowId, dataField);
return result;
}
/** Ends the editing. This method confirms all changes and closes the opened cell editor(s).
*/
endEdit() {
if (this.nativeElement.isRendered) {
this.nativeElement.endEdit();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.endEdit();
});
}
}
/** 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) {
if (this.nativeElement.isRendered) {
this.nativeElement.endUpdate(refresh);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.endUpdate(refresh);
});
}
}
/** 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) {
if (this.nativeElement.isRendered) {
this.nativeElement.expandRow(rowId);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.expandRow(rowId);
});
}
}
/** 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) {
if (this.nativeElement.isRendered) {
this.nativeElement.expandRowsToGroupLevel(level);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.expandRowsToGroupLevel(level);
});
}
}
/** Expands all TreeGrid or Grouping rows.
*/
expandAllRows() {
if (this.nativeElement.isRendered) {
this.nativeElement.expandAllRows();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.expandAllRows();
});
}
}
/** Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the dataExport 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, callback, dataCallback) {
if (this.nativeElement.isRendered) {
this.nativeElement.exportData(Dataformat, callback, dataCallback);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.exportData(Dataformat, callback, dataCallback);
});
}
}
/** 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, dataField, condition) {
const result = this.nativeElement.find(query, dataField, condition);
return result;
}
/** 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) {
const result = this.nativeElement.findCells(query);
return result;
}
/** 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, dataType) {
if (this.nativeElement.isRendered) {
this.nativeElement.filterBy(query, dataType);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.filterBy(query, dataType);
});
}
}
/** Navigates to a page, when paging is enabled.
* @param {number} index. page index
*/
goToPage(index) {
if (this.nativeElement.isRendered) {
this.nativeElement.goToPage(index);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.goToPage(index);
});
}
}
/** Navigates to the next page, when grid paging is enabled.
*/
nextPage() {
if (this.nativeElement.isRendered) {
this.nativeElement.nextPage();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.nextPage();
});
}
}
/** Navigates to the prev page, when grid paging is enabled.
*/
prevPage() {
if (this.nativeElement.isRendered) {
this.nativeElement.prevPage();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.prevPage();
});
}
}
/** Navigates to the first page, when grid paging is enabled.
*/
firstPage() {
if (this.nativeEle