smart-webcomponents-react
Version:
[](https://jqwidgets.com/license/)
962 lines (959 loc) • 138 kB
JavaScript
require('../source/modules/smart.grid');
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom/client')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom/client'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.grid = {}, global.React, global.ReactDOM));
})(this, (function (exports, React, ReactDOM) { 'use strict';
exports.Smart = void 0;
if (typeof window !== "undefined") {
exports.Smart = window.Smart;
}
/**
Data Grid UI Component that covers everything from paging, sorting, grouping, filtering, and editing to row and column virtualization, right-to-left layout, export to Excel and PDF and Accessibility.
*/
class Grid extends React.Component {
// Gets the id of the React component.
get id() {
if (!this._id) {
this._id = 'Grid' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return this._id;
}
/** An object that defines configurable options for customizing the visual appearance of the grid, including properties such as line color, spacing, background style, and border visibility.
* Property type: GridAppearance
*/
get appearance() {
return this.nativeElement ? this.nativeElement.appearance : undefined;
}
set appearance(value) {
if (this.nativeElement) {
this.nativeElement.appearance = value;
}
}
/** 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.
* Property type: GridAi
*/
get ai() {
return this.nativeElement ? this.nativeElement.ai : undefined;
}
set ai(value) {
if (this.nativeElement) {
this.nativeElement.ai = value;
}
}
/** An object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings.
* Property type: GridBehavior
*/
get behavior() {
return this.nativeElement ? this.nativeElement.behavior : undefined;
}
set behavior(value) {
if (this.nativeElement) {
this.nativeElement.behavior = value;
}
}
/** 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.
* Property type: string | number
*/
get currentUser() {
return this.nativeElement ? this.nativeElement.currentUser : undefined;
}
set currentUser(value) {
if (this.nativeElement) {
this.nativeElement.currentUser = value;
}
}
/** Provides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid.
* 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 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.
* 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 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.
* 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;
}
}
/** 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.
* Property type: GridContextMenu
*/
get contextMenu() {
return this.nativeElement ? this.nativeElement.contextMenu : undefined;
}
set contextMenu(value) {
if (this.nativeElement) {
this.nativeElement.contextMenu = value;
}
}
/** 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.
* Property type: GridColumnMenu
*/
get columnMenu() {
return this.nativeElement ? this.nativeElement.columnMenu : undefined;
}
set columnMenu(value) {
if (this.nativeElement) {
this.nativeElement.columnMenu = value;
}
}
/** Provides a detailed configuration of column group settings, including group names, ordering, visibility, and any hierarchical relationships between columns within the group.
* 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;
}
}
/** 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.
* Property type: GridConditionalFormatting[]
*/
get conditionalFormatting() {
return this.nativeElement ? this.nativeElement.conditionalFormatting : undefined;
}
set conditionalFormatting(value) {
if (this.nativeElement) {
this.nativeElement.conditionalFormatting = value;
}
}
/** 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.
* Property type: GridCharting
*/
get charting() {
return this.nativeElement ? this.nativeElement.charting : undefined;
}
set charting(value) {
if (this.nativeElement) {
this.nativeElement.charting = value;
}
}
/** 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.
* Property type: GridCheckBoxes
*/
get checkBoxes() {
return this.nativeElement ? this.nativeElement.checkBoxes : undefined;
}
set checkBoxes(value) {
if (this.nativeElement) {
this.nativeElement.checkBoxes = value;
}
}
/** Configures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences.
* Property type: GridDataExport
*/
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
if (this.nativeElement) {
this.nativeElement.dataExport = value;
}
}
/** 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.
* Property type: any
*/
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
if (this.nativeElement) {
this.nativeElement.dataSource = value;
}
}
/** 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.
* Property type: GridDataSourceSettings
*/
get dataSourceSettings() {
return this.nativeElement ? this.nativeElement.dataSourceSettings : undefined;
}
set dataSourceSettings(value) {
if (this.nativeElement) {
this.nativeElement.dataSourceSettings = value;
}
}
/** 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.
* Property type: GridEditing
*/
get editing() {
return this.nativeElement ? this.nativeElement.editing : undefined;
}
set editing(value) {
if (this.nativeElement) {
this.nativeElement.editing = value;
}
}
/** 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.
* Property type: GridFiltering
*/
get filtering() {
return this.nativeElement ? this.nativeElement.filtering : undefined;
}
set filtering(value) {
if (this.nativeElement) {
this.nativeElement.filtering = value;
}
}
/** Provides configuration options for customizing the appearance and behavior of the grid's footer, including visibility, content, styling, and layout settings.
* Property type: GridFooter
*/
get footer() {
return this.nativeElement ? this.nativeElement.footer : undefined;
}
set footer(value) {
if (this.nativeElement) {
this.nativeElement.footer = value;
}
}
/** 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.
* Property type: boolean
*/
get formulas() {
return this.nativeElement ? this.nativeElement.formulas : undefined;
}
set formulas(value) {
if (this.nativeElement) {
this.nativeElement.formulas = value;
}
}
/** 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.
* Property type: GridGrouping
*/
get grouping() {
return this.nativeElement ? this.nativeElement.grouping : undefined;
}
set grouping(value) {
if (this.nativeElement) {
this.nativeElement.grouping = value;
}
}
/** Provides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings.
* Property type: GridGroupHeader
*/
get groupHeader() {
return this.nativeElement ? this.nativeElement.groupHeader : undefined;
}
set groupHeader(value) {
if (this.nativeElement) {
this.nativeElement.groupHeader = value;
}
}
/** Provides detailed configuration options for the grid's header, including display settings, styling, visibility, and customization of header rows and columns.
* Property type: GridHeader
*/
get header() {
return this.nativeElement ? this.nativeElement.header : undefined;
}
set header(value) {
if (this.nativeElement) {
this.nativeElement.header = value;
}
}
/** An object that defines configuration options for the layout of the grid, including properties such as the number of columns, row and column spacing, alignment, and overall grid arrangement. This object allows you to customize the appearance and structure of the grid according to your requirements.
* Property type: GridLayout
*/
get layout() {
return this.nativeElement ? this.nativeElement.layout : undefined;
}
set layout(value) {
if (this.nativeElement) {
this.nativeElement.layout = value;
}
}
/** Sets or retrieves the unlockKey used to authorize and access the full functionality of the product. The unlockKey serves as a security credential to enable locked or premium features.
* Property type: string
*/
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
if (this.nativeElement) {
this.nativeElement.unlockKey = value;
}
}
/** Specifies the language code to be used for displaying messages. When set, it determines which localized messages from the messages property are shown to the user. This property can be used to retrieve the current language or update it dynamically at runtime.
* Property type: string
*/
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
if (this.nativeElement) {
this.nativeElement.locale = value;
}
}
/** 'Key Handling:' You can customize how key presses are handled by defining key mappings within the configuration. For each key (e.g., '"Enter"'), you can assign:- 'Another key as the value' (e.g., '"Enter": "Tab"'): When the specified key is pressed, it will be treated as if the mapped key was pressed instead.- 'A predefined action' (e.g., ''copy'', ''copyPrev'', ''copyNext'', ''delete''): When the key is pressed, the associated action will be executed.- 'A custom function': Assign a function as the value to execute custom logic whenever the key is pressed.This allows you to remap keys, trigger built-in actions, or define entirely custom behaviors based on key events in your application.
* Property type: any
*/
get keys() {
return this.nativeElement ? this.nativeElement.keys : undefined;
}
set keys(value) {
if (this.nativeElement) {
this.nativeElement.keys = value;
}
}
/** Assigns values to the messages property, which typically contains an array or object representing individual messages or notifications. This function or setting updates the content, ensuring that the correct message data is stored or displayed.
* 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) invoked after the chart has been fully initialized. Use this function to perform additional configuration or customization of the chart instance, such as modifying chart options, adding event listeners, or updating data before the chart is rendered to the user. This allows you to tailor the chart's appearance and behavior to meet specific application requirements.
* Property type: {(cell: GridCell): void}
*/
get onCellValue() {
return this.nativeElement ? this.nativeElement.onCellValue : undefined;
}
set onCellValue(value) {
if (this.nativeElement) {
this.nativeElement.onCellValue = value;
}
}
/** A callback function that is executed immediately after the grid has finished rendering, allowing you to perform additional actions or updates once the grid display is complete.
* 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 invoked after the grid has been rendered for the first time and all data bindings have been completed. At this point, the component is fully initialized and ready for interaction or further manipulation.
* Property type: {(cell: GridCell): void}
*/
get onCellRender() {
return this.nativeElement ? this.nativeElement.onCellRender : undefined;
}
set onCellRender(value) {
if (this.nativeElement) {
this.nativeElement.onCellRender = value;
}
}
/** Provides detailed configuration options for managing pagination, including parameters such as the number of items per page, current page index, and total number of pages. This section ensures efficient data retrieval and navigation across multiple pages of results.
* 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;
}
}
/** Provides detailed configuration options for pager controls, including settings for page size, navigation buttons, and display style. These options determine how pagination is displayed and how users interact with paged content in the interface.
* 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;
}
}
/** Configures or updates the detailed information or content associated with a specific row, often used to display additional data or expanded views for that row.
* 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 CSS class rules for table rows. This property allows you to conditionally apply different CSS class names to rows based on custom logic. You provide an object where the keys are CSS class names and the values are functions that determine whether the class should be applied to a particular row.Each function receives a settings object with the following properties:- 'index': The numerical index of the current row.- 'data': The data object for the current row.- 'row': The raw row element or reference (depending on the implementation).- 'api': A reference to the table's API for advanced operations.'Example usage:''''jsrowCSSRules: { 'cell-class-1': settings => settings.data.quantity === 5, 'cell-class-2': settings => settings.data.quantity 'cell-class-3': settings => settings.data.quantity > 5}'''In this example, based on the 'quantity' property of the row's data, a different CSS class will be applied to that row. Multiple rules can be defined, and each will be evaluated for every row. If the function returns 'true', the corresponding class will be added to the row.
* Property type: {(): void}
*/
get onBeforeInit() {
return this.nativeElement ? this.nativeElement.onBeforeInit : undefined;
}
set onBeforeInit(value) {
if (this.nativeElement) {
this.nativeElement.onBeforeInit = value;
}
}
/** Gets or sets a value that determines whether the element's alignment is configured for right-to-left (RTL) languages, ensuring proper layout and text direction for locales such as Arabic or Hebrew.
* 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 contains an array of objects, with each object representing a single row in the grid. This property defines all the data entries that are rendered and displayed as rows within the grid component. Each element in the rows array should align with the column definitions, ensuring that the grid displays structured and consistent data across all rows.
* Property type: {(): void}
*/
get onAfterInit() {
return this.nativeElement ? this.nativeElement.onAfterInit : undefined;
}
set onAfterInit(value) {
if (this.nativeElement) {
this.nativeElement.onAfterInit = value;
}
}
/** Configures the scroll mode behavior, allowing you to define how scrolling is handled within the component or page. This setting determines options such as smooth or instant scrolling, vertical or horizontal direction, and any custom scroll-related parameters.
* Property type: any
*/
get onChartInit() {
return this.nativeElement ? this.nativeElement.onChartInit : undefined;
}
set onChartInit(value) {
if (this.nativeElement) {
this.nativeElement.onChartInit = value;
}
}
/** Provides detailed configuration options for displaying and customizing the summary row, including its appearance, position, aggregation methods, and which columns are summarized.
* Property type: any
*/
get onRender() {
return this.nativeElement ? this.nativeElement.onRender : undefined;
}
set onRender(value) {
if (this.nativeElement) {
this.nativeElement.onRender = value;
}
}
/** Configures the grid's state-related settings, including properties such as selection, sorting, filtering, pagination, and layout. This determines how the grid maintains and restores its current state during user interactions or when the page is reloaded.
* Property type: any
*/
get onLoad() {
return this.nativeElement ? this.nativeElement.onLoad : undefined;
}
set onLoad(value) {
if (this.nativeElement) {
this.nativeElement.onLoad = value;
}
}
/** Provides detailed configuration options for user selection behavior, including parameters such as selection mode (single or multiple), default selections, selection limits, and customizable callbacks for selection events.
* Property type: {(event: KeyboardEvent): void}
*/
get onKey() {
return this.nativeElement ? this.nativeElement.onKey : undefined;
}
set onKey(value) {
if (this.nativeElement) {
this.nativeElement.onKey = value;
}
}
/** Provides detailed configuration options for controlling how data is sorted, including criteria such as sorting field, order (ascending or descending), and support for multiple sort keys.
* 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;
}
}
/** Defines the users displayed on the grid. Expects an array of user objects, where each object must include an 'id' (unique identifier) and a 'name' (display name). Optionally, each user object can also include a 'color' (for customizing the user's appearance) and an 'image' (URL or path to the user's avatar image).
* 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;
}
}
/** Configures the upload settings for images and attachments in the grid's image and attachment columns, including options for file type restrictions, size limits, and image filters to be applied during the upload process.
* 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;
}
}
/** Specifies the layout mode for displaying data within the interface. Acceptable values are:- ''grid'': Presents items in a tabular, spreadsheet-like format with rows and columns.- ''kanban'': Arranges items into columns representing workflow stages, similar to task boards.- ''card'': Displays each item as an individual card, typically used for concise summaries or visual grouping.Choose one of these values to determine how data is visually organized and presented to the user.
* Property type: {(index: number, row: GridRow, history: any[]): void}
*/
get onRowHistory() {
return this.nativeElement ? this.nativeElement.onRowHistory : undefined;
}
set onRowHistory(value) {
if (this.nativeElement) {
this.nativeElement.onRowHistory = value;
}
}
/** undefined
* Property type: {(index: number, row: GridRow, history: any[]): void}
*/
get onRowStyle() {
return this.nativeElement ? this.nativeElement.onRowStyle : undefined;
}
set onRowStyle(value) {
if (this.nativeElement) {
this.nativeElement.onRowStyle = value;
}
}
/** undefined
* Property type: {(index: number[], row: GridRow[]): void}
*/
get onRowInserted() {
return this.nativeElement ? this.nativeElement.onRowInserted : undefined;
}
set onRowInserted(value) {
if (this.nativeElement) {
this.nativeElement.onRowInserted = value;
}
}
/** undefined
* Property type: {(indexes: number[], rows: GridRow[]): void}
*/
get onRowRemoved() {
return this.nativeElement ? this.nativeElement.onRowRemoved : undefined;
}
set onRowRemoved(value) {
if (this.nativeElement) {
this.nativeElement.onRowRemoved = value;
}
}
/** undefined
* Property type: {(index: number[], row: GridRow[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}
*/
get onRowUpdate() {
return this.nativeElement ? this.nativeElement.onRowUpdate : undefined;
}
set onRowUpdate(value) {
if (this.nativeElement) {
this.nativeElement.onRowUpdate = value;
}
}
/** undefined
* Property type: {(index: number[], row: GridRow[]): void}
*/
get onRowUpdated() {
return this.nativeElement ? this.nativeElement.onRowUpdated : undefined;
}
set onRowUpdated(value) {
if (this.nativeElement) {
this.nativeElement.onRowUpdated = value;
}
}
/** undefined
* Property type: {(index: number, data: any, row: GridRow[]): void}
*/
get onRowClass() {
return this.nativeElement ? this.nativeElement.onRowClass : undefined;
}
set onRowClass(value) {
if (this.nativeElement) {
this.nativeElement.onRowClass = value;
}
}
/** undefined
* Property type: {(index: number, dataField: string, cellValue: any, data: any, row: GridRow[]): void}
*/
get onCellClass() {
return this.nativeElement ? this.nativeElement.onCellClass : undefined;
}
set onCellClass(value) {
if (this.nativeElement) {
this.nativeElement.onCellClass = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnInit() {
return this.nativeElement ? this.nativeElement.onColumnInit : undefined;
}
set onColumnInit(value) {
if (this.nativeElement) {
this.nativeElement.onColumnInit = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnInserted() {
return this.nativeElement ? this.nativeElement.onColumnInserted : undefined;
}
set onColumnInserted(value) {
if (this.nativeElement) {
this.nativeElement.onColumnInserted = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnRemoved() {
return this.nativeElement ? this.nativeElement.onColumnRemoved : undefined;
}
set onColumnRemoved(value) {
if (this.nativeElement) {
this.nativeElement.onColumnRemoved = value;
}
}
/** undefined
* Property type: {(index: number, column: GridColumn): void}
*/
get onColumnUpdated() {
return this.nativeElement ? this.nativeElement.onColumnUpdated : undefined;
}
set onColumnUpdated(value) {
if (this.nativeElement) {
this.nativeElement.onColumnUpdated = value;
}
}
/** undefined
* Property type: {(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void}
*/
get onColumnClone() {
return this.nativeElement ? this.nativeElement.onColumnClone : undefined;
}
set onColumnClone(value) {
if (this.nativeElement) {
this.nativeElement.onColumnClone = value;
}
}
/** undefined
* Property type: {(name: string, command: any, details: GridCell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void}
*/
get onCommand() {
return this.nativeElement ? this.nativeElement.onCommand : undefined;
}
set onCommand(value) {
if (this.nativeElement) {
this.nativeElement.onCommand = value;
}
}
/** undefined
* Property type: GridPaging
*/
get paging() {
return this.nativeElement ? this.nativeElement.paging : undefined;
}
set paging(value) {
if (this.nativeElement) {
this.nativeElement.paging = value;
}
}
/** undefined
* Property type: GridPager
*/
get pager() {
return this.nativeElement ? this.nativeElement.pager : undefined;
}
set pager(value) {
if (this.nativeElement) {
this.nativeElement.pager = value;
}
}
/** undefined
* Property type: GridRowDetail
*/
get rowDetail() {
return this.nativeElement ? this.nativeElement.rowDetail : undefined;
}
set rowDetail(value) {
if (this.nativeElement) {
this.nativeElement.rowDetail = value;
}
}
/** undefined
* Property type: any
*/
get rowCSSRules() {
return this.nativeElement ? this.nativeElement.rowCSSRules : undefined;
}
set rowCSSRules(value) {
if (this.nativeElement) {
this.nativeElement.rowCSSRules = value;
}
}
/** undefined
* Property type: boolean
*/
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
if (this.nativeElement) {
this.nativeElement.rightToLeft = value;
}
}
/** undefined
* Property type: GridRow[]
*/
get rows() {
return this.nativeElement ? this.nativeElement.rows : undefined;
}
set rows(value) {
if (this.nativeElement) {
this.nativeElement.rows = value;
}
}
/** undefined
* Property type: Scrolling | string
*/
get scrolling() {
return this.nativeElement ? this.nativeElement.scrolling : undefined;
}
set scrolling(value) {
if (this.nativeElement) {
this.nativeElement.scrolling = value;
}
}
/** undefined
* Property type: GridSummaryRow
*/
get summaryRow() {
return this.nativeElement ? this.nativeElement.summaryRow : undefined;
}
set summaryRow(value) {
if (this.nativeElement) {
this.nativeElement.summaryRow = value;
}
}
/** undefined
* Property type: GridStateSettings
*/
get stateSettings() {
return this.nativeElement ? this.nativeElement.stateSettings : undefined;
}
set stateSettings(value) {
if (this.nativeElement) {
this.nativeElement.stateSettings = value;
}
}
/** undefined
* Property type: GridSelection
*/
get selection() {
return this.nativeElement ? this.nativeElement.selection : undefined;
}
set selection(value) {
if (this.nativeElement) {
this.nativeElement.selection = value;
}
}
/** undefined
* Property type: GridSorting
*/
get sorting() {
return this.nativeElement ? this.nativeElement.sorting : undefined;
}
set sorting(value) {
if (this.nativeElement) {
this.nativeElement.sorting = value;
}
}
/** undefined
* Property type: any[]
*/
get users() {
return this.nativeElement ? this.nativeElement.users : undefined;
}
set users(value) {
if (this.nativeElement) {
this.nativeElement.users = value;
}
}
/** undefined
* Property type: GridUploadSettings
*/
get uploadSettings() {
return this.nativeElement ? this.nativeElement.uploadSettings : undefined;
}
set uploadSettings(value) {
if (this.nativeElement) {
this.nativeElement.uploadSettings = value;
}
}
/** undefined
* Property type: string
*/
get view() {
return this.nativeElement ? this.nativeElement.view : undefined;
}
set view(value) {
if (this.nativeElement) {
this.nativeElement.view = value;
}
}
// Gets the properties of the React component.
get properties() {
return ["appearance", "ai", "behavior", "currentUser", "columnHeader", "clipboard", "columns", "contextMenu", "columnMenu", "columnGroups", "dropDownMode", "conditionalFormatting", "charting", "checkBoxes", "dataExport", "dataSource", "dataSourceSettings", "editing", "filtering", "footer", "formulas", "grouping", "groupHeader", "header", "layout", "unlockKey", "locale", "keys", "messages", "onCellValue", "onCellUpdate", "onCellRender", "onCellBeginEdit", "onCellEditRequest", "onCellValueChanged", "onBeforeInit", "onInit", "onAfterInit", "onChartInit", "onRender", "onLoad", "onKey", "onRowInit", "onRowDetailInit", "onRowDetailUpdated", "onRowHistory", "onRowStyle", "onRowInserted", "onRowRemoved", "onRowUpdate", "onRowUpdated", "onRowClass", "onCellClass", "onColumnInit", "onColumnInserted", "onColumnRemoved", "onColumnUpdated", "onColumnClone", "onCommand", "paging", "pager", "rowDetail", "rowCSSRules", "rightToLeft", "rows", "scrolling", "summaryRow", "stateSettings", "selection", "sorting", "users", "uploadSettings", "view"];
}
// Gets the events of the React component.
get eventListeners() {
return ["onBeginEdit", "onBatchChange", "onBatchCancel", "onChange", "onColumnClick", "onColumnDoubleClick", "onColumnResize", "onColumnDragStart", "onColumnChange", "onColumnDragging", "onColumnDragEnd", "onColumnReorder", "onCommentAdd", "onCommentRemove", "onContextMenuItemClick", "onRowDragStart", "onRowDragging", "onRowDragEnd", "onRowReorder", "onRowExpand", "onRowCollapse", "onRowClick", "onRowDoubleClick", "onRowResize", "onRowStarred", "onCellClick", "onCellDoubleClick", "onEndEdit", "onFilter", "onGroup", "onOpenColumnDialog", "onCloseColumnDialog", "onResize", "onRowTap", "onCellTap", "onPage", "onSort", "onScrollBottomReached", "onScrollTopReached", "onCreate", "onReady"];
}
/** Inserts a new row into the grid interface. When batch editing mode is enabled, the new row exists only temporarily within the current batch session and will not be permanently stored until the user explicitly saves all changes made during the session. If the batch edit session is discarded, the newly added row will not be saved.
* @param {any} data. An object representing the row data, matching the structure of the grid's data source.
* @param {boolean} insertAtBottom?. Determines whether the new row is added at the bottom (true) or top (false) of the grid. Defaults to true.
* @param {{(row: GridRow): void}} callback?. A callback function invoked after the row is successfully added. Receives the newly added row as an argument.
*/
addRow(data, insertAtBottom, callback) {
if (this.nativeElement.isRendered) {
this.nativeElement.addRow(data, insertAtBottom, callback);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addRow(data, insertAtBottom, callback);
});
}
}
/** Inserts a new row into the grid and automatically activates edit mode for that row, allowing users to begin entering data right away. If batch editing is enabled, any changes made will be temporarily stored and will not be saved to the data source until the batch edit session is explicitly committed. This helps prevent partial or unsaved changes from being applied before the user finalizes all edits in the session.
* @param {string} position?. Specifies the position where the new row will be added. Acceptable values are 'near' (top) or 'far' (bottom).
* @returns {boolean}
*/
addNewRow(position) {
const result = this.nativeElement.addNewRow(position);
return result;
}
/** Dynamically adds a new column to the grid at runtime, allowing users to modify the grid’s structure without requiring a page reload. This enables real-time updates to the grid layout based on user actions or application logic.
* @param {any} column. A column definition or array of columns to add. Refer to the grid's 'columns' property for the expected structure.
* @returns {boolean}
*/
addNewColumn(column) {
const result = this.nativeElement.addNewColumn(column);
return result;
}
/** Adds one or more unbound rows to the grid, positioned at either the top or the bottom, as specified. Unbound rows are not initially included in the grid’s data source; instead, they serve as editable placeholders. Once a user enters or modifies data in these rows, the new values are incorporated into the grid’s data source, making the unbound rows part of the main dataset. This feature is useful for allowing users to quickly add new entries or perform custom calculations directly within the grid interface.
* @param {number} count. The number of unbound rows to add.
* @param {string} position?. The position to insert the unbound rows. Accepts 'near' for top or 'far' for bottom.
* @returns {boolean}
*/
addUnboundRow(count, position) {
const result = this.nativeElement.addUnboundRow(count, position);
return result;
}
/** Enhances and applies custom filter criteria to a specific column within the data grid. Accepts both single and multiple filter expressions, allowing for complex filtering logic using logical operators such as "and" and "or". For example, to filter the "lastName" column for values that contain either "burke" or "peterson", use: `grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. The method also supports numeric filters (e.g., `GREATER_THAN 100`), a variety of comparison operators (such as `EQUALS`, `LESS_THAN`, `STARTS_WITH`, etc.), and can be used to combine different conditions for precise data selection.
* @param {string} dataField. The data field name of the column to filter, e.g., 'firstName'.
* @param {string} filter. The filter expression(s) to apply. Examples include 'startsWith B', ['contains Andrew or contains Nancy'], or ['quantity', '<= 3 and >= 8']. Supported operators: '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.
* @param {boolean} refreshFilters?. If set to false, allows multiple filters to be added without triggering unnecessary renders. Useful when applying multiple filters sequentially.
*/
addFilter(dataField, filter, refreshFilters) {
if (this.nativeElement.isRendered) {
this.nativeElement.addFilter(dataField, filter, refreshFilters);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addFilter(dataField, filter, refreshFilters);
});
}
}
/** Organizes the grid rows into groups based on the values in the specified column's data field. This functionality requires that grouping is enabled on the grid component. When activated, rows sharing the same value in the chosen column will be visually grouped together, allowing for easier data analysis and navigation.
* @param {string} dataField. The data field of the column to group by, e.g., 'firstName'.
*/
addGroup(dataField) {
if (this.nativeElement.isRendered) {
this.nativeElement.addGroup(dataField);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addGroup(dataField);
});
}
}
/** Enhances the grid's data display by applying a sorting order based on the specified column's data field. This function requires sorting to be enabled on the grid and sorts the rows according to the selected column's values, either in ascending or descending order as specified. If sorting is not enabled, this operation will have no effect.
* @param {string} dataField. The data field of the column to sort, e.g., 'firstName'.
* @param {string} sortOrder. The sort direction to apply. Use 'asc' for ascending or 'desc' for descending.
*/
addSort(dataField, sortOrder) {
if (this.nativeElement.isRendered) {
this.nativeElement.addSort(dataField, sortOrder);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addSort(dataField, sortOrder);
});
}
}
/** Dynamically resizes each grid row to fit its content, ensuring that text and elements are fully visible without being cut off or overlapping. This enhances readability and provides a more user-friendly and visually consistent grid layout.
*/
autoSizeRows() {
if (this.nativeElement.isRendered) {
this.nativeElement.autoSizeRows();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.autoSizeRows();
});
}
}
/** Dynamically resizes the width of each grid column based on its content and header label, so that all cell values and headers are fully visible without clipping or excessive whitespace. This ensures an optimal and polished display by automatically fitting columns to their widest required size.
*/
autoSizeColumns() {
if (this.nativeElement.isRendered) {
this.nativeElement.autoSizeColumns();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.autoSizeColumns();
});
}
}
/** Automatically resizes an individual grid column to precisely fit its content by dynamically measuring the widest content among its cells and header label, and adjusting the column width accordingly for optimal display without unnecessary extra space or truncation.
* @param {string} dataField?. The data field name of the column to auto-size, e.g., 'firstName'. Optional; if omitted, no action is taken.
*/
autoSizeColumn(dataField) {
if (this.nativeElement.isRendered) {
this.nativeElement.autoSizeColumn(dataField);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.autoSizeColumn(dataField);
});
}
}
/** Returns a boolean value that indicates whether every row in the grid is currently selected. This means the method will return true only if all rows within the grid have been selected; otherwise, it returns false.
* @returns {boolean}
*/
areAllRowsSelected() {
const result = this.nativeElement.areAllRowsSelected();
return result;
}
/** Pauses Grid rendering and UI refresh operations, allowing you to make multiple property changes or method calls without triggering repeated re-renders. This is particularly useful for optimizing performance during batch updates. After you finish making a