smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
587 lines (582 loc) • 212 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.grid';
import { __awaiter } from 'tslib';
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 fired when a cell transitions into edit mode. Within the event handler, you can prevent the editing action for specific cells, rows, or columns by invoking event.preventDefault(). This allows you to control which cells are editable based on custom logic or application requirements.
* @param event. The custom event. Custom event was created with: event.detail( id, dataField, row, column, cell, data, value)
* id - The unique identifier of the edited row.
* dataField - The data field (column) associated with the edited cell.
* row - The edited row's full configuration object.
* column - The column configuration of the edited cell.
* cell - The edited cell object.
* data - The complete data record of the edited row.
* value - The current value of the edited cell.
*/
this.onBeginEdit = new EventEmitter();
/** @description Triggered when a user confirms a batch action by clicking the 'OK' button in a Grid header dropdown. Typical actions include column customization, applying sorting, or setting filters. This event signifies that the changes selected in the dropdown have been finalized and applied to the Grid.
* @param event. The custom event. Custom event was created with: event.detail( type)
* type - The type of dropdown where the batch change occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.
*/
this.onBatchChange = new EventEmitter();
/** @description Triggered when a user clicks the 'Cancel' button in the header dropdown of a Grid, thereby aborting an ongoing batch operation. This event allows you to handle cleanup or UI updates when a batch process is intentionally stopped before completion.
* @param event. The custom event. Custom event was created with: event.detail( type)
* type - The type of dropdown where the cancellation occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.
*/
this.onBatchCancel = new EventEmitter();
/** @description Fires whenever the selection within the Grid changes. During drag selection, this event is emitted both at the beginning of the drag operation and again when the selection is completed, allowing you to respond to both initiation and completion of drag-based selection changes.
* @param event. The custom event. Custom event was created with: event.detail( started, finished, originalEvent)
* started - Set to <em>true</em> when selection begins; <em>false</em> otherwise.
* finished - Set to <em>true</em> when selection ends; <em>false</em> otherwise.
* originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the selection change.
*/
this.onChange = new EventEmitter();
/** @description Triggered when the user clicks on a column header in a table or grid, typically to initiate actions such as sorting, filtering, or displaying additional options related to that column. This event provides context about which column was interacted with, allowing developers to implement responsive behaviors based on user actions.
* @param event. The custom event. Custom event was created with: event.detail( column, dataField, originalEvent)
* column - The column configuration object of the clicked header.
* dataField - The data field associated with the clicked column.
* originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the click.
*/
this.onColumnClick = new EventEmitter();
/** @description Fires when a user double-clicks on a column header, typically to initiate actions such as resizing, sorting, or customizing the corresponding column. The event provides information about the specific column that was interacted with, allowing you to implement custom logic in response to the double-click.
* @param event. The custom event. Custom event was created with: event.detail( column, dataField, originalEvent)
* column - The column configuration object of the double-clicked header.
* dataField - The data field associated with the double-clicked column.
* originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the double-click.
*/
this.onColumnDoubleClick = new EventEmitter();
/** @description Triggered when the user adjusts the width of a column by dragging the boundary line in the column header. This event fires continuously as the header boundary is moved, allowing real-time updates to the column size.
* @param event. The custom event. Custom event was created with: event.detail( column, dataField, oldWidth, width)
* column - The resized column's configuration object.
* dataField - The data field associated with the resized column.
* oldWidth - The previous width of the column.
* width - The new width of the column after resizing.
*/
this.onColumnResize = new EventEmitter();
/** @description Fires when the user begins dragging a column to change its position within the column order. This event marks the start of a column reordering operation and can be used to implement visual feedback, custom logic, or to track changes in the column arrangement during a drag-and-drop interaction.
* @param event. The custom event. Custom event was created with: event.detail( column, dataField, index, originalEvent)
* column - The configuration object of the column being dragged.
* dataField - The data field associated with the column being dragged.
* index - The index of the column within the grid.
* originalEvent - The native DOM event that initiated the column drag.
*/
this.onColumnDragStart = new EventEmitter();
/** @description Triggered whenever a property of a column is modified, either through user interaction (such as editing in the UI) or by programmatic changes made via code. This event allows you to respond to any updates in column properties, regardless of how the change was initiated.
* @param event. The custom event. Custom event was created with: event.detail( column, propertyName, oldValue, value)
* column - The column whose property was changed.
* propertyName - The name of the property that was changed.
* oldValue - The previous value(s) of the changed property.
* value - The new value(s) of the changed property.
*/
this.onColumnChange = new EventEmitter();
/** @description This event is fired repeatedly for as long as the user is actively dragging a column. It provides real-time updates during the entire drag operation, allowing you to implement responsive behaviors or visual feedback as the column is being repositioned.
* @param event. The custom event. Custom event was created with: event.detail( column, dataField, index, data, originalEvent)
* column - The column being dragged.
* dataField - The data field of the dragged column.
* index - The current index of the dragged column.
* data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
* originalEvent - The original browser event that triggered the dragging.
*/
this.onColumnDragging = new EventEmitter();
/** @description Triggered when the user releases the mouse button to drop a column after dragging it, indicating the end of a column drag-and-drop operation. This event can be used to update the column order or perform actions based on the new column arrangement.
* @param event. The custom event. Custom event was created with: event.detail( column, dataField, index, newIndex, data, originalEvent)
* column - The column that was dragged.
* dataField - The data field of the dragged column.
* index - The original index of the column before dragging.
* newIndex - The new index of the column after dragging.
* data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
* originalEvent - The original browser event that finalized the dragging.
*/
this.onColumnDragEnd = new EventEmitter();
/** @description Fires when the user changes the order of columns by dragging and repositioning a column within the interface. This event occurs after the column has been successfully moved to its new position.
* @param event. The custom event. Custom event was created with: event.detail( column, dataField, index, newIndex, data, originalEvent)
* column - The reordered column.
* dataField - The data field of the reordered column.
* index - The column's previous index before reorder.
* newIndex - The column's new index after reorder.
* data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
* originalEvent - The original browser event associated with the reorder.
*/
this.onColumnReorder = new EventEmitter();
/** @description Triggered when a user submits a new comment within the row edit dialog, typically as part of editing or updating a row's information. This event provides the context of the edited row and the content of the newly added comment, allowing for real-time updates or further processing.
* @param event. The custom event. Custom event was created with: event.detail( id, comment)
* id - The unique ID of the row where the comment was added.
* comment - The comment object containing: 'text' (string) - the comment text, 'id' (string) - unique comment ID, 'userId' (string | number) - ID of the user who added the comment, and 'time' (Date) - timestamp of the comment.
*/
this.onCommentAdd = new EventEmitter();
/** @description Triggered when a user deletes or removes a comment while editing a row using the row edit dialog. This event occurs after the comment has been removed from the input field within the dialog, allowing you to handle any additional logic, such as updating the UI, saving changes, or notifying other components.
* @param event. The custom event. Custom event was created with: event.detail( id, comment)
* id - The unique ID of the row from which the comment was removed.
* comment - The comment object containing: 'text' (string) - the comment text, 'id' (string) - unique comment ID, 'userId' (string | number) - ID of the user who added the comment, and 'time' (Date) - timestamp of the comment.
*/
this.onCommentRemove = new EventEmitter();
/** @description Occurs when a user selects (clicks) an item from the context menu, typically accessed via right-click or long-press. This event enables developers to handle specific actions in response to the user's menu item selection.
* @param event. The custom event. Custom event was created with: event.detail( id, dataField, command)
* id - The unique ID of the row associated with the context menu item.
* dataField - The data field of the clicked context menu item.
* command - The command object representing the action associated with the clicked menu item.
*/
this.onContextMenuItemClick = new EventEmitter();
/** @description Triggered when the user begins dragging a table row, typically by clicking and holding on the row before moving it. This event signals the start of a drag-and-drop operation for reordering or repositioning rows within the table.
* @param event. The custom event. Custom event was created with: event.detail( row, id, index, originalEvent)
* row - The row being dragged.
* id - The unique ID of the row being dragged.
* index - The index of the row within the grid.
* originalEvent - The original browser event that initiated the row drag.
*/
this.onRowDragStart = new EventEmitter();
/** @description This event is triggered repeatedly in real-time as the user drags a row, firing continuously throughout the entire duration of the dragging action.
* @param event. The custom event. Custom event was created with: event.detail( row, id, index, data, originalEvent)
* row - The row currently being dragged.
* id - The unique ID of the dragged row.
* index - The index of the row being dragged.
* data - An object providing drag feedback. Contains HTML elements 'feedback' and 'feedbackLine' shown during dragging, and methods 'error()', 'success()', and 'data()' for managing feedback state.
* originalEvent - The original browser event that triggered the dragging.
*/
this.onRowDragging = new EventEmitter();
/** @description This event is triggered upon completion of a row drag operation, regardless of whether the row’s position within the list was changed. It indicates the end of the drag interaction, and can be used to perform additional actions or cleanup tasks after users have finished dragging a row.
* @param event. The custom event. Custom event was created with: event.detail( row, id, index, newIndex, data, originalEvent)
* row - The dragged row object.
* id - The unique identifier of the dragged row.
* index - The original index of the row before dragging.
* newIndex - The new index of the row after dragging.
* data - The dragging feedback object containing HTML elements displayed during the drag operation. Includes `feedback` and `feedbackLine` elements, and methods `error()`, `success()`, and `data()` to set or retrieve the drag state and data.
* originalEvent - The original pointer, touch, or mouse event that triggered the drag.
*/
this.onRowDragEnd = new EventEmitter();
/** @description Triggered when a row has been successfully moved to a new position within the grid, indicating that the row reordering operation is complete and the grid's data order has been updated accordingly.
* @param event. The custom event. Custom event was created with: event.detail( row, id, index, newIndex, data, originalEvent)
* row - The reordered row object.
* id - The unique identifier of the reordered row.
* index - The original index of the row before reordering.
* newIndex - The new index of the row after reordering.
* data - The dragging feedback object containing HTML elements displayed during the reorder operation. Includes `feedback` and `feedbackLine` elements, and methods `error()`, `success()`, and `data()` to set or retrieve the drag state and data.
* originalEvent - The original pointer, touch, or mouse event that triggered the reorder.
*/
this.onRowReorder = new EventEmitter();
/** @description This event is triggered when a user expands a row in either TreeGrid or Grouping mode, causing the hidden child rows or grouped data associated with that row to be displayed. It allows you to respond when hierarchical data or grouped content is revealed within the grid.
* @param event. The custom event. Custom event was created with: event.detail( row, id, originalEvent)
* row - The expanded row object.
* id - The unique identifier of the expanded row.
* originalEvent - The original pointer, touch, or mouse event that caused the expansion.
*/
this.onRowExpand = new EventEmitter();
/** @description Triggered when a row is collapsed in TreeGrid or Grouping mode, causing any nested child rows or grouped content under that row to be hidden from view. This event allows you to respond when users collapse a parent row, such as updating UI elements or loading data dynamically.
* @param event. The custom event. Custom event was created with: event.detail( row, id, originalEvent)
* row - The collapsed row object.
* id - The unique identifier of the collapsed row.
* originalEvent - The original pointer, touch, or mouse event that caused the collapse.
*/
this.onRowCollapse = new EventEmitter();
/** @description Triggered when a user clicks anywhere within a table row, allowing you to respond to row selection events, such as highlighting the row, displaying detailed information, or performing related actions.
* @param event. The custom event. Custom event was created with: event.detail( row, originalEvent, id, data, isRightClick, pageX, pageY)
* row - The clicked row object.
* originalEvent - The original pointer, touch, or mouse event for the click.
* id - The unique identifier of the clicked row.
* data - The data object associated with the clicked row.
* isRightClick - Indicates whether the right mouse button was used for the click.
* pageX - The X-coordinate of the click relative to the page.
* pageY - The Y-coordinate of the click relative to the page.
*/
this.onRowClick = new EventEmitter();
/** @description This event is triggered when a user rapidly double-clicks on any row within the data grid or table. It can be used to initiate actions such as opening a detailed view, activating edit mode, or performing custom operations related to the selected row. The event handler receives contextual information about the clicked row, allowing for targeted interactions.
* @param event. The custom event. Custom event was created with: event.detail( row, originalEvent, id, data, isRightClick, pageX, pageY)
* row - The double-clicked row object.
* originalEvent - The original pointer, touch, or mouse event for the double-click.
* id - The unique identifier of the double-clicked row.
* data - The data object associated with the double-clicked row.
* isRightClick - Indicates whether the right mouse button was used for the double-click.
* pageX - The X-coordinate of the double-click relative to the page.
* pageY - The Y-coordinate of the double-click relative to the page.
*/
this.onRowDoubleClick = new EventEmitter();
/** @description Triggered when the user manually adjusts the height of a table row, such as by dragging the row's resize handle. This event allows you to respond to row height changes, for example, by updating layout or saving the new row height.
* @param event. The custom event. Custom event was created with: event.detail( row, id, oldHeight, height)
* row - The resized row object.
* id - The unique identifier of the resized row.
* oldHeight - The height of the row before resizing.
* height - The new height of the row after resizing.
*/
this.onRowResize = new EventEmitter();
/** @description Triggered when the user clicks the star icon located in a row header, toggling the starred (favorite) status of the corresponding row. This event allows you to handle actions such as marking or unmarking the row as a favorite in response to user interaction.
* @param event. The custom event. Custom event was created with: event.detail( row, originalEvent, id, value)
* row - The row associated with the star toggle.
* originalEvent - The original pointer, touch, or mouse event for the star click.
* id - The unique identifier of the starred row.
* value - Boolean indicating whether the row is now starred (`true`) or unstarred (`false`).
*/
this.onRowStarred = new EventEmitter();
/** @description Fires when a user clicks on any individual cell within the grid, providing information about the selected cell’s row, column, and associated data. This event enables you to implement custom actions in response to cell clicks, such as editing cell content, displaying detailed information, or triggering other interactive features.
* @param event. The custom event. Custom event was created with: event.detail( cell, originalEvent, id, dataField, value, isRightClick, pageX, pageY)
* cell - The clicked cell object.
* originalEvent - The original pointer, touch, or mouse event for the click.
* id - The unique identifier of the row containing the clicked cell.
* dataField - The data field (column identifier) of the clicked cell.
* value - The value of the clicked cell.
* isRightClick - Indicates whether the right mouse button was used for the click.
* pageX - The X-coordinate of the click relative to the page.
* pageY - The Y-coordinate of the click relative to the page.
*/
this.onCellClick = new EventEmitter();
/** @description Fires when a user rapidly double-clicks on any cell within the grid, allowing you to handle actions such as entering edit mode, displaying detailed information, or executing custom logic specific to the selected cell.
* @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 object.
* originalEvent - The original pointer, touch, or mouse event for the double-click.
* id - The unique identifier of the row containing the double-clicked cell.
* dataField - The data field (column identifier) of the double-clicked cell.
* value - The value of the double-clicked cell.
* isRightClick - Indicates whether the right mouse button was used for the double-click.
* pageX - The X-coordinate of the double-click relative to the page.
* pageY - The Y-coordinate of the double-click relative to the page.
*/
this.onCellDoubleClick = new EventEmitter();
/** @description Triggered when a user completes editing a cell or an entire row. This event supplies comprehensive information about the edit operation, including the updated values, the specific cells or rows affected, and any changes made by the user. It enables developers to capture and respond to user edits with detailed context.
* @param event. The custom event. Custom event was created with: event.detail( id, dataField, row, column, cell, data, value)
* id - The unique identifier of the row that was edited. This helps to locate the specific row within the grid.
* dataField - The data field key (column identifier) of the cell that was edited.
* row - The full row object that contains the edited cell, representing the row's current state after editing.
* column - The column object corresponding to the edited cell, including its metadata and configuration.
* cell - The specific cell object that was edited, providing granular access to the edited cell's properties.
* data - An object representing the entire data record of the edited row, reflecting all current values post-edit.
* value - The new value entered by the user in the edited cell.
*/
this.onEndEdit = new EventEmitter();
/** @description This event is triggered whenever filters within the grid are added, updated, or removed. It allows developers to monitor and respond to any changes in the grid’s filtering criteria. By handling this event, you can implement custom logic—such as updating UI elements, fetching new data, or logging filter modifications—whenever the user changes how data is filtered in the grid.
* @param event. The custom event. Custom event was created with: event.detail( columns, data, expressions)
* columns - An array of column objects currently involved in filtering, providing access to each filtered column’s properties.
* data - An array of objects each containing a column’s data field and its associated FilterGroup object. The FilterGroup describes the filter conditions applied to that column. Example: { dataField: string, filter: object }.
* expressions - An array of filter expression objects, each with a column’s data field and a human-readable filter expression string. These expressions define the applied filters, e.g., 'startsWith B' or complex logical expressions like 'contains Andrew or contains Nancy'. Supported operators include '=', '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', and 'NOT_NULL'.
*/
this.onFilter = new EventEmitter();
/** @description Triggered whenever the grid's grouping configuration is modified—for example, when columns are added to or removed from the grouped columns. This event allows you to respond to user actions that change how data is grouped in the grid.
* @param event. The custom event. Custom event was created with: event.detail( groups)
* groups - An array of data fields that represent the columns currently used for grouping the grid’s rows. The order of fields reflects the grouping hierarchy.
*/
this.onGroup = new EventEmitter();
/** @description Emitted whenever the dialog interface for adding a new column or editing an existing column is displayed to the user. This event is ideal for implementing custom logic, such as pre-filling form fields, dynamically modifying dialog content, or applying additional UI enhancements when the column dialog becomes visible.
* @param event. The custom event. Custom event was created with: event.detail( dataField)
* dataField - The data field of the column currently being added or edited via the dialog.
*/
this.onOpenColumnDialog = new EventEmitter();
/** @description Fires when the column addition or editing dialog is closed, regardless of whether the user saves their changes or cancels the operation. This event allows developers to perform actions after the dialog is dismissed, such as updating the UI or resetting form states.
* @param event. The custom event. Custom event was created with: event.detail( dataField)
* dataField - The data field of the column involved in the dialog that was just closed.
*/
this.onCloseColumnDialog = new EventEmitter();
/** @description Triggered whenever the grid’s dimensions are altered, either through user-initiated resizing or programmatic changes to the layout. This event enables developers to implement responsive UI updates, such as repositioning elements or recalculating layout parameters to ensure optimal display across different screen sizes and interactions.
* @param event. The custom event. */
this.onResize = new EventEmitter();
/** @description Triggered when a user performs a press-and-hold gesture on a grid row, maintaining contact for at least 300 milliseconds. This event is commonly used to open context menus or initiate specialized touch-based interactions, enhancing the user experience on touch-enabled devices.
* @param event. The custom event. Custom event was created with: event.detail( row, originalEvent)
* row - The row object that was tapped and held.
* originalEvent - The original input event object ('pointer', 'touch', or 'mouse'), which provides device-specific details.
*/
this.onRowTap = new EventEmitter();
/** @description Triggered when a user performs a press-and-hold gesture—touching and continuously holding a specific cell in the grid for at least 300 milliseconds. This event enables advanced touch interactions, such as displaying context menus, initiating drag-and-drop, or activating additional cell options. It is designed to distinguish intentional long presses from casual taps, ensuring a responsive and intuitive touch interface.
* @param event. The custom event. Custom event was created with: event.detail( cell, originalEvent)
* cell - The cell object that was tapped and held.
* originalEvent - The original input event object ('pointer', 'touch', or 'mouse') providing context about the interaction.
*/
this.onCellTap = new EventEmitter();
/** @description Triggered whenever the user switches pages using the grid’s pagination controls. This event allows you to detect and respond to page changes, such as updating data, fetching new records, or performing additional actions whenever a different page is selected.
* @param event. The custom event. */
this.onPage = new EventEmitter();
/** @description Triggered whenever columns are added to, removed from, or reordered within the grid’s sorting configuration. This event enables developers to monitor changes in the sorting criteria, update the sorting state, and track the current sort order and priority of columns in the grid.
* @param event. The custom event. Custom event was created with: event.detail( columns, data, sortDataFields, sortDataTypes, sortOrders, sortIndexes)
* columns - An array of column objects currently sorted, including their configurations and properties.
* data - An array of objects describing each sorted column with its data field, sorting order ('asc' or 'desc'), and priority index indicating sorting precedence in multi-column sorts.
* sortDataFields - An array of the data fields of all currently sorted columns.
* sortDataTypes - An array of data types ('string', 'date', 'boolean', or 'number') corresponding to the sorted columns.
* sortOrders - An array of sorting directions ('asc' or 'desc') applied to the sorted columns.
* sortIndexes - An array of integers representing the sorting priority for each column in cases of multi-column sorting, where lower index means higher priority.
*/
this.onSort = new EventEmitter();
/** @description Triggered when the user scrolls to the absolute bottom of the grid component. This event is typically used to implement infinite scrolling or lazy loading by allowing you to detect when additional data needs to be loaded as the user reaches the end of the currently displayed content.
* @param event. The custom event. */
this.onScrollBottomReached = new EventEmitter();
/** @description Triggered when the user scrolls to the very top edge of the grid. This event allows you to perform actions such as refreshing the grid's contents, loading previous or additional data, or updating UI elements in response to the scroll position. Use this event to enhance data loading and user experience when users reach the beginning 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 that defines configurable options for customizing the visual appearance of the grid, including properties such as line color, spacing, background style, and border visibility. */
get appearance() {
return this.nativeElement ? this.nativeElement.appearance : undefined;
}
set appearance(value) {
this.nativeElement ? this.nativeElement.appearance = value : undefined;
}
/** @description An object that defines configuration options for integrating AI capabilities within the grid component. This includes settings for enabling AI features, specifying AI service endpoints, setting authentication credentials, and customizing how the grid interacts with AI-powered functionalities. */
get ai() {
return this.nativeElement ? this.nativeElement.ai : undefined;
}
set ai(value) {
this.nativeElement ? this.nativeElement.ai = value : undefined;
}
/** @description An object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings. */
get behavior() {
return this.nativeElement ? this.nativeElement.behavior : undefined;
}
set behavior(value) {
this.nativeElement ? this.nativeElement.behavior = value : undefined;
}
/** @description Sets or retrieves the id of the currently active user. This value must match the id of one of the entries in the users property or array. The active user's privileges and access rights are determined based on their corresponding user object. If no current user is specified (i.e., the id is unset or invalid), the default privileges for the element will apply according to its properties, potentially restricting or allowing access based on default settings. */
get currentUser() {
return this.nativeElement ? this.nativeElement.currentUser : undefined;
}
set currentUser(value) {
this.nativeElement ? this.nativeElement.currentUser = value : undefined;
}
/** @description Provides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid. */
get columnHeader() {
return this.nativeElement ? this.nativeElement.columnHeader : undefined;
}
set columnHeader(value) {
this.nativeElement ? this.nativeElement.columnHeader = value : undefined;
}
/** @description The clipboard property controls whether users can perform clipboard operations—such as copying (Ctrl+C), cutting (Ctrl+X), and pasting (Ctrl+V)—using keyboard shortcuts within the application. Setting this property to true enables these keyboard shortcuts for clipboard actions; setting it to false disables them, preventing users from using keyboard navigation for copying, cutting, or pasting content. */
get clipboard() {
return this.nativeElement ? this.nativeElement.clipboard : undefined;
}
set clipboard(value) {
this.nativeElement ? this.nativeElement.clipboard = value : undefined;
}
/** @description The columns property defines the collection of columns displayed within the Smart.Grid component. Each column configuration specifies how data is presented and interacted with. Through this property, you can control essential aspects such as column headers, data field bindings, sorting, filtering, formatting, alignment, visibility, and more. The columns property gives you full control over the structure, appearance, and behavior of the grid's columns, enabling advanced customization of both data presentation and user experience. */
get columns() {
return this.nativeElement ? this.nativeElement.columns : undefined;
}
set columns(value) {
this.nativeElement ? this.nativeElement.columns = value : undefined;
}
/** @description The Context Menu is the drop-down menu that appears when a user right-clicks on a row within the Grid. This menu provides quick access to actions such as deleting a row or editing a cell or entire row, depending on the current editing mode configured for the Grid. You can customize the Context Menu by using the 'contextMenuItemCustom' option in the Grid's dataSource. This option lets you add your own custom menu items to enhance or extend the menu's functionality.Additionally, if you want to completely replace the default context menu with your own, you can use the 'selector' property. Set this property to the ID of a Smart.Menu component to display your custom menu when the user right-clicks on a row in the Grid. */
get contextMenu() {
return this.nativeElement ? this.nativeElement.contextMenu : undefined;
}
set contextMenu(value) {
this.nativeElement ? this.nativeElement.contextMenu = value : undefined;
}
/** @description The Column Menu is a contextual drop-down menu that appears when you click the drop-down button in a column header, which becomes visible upon hovering over the header. This menu provides various options for customizing the behavior and appearance of the selected column. Common actions include sorting the grid by the column, applying filters to show or hide specific data, and grouping the grid rows based on the column’s values. The Column Menu offers an intuitive way for users to interact with and tailor the data grid to meet their specific needs. */
get columnMenu() {
return this.nativeElement ? this.nativeElement.columnMenu : undefined;
}
set columnMenu(value) {
this.nativeElement ? this.nativeElement.columnMenu = value : undefined;
}
/** @description Provides a detailed configuration of column group settings, including group names, ordering, visibility, and any hierarchical relationships between columns within the group. */
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 Defines or retrieves the rules and settings for conditional formatting applied to the Grid's cells, allowing you to customize cell appearance (such as background color, font style, or icons) based on specific conditions or cell values. */
get conditionalFormatting() {
return this.nativeElement ? this.nativeElement.conditionalFormatting : undefined;
}
set conditionalFormatting(value) {
this.nativeElement ? this.nativeElement.conditionalFormatting = value : undefined;
}
/** @description Configures the data and display settings for the Grid Chart, enabling data visualization in a tabular grid format. This includes specifying the structure, appearance, and interactive features of the chart to present complex data clearly and intuitively. */
get charting() {
return this.nativeElement ? this.nativeElement.charting : undefined;
}
set charting(value) {
this.nativeElement ? this.nativeElement.charting = value : undefined;
}
/** @description Configures the checkbox options for the TreeGrid component, allowing you to enable or customize checkbox display, selection behavior, and interaction within the hierarchical grid structure. */
get checkBoxes() {
return this.nativeElement ? this.nativeElement.checkBoxes : undefined;
}
set checkBoxes(value) {
this.nativeElement ? this.nativeElement.checkBoxes = value : undefined;
}
/** @description Configures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences. */
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
this.nativeElement ? this.nativeElement.dataExport = value : undefined;
}
/** @description Specifies the source from which the grid retrieves its data. The dataSource property accepts either an instance of JQX.DataAdapter for advanced data management and operations, or a standard Array containing the data records to be displayed in the grid. This flexibility allows developers to connect the grid to various data formats and structures, making data binding straightforward and versatile. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Configures the grid’s data source when the dataSource property is assigned either a JavaScript array (for local data) or a URL (for remote data). This setting determines how the grid retrieves and displays its data, supporting both direct array binding and remote data fetching via HTTP requests. */
get dataSourceSettings() {
return this.nativeElement ? this.nativeElement.dataSourceSettings : undefined;
}
set dataSourceSettings(value) {
this.nativeElement ? this.nativeElement.dataSourceSettings = value : undefined;
}
/** @description Provides comprehensive configuration options for controlling the grid's editing behavior, including enabling or disabling editing features, specifying editing modes (such as inline, popup, or batch), setting validation rules, and customizing editors for specific columns. */
get editing() {
return this.nativeElement ? this.nativeElement.editing : undefined;
}
set editing(value) {
this.nativeElement ? this.nativeElement.editing = value : undefined;
}
/** @description Provides detailed configuration options for the grid's filtering functionality, including filter types, default filter values, filter operators, and custom filter logic for columns. This determines how data within the grid can be searched, narrowed, or displayed based on user-defined criteria. */
get filtering() {
return this.nativeElement ? this.nativeElement.filtering : undefined;
}
set filtering(value) {
this.nativeElement ? this.nativeElement.filtering = value : undefined;
}
/** @description Provides configuration options for customizing the appearance and behavior of the grid's footer, including visibility, content, styling, and layout settings. */
get footer() {
return this.nativeElement ? this.nativeElement.footer : undefined;
}
set footer(value) {
this.nativeElement ? this.nativeElement.footer = value : undefined;
}
/** @description Enables or retrieves the ability to use Excel-style formulas as cell values within the table. Formulas must begin with an equal sign (=) and will be automatically recalculated whenever the referenced cell values are updated. This functionality relies on the third-party, free formula-parser plugin, so you must include the file 'formula-parser.min.js' in your project for this feature to work properly. */
get formulas() {
return this.nativeElement ? this.nativeElement.formulas : undefined;
}
set formulas(value) {
this.nativeElement ? this.nativeElement.formulas = value : undefined;
}
/** @description Provides detailed configuration options for the grid's data grouping functionality, specifying how rows are grouped, the grouping criteria, and related display settings within the grid. */
get grouping() {
return this.nativeElement ? this.nativeElement.grouping : undefined;
}
set grouping(value) {
this.nativeElement ? this.nativeElement.grouping = value : undefined;
}
/** @description Provides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings. */