smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
1,425 lines (1,346 loc) • 113 kB
JSX
import React from "react";
import ReactDOM from 'react-dom/client';
/**
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 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: GridAi
*/
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"];
}
/** 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 event was created with: event.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 = null; get onBeginEdit() {
return this._onBeginEdit;
}
set onBeginEdit(value) {
this._onBeginEdit = value;
}
/** 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 event was created with: event.detail( type)
* type - The type of dropdown. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'
*/
_onBatchChange = null; get onBatchChange() {
return this._onBatchChange;
}
set onBatchChange(value) {
this._onBatchChange = value;
}
/** 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 event was created with: event.detail( type)
* type - The type of dropdown. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'
*/
_onBatchCancel = null; get onBatchCancel() {
return this._onBatchCancel;
}
set onBatchCancel(value) {
this._onBatchCancel = value;
}
/** 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 event was created with: event.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 = null; get onChange() {
return this._onChange;
}
set onChange(value) {
this._onChange = value;
}
/** This event is triggered, when the user clicks on the header of a column.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnClick() {
return this._onColumnClick;
}
set onColumnClick(value) {
this._onColumnClick = value;
}
/** This event is triggered, when the user double clicks on the header of a column.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnDoubleClick() {
return this._onColumnDoubleClick;
}
set onColumnDoubleClick(value) {
this._onColumnDoubleClick = value;
}
/** This event is triggered, when the user resized a column.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnResize() {
return this._onColumnResize;
}
set onColumnResize(value) {
this._onColumnResize = value;
}
/** This event is triggered, when the user starts a column drag.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnDragStart() {
return this._onColumnDragStart;
}
set onColumnDragStart(value) {
this._onColumnDragStart = value;
}
/** This event is triggered, when a column property is changed.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnChange() {
return this._onColumnChange;
}
set onColumnChange(value) {
this._onColumnChange = value;
}
/** This event is triggered, when the user drags a column.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnDragging() {
return this._onColumnDragging;
}
set onColumnDragging(value) {
this._onColumnDragging = value;
}
/** This event is triggered, when the user drops a column.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnDragEnd() {
return this._onColumnDragEnd;
}
set onColumnDragEnd(value) {
this._onColumnDragEnd = value;
}
/** This event is triggered, when the user reorders a column.
* @param event. The custom event. Custom event was created with: event.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 = null; get onColumnReorder() {
return this._onColumnReorder;
}
set onColumnReorder(value) {
this._onColumnReorder = value;
}
/** This event is triggered, when the user enters a comment in the row edit dialog.
* @param event. The custom event. Custom event was created with: event.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 = null; get onCommentAdd() {
return this._onCommentAdd;
}
set onCommentAdd(value) {
this._onCommentAdd = value;
}
/** This event is triggered, when the user removes a comment in the row edit dialog.
* @param event. The custom event. Custom event was created with: event.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 = null; get onCommentRemove() {
return this._onCommentRemove;
}
set onCommentRemove(value) {
this._onCommentRemove = value;
}
/** This event is triggered, when the user clicks on a context menu item.
* @param event. The custom event. Custom event was created with: event.detail( id, dataField, command)
* id - The row's id.
* dataField - The column's data field.
* command - Command function.
*/
_onContextMenuItemClick = null; get onContextMenuItemClick() {
return this._onContextMenuItemClick;
}
set onContextMenuItemClick(value) {
this._onContextMenuItemClick = value;
}
/** This event is triggered, when the user starts a row drag.
* @param event. The custom event. Custom event was created with: event.detail( row, id, index, originalEvent)
* row - The row.
* id - The row's id
* index - The row's index
* originalEvent - The origianl Event object.
*/
_onRowDragStart = null; get onRowDragStart() {
return this._onRowDragStart;
}
set onRowDragStart(value) {
this._onRowDragStart = value;
}
/** This event is triggered, when the user drags a row.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowDragging() {
return this._onRowDragging;
}
set onRowDragging(value) {
this._onRowDragging = value;
}
/** This event is triggered, when the user drags a row.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowDragEnd() {
return this._onRowDragEnd;
}
set onRowDragEnd(value) {
this._onRowDragEnd = value;
}
/** This event is triggered, when the user reorders a row.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowReorder() {
return this._onRowReorder;
}
set onRowReorder(value) {
this._onRowReorder = value;
}
/** 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 event was created with: event.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 = null; get onRowExpand() {
return this._onRowExpand;
}
set onRowExpand(value) {
this._onRowExpand = value;
}
/** 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 event was created with: event.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 = null; get onRowCollapse() {
return this._onRowCollapse;
}
set onRowCollapse(value) {
this._onRowCollapse = value;
}
/** This event is triggered, when the user clicks on a row of the grid.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowClick() {
return this._onRowClick;
}
set onRowClick(value) {
this._onRowClick = value;
}
/** This event is triggered, when the user double clicks on a row of the grid.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowDoubleClick() {
return this._onRowDoubleClick;
}
set onRowDoubleClick(value) {
this._onRowDoubleClick = value;
}
/** This event is triggered, when the user resized a row.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowResize() {
return this._onRowResize;
}
set onRowResize(value) {
this._onRowResize = value;
}
/** This event is triggered, when the user clicks on the row header's star.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowStarred() {
return this._onRowStarred;
}
set onRowStarred(value) {
this._onRowStarred = value;
}
/** This event is triggered, when the user clicks on a cell of the grid.
* @param event. The custom event. Custom event was created with: event.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 = null; get onCellClick() {
return this._onCellClick;
}
set onCellClick(value) {
this._onCellClick = value;
}
/** This event is triggered, when the user double clicks on a cell of the grid.
* @param event. The custom event. Custom event was created with: event.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 = null; get onCellDoubleClick() {
return this._onCellDoubleClick;
}
set onCellDoubleClick(value) {
this._onCellDoubleClick = value;
}
/** This event is triggered, when the edit ends.
* @param event. The custom event. Custom event was created with: event.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 = null; get onEndEdit() {
return this._onEndEdit;
}
set onEndEdit(value) {
this._onEndEdit = value;
}
/** This event is triggered, when a filter is added or removed.
* @param event. The custom event. Custom event was created with: event.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 = null; get onFilter() {
return this._onFilter;
}
set onFilter(value) {
this._onFilter = value;
}
/** This event is triggered, when the rows grouping is changed.
* @param event. The custom event. Custom event was created with: event.detail( groups)
* groups - Array of column data fields.
*/
_onGroup = null; get onGroup() {
return this._onGroup;
}
set onGroup(value) {
this._onGroup = value;
}
/** This event is triggered, when the add new column dialog is opened.
* @param event. The custom event. Custom event was created with: event.detail( dataField)
* dataField - The column data field.
*/
_onOpenColumnDialog = null; get onOpenColumnDialog() {
return this._onOpenColumnDialog;
}
set onOpenColumnDialog(value) {
this._onOpenColumnDialog = value;
}
/** This event is triggered, when the add new column dialog is closed.
* @param event. The custom event. Custom event was created with: event.detail( dataField)
* dataField - The column data field.
*/
_onCloseColumnDialog = null; get onCloseColumnDialog() {
return this._onCloseColumnDialog;
}
set onCloseColumnDialog(value) {
this._onCloseColumnDialog = value;
}
/** This event is triggered, when the grid is resized.
* @param event. The custom event. */
_onResize = null; get onResize() {
return this._onResize;
}
set onResize(value) {
this._onResize = value;
}
/** This event is triggered when the user touches and holds on the row for at least 300ms.
* @param event. The custom event. Custom event was created with: event.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 = null; get onRowTap() {
return this._onRowTap;
}
set onRowTap(value) {
this._onRowTap = value;
}
/** This event is triggered when the user touches and holds on the cell for at least 300ms.
* @param event. The custom event. Custom event was created with: event.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 = null; get onCellTap() {
return this._onCellTap;
}
set onCellTap(value) {
this._onCellTap = value;
}
/** This event is triggered, when the user changes the pages.
* @param event. The custom event. */
_onPage = null; get onPage() {
return this._onPage;
}
set onPage(value) {
this._onPage = value;
}
/** This event is triggered, when a sorting column is added or removed.
* @param event. The custom event. Custom event was created with: event.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 = null; get onSort() {
return this._onSort;
}
set onSort(value) {
this._onSort = value;
}
/** This event is triggered, when the user reaches the bottom of the grid.
* @param event. The custom event. */
_onScrollBottomReached = null; get onScrollBottomReached() {
return this._onScrollBottomReached;
}
set onScrollBottomReached(value) {
this._onScrollBottomReached = value;
}
/** This event is triggered, when the user reaches the top of the grid.
* @param event. The custom event. */
_onScrollTopReached = null; get onScrollTopReached() {
return this._onScrollTopReached;
}
set onScrollTopReached(value) {
this._onScrollTopReached = value;
}
// 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"];
}
/** 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 data