smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
919 lines (915 loc) • 161 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.grid';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class GridComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description 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.
*/
this.onBeginEdit = new EventEmitter();
/** @description 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'
*/
this.onBatchChange = new EventEmitter();
/** @description 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'
*/
this.onBatchCancel = new EventEmitter();
/** @description 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
*/
this.onChange = new EventEmitter();
/** @description 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
*/
this.onColumnClick = new EventEmitter();
/** @description 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
*/
this.onColumnDoubleClick = new EventEmitter();
/** @description 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.
*/
this.onColumnResize = new EventEmitter();
/** @description 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.
*/
this.onColumnDragStart = new EventEmitter();
/** @description 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.
*/
this.onColumnChange = new EventEmitter();
/** @description 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.
*/
this.onColumnDragging = new EventEmitter();
/** @description 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.
*/
this.onColumnDragEnd = new EventEmitter();
/** @description 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.
*/
this.onColumnReorder = new EventEmitter();
/** @description 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.
*/
this.onCommentAdd = new EventEmitter();
/** @description 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.
*/
this.onCommentRemove = new EventEmitter();
/** @description 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.
*/
this.onContextMenuItemClick = new EventEmitter();
/** @description 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.
*/
this.onRowDragStart = new EventEmitter();
/** @description 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.
*/
this.onRowDragging = new EventEmitter();
/** @description 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.
*/
this.onRowDragEnd = new EventEmitter();
/** @description 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.
*/
this.onRowReorder = new EventEmitter();
/** @description 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
*/
this.onRowExpand = new EventEmitter();
/** @description 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
*/
this.onRowCollapse = new EventEmitter();
/** @description 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.
*/
this.onRowClick = new EventEmitter();
/** @description 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.
*/
this.onRowDoubleClick = new EventEmitter();
/** @description 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.
*/
this.onRowResize = new EventEmitter();
/** @description 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.
*/
this.onRowStarred = new EventEmitter();
/** @description 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.
*/
this.onCellClick = new EventEmitter();
/** @description 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.
*/
this.onCellDoubleClick = new EventEmitter();
/** @description 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.
*/
this.onEndEdit = new EventEmitter();
/** @description 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'
*/
this.onFilter = new EventEmitter();
/** @description 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.
*/
this.onGroup = new EventEmitter();
/** @description 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.
*/
this.onOpenColumnDialog = new EventEmitter();
/** @description 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.
*/
this.onCloseColumnDialog = new EventEmitter();
/** @description This event is triggered, when the grid is resized.
* @param event. The custom event. */
this.onResize = new EventEmitter();
/** @description 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
*/
this.onRowTap = new EventEmitter();
/** @description 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
*/
this.onCellTap = new EventEmitter();
/** @description This event is triggered, when the user changes the pages.
* @param event. The custom event. */
this.onPage = new EventEmitter();
/** @description 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.
*/
this.onSort = new EventEmitter();
/** @description This event is triggered, when the user reaches the bottom of the grid.
* @param event. The custom event. */
this.onScrollBottomReached = new EventEmitter();
/** @description This event is triggered, when the user reaches the top of the grid.
* @param event. The custom event. */
this.onScrollTopReached = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-grid');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description An object containing settings related to the grid's appearance. */
get appearance() {
return this.nativeElement ? this.nativeElement.appearance : undefined;
}
set appearance(value) {
this.nativeElement ? this.nativeElement.appearance = value : undefined;
}
/** @description An object containing settings related to the grid's AI integration. */
get ai() {
return this.nativeElement ? this.nativeElement.ai : undefined;
}
set ai(value) {
this.nativeElement ? this.nativeElement.ai = value : undefined;
}
/** @description An object containing settings related to the grid's behavior. */
get behavior() {
return this.nativeElement ? this.nativeElement.behavior : undefined;
}
set behavior(value) {
this.nativeElement ? this.nativeElement.behavior = value : undefined;
}
/** @description 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. */
get currentUser() {
return this.nativeElement ? this.nativeElement.currentUser : undefined;
}
set currentUser(value) {
this.nativeElement ? this.nativeElement.currentUser = value : undefined;
}
/** @description Describes the column header settings. */
get columnHeader() {
return this.nativeElement ? this.nativeElement.columnHeader : undefined;
}
set columnHeader(value) {
this.nativeElement ? this.nativeElement.columnHeader = value : undefined;
}
/** @description The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations.. */
get clipboard() {
return this.nativeElement ? this.nativeElement.clipboard : undefined;
}
set clipboard(value) {
this.nativeElement ? this.nativeElement.clipboard = value : undefined;
}
/** @description The columns property is used to describe all columns displayed in the grid. */
get columns() {
return this.nativeElement ? this.nativeElement.columns : undefined;
}
set columns(value) {
this.nativeElement ? this.nativeElement.columns = value : undefined;
}
/** @description 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. */
get contextMenu() {
return this.nativeElement ? this.nativeElement.contextMenu : undefined;
}
set contextMenu(value) {
this.nativeElement ? this.nativeElement.contextMenu = value : undefined;
}
/** @description 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. */
get columnMenu() {
return this.nativeElement ? this.nativeElement.columnMenu : undefined;
}
set columnMenu(value) {
this.nativeElement ? this.nativeElement.columnMenu = value : undefined;
}
/** @description Describes the settings of the column groups. */
get columnGroups() {
return this.nativeElement ? this.nativeElement.columnGroups : undefined;
}
set columnGroups(value) {
this.nativeElement ? this.nativeElement.columnGroups = value : undefined;
}
/** @description */
get dropDownMode() {
return this.nativeElement ? this.nativeElement.dropDownMode : undefined;
}
set dropDownMode(value) {
this.nativeElement ? this.nativeElement.dropDownMode = value : undefined;
}
/** @description Sets or gets details about conditional formatting to be applied to the Grid's cells. */
get conditionalFormatting() {
return this.nativeElement ? this.nativeElement.conditionalFormatting : undefined;
}
set conditionalFormatting(value) {
this.nativeElement ? this.nativeElement.conditionalFormatting = value : undefined;
}
/** @description Sets the Grid Charting Data Visualization. */
get charting() {
return this.nativeElement ? this.nativeElement.charting : undefined;
}
set charting(value) {
this.nativeElement ? this.nativeElement.charting = value : undefined;
}
/** @description Sets the TreeGrid checkboxes. */
get checkBoxes() {
return this.nativeElement ? this.nativeElement.checkBoxes : undefined;
}
set checkBoxes(value) {
this.nativeElement ? this.nativeElement.checkBoxes = value : undefined;
}
/** @description Sets the Grid Data Export options. */
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
this.nativeElement ? this.nativeElement.dataExport = value : undefined;
}
/** @description Sets the grid's data source. The value of dataSource can be an instance of JQX.DataAdapter or an Array. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Sets the grid's data source settings when the dataSource property is set to an Array or URL. */
get dataSourceSettings() {
return this.nativeElement ? this.nativeElement.dataSourceSettings : undefined;
}
set dataSourceSettings(value) {
this.nativeElement ? this.nativeElement.dataSourceSettings = value : undefined;
}
/** @description Describes the grid's editing settings. */
get editing() {
return this.nativeElement ? this.nativeElement.editing : undefined;
}
set editing(value) {
this.nativeElement ? this.nativeElement.editing = value : undefined;
}
/** @description Describes the grid's filtering settings. */
get filtering() {
return this.nativeElement ? this.nativeElement.filtering : undefined;
}
set filtering(value) {
this.nativeElement ? this.nativeElement.filtering = value : undefined;
}
/** @description Describes the footer settings of the grid. */
get footer() {
return this.nativeElement ? this.nativeElement.footer : undefined;
}
set footer(value) {
this.nativeElement ? this.nativeElement.footer = value : undefined;
}
/** @description 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). */
get formulas() {
return this.nativeElement ? this.nativeElement.formulas : undefined;
}
set formulas(value) {
this.nativeElement ? this.nativeElement.formulas = value : undefined;
}
/** @description Describes the grid's grouping settings. */
get grouping() {
return this.nativeElement ? this.nativeElement.grouping : undefined;
}
set grouping(value) {
this.nativeElement ? this.nativeElement.grouping = value : undefined;
}
/** @description Describes the settings for the group header. */
get groupHeader() {
return this.nativeElement ? this.nativeElement.groupHeader : undefined;
}
set groupHeader(value) {
this.nativeElement ? this.nativeElement.groupHeader = value : undefined;
}
/** @description Describes the header settings of the grid. */
get header() {
return this.nativeElement ? this.nativeElement.header : undefined;
}
set header(value) {
this.nativeElement ? this.nativeElement.header = value : undefined;
}
/** @description An object containing settings related to the grid's layout. */
get layout() {
return this.nativeElement ? this.nativeElement.layout : undefined;
}
set layout(value) {
this.nativeElement ? this.nativeElement.layout = value : undefined;
}
/** @description Sets or gets the unlockKey which unlocks the product. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description 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. */
get keys() {
return this.nativeElement ? this.nativeElement.keys : undefined;
}
set keys(value) {
this.nativeElement ? this.nativeElement.keys = value : undefined;
}
/** @description Sets the messages values. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Callback function(chart: JQX.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings. */
get onCellValue() {
return this.nativeElement ? this.nativeElement.onCellValue : undefined;
}
set onCellValue(value) {
this.nativeElement ? this.nativeElement.onCellValue = value : undefined;
}
/** @description Callback function() called when the grid has been rendered. */
get onCellUpdate() {
return this.nativeElement ? this.nativeElement.onCellUpdate : undefined;
}
set onCellUpdate(value) {
this.nativeElement ? this.nativeElement.onCellUpdate = value : undefined;
}
/** @description Callback function() called when the grid has been rendered for first time and bindings are completed. The component is ready. */
get onCellRender() {
return this.nativeElement ? this.nativeElement.onCellRender : undefined;
}
set onCellRender(value) {
this.nativeElement ? this.nativeElement.onCellRender = value : undefined;
}
/** @description Describes the paging settings. */
get onCellBeginEdit() {
return this.nativeElement ? this.nativeElement.onCellBeginEdit : undefined;
}
set onCellBeginEdit(value) {
this.nativeElement ? this.nativeElement.onCellBeginEdit = value : undefined;
}
/** @description Describes the pager settings. */
get onCellEditRequest() {
return this.nativeElement ? this.nativeElement.onCellEditRequest : undefined;
}
set onCellEditRequest(value) {
this.nativeElement ? this.nativeElement.onCellEditRequest = value : undefined;
}
/** @description Sets the row details. */
get onCellValueChanged() {
return this.nativeElement ? this.nativeElement.onCellValueChanged : undefined;
}
set onCellValueChanged(value) {
this.nativeElement ? this.nativeElement.onCellValueChanged = value : undefined;
}
/** @description 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. */
get onBeforeInit() {
return this.nativeElement ? this.nativeElement.onBeforeInit : undefined;
}
set onBeforeInit(value) {
this.nativeElement ? this.nativeElement.onBeforeInit = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get onInit() {
return this.nativeElement ? this.nativeElement.onInit : undefined;
}
set onInit(value) {
this.nativeElement ? this.nativeElement.onInit = value : undefined;
}
/** @description The rows property is used to describe all rows displayed in the grid. */
get onAfterInit() {
return this.nativeElement ? this.nativeElement.onAfterInit : undefined;
}
set onAfterInit(value) {
this.nativeElement ? this.nativeElement.onAfterInit = value : undefined;
}
/** @description Sets the scroll mode settings. */
get onChartInit() {
return this.nativeElement ? this.nativeElement.onChartInit : undefined;
}
set onChartInit(value) {
this.nativeElement ? this.nativeElement.onChartInit = value : undefined;
}
/** @description Describes the summary row settings. */
get onRender() {
return this.nativeElement ? this.nativeElement.onRender : undefined;
}
set onRender(value) {
this.nativeElement ? this.nativeElement.onRender = value : undefined;
}
/** @description Sets the grid's state settings. */
get onLoad() {
return this.nativeElement ? this.nativeElement.onLoad : undefined;
}
set onLoad(value) {
this.nativeElement ? this.nativeElement.onLoad = value : undefined;
}
/** @description Describes the selection settings. */
get onKey() {
return this.nativeElement ? this.nativeElement.onKey : undefined;
}
set onKey(value) {
this.nativeElement ? this.nativeElement.onKey = value : undefined;
}
/** @description Describes sorting settings. */
get onRowInit() {
return this.nativeElement ? this.nativeElement.onRowInit : undefined;
}
set onRowInit(value) {
this.nativeElement ? this.nativeElement.onRowInit = value : undefined;
}
/** @description Sets the grid users. Expects an array with 'id', 'name' and optionally 'color' and 'image' properties. */
get onRowDetailInit() {
return this.nativeElement ? this.nativeElement.onRowDetailInit : undefined;
}
set onRowDetailInit(value) {
this.nativeElement ? this.nativeElement.onRowDetailInit = value : undefined;
}
/** @description Sets the grid's image and filter upload settings for the image and attachment columns. */
get onRowDetailUpdated() {
return this.nativeElement ? this.nativeElement.onRowDetailUpdated : undefined;
}
set onRowDetailUpdated(value) {
this.nativeElement ? this.nativeElement.onRowDetailUpdated = value : undefined;
}
/** @description Sets the current data view. The possible values are 'grid', 'kanban' and 'card'. */
get onRowHistory() {
return this.nativeElement ? this.nativeElement.onRowHistory : undefined;
}
set onRowHistory(value) {
this.nativeElement ? this.nativeElement.onRowHistory = value : undefined;
}
/** @description undefined */
get onRowStyle() {
return this.nativeElement ? this.nativeElement.onRowStyle : undefined;
}
set onRowStyle(value) {
this.nativeElement ? this.nativeElement.onRowStyle = value : undefined;
}
/** @description undefined */
get onRowInserted() {
return this.nativeElement ? this.nativeElement.onRowInserted : undefined;
}
set onRowInserted(value) {
this.nativeElement ? this.nativeElement.onRowInserted = value : undefined;
}
/** @description undefined */
get onRowRemoved() {
return this.nativeElement ? this.nativeElement.onRowRemoved : undefined;
}
set onRowRemoved(value) {
this.nativeElement ? this.nativeElement.onRowRemoved = value : undefined;
}
/** @description undefined */
get onRowUpdate() {
return this.nativeElement ? this.nativeElement.onRowUpdate : undefined;
}
set onRowUpdate(value) {
this.nativeElement ? this.nativeElement.onRowUpdate = value : undefined;
}
/** @description undefined */
get onRowUpdated() {
return this.nativeElement ? this.nativeElement.onRowUpdated : undefined;
}
set onRowUpdated(value) {
this.nativeElement ? this.nativeElement.onRowUpdated = value : undefined;
}
/** @description undefined */
get onRowClass() {
return this.nativeElement ? this.nativeElement.onRowClass : undefined;
}
set onRowClass(value) {
this.nativeElement ? this.nativeElement.onRowClass = value : undefined;
}
/** @description undefined */
get onCellClass() {
return this.nativeElement ? this.nativeElement.onCellClass : undefined;
}
set onCellClass(value) {
this.nativeElement ? this.nativeElement.onCellClass = value : undefined;
}
/** @description undefined */
get onColumnInit() {
return this.nativeElement ? this.nativeElement.onColumnInit : undefined;
}
set onColumnInit(value) {
this.nativeElement ? this.nativeElement.onColumnInit = value : undefined;
}
/** @description undefined */
get onColumnInserted() {
return this.nativeElement ? this.nativeElement.onColumnInserted : undefined;
}
set onColumnInserted(value) {
this.nativeElement ? this.nativeElement.onColumnInserted = value : undefined;
}
/** @description undefined */
get onColumnRemoved() {
return this.nativeElement ? this.nativeElement.onColumnRemoved : undefined;
}
set onColumnRemoved(value) {
this.nativeElement ? this.nativeElement.onColumnRemoved = value : undefined;
}
/** @description undefined */
get onColumnUpdated() {
return this.nativeElement ? this.nativeElement.onColumnUpdated : undefined;
}
set onColumnUpdated(value) {
this.nativeElement ? this.nativeElement.onColumnUpdated = value : undefined;
}
/** @description undefined */
get onColumnClone() {
return this.nativeElement ? this.nativeElement.onColumnClone : undefined;
}
set onColumnClone(value) {
this.nativeElement ? this.nativeElement.onColumnClone = value : undefined;
}
/** @description undefined */
get onCommand() {
return this.nativeElement ? this.nativeElement.onCommand : undefined;
}
set onCommand(value) {
this.nativeElement ? this.nativeElement.onCommand = value : undefined;
}
/** @description undefined */
get paging() {
return this.nativeElement ? this.nativeElement.paging : undefined;
}
set paging(value) {
this.nativeElement ? this.nativeElement.paging = value : undefined;
}
/** @description undefined */
get pager() {
return this.nativeElement ? this.nativeElement.pager : undefined;
}
set pager(value) {
this.nativeElement ? this.nativeElement.pager = value : undefined;
}
/** @description undefined */
get rowDetail() {
return this.nativeElement ? this.nativeElement.rowDetail : undefined;
}
set rowDetail(value) {
this.nativeElement ? this.nativeElement.rowDetail = value : undefined;
}
/** @description undefined */
get rowCSSRules() {
return this.nativeElement ? this.nativeElement.rowCSSRules : undefined;
}
set rowCSSRules(value) {
this.nativeElement ? this.nativeElement.rowCSSRules = value : undefined;
}
/** @description undefined */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description undefined */
get rows() {
return this.nativeElement ? this.nativeElement.rows : undefined;
}
set rows(value) {
this.nativeElement ? this.nativeElement.rows = value : undefined;
}
/** @description undefined */
get scrolling() {
return this.nativeElement ? this.nativeElement.scrolling : undefined;
}
set scrolling(value) {
this.nativeElement ? this.nativeElement.scrolling = value : undefined;
}
/** @description undefined */
get summaryRow() {
return this.nativeElement ? this.nativeElement.summaryRow : undefined;
}
set summaryRow(value) {
this.nativeElement ? this.nativeElement.summaryRow = value : undefined;
}
/** @description undefined */
get stateSettings() {
return this.nativeElement ? this.nativeElement.stateSettings : undefined;
}
set stateSettings(value) {
this.nativeElement ? this.nativeElement.stateSettings = value : undefined;
}
/** @description undefined */
get selection() {
return this.nativeElement ? this.nativeElement.selection : undefined;
}
set selection(value) {
this.nativeElement ? this.nativeElement.selection = value : undefined;
}
/** @description undefined */
get sorting() {
return this.nativeElement ? this.nativeElement.sorting : undefined;
}
set sorting(value) {
this.nativeElement ? this.nativeElement.sorting = value : un