Grid — Smart UI JavaScript API

Grid — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-grid id="demo-grid"></smart-grid>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.grid.js';

    const el = document.getElementById('demo-grid');
    if (el) {

      el.dataSource = [{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Espresso' }, { firstName: 'Andrew', lastName: 'Fuller', productName: 'Latte' }];
      el.columns = [{ label: 'First Name', dataField: 'firstName' }, { label: 'Last Name', dataField: 'lastName' }, { label: 'Product', dataField: 'productName' }];
      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Grid   Framework: JavaScript   Selector: smart-grid

API counts: 86 properties, 136 methods, 39 events

Common properties: appearance, ai, behavior, currentUser, columnHeader, clipboard

Common methods: addRow(), addNewRow(), addNewColumn(), addUnboundRow(), addFilter(), addGroup()

Common events: beginEdit, batchChange, batchCancel, change, columnClick, columnDoubleClick

Module hint: smart-webcomponents/source/modules/smart.grid.js

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

Grid

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.

Selector

smart-grid

Quick picks

appearancebeginUpdatecellClickchangecolumnsdataSourceendUpdatefilteringgroupinglayout
Appearance

Properties

AappearanceAn 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. Click for more details. Property object's options:
  • alternationStart:number - Specifies the row index from which the alternating color pattern should begin. This determines the first row in the sequence that will receive a different background color, enabling alternating row colors for improved readability.
  • alternationEnd:number - Indicates the ending row index at which the alternating color pattern stops being applied. This index is inclusive, meaning the alternating colors will be applied up to and including this row.
  • alternationCount:number - The total number of times the row background color alternates, creating a striped (zebra) pattern in the table. Each alternation changes the row color from one specified color to the next in the sequence.
  • allowColumnStickyPosition:boolean - Allows specific table columns to remain fixed (sticky) on the left or right side while horizontally scrolling, improving table readability and user experience.
  • allowHover:boolean - Activates a hover effect for table rows. When a user hovers over a row, a distinct style is applied to all cells within that row, improving interactivity and highlighting the row under the cursor.
  • allowHeaderHover:boolean - Activates a visual hover effect on header elements. When a user moves their cursor over a header, a distinct hover style is applied to highlight the header and improve interactivity.
  • allowRowToggleAnimation:boolean - Enables animated transitions when expanding or collapsing a row in TreeGrid or Grouping mode. When this option is active, rows smoothly slide open or closed, enhancing the user experience by visually indicating the change in row state. This animation is triggered each time a row is expanded to show child nodes or collapsed to hide them.
  • allowRowDetailToggleAnimation:boolean - Enables animated transitions when expanding or collapsing row details in TreeGrid or Grouping mode. When a user clicks to expand or collapse a row, a smooth animation visualizes the row’s content appearing or disappearing, enhancing the user experience by clearly indicating the change in row state.
  • allowSortAnimation:boolean - Enables animated sorting of data records. When sorting is applied, the data records are visually rearranged using smooth transition animations, providing a clear and engaging user experience as the records update their order on the interface.
  • allowColumnLabelAnimation:boolean - Activates animation for the column label. When a user hovers over the column header or applies sorting—causing the header’s drop-down button to appear—the column label smoothly transitions to the left using an animation effect. This improves the visual feedback and highlights the interactive state of the column header.
  • allowColumnMenuAnimation:boolean - Controls whether the column menu displays with an animated transition. When enabled, clicking the drop-down button on a column header will show or hide the menu using a smooth animation effect, enhancing the user experience. If disabled, the menu will appear and disappear instantly without animation.
  • allowColumnSortButtonAnimation:boolean - Enables animated transitions for column sort buttons. When a user clicks on a sortable column header to change the sort order (ascending or descending), the sort button visually animates to indicate the sorting action, enhancing user feedback and interface interactivity.
  • allowColumnActionButtonAnimation:boolean - Enables animation for the column action button. When this option is active, the drop-down button that appears upon hovering over a column header will display with a smooth animation effect, enhancing visual feedback for the user. If disabled, the drop-down button will appear instantly without any animation.
  • allowColumnFilterButtonAnimation:boolean - Animates column filter button state when a filter is applied or cleared (filter button appearance).
  • autoShowColumnSortButton:boolean - When enabled, this property automatically displays the column sort button only when the column is actively sorted. If set to false, the sort button is always visible, regardless of whether the column is currently sorted, indicating that sorting is available for that column.
  • autoShowColumnActionButton:boolean - If enabled, this option automatically displays the column action button, allowing users to access additional actions or settings related to the column without manual configuration.
  • autoShowColumnFilterButton:boolean - If enabled, this option automatically displays a filter button in each column header, allowing users to quickly access and apply filtering options to the column's data.
  • autoGenerateRowLabelMode:string - Specifies the format of row header labels, allowing you to choose between sequential numbers (e.g., 1, 2, 3, ...) or alphabetical letters (e.g., A, B, C, ...). Changing this property determines how the row headers are displayed in the rendered output.
  • autoGenerateColumnLabelMode:string - Determines the format of the column header labels, allowing them to be displayed as either sequential numbers (e.g., 1, 2, 3…) or letters (e.g., A, B, C…). This property directly influences how column headers are rendered and displayed in the table interface.
  • displayLoadingIndicator:boolean - Controls the visibility of the loading indicator in the Grid component. When enabled, a "Loading..." image or animation is displayed as an overlay while the Grid is fetching or processing data, providing visual feedback to users that content is being loaded.
  • loadingIndicatorPlaceholder:string - Specifies the label text shown in the loading indicator. This text appears to inform users that data is currently being loaded or processed. Use this property to customize the loading message for better user experience.
  • placeholder:string - Specifies the placeholder content displayed in the Grid when there are no data items to show. This placeholder provides a visual cue or message to users, indicating that the Grid is currently empty.
  • sortAnimationDuration:number - Specifies the length of time, in milliseconds, that the sorting animation will run when items are sorted. This property takes effect only if the allowSortAnimation property is enabled. Use it to control the speed and smoothness of the sorting transition for a better user experience.
  • showRowHeader:boolean - Toggles the visibility of the row header, allowing you to either display or hide the header section for each row in the grid or table.
  • showTreeRowHeader:boolean - In TreeGrid, when true, parent (non-leaf) nodes are drawn in the row header column—like group headers—instead of as normal data rows, so depth is easier to see.
  • showRowHeaderNumber:boolean - Displays the row indexes in the row header section of the table. To enable this feature, set the showRowHeader property to true. When activated, each row header will display its corresponding index, providing clear reference points for users.
  • showRowHeaderEditIcon:boolean - Displays an edit icon whenever a cell or row enters the edit state, providing a clear visual indicator that the item is currently being modified.
  • showRowHeaderSelectIcon:boolean - Displays a selection icon when the user's pointer hovers over the row header cell, providing a visual cue that the row can be selected.
  • showRowHeaderFocusIcon:boolean - Displays a focus icon whenever a table cell or entire row is focused, providing a clear visual indicator of the current selection for improved accessibility and user interaction.
  • showRowHeaderDragIcon:boolean - Displays a drag handle icon within the row header, allowing users to initiate and perform row drag-and-drop actions for reordering rows.
  • showColumnHeaderLines:boolean - Displays visible lines that separate the headers of columns from one another, making it easier to distinguish between different column headings in a table or grid layout.
  • showColumnHeaderDragIcon:boolean - Displays a drag handle icon on the column header when drag-and-drop functionality is enabled. The icon becomes visible when the user hovers the mouse cursor near the left edge of the column header, indicating that the column can be dragged to a new position.
  • showColumnLines:boolean - Displays vertical grid lines between columns, making it easier to distinguish and separate individual columns within the layout.
  • showRowLines:boolean - Displays horizontal lines that separate each row in the table, making it easier to distinguish and read individual rows.
  • showColumnGroupLines:boolean - Displays vertical divider lines between columns that are organized into groups, visually separating each column within the group to improve readability and distinction.
  • showColumnGroupCellLines:boolean - Displays dividing lines between cells within column groups, clearly separating each cell to improve readability and organization within grouped columns.
  • showColumnGroupsInColumnPanel:boolean - Displays column groups in the "Hide columns" panel, presenting both column groups and individual columns in a hierarchical, tree-like structure. If this property is set to false, column groups are hidden from the panel, and instead, column labels are prefixed with their corresponding group name for context.
  • showFilterColumnBackground:boolean - Displays a distinct background color on the column header to indicate when a filter has been applied to that column. This visually highlights filtered columns, helping users easily identify which columns are currently filtered.
  • showSortColumnBackground:boolean - Highlights the background of the column currently being sorted, visually indicating which column has an active sort applied.
  • showFrozenColumnBackground:boolean - Displays a distinct background for frozen columns in the grid, making it visually clear which columns are fixed in place when horizontal scrolling is enabled. This feature is active only when the grid contains frozen columns.
  • showSelectionOnTop:boolean - Displays the selection with the highest visual priority, ensuring it appears above all other styled elements. This guarantees the selection remains clearly visible and is not obscured by any other interface elements or styles.
  • showColumnSortButton:boolean - Displays a sorting button within the column header, allowing users to sort the column's data in ascending or descending order.
  • showColumnFilterButton:boolean - Displays a filter button in the column header, allowing users to access filtering options for that specific column.
  • showColumnDescriptionButton:boolean - Displays a button that reveals the column description. The appearance and styling of this button can be fully customized using the Grid's CSS classes, allowing you to match it to your application's design.
  • showColumnIcon:boolean - Displays an icon within the header of the column, providing a visual indicator or representation specific to that column. This icon appears alongside or instead of the column title and can be used to convey additional information or functionality related to the column's contents.
  • showColumnCustomButton:boolean - Displays a user-defined custom button in the column header. This allows developers to add their own button to the top of a column, enabling custom actions or functionality specific to that column.
  • showColumnActionButton:boolean - Displays the column action button, which appears as a drop-down menu icon within the column header. This button allows users to access additional actions or settings related to the specific column, such as sorting, filtering, or customizing the column display.
  • showTooltips:boolean - Displays informative tooltips when the user hovers over table columns or individual cells, providing additional context or details about the data shown.
  • showHorizontalScrollBarOnFixedColumns:boolean - Displays a horizontal scrollbar specifically for fixed columns, allowing users to scroll horizontally within the fixed section when its content exceeds the available width.
  • showVerticalScrollBarOnFixedColumns:boolean - Displays a vertical scrollbar specifically on fixed columns, allowing users to scroll through content within those columns when the content exceeds the visible height. This ensures that fixed columns remain accessible and easy to navigate even with overflow content.
  • showTodayDateAsString:boolean - Displays the current date as the word "Today" instead of the standard date format (e.g., "7/8/2022"). When this property is set to false, the component will show the full numerical date.
LlayoutAn 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. Click for more details. Property object's options:
  • allowCellsWrap:boolean - Controls whether cell values automatically wrap onto multiple lines. When set to true, text within a cell will wrap to fit the cell's width, displaying content across multiple lines as needed. When set to false, text will remain on a single line, and any overflow may be truncated or hidden based on cell styling.
  • autoSizeNewColumn:boolean - Automatically assigns a default width to any new Column component that does not have its 'width' property explicitly defined. This ensures consistent sizing for all columns, even if a specific width is not provided during the component’s creation.
  • autoSizeNewColumnMinWidth:number - Specifies the minimum width, in pixels, for the newly created column. This ensures that the column will not shrink below this defined width, maintaining layout consistency and readability.
  • autoHeight:boolean - Dynamically adjusts the height of the Grid component based on its content or container, ensuring optimal layout without manual height specification.
  • autoWidth:boolean - Automatically adjusts the overall width of the Grid based on the combined widths of its columns. To enable this feature, ensure that each column has a numerical value assigned to its ‘width’ property. This allows the Grid to size itself precisely according to the specified widths of all columns.
  • autoGenerateColumnWidth:string | number | null - Defines the width of columns that are automatically generated within the Grid component. This setting determines how wide each auto-created column will appear, ensuring consistent column sizing for dynamically generated data fields.
  • columnWidth:string | number | null - Specifies the width of each column in the grid layout. This property allows you to define fixed, relative, or auto-sizing widths for grid columns, enabling precise control over the grid's overall structure and appearance.
  • columnHeight:string | number | null - Specifies the vertical height for each column within the Grid layout. This property determines how tall each column appears, allowing for consistent or customized column heights depending on the value provided.
  • columnMinHeight:number - Specifies the minimum height that each column within the Grid can occupy, ensuring that all columns maintain at least this height regardless of their content. This helps maintain a consistent and readable layout by preventing columns from becoming too short.
  • cardMinWidth:number - Defines the lowest allowable width, in pixels or specified units, that a card can be displayed at in card view. This ensures that cards will not shrink below this minimum width, maintaining readability and consistent layout even when the container is resized or when multiple cards are shown side by side.
  • cardsPerRow:number - Specifies the number of cards displayed in each row, allowing you to control the column layout and adjust how many cards appear side by side within a container.
  • cardVertical:boolean - When true, each card stacks column label above value; when false, label and value sit side by side. Prefer true on narrow layouts.
  • dropDownWidth:number - Specifies the width of the Grid component when it is rendered within a drop-down interface. This setting determines how wide the Grid appears in the drop-down, allowing you to control its visual layout and ensure proper alignment with surrounding UI elements.
  • dropDownHeight:number - Specifies the vertical height of the Grid component when it is presented within a drop-down interface. This setting determines how many items or how much content is visible within the drop-down Grid before scrolling is required.
  • rowMinHeight:number - Specifies the minimum height, in pixels or other valid CSS units, that each row in the Grid layout can be resized to. This ensures that no row will be rendered shorter than the defined minimum value, regardless of the content or available space.
  • rowHeight:string | number | null - Specifies the height of the grid rows. Accepts the following values:

    - null: The row height is determined automatically based on the content.
    - auto: The row height adjusts automatically to fit the content of each row.
    - A number: Sets a fixed row height in pixels.

    Use this property to control the vertical sizing behavior of rows within the Grid component.
  • filterRowHeight:number - Specifies the height of the filter row.
  • viewBarWidth:number - Specifies the width of the view bar component, determining how much horizontal space it occupies within the user interface. Adjusting this value will increase or decrease the view bar's width accordingly.
OonRowStyleCallback function triggered when the style of a row is updated. This event occurs whenever a row's styling changes, either through the row dialog interface or programmatically via the setRowStyle method. The callback receives relevant information about the updated row and its new style, enabling custom handling or additional processing in response to the style change.

Methods

AautoSizeColumnAutomatically 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.
AautoSizeColumnsDynamically 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.
AautoSizeRowsResizes each row’s height to fit its cell content so text and controls are not clipped.
Behavior

Properties

BbehaviorAn object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings. Click for more details. Property object's options:
  • allowColumnAutoSizeOnDoubleClick:boolean - Automatically resizes a column to fit its content when the user double-clicks on the right edge of the column header.
  • allowRowAutoSizeOnDoubleClick:boolean - Automatically resizes the row height to fit its content when the bottom border of the row is double-clicked.
  • allowRowReorder:boolean - Specifies whether the functionality to reorder rows—such as through drag-and-drop or other user interactions—is enabled. When set to true, users can change the order of rows within the table or list component.
  • allowColumnReorder:boolean - Specifies whether users are allowed to reorder columns by dragging them to new positions within the table or grid.
  • allowColumnFreeze:boolean - Controls whether users can freeze (or pin) columns using drag-and-drop interactions.

    - 'When other columns are already frozen/pinned:' Dragging a column into the frozen area will immediately add it to that section.
    - 'When no columns are currently frozen/pinned:' Dragging a column to the edge of the grid and holding it there for about one second will automatically activate the frozen area and pin the column.

    Enabling this option provides an intuitive way for users to freeze columns directly from the grid interface.
  • allowMouseWheel:boolean - Specifies whether users can scroll the content using the mouse wheel. If enabled, the mouse wheel will allow vertical or horizontal scrolling within the element; if disabled, mouse wheel actions will have no scrolling effect.
  • columnResizeMode:string - Specifies how column resizing is handled.
    In split mode, when a column is resized, its width increases or decreases, and the adjacent (next) column’s width is adjusted in the opposite direction, so the combined width of both columns remains constant.
    In growAndShrink mode, only the resized column's width changes; the widths of other columns remain unaffected.
  • rowResizeMode:string - Specifies how rows are resized within the container.
    - In the split resize mode, resizing a row will both increase or decrease the height of the target (resized) row and inversely adjust the height of the immediately following (sibling) row, ensuring the total height remains constant.
    - In the growAndShrink resize mode, only the targeted row's height is adjusted—either increasing or decreasing—without affecting the size of neighboring rows.
SscrollingConfigures 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.

Events

BbatchCancelTriggered 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.
CcellClickFires 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.
CcellDoubleClickFires 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.
CcellTapTriggered 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.
CcloseColumnDialogFires 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.
CcolumnDoubleClickFires 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.
CcolumnDragEndTriggered 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.
CcolumnDraggingThis 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.
CcolumnDragStartFires 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.
CcolumnResizeTriggered 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.
CcommentAddTriggered 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.
CcommentRemoveTriggered 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.
CcontextMenuItemClickOccurs 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.
OopenColumnDialogEmitted 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.
RresizeTriggered 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.
RrowClickTriggered 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.
RrowCollapseTriggered 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.
RrowDoubleClickThis 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.
RrowDragEndThis 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.
RrowDraggingThis event is triggered repeatedly in real-time as the user drags a row, firing continuously throughout the entire duration of the dragging action.
RrowDragStartTriggered 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.
RrowExpandThis 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.
RrowReorderTriggered 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.
RrowResizeTriggered 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.
RrowStarredTriggered 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.
RrowTapTriggered 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.
SscrollBottomReachedTriggered 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.
SscrollTopReachedTriggered 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.

Methods

BbeginUpdatePauses 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 all necessary changes, call 'endUpdate()' to resume rendering and apply all updates to the UI.
EendUpdateRestores the Grid's normal rendering process and updates the user interface following a call to beginUpdate(). Use endUpdate() to apply any changes made during the update suspension and ensure the Grid displays the latest data and layout.
FfocusAndSelectSets focus on and selects a specified cell or an entire row within the grid, clearing any previous selections. This action also updates the keyboard navigation's starting point to the newly focused cell or row, ensuring that subsequent navigation actions will originate from this location.
RrefreshRefreshes the grid view for current property and data state without a full `render()` rebuild—lighter than re-creating the whole DOM (compare render).
RrefreshSortApplies the current sorting settings again to the data and updates the Grid display to reflect any changes, ensuring the data is presented according to the latest sorting configuration.
RrefreshViewRefreshes only the cells that are currently visible within the Grid’s viewport, rather than updating the entire Grid. This is especially useful for implementing real-time updates or live data feeds, as it enables efficient, seamless rendering of new cell values without triggering a full Grid refresh or losing the user's scroll position.
Columns

Properties

CcolumnGroupsProvides a detailed configuration of column group settings, including group names, ordering, visibility, and any hierarchical relationships between columns within the group. Click for more details. Property object's options:
  • label:string - Sets the label.
  • labelTemplate:string | HTMLTemplateElement | HTMLElement | {(label: string): string} - Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
  • align:string - Sets the align.
  • collapsible:boolean - Sets whether the column group can be collapsed.
  • name:string - Sets the name of the column group.
  • parentGroup:string - Sets the name of the parent column group.
  • verticalAlign:string - Sets the vertical align.
CcolumnHeaderProvides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid.
CcolumnMenuThe 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. Click for more details. Property object's options:
  • autoClose:boolean - Automatically closes the column menu when it is open. This ensures the menu is hidden from view, typically after a user action such as selecting an option or clicking outside the menu. This helps improve user experience by keeping the interface clean and responsive.
  • dataSource:object - Specifies the data sources available for selection or display within the column menu, allowing users to choose or interact with different data sets directly from the column menu interface.
  • visible:boolean - Retrieves the current visibility status of the column menu. This function returns true if the column menu is currently displayed to the user; otherwise, it returns false.
  • enabled:boolean - Controls the visibility of the column menu. When set to true, the column menu appears when the user hovers over the column header, providing additional options for manipulating the column. If set to false, the column menu is disabled and will not be displayed on hover. This property can be used to enable or disable the column menu programmatically.
  • width:number - Specifies the width, in pixels, of the column menu panel. This determines how wide the menu appears when a user opens the column options in the table or grid interface. Adjust this value to control the available space for menu items and improve usability.
  • height:number | null - Defines the vertical height, in pixels, of the column menu component. Adjusting this value determines how much vertical space the column menu occupies, which can impact the display and usability of the menu's content items.
CcolumnReorderEnables drag-and-drop column reordering. Shorthand: sets behavior.allowColumnReorder to true.
CcolumnResizeEnables column resizing by dragging column edges. Shorthand: sets behavior.columnResize to the string growAndShrink (see behavior).
CcolumnsThe 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. Click for more details. Property object's options:
  • align:string - Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
  • allowExport:boolean - Sets or gets whether the column can be exported.
  • allowGroup:boolean - Sets or gets whether the column can be grouped.
  • allowHide:boolean - Sets or gets whether the column can be hidden.
  • allowSelect:boolean | null - Sets or gets whether the column can be selected.
  • allowEdit:any - Sets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }
  • allowSort:boolean - Sets or gets whether the column can be sorted.
  • allowHeaderEdit:boolean - Sets or gets whether the column can be edited, when header editing is enabled.
  • allowFilter:boolean - Sets or gets whether the column can be filtered.
  • allowReorder:boolean - Sets or gets whether the column can be reordered.
  • allowResize:boolean - Sets or gets whether the column can be resized.
  • allowNull:boolean - Sets or gets whether the column can have 'null' values.
  • cardHeight:number - Sets or gets the cell's height in card view mode.
  • cellsFormat:string - Defines the format applied to the column's cell values. Supports number and date format strings. Examples for numeric formatting:
    • 'd' - Decimal numbers (e.g., 25)
    • 'f' - Floating-point numbers (e.g., 25.50)
    • 'n' - Integer numbers with thousands separator (e.g., 1,000)
    • 'c' - Currency format (e.g., $25.50)
    • 'p' - Percentage format (e.g., 50%)
    To define decimal places, append a number (e.g., 'c2' = $25.26).

    Examples for date formatting:
    • 'd' - Short date (e.g., 3/25/2025)
    • 'D' - Long date (e.g., Tuesday, March 25, 2026)
    • 't' - Short time (e.g., 1:30 PM)
    • 'T' - Long time (e.g., 1:30:45 PM)
    • 'f' - Long date + short time
    • 'F' - Long date + long time
    • 'M' - Month/day (e.g., March 25)
    • 'Y' - Year and month (e.g., 2026 March)
    • 'S' - Sortable, culture-invariant format (e.g., 2026-03-25T13:30:45)

    Custom date format tokens:
    • 'dd' - Day of month (e.g., 01-31)
    • 'MMMM' - Full month name
    • 'yyyy' - 4-digit year
    • And many more standard date/time tokens
  • cellsAlign:string - Controls the horizontal alignment of cell content. Acceptable values:
    • 'left' - Aligns content to the left
    • 'right' - Aligns content to the right
    • 'center' - Centers content horizontally
  • cellsWrap:boolean - Sets or gets the column's cells wrapping. Accepts: true or false.
  • cellsVerticalAlign:string - Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'
  • className:string - Sets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.
  • cellsClassName:any - Sets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }
  • cellsCSSRules:any - Sets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value <5, 'three': settings => settings.value === 3 }. The settings object contains the following properties: index, value, dataField, row, api.
  • collapsed:boolean - Sets or gets whether the column is collapsed.
  • cellsRenderer:{(rowId: string | number, dataField: string, cellValue: any, rowData: any, cellElement: any): string} - Sets or gets the column's cells renderer function for custom html rendering in the cells. For more advanced scenarios use formatFunction or template, but for simple html rendering, you can use this.
  • columnGroup:string - Sets the name of the column group.
  • dataField:string - Sets or gets the column's data source bound field.
  • dataType:string - Sets or gets the column's data type. Any of the following value is valid: 'string', 'number', 'int', 'date', 'bool', 'object', 'any'
  • displayField:string - Sets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.
  • description:string - Sets or gets the column's description. The description of the column is displayed in the column's header, when the end-user moves the pointer over the description button. 'showDescriptionButton' property determines whether the description button is visible.
  • dataSet:any - Sets or gets custom data object related to the column.
  • detailColumns:[] - Sets or gets which columns will be expanded/collapsed when the column is collapsible. The property expects an array of data fields.
  • element:HTMLElement - Gets the HTML Element. The property returns null when the Column is not in the View.
  • editor:string | {template?: string, settings?: any, onInit?: any, onRender?: any, setValue?: any, getValue?: any} - Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.
  • freeze:string | boolean - Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).
  • filter:any - Sets or gets the filter of the column. Example: ['contains Andrew or contains Nancy']. Example with numeric filter ['quantity', '<= 3 and >= 8']. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - ['EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']. Example with a string filter applied to a string column - ['CONTAINS' 'burke' or 'CONTAINS' 'peterson']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
  • filterMenuMode:string - Sets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed.
  • filterEditor:any - Sets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: number
  • formatFunction:{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, oldValue?: any, value?: any, template?: any, data?: any}): void} - Sets or gets the column's format function.
  • formatSettings:any - Defines the formatting settings applied to the column's values. You can use built-in formatting options or provide advanced internationalization formats using Intl objects. For example, to apply currency formatting: 'Intl: { NumberFormat: { style: "currency", currency: "EUR" } }', or for date formatting: 'Intl: { DateTimeFormat: { dateStyle: "full" } }'.
  • formula:string - Sets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')
  • group:string - Sets or gets the column's group.
  • getCellValue:any - This function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.
  • getFilterPanel:any - Gets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu. The function works in combination with updateFilterPanel
  • icon:string - Sets or gets the column's icon. Expects CSS class name.
  • label:string - Sets or gets the text displayed in the column's header.
  • labelTemplate:string | HTMLTemplateElement | HTMLElement | {(label: string): string} - Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
  • headerTemplate:HTMLElement - Sets or gets the column header's template function. The property expects a function(element) { } which can be used to set up the column's header label.
  • minWidth:number - Sets or gets the minimum width.
  • onCellClick:{(event: any, rowId: string | number, dataField: string, cellValue: any, rowData: any, cellElement: any): string} - Sets or gets the column's click handler.
  • rowSpan:{(cellValue: any, rowIndex: number, data: any): number} - Sets or gets the column's rowSpan function. Allows you to dynamically span cells.
  • relationId:string - Defines the unique identifier of a relation within dataSourceSettings.relations. Must be used together with the 'relationField' property to establish the relationship mapping.
  • relationField:string - Specifies the data field within the current data source that participates in the relationship defined by 'relationId'. Both 'relationField' and 'relationId' must be configured to create a valid relation.
  • options:[] - Sets or gets the column options for editors such as list, dropdownlist or tags.
  • sortOrder:string | null - Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null.
  • sortIndex:number - Sets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.
  • sortComparator:any - Sets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) => { if (value1 === value2) return 0; return value1 <value2; }
  • showActionButton:boolean - Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
  • showIcon:boolean - Sets or gets whether the column's header icon is displayed.
  • showDescriptionButton:boolean - Sets or gets whether the column's header description button is displayed.
  • width:string | number - Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
  • tooltip:string - Sets or gets the column's tooltip.
  • tooltipRenderer:any - Sets or gets the column's tooltip renderer which renders tooltips for the column cells. (rowId, dataField, cellValue, formattedValue, data)
  • template:string | HTMLTemplateElement | HTMLElement | {(row: GridRow, column: GridColumn, cell: GridCell, oldValue: any, value: any, template: any, data: any): void} - Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.
  • templateSettings:any - Sets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.
  • validationRules:[] | null - Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.
  • verticalAlign:string - Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
  • summary:string[] - Sets or gets the column summary. The property should be set to an array with the following possible values: 'sum', 'min', 'max', 'avg', 'count', 'median', 'stdev', 'stdevp', 'var', 'varp'.
  • updateFilterPanel:any - Updates the column's filter panel. The function works in combination with getFilterPanel
  • visible:boolean - Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
OonColumnCloneCallback function that is invoked immediately after a column has been successfully cloned. This function receives relevant context or event data as its arguments, allowing you to perform custom logic or side effects in response to the cloning action.
OonColumnInitCallback function that is invoked after a column has been initialized. This function receives the column instance as a parameter and can be used to modify column properties, apply custom settings, or perform additional setup specific to that column. Use this callback to tailor column behavior or appearance during the initialization process.
OonColumnInsertedCallback function that is invoked whenever a new column is successfully inserted into the structure or component. This function receives relevant information about the inserted column, allowing you to perform custom logic or updates in response to the insertion event.
OonColumnRemovedCallback function that is triggered after a column has been successfully removed. This function receives relevant information about the removed column as its arguments, allowing you to perform additional actions or updates in response to the removal event.
OonColumnUpdatedCallback function that is invoked whenever the data in a column is updated. Receives relevant information about the updated column, such as the column identifier and the new value, allowing you to implement custom behavior in response to column changes.

Events

CcolumnClickTriggered 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.
CcolumnReorderFires 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.

Methods

GgetColumnRetrieves the column object corresponding to the specified data field. This returned object includes all relevant properties and configuration settings for that column, such as its header label, data type, formatting options, sorting behavior, visibility, and any custom properties defined in the column schema.
GgetColumnPropertyFetches the value of a specified property from a particular column, where the column is identified by its data field name. This function allows you to access detailed configuration or metadata associated with a column in a data structure, such as a table or grid, by referencing the column’s data field.
GgetColumnsRetrieves an array of column objects representing every column currently configured in the grid. Each column object contains key properties, including:- `label`: The display name of the column as shown in the grid header.- `dataField`: The underlying data field or key this column is bound to in the dataset.- `dataType`: The type of data displayed in the column (e.g., string, number, date).- `visible`: A boolean indicating whether the column is currently visible in the grid.- Additional dynamic state properties, such as the current sort order, filter status, or column width, reflecting any user customizations or interactions.This comprehensive array allows developers to access both the static configuration and real-time state of each column in the grid.
RreorderColumnsReorders two columns in the Grid by moving the specified source column to a new position either before or after the target reference column. This allows for customizable column arrangements by programmatically shifting the position of columns within the Grid.
SsetColumnPropertySets or updates a specific property of a column identified by its dataField. This function allows you to dynamically modify column settings, such as freezing the column, toggling its visibility, adjusting its width, and altering other configurable attributes at runtime. Use this method to programmatically change how individual columns are displayed or behave within your data grid or table component.
SsetColumnsSets the columns displayed in the Grid to a new set defined by the provided argument. When 'setColumns' is called, the Grid compares the new columns array with the currently displayed columns. It will add any new columns, retain existing columns that are still present, and remove columns that are not included in the new array. After updating the columns, the Grid automatically redraws all column headers and refreshes all rows to reflect the changes. Importantly, any state associated with existing columns—such as sort order, filters, column width, and other configurable options—will be preserved for columns that remain after the update. This ensures that users do not lose their settings when columns are changed dynamically.
SswapColumnsSwaps the positions of two specified columns within the Grid layout, effectively changing their order of appearance. This operation updates the Grid so that the selected columns exchange places, while the data and structure of other columns remain unchanged.
Data & Export

Properties

CclipboardThe 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. Click for more details. Property object's options:
  • enabled:boolean - Specifies whether the property is currently active (enabled) or inactive (disabled). You can use this setting to retrieve the current status or to enable or disable the property as needed.
  • copyHeadersToClipboard:boolean - Determines whether the column headers are included when copying data to the clipboard. When enabled, copying data will also copy the column headers; when disabled, only the data will be copied. This setting can be used to set or retrieve the current behavior.
  • autoFillMode:string - Defines whether and how the values of copied and pasted cells are automatically filled using pattern detection during Drag & Drop or multiple cell selection operations. This setting determines how pasted data is handled:

    - 'none': No auto-fill or pattern detection is applied. Pasted cells remain as they are, with no changes or repetition beyond what was directly copied.
    - 'copy': The exact cell values are duplicated into the new locations without attempting to follow or extend any logical sequence or pattern.
    - 'fillSeries': Enables automatic pattern detection and series continuation. If the selection forms a recognizable sequence—for example, '1, 2'—the pasted cells will extend this pattern (e.g., '1, 2, 3, 4, ...'), filling additional cells with the next values in the detected sequence.

    This option helps users quickly extend numeric, date, or other discernible patterns when dragging or pasting multiple cells.
  • onPasteValue:{(args: {value: any, oldValue: any, dataField: string, id: string | number}): void} - Defines or retrieves a callback function that is triggered when a paste event occurs, allowing custom handling of pasted content.
DdataExportConfigures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences. Click for more details. Property object's options:
  • header:boolean - Determines whether the column headers are included when exporting the data. If enabled, the exported file will contain the header row with column names; if disabled, only the data rows will be exported without column headers.
  • filterBy:object - Determines if the current export includes only the data that matches the filters applied in the interface. When enabled, only filtered results will be exported; when disabled, the export will contain all available data regardless of active filters.
  • groupBy:object - Specifies the grouping criteria applied to the exported data, determining how records are organized into distinct groups in the exported file. This setting allows you to control the categorization or segmentation of data during the export process.
  • style:object - Specifies a custom style object to format the appearance of the dataExport, allowing you to define properties such as fonts, colors, borders, and cell alignment for the exported data.
  • fileName:string - Specifies the name that will be assigned to the exported file when it is saved or downloaded.
  • pageOrientation:string - Specifies the orientation of the page (portrait or landscape) when exporting the document to PDF format. This setting determines how the content is laid out on each PDF page.
  • expandChar:string - Specifies the character or symbol shown for expanded rows in a Grid with row hierarchy (such as a TreeGrid or Grouped Grid) when the data is exported. This character visually indicates expanded nodes in the exported file.
  • collapseChar:string - Specifies the character or symbol used to represent collapsed rows when exporting a Grid that includes row hierarchy features, such as TreeGrid or grouped rows. This character will indicate collapsed states in the exported file.
  • view:boolean - Exports only the data currently visible in the Grid, excluding any rows or columns that are filtered, hidden, or outside the current viewport.
  • viewStart:number | null - Specifies the starting row index for data export or printing operations. This determines which row the process will begin from. Ensure that the 'view' parameter is set to true for this setting to take effect.
  • viewEnd:number | null - Specifies the index of the last row to be included during export or print operations. When using this option, ensure that the 'view' parameter is set to true to apply the index relative to the current view or filtered dataset, rather than the entire data set.
  • rowIds:(string | number)[] | null - An array containing the IDs of the rows that should be included in the export operation. Each element in the array represents the unique identifier of a row to be exported.
  • headerContent:any - An array containing custom row objects that will be rendered above the main Grid rows, allowing you to insert additional content or elements before the standard grid data appears.
  • footerContent:any - A customizable array containing additional row objects that will be appended to the end of the default Grid rows. Use this property to insert extra rows with custom content or functionality after the main set of Grid rows.
  • addImageToCell:any -

    This is a callback function designed for inserting images into individual cells during an "Export to Excel" operation. The function receives the following parameters:

    - 'index': The current cell index in the export process.
    - 'dataField': The field name associated with the current cell's data.
    - 'value': The image data, typically as a base64-encoded string.
    - 'values': An array containing all values for the entire column being exported.

    The function should return an object that defines the image to be placed in the Excel cell. The returned object has the following structure:

    '''javascript
    return {
    image: {
    id: 'myImage' + index, // Unique identifier for the image.
    base64: value, // Base64-encoded image data.
    imageType: 'jpeg', // Image format, e.g., 'jpeg' or 'png'.
    width: 20, // Image width, in Excel units (pixels or points).
    height: 11, // Image height, in Excel units.
    position: {
    offsetX: 10 + (25 * values.indexOf(value)), // Horizontal offset for image positioning in the cell.
    offsetY: 5.5 // Vertical offset for image positioning in the cell.
    }
    }
    };
    '''

    This object specifies:
    - The image's unique ID and format.
    - The image's visual size within the cell.
    - The position offsets to control exactly where the image appears inside the cell.

    By customizing these properties, you can control how images are embedded and displayed for each Excel cell during export.
  • setRowHeight:any - This function enables you to customize the height of each row when exporting data to Excel. It receives the row index as a parameter and should return a numeric value representing the desired height for that specific row. By using this function, you can dynamically control the appearance of rows in your exported Excel file, such as setting different heights for header, data, or summary rows.
  • getSpreadsheets:any - Defines a function that enables you to include additional data in the Excel export, allowing you to create and export multiple sheets within a single Excel file. This function provides flexibility to specify extra datasets or customize the content of each sheet according to your requirements.
  • exportStyles:boolean - A function that enables you to export a data grid—complete with applied styles and formatting—directly to an Excel file, preserving the grid’s visual appearance and structure in the exported document.
  • cellFormatFunction:any - A function that enables customization of cell formatting prior to data export. It receives three parameters: index (the row index of the cell), dataField (the key or field name corresponding to the cell), and value (the original value of the cell). The function should return the formatted value, which will be used in the exported output instead of the original value."
  • freezeHeader:boolean - Determines whether the header row remains fixed (frozen) at the top of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the column headers.
  • freezeColumns:boolean - Determines whether the pinned columns remains fixed (frozen) at the left of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the pinned column.
  • autoConvertFormulas:boolean - Determines if formulas in the exported Excel file will be automatically converted to their corresponding calculated values. When enabled, all formulas are replaced with their results in the export; when disabled, original formulas are preserved in the Excel sheet.
  • onlySelected:boolean - Determines if only the currently selected cells or rows are exported to Excel, instead of exporting the entire data set. When enabled, only the user's selection will be included in the exported Excel file.
  • exportAsTable:boolean - Specifies whether the data should be exported as an Excel Table (with structured formatting and table features) when using the Export to Excel function. If enabled, the exported file will present the data as an Excel Table; if disabled, the data will be exported as plain worksheet content without table formatting.
  • protectSheet:any - Specifies whether the data should be exported as an Excel protected sheet. You can set a password by setting an object like this: { password: 'secret'}
DdataSourceSpecifies the source from which the grid retrieves its data. The dataSource property accepts either an instance of Smart.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.
DdataSourceSettingsConfigures 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. Click for more details. Property object's options:
    DdropDownModeDataFieldSpecifies the data field or property to display in dropdown mode. This is the field from the data source that will be shown as the dropdown options.
    SstateSettingsConfigures 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. Click for more details. Property object's options:
    • autoSave:boolean - Controls whether the Grid's current state (such as column order, filter settings, and sorting) is automatically saved or not. When enabled, any changes to the Grid's configuration are stored automatically for later retrieval.
    • autoLoad:boolean - Controls whether the Grid automatically restores its previous state (such as filters, sorting, and column arrangements) when the page is reloaded. When enabled, the Grid will load the saved state on page refresh; when disabled, the Grid will reset to its default configuration.
    • enabled:boolean - Controls whether the grid's current state—such as column order, sorting, filtering, and visibility—is automatically saved and restored when loading or reloading the grid. When enabled, changes made by the user are preserved, providing a consistent experience across sessions. Disabling this option prevents the grid from saving or restoring any state information.
    • current:string - Sets a new state value or retrieves the current state value. When a value is provided, the state is updated to the new value. If no value is provided, the current state is returned. This is typically used to manage and track changes in application state.
    • storage:any - A container that automatically stores state objects whenever the saveState method is called or when autoSave is enabled. Each entry in the container uses the state's name as the key and the corresponding value is a JSON object containing that state's properties and data. This structure allows for easy retrieval and management of multiple application states by name.
    • onStateChange:any - Function invoked whenever the component’s state changes, allowing you to respond to or handle updates accordingly.
    • options:string[] - An array specifying which table state options—such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', and 'columns'—should be persisted. Each value in the array represents a different aspect of the table’s state that can be saved or restored (e.g., saving the current sorting order, applied filters, selected rows, or column configuration). This property allows you to control exactly which parts of the table state are stored and later reloaded, enabling customized persistence and retrieval of user interactions.

    Methods

    CclearRowsRemoves all rows and associated data from the Grid, and clears any current user selections. After performing this action, the Grid will display a 'No Rows' message to indicate that it is empty.
    EexportDataThis function allows you to export the grid's data into various supported file formats, including .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG, and .PNG. The way the data is exported—such as file formatting, included columns or rows, applied filters, and export settings—is determined by the options set in the grid’s dataExport property. This ensures that the exported file matches your specified requirements and preferences.
    FforEachRowExecutes a callback function for each individual row in the grid's underlying dataset, regardless of any grouping, filtering, or sorting currently applied to the grid view. This method iterates over all raw data rows, ensuring that the callback is called on every entry as it exists in the original data source, not just the rows that are visible or active in the grid's current state.
    FforEachRowAfterFilterAndSortExecutes a callback function for each row that is currently visible in the grid after all active filters and sorting have been applied. This method operates strictly on the rows as they appear in the current grid view, ensuring that hidden, filtered out, or unsorted rows are excluded. The iteration respects the latest grid state, guaranteeing that only rows displayed to the user are processed by the callback function.
    GgetRowReturns the complete row object from the Grid for the row corresponding to the given row ID, including all its associated data and properties.
    GgetRowByElementReturns the Grid row object by its HTML Element, allowing access to all data and properties associated with that specific row.
    GgetRowByIndexReturns the Grid row object at the given zero-based row index, allowing access to all data and properties associated with that specific row. The index parameter should be an integer starting from 0, where 0 corresponds to the first row in the Grid.
    GgetRowDataFetches the original data source object directly linked to the given row ID, allowing access to all underlying data fields for that specific row as stored in the source dataset.
    GgetRowIdReturns the unique identifier (row ID) associated with the row at the specified zero-based index. This allows you to access or reference a particular row in the data set by its position within the collection, where the first row has an index of 0.
    GgetRowPropertyRetrieves the value of a specified property from a database row identified by its unique row ID. This function locates the row using the provided row ID and returns the value associated with the given property key within that row. If the property does not exist, it returns null or an appropriate default value.
    GgetStateRetrieves a detailed JSON object that encapsulates the entire current state of the grid. This includes the active sorting and filtering criteria, column visibility and order, which rows are expanded, any grouping configurations, current pagination settings, and the selection state of rows or cells. The resulting state object is suitable for persisting the grid configuration (such as saving to local storage or a database) and can be used to completely restore the grid to the same state at a later time.
    GgetViewRowsReturns an array of row objects. By default, this represents the currently visible rows after any filters have been applied. When used in TreeGrid or Grouping mode, the array instead reflects the hierarchical structure of rows, including parent-child relationships, according to the current expand/collapse state of groups or tree nodes.
    GgetVisibleRowsReturns an array containing the data for all rows currently visible in the grid, after applying any active filters. Only rows that meet the filter criteria and are not hidden by filtering will be included in the array. This allows developers to access the up-to-date, filtered data as presented to the user in the grid interface.
    LloadStateRestored a previously saved grid state by accepting either the name of the saved state or a state object. The state object can include detailed settings such as current sorting and filtering criteria, column visibility and order, expanded or collapsed row status, grouping configurations, paging information (such as current page and page size), and selected rows. This allows the grid to be reconfigured exactly as it was when the state was saved, providing a consistent user experience across sessions.
    PprintGenerates a printed version of the Grid’s data using the configuration specified in the dataExport property. During printing, the Grid automatically hides scrollbars and adjusts its width and height to ensure that all rows and columns are fully visible on the page, regardless of their original size. This ensures that the entire content of the Grid is included in the printout without any truncation or the need for scrolling. To customize aspects such as page layout, formatting, or which data is included in the print output, adjust the parameters within the dataExport property.
    RresetStateRestores the Grid to its original default configuration by removing all user-applied settings, including sorting, filtering, grouping, and selected rows or cells. This action clears any user interactions, ensuring the Grid displays data with no custom modifications.
    SsaveStateCaptures and returns the current state of the Grid as a comprehensive JSON object. The state includes details such as applied sorting and filtering criteria, columns configuration (order, visibility, and sizing), currently expanded rows, grouping settings, paging information (current page, page size), and user selections. Optionally, you can provide a name parameter to uniquely identify and reference the saved state for future retrieval or restoration.
    SsetRowPropertyUpdates or sets a specific property of a table row identified by its unique rowId. This function allows you to dynamically modify row attributes—for example, toggling the frozen state, applying custom styling, or adding arbitrary metadata—enabling flexible and responsive UI changes at the row level.
    TtransposeTransposes the Grid.
    Editing

    Properties

    EeditableEnables in-grid editing. Shorthand: sets editing.enabled to true.
    EeditingProvides 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. Click for more details. Property object's options:
    • allowRowHeaderEdit:boolean - Allows users to edit the content of cells designated as row headers, enabling direct modification of row header values within the table.
    • allowColumnHeaderEdit:boolean - Allows users to edit the text of column headers directly within the interface, enabling customization of header labels according to their preferences or requirements.
    • allowDynamicButtons: - Shows a Calendar or Spin Buttons when you hover an editable Date or Number Cells.
    • autoUpdateFilterAndSort:boolean - Automatically reapplies any previously set column filters and sort orders after an edit is made, ensuring that user-defined table views remain consistent and uninterrupted following data modifications.
    • allowListOpenOnContentClick:boolean - Automatically opens the drop-down editor both when the arrow button is clicked and when any item within the drop-down list is selected. This ensures the editor remains accessible regardless of whether the user interacts with the arrow or directly with a list item.
    • caretPosition:boolean - This feature sets the Input's caret position by the mouse click which activates the Input editor.
    • enabled:boolean - Allows users to modify or update existing content directly within the interface. This feature typically provides editing controls, such as input fields or rich text editors, enabling seamless changes to data or text as needed.
    • batch:boolean - Enables batch editing functionality, allowing users to modify multiple rows within the grid on the client side before saving any changes. All edits can be submitted together in a single server request, improving efficiency and reducing the number of server calls needed for updates.
    • action:string - Specifies the method by which the editing mode is activated, such as through a single click, double click, or keyboard action.
    • readOnlyEdit:boolean - "Read Only Edit is a grid mode where editing a cell does not directly change the underlying data in the grid. Instead, when a cell edit is attempted, the grid triggers the 'onCellEditRequest' callback, allowing your application to handle and process the update request as needed. This mode is useful for implementing custom edit workflows or for integrating with external data sources, as it gives you complete control over how changes are applied."
    • commandKeys:object - Provides detailed definitions for command keyboard shortcuts, specifying the key combinations used to trigger various actions within an application or system.
    • commandBar:object - Defines the configuration options for the grid's command bar, a user interface element that appears as a toolbar or status bar above or below the grid. The command bar provides interactive buttons or tools, such as Save and Revert, allowing users to commit or undo changes made within the grid. These settings control the appearance, available actions, and behavior of the command bar to enhance grid editing workflows.
    • commandColumn:object - Defines the configuration options for the grid’s command column. The command column provides action buttons—such as Edit and Delete—that allow users to interact with individual rows. You can customize the available commands, their display order, button text, icons, and event handlers to control how actions are performed on row data.
    • mode:string - Enables or configures the grid's cell editing functionality by setting its edit mode. This determines how users can interact with and modify the grid’s cell values—such as enabling inline editing, displaying an edit dialog, or disabling editing entirely.
    • addNewRow:object - Defines the configuration options for the 'Add New Row' UI element, which allows users to quickly append new rows to the Grid with a single click. This includes customization of the button’s appearance, position, default values for new rows, and any associated event handlers.
    • addNewColumn:object - Allows users to dynamically add new columns directly from the user interface. When this feature is enabled, a '+' icon appears as the last column in the table. Clicking the '+' icon opens a dialog window where users can enter details for the new column, facilitating easy and intuitive column creation without leaving the current view.
    • dialog:object - Provides a detailed configuration for the dialog’s editing settings, specifying available editing modes, permissions, interface options, and user interaction behaviors within the dialog component.
    • addDialog:object - Provides detailed configuration options for the settings panel displayed in the "Add" dialog, including field definitions, default values, input validation rules, and UI behavior customizations.
    • deleteDialog:object - Describes delete dialog's settings
    OonCellBeginEditA callback function that is triggered when a cell enters edit mode. This function allows you to implement custom logic before editing begins. If the function returns false, the cell edit operation will be canceled and the cell will remain in its previous state. Use this to validate whether editing should be permitted based on your criteria.
    OonCellEditRequestA callback function that is triggered when a cell editing operation finishes in the Grid. This function is typically used together with the 'editing.readOnlyEdit' property set to true, which allows cells to appear read-only but still be editable through custom logic. The primary purpose of this callback is to handle post-editing actions, such as validating the input, processing changes, or updating the cell value in the Grid after the editing session ends. Use this function to programmatically update the data source or UI based on the user’s edits.
    OonCellUpdateCallback function that is triggered whenever a cell's value is about to be updated. You can use this function, for example, to perform an Ajax call to your server in order to validate or process the proposed cell changes before they are applied. If the server response indicates that the changes are valid, call the confirm function provided in the callback to finalize and apply the update. This allows for asynchronous validation and external control over cell modification in your data grid.
    OonCellValueChangedInvoked whenever a cell's value is updated, this callback function receives relevant information about the change—such as the new value, the previous value, and cell metadata—allowing you to handle updates, trigger side effects, or implement custom logic in response to user edits.
    OonCommandCallback function that is triggered when a command is executed. - The name parameter specifies the name of the command. - The command parameter refers to the function that implements the command’s logic. - The details parameter contains the arguments for the command, as provided by the Grid. - The handled parameter is a flag you can set to true within the callback to prevent the Grid from executing the command’s default behavior, allowing you to fully override or customize the command’s handling.
    OonRowInsertedCallback function that is executed immediately after a new row has been successfully inserted. It receives relevant information about the newly inserted row as arguments, allowing you to perform custom actions or post-processing in response to the insertion event.
    OonRowRemovedA callback function that is executed immediately after a row has been successfully removed from the data set or table. This function receives relevant information about the removed row, allowing you to perform custom actions such as updating the UI, triggering notifications, or handling related cleanup tasks.
    OonRowUpdateCallback function triggered when a row's cell values are updated. Use this function to perform custom actions—such as making an AJAX request to the server to validate the edited data. After receiving validation results, if the changes are approved, call the confirm function to finalize the update.
    OonRowUpdatedCallback function that is invoked immediately after a row has been updated. Receives the updated row data and additional context as parameters, enabling custom logic or side effects in response to row changes.
    UuploadSettingsConfigures 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. Click for more details. Property object's options:
    • url:string - Specifies the URL endpoint used for uploading files or images. This URL is where the files or images will be submitted during the upload process.
    • removeUrl:string - Specifies the URL endpoint to handle file or image removal requests. This URL will be used when a file or image needs to be deleted from the server.
    • name:string - Sets or retrieves the name of the file input field used for uploads. This field name is crucial for accessing uploaded image data on the backend. For example, in an Express.js application handling file uploads (e.g., using multer or a similar middleware), you would use this field name to reference the uploaded files from the request object. If the upload field name is set to "userfile[]", you can access the array of uploaded images in your route handler like so:

      '''javascript
      const images = req.files['userfile[]'];
      '''

      Make sure the field name specified here matches the name attribute of your file input element in the frontend form, enabling seamless retrieval of uploaded files on the server side.
    • data:string - Supplementary information to be sent to the server. This data must be provided as a JSON-formatted string (i.e., a serialized JSON object or array). Ensure all values are properly encoded and the string adheres to valid JSON syntax before submission.
    • onUploadCompleted:any -
      "This function is triggered after the upload process completes. When invoked by the Grid, it receives a JSON object as a parameter. The JSON object contains the following properties:

      - 'files': An array listing the uploaded file(s).
      - 'status': A string indicating the result of the upload (e.g., 'success', 'error').
      - 'fileURL': The URL(s) where the uploaded file(s) can be accessed.
      - 'serverResponse': The response data returned by the server upon upload completion.

      Use this function to handle post-upload actions such as updating the UI, processing the server response, or handling errors."
    • onUploadError:any - This function is triggered when a file upload fails. It receives a JSON object as a parameter, which contains the following properties:

      - 'files': An array of file objects that failed to upload.
      - 'status': The HTTP status code or error status associated with the failure.
      - 'serverResponse': The full response returned by the server, which may include error messages or additional details about the upload failure.

      This function is automatically invoked by the Grid component whenever an upload error occurs, allowing you to handle the failure appropriately in your code.

    Events

    BbeginEditThis 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.
    EendEditTriggered 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.

    Methods

    AaddNewColumnDynamically 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.
    AaddNewRowInserts 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.
    AaddRowInserts 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.
    AaddUnboundRowAdds 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.
    BbeginEditInitiates edit mode on a specified row, cell, or column within the grid programmatically. Triggers the appropriate editor component to appear in the Grid UI, allowing users to modify the data directly within the selected grid area.
    CcancelEditCancels the ongoing edit operation by closing any active editor interface and reverting all unsaved changes made during the current session. This action ensures that no modifications are saved and the data returns to its original state prior to editing.
    DdeleteRowRemoves a specific row from the Grid component. If batch editing is enabled, the row will be marked for deletion but the change will not be permanently applied until the batch is saved. This means the deletion is pending and can be reverted before saving.
    EendEditCompletes the editing process by applying all pending changes, saving the updated content, and closing any open editor instances. This action ensures that all modifications are confirmed and no unsaved edits remain.
    GgetAtRetrieves the value stored in a specific cell of a data grid or table by specifying the row index and the corresponding column data field. This function allows precise access to individual cell data, enabling targeted data retrieval based on both row and column identifiers.
    GgetBatchEditChangesRetrieves a comprehensive summary of all changes performed during a batch edit operation. Returns an object with separate arrays for added, updated, and deleted rows. Each array contains detailed objects that include the row ID and pertinent data fields, such as the previous and new values for updates, full data for additions, and identifying information for deletions. This structure allows you to easily track and process all modifications made in the batch.
    GgetCellValueRetrieves the value stored in a specific cell of a data grid or table by specifying the unique row ID and the corresponding column data field. This function allows precise access to individual cell data, enabling targeted data retrieval based on both row and column identifiers.
    GgetEditCellsReturns an array containing information about all cells that are currently in edit mode within the grid. Each entry in the array typically includes details such as the row and column identifiers for each editable cell, allowing developers to precisely identify and interact with cells that are being edited.
    IinsertRowAdds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.
    IinsertRowAfterAdds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.
    IinsertRowBeforeAdds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.
    RrevertBatchEditReverts the Grid to its previous state by discarding all unsaved batch editing changes made by the user. Any modifications entered during the current batch editing session will be canceled, restoring the Grid’s data to its last committed state.
    SsaveBatchEditSaves and applies all batch editing changes made by the end-user, persisting the updates permanently to the Grid's underlying data source. This operation commits all modifications (such as additions, deletions, and edits) performed during the batch editing session, ensuring that the Grid data source accurately reflects the latest user input.
    SsetAtAssigns a new value to a specific cell within a data table, targeting the cell by its row index and the corresponding column's data field name. This allows precise updating of individual cell contents based on row and column identifiers.
    SsetCellValueAssigns a new value to a specific cell within a data table, targeting the cell by its unique row ID and the corresponding column's data field name. This allows precise updating of individual cell contents based on row and column identifiers.
    UupdateRowUpdates the data of a specific row identified by its unique row ID. When batch editing mode is enabled, the changes to the row are temporarily staged and will not be permanently saved to the data source until the user explicitly commits or saves the batch of edits. This ensures that multiple changes can be reviewed and either all applied or discarded together, rather than being immediately written to the underlying data.
    Filtering

    Properties

    FfilterableEnables column filtering. Shorthand: sets filtering.enabled to true.
    FfilteringProvides 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. Click for more details. Property object's options:
    • enabled:boolean - Allows users to filter data based on specific criteria, enabling the display of only relevant information according to selected filters.
    • operator:string - Specifies the logical operator ('and' or 'or') used to combine multiple column filters in the Grid. By default, filters are combined using the 'and' operator, meaning that a row must satisfy all filter conditions (e.g., columnA 'and' columnB) to be included in the results. Alternatively, you can set the operator to 'or' to return rows that match 'any' of the filter conditions (e.g., columnA 'or' columnB).

      'Example:'
      '''js
      grid.filtering.operator = 'or';
      grid.addFilter('lastName', 'contains "davolio"');
      grid.addFilter('firstName', 'contains "Antoni"');
      '''
      This configuration applies two filters to the Grid and will display all rows where 'either' 'firstName' contains "Antoni" 'or' 'lastName' contains "Davolio".

      Use this property to control how multiple filters are combined when filtering data in the Grid.
    • filter:any - An array specifying the filtering conditions to be applied to the DataGrid. Each element in the 'filter' array represents a single filter and is itself an array with two elements:

      1. 'Column dataField:' The name of the column to which the filter will be applied.
      2. 'Filter condition(s):' A string or expression that defines the criteria to filter the column’s data. This can include a condition or multiple conditions combined using logical operators such as 'or' and 'and'.

      'Example 1:'
      To search for rows where the "firstName" column contains 'Andrew' or 'Nancy', and the "quantity" column is either less than or equal to 3 or greater than or equal to 8:
      '''js
      [
      ['firstName', 'contains Andrew or contains Nancy'],
      ['quantity', '<= 3 and >= 8']
      ]
      '''

      'Example 2:'
      For columns configured with 'filterMenuMode: "excel"', you can express multiple "equals" conditions:
      '''js
      [
      ['firstName', 'EQUAL Andrew or EQUAL Antoni or EQUAL Beate']
      ]
      '''

      'Example 3:'
      To filter a string column for values containing either 'burke' or 'peterson':
      '''js
      [
      ['lastName', 'CONTAINS burke or CONTAINS peterson']
      ]
      '''

      'Supported filter operators:'
      You may use a variety of filter operators and keywords within filter expressions. Common operators include:
      - Equality: '=', 'EQUAL'
      - Inequality: '!=', '<>', 'NOT_EQUAL'
      - Comparison: '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL'
      - String matching: 'CONTAINS', 'DOES_NOT_CONTAIN', 'STARTS_WITH', 'ENDS_WITH'
      - Special: 'EMPTY', 'NULL', 'NOT_NULL'

      Multiple conditions can be combined in a single expression with logical operators ('and', 'or').
      This flexible structure enables complex filtering based on your DataGrid’s current columns and data types.
    • filterRow:object - Provides detailed configuration options for the filter row, including its appearance, behavior, available filter types, and display settings. This allows developers to customize how the filter row is shown and how users interact with filtering features in the component.
    • filterMenu:object - Provides detailed configuration options for the filter menu, including available filter types, display preferences, default selections, and customizable behaviors to control how users interact with and apply filters within the menu interface.
    • filterBuilder:object - (In Development) Provides a comprehensive configuration schema for the filter builder component, detailing available settings and customization options to control its behavior, appearance, and functional parameters during implementation.

    Events

    FfilterThis 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.

    Methods

    AaddFilterApplies a filter to one column. Pass a string or an array of expressions; combine conditions with "and" / "or". Example: `grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. Supports numeric and string operators (EQUALS, GREATER_THAN, STARTS_WITH, etc.). Set refreshFilters to false when adding several filters in one batch to avoid extra redraws (see addFilter third argument).
    CclearFilterRemoves all active filters from the Grid, restoring the original unfiltered data view. After clearing the filters, the Grid data is automatically refreshed to display all records, and any filter input fields are reset to their default, empty state.
    FfilterByApplies a global filter that searches for the provided query across all columns in the grid, returning rows that contain a match in any column. Optionally, you can limit the filtering to specific data types—such as 'string', 'boolean', 'date', or 'number'—so that only columns of the selected type(s) are considered when matching the query. This allows for more precise and targeted filtering behavior.
    FfindSearches the grid for rows that match the specified query criteria and returns an array containing the IDs of all matching rows. Supports multiple search modes, including:- Searching for values in any column (global search)- Searching specific columns by name- Applying comparison operators (e.g., equals, contains, less than, greater than) for advanced filteringThis functionality allows for flexible and precise row selection based on user-defined search parameters.
    FfindCellsScans the grid to identify all cells that match the specified query. Returns an array of arrays, where each inner array represents a matching cell and contains the following information: the row ID, the data field (column name), and the cell's value. The query supports searching for multiple values by separating them with commas; each value will be matched independently against the cells.
    GgetFilteredColumnsReturns an array of objects representing the columns that currently have active filters applied. Each object contains details about the filter and is associated with its corresponding column by the column's data field as the key. This allows you to identify which columns are being filtered and access the filter configurations for each.
    RremoveFilterRemoves the filter currently applied to the specified column. Optionally, you can delay the filter refresh process, allowing you to remove filters from multiple columns before triggering an update. This helps optimize performance when batch-processing multiple filter removals.
    Grouping

    Properties

    GgroupableEnables data grouping. Shorthand: sets grouping.enabled to true.
    GgroupHeaderProvides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings.
    GgroupingProvides 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. Click for more details. Property object's options:
    • enabled:boolean - Allows items or data to be organized into groups based on specified criteria, making it easier to manage, categorize, or display related elements together within the application.
    • allowCollapse:boolean - Allows users to expand or collapse grouped sections, enabling them to hide or reveal grouped content within the interface as needed.
    • autoExpandAll:boolean - Automatically expands all grouped sections within the interface, making all nested content visible to the user without requiring manual interaction.
    • autoExpandToLevel:number - Automatically expands all collapsible groups within the interface up to the specified hierarchical level, ensuring that all nested groups at or above this level are visible by default.
    • autoHideGroupColumn:boolean - Automatically hides all columns that are part of a group, streamlining the display by collapsing grouped columns from view. This feature improves user interface clarity by reducing on-screen clutter and allowing users to focus on ungrouped or expanded columns.
    • expandMode:string - Specifies how groups are expanded or collapsed within the component. Determines whether groups are expanded by default, collapsed, or if a custom behavior is applied.
    • formatFunction:{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, value?: any, template?: any, data?: any}): void} - Defines or retrieves the function responsible for formatting the data displayed in the column. This function determines how raw cell values are converted to their final, user-visible representation (e.g., formatting dates, numbers, or custom display logic).
    • groupRowHeight:string | number - Specifies the height, in pixels, for rows that represent grouping headers within a data grid or table. This determines how much vertical space each group row occupies, ensuring consistent formatting and appearance for grouped data sections.
    • groupBy:string[] - Specifies the data fields used for grouping, or retrieves the current fields that are set for grouping data.
    • groupIndent:number - Specifies the indentation level for the group, determining the amount of space applied to visually offset the group’s content from the left margin.
    • groupBar:object - Provides detailed configuration options for the group bar component, including settings for appearance, behavior, and functionality.
    • onGroupDefaultExpanded:any - On first render, return true to expand a group, false to leave it collapsed.
      Example: (dataItem) => dataItem.label === "Peppermint Mocha Twist". Receives each group’s dataItem before headers are built.
    • renderMode:string - Specifies how group headers are displayed within the component. The available options are:

      - 'basic': Renders group headers without applying any indentation, custom group row heights, or column labels. This provides a simple, minimal display.
      - 'compact': Similar to 'basic', but additionally includes the column labels in the group headers for improved clarity.
      - 'advanced' (default): Indents by nesting level, shows column labels, optional custom group row height.
      - 'multipleColumns': One group header cell per column for multi-field grouping.

      Pick a mode to match how dense the grouped layout should be.
    • toggleButtonIndent:number - Specifies the amount of indentation applied to the group toggle button, controlling its horizontal offset or padding relative to its container or content. This affects the visual alignment and spacing of the toggle button within the group interface.
    • summaryRow:object - Provides configuration options for the group summary row, allowing you to customize its appearance, content, and behavior within grouped data displays.

    Events

    GgroupTriggered 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.

    Methods

    AaddGroupOrganizes 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.
    CclearGroupsRestores the grid to its original, ungrouped state by removing all active row groupings. All grouped rows are expanded and displayed as individual rows, and the Grid view automatically refreshes to reflect these changes.
    CcollapseAllRowsCollapses all currently expanded rows within the TreeGrid or Grouping components, reducing the dataset display to only show parent rows or top-level groups. This action hides all child rows and nested data, providing a simplified, minimized overview of the dataset structure.
    CcollapseRowCollapses a designated TreeGrid or grouping row, effectively hiding all of its nested child rows from view. This action allows users to condense hierarchical data structures, making it easier to navigate and focus on higher-level information within the grid.
    EexpandAllRowsExpands all rows within the grid that utilize TreeGrid or grouping functionality, automatically revealing every nested child row at all levels of hierarchy and making the complete data structure fully visible. This ensures that all parent and descendant rows are displayed, allowing users to view the entire nested dataset without manual expansion.
    EexpandRowExpands a specific row in a TreeGrid or grouped table to reveal its associated child rows. You can expand nested groups or hierarchical levels by specifying the row key using dot notation (e.g., "0.2.1" for the child of a nested group). This allows for precise targeting and interactive exploration of hierarchical data structures within the grid.
    EexpandRowsToGroupLevelExpands all grouped rows in the grid up to the specified group level. For instance, executing `grid.expandRowsToGroupLevel(1);` will expand all groups at the root (level 1), making their immediate child rows visible. Groups nested within these child rows remain collapsed unless the group level parameter is increased. This function is useful for programmatically controlling the grid's row expansion state based on grouping hierarchy.
    GgetGroupsFetches an array of group objects that define the current grouping configuration of the grid. Each group object contains information about the field being grouped by, the group criteria, and any sub-grouping details, providing a comprehensive representation of how the grid's data is organized into groups.
    RremoveGroupRemoves grouping from the Grid for the specified data field. This method is only applicable when grouping functionality is enabled in the Grid. When called, it will ungroup the records currently grouped by the given field, and the Grid will update to display the data without that grouping criterion.
    Paging

    Properties

    PpageableEnables paging. Shorthand: sets pager.visible and paging.enabled to true.
    PpagerProvides 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. Click for more details. Property object's options:
    • autoEllipsis:string - Specifies how ellipsis ("...") should be displayed when text overflows its container. This option determines the placement or behavior of the ellipsis, such as at the start, middle, or end of the truncated text.
    • position:string - Specifies the location where the pager (pagination controls) will be displayed within the user interface, such as at the top, bottom, or both positions of the component.
    • template:string | HTMLTemplateElement - Defines the structure and layout template used to render the pager component, specifying how its elements (such as navigation buttons, page numbers, and labels) are displayed in the user interface.
    • pageSizeSelector:object - Specifies the configuration options for determining the number of data rows displayed per page in a paginated view. This setting allows users to control how many items are visible at once, enhancing readability and navigation within data tables or lists.
    • summary:object - Provides a detailed configuration for summary settings, specifying options such as display format, data aggregation methods, visibility controls, and customization preferences for how summaries are generated and presented within the application.
    • navigationButtons:object - Provides configuration options for the navigation buttons, including their appearance, labels, order, and behavior within the user interface.
    • navigationInput:object - Provides detailed configuration options for navigation input methods, specifying how users can interact with and navigate through the interface. This includes settings such as input devices supported (keyboard, mouse, touch, etc.), navigation modes, and any customization options for user interaction.
    • pageIndexSelectors:object - Provides configuration options for the appearance and behavior of the numeric pagination buttons, including properties such as the number of buttons displayed, styling, and event handlers for user interaction.
    • visible:boolean - Controls whether the pager component is visible to users. Set to true to display the pager, or false to hide it.
    PpagingProvides 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. Click for more details. Property object's options:
    • enabled:boolean - Turns paging on; page size, index, and controls come from the pager and related paging options.
    • spinner:object - Provides detailed configuration options for controlling the appearance and behavior of spinner-based pagination elements, including parameters for speed, size, color, and navigation functionality.
    • pageSize:number - Specifies the maximum number of rows to display on each page of data, enabling pagination and controlling how much content is visible at one time.
    • pageHierarchySize:number - Specifies the maximum number of top-level (root) hierarchical groups to display per page when grouping is enabled. For example, setting this value to 2 will show 2 root groups on each page, with pagination controls provided if there are more groups than the specified limit. This setting applies only when hierarchical grouping is active in the data grid.
    • pageIndex:number - Specifies the initial page or URL that users will see when they first access the application.

    Events

    PpageTriggered 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.

    Methods

    FfirstPageNavigates to the first page of the data grid when paging functionality is enabled. This action resets the current page index to the first page, displaying the initial set of records in the grid.
    GgoToPageProgrammatically navigates the grid to a specified page index, provided that paging is enabled. Use this method to set the current page of the grid, allowing you to jump to a particular page in response to user actions or custom logic. The page index is zero-based, where 0 refers to the first page."
    LlastPageNavigates directly to the final page of the data grid when paging functionality is enabled, allowing users to quickly access the last set of records displayed in the grid.
    NnextPageAdvances to the next page of data in the grid when paging functionality is enabled. If the grid is currently displaying the last available page, this action will have no effect and the page will remain unchanged.
    PprevPageTriggers navigation to the previous page in the grid when paging functionality is enabled. If the grid is currently displaying the first page, the operation is ignored and the page remains unchanged. This ensures that navigation does not attempt to move before the first available page.
    Selection

    Properties

    CcheckBoxesConfigures the checkbox options for the TreeGrid component, allowing you to enable or customize checkbox display, selection behavior, and interaction within the hierarchical grid structure.
    SselectableEnables selection. Shorthand: sets selection.enabled to true. Cell vs row selection is controlled by selection.mode and related options.
    SselectionProvides 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. Click for more details. Property object's options:
    • enabled:boolean - When true, the grid allows user selection of rows and/or cells according to selection.mode, allowRowHeaderSelection, and related properties.
    • allowRowHeaderSelection:boolean - Determines whether users can select rows by clicking on the row header. When enabled, clicking a row header will select the entire row. This property can be used to either allow or prevent selection through row headers.
    • allowColumnHeaderSelection:boolean - Determines whether users can select a column by clicking on its header. When enabled, clicking a column header will select the entire column. This property can be set to allow or prevent selection via column header clicks, and its current state can be retrieved programmatically.
    • allowRowSelection:boolean - Determines whether selecting a row by clicking on it is enabled. When set to true, users can select rows with a mouse click; when false, clicking a row will not change its selection state. Use this property to control row selection behavior in the interface.
    • allowCellSelection:boolean - Determines whether users are permitted to select a cell by clicking on it. When enabled, clicking on a cell will select it; when disabled, clicking will have no effect on the cell’s selection state. This property can be set to enable or disable cell selection via mouse interaction.
    • allowDragSelection:boolean - Controls whether users can select multiple cells by dragging the mouse across them, similar to how selection works in Excel. When enabled, users can click and drag to highlight a range of cells; when disabled, selection by dragging is not permitted. This property can be set or retrieved programmatically.
    • allowDragSelectionAutoScroll:boolean - Determines whether the Grid view will automatically scroll when a user selects items by dragging the mouse beyond the current visible area. This property can be set to enable or disable auto-scrolling during drag selection, or retrieved to check the current behavior.
    • allowCellDragSelectionHandle:boolean - Controls the visibility of the selection "Drag Handle" (the small square located at the bottom-right corner of a selected cell range, similar to Excel). When enabled, this handle allows users to extend or resize their current selection horizontally or vertically by dragging the handle. This property can be set to show or hide the drag handle, as well as queried to determine its current state.
    • allowCellDragDropSelectionHandle:boolean - Controls whether cells in the selection can be dragged and dropped. When enabled, dragging is initiated by moving the cursor to the bottom edge of the selected cells, causing the cursor to change to a "drag" icon. Clicking and holding the mouse button while moving the selection will initiate the drag operation. By default, dropping the selection copies the values of the dragged cells to the new location. This property can be used to enable or disable drag-and-drop functionality for cell selections.
    • allowCellDragSelectionAutoFill:boolean - Controls whether cell selection is automatically populated with values when dragging and releasing the 'Drag Handle'. When enabled, dragging the handle will auto-fill the selected cells with the corresponding values. This property can be set to enable or disable the auto-fill behavior, and can also be used to check the current auto-fill status.
    • defaultSelection:boolean - Determines whether the default browser behavior for text selection is enabled or disabled. When enabled, users can highlight and select text within the element using their mouse or keyboard. When disabled, text selection is prevented, and users cannot highlight the element’s text. This can be useful for UI components where text selection should be restricted, such as buttons or draggable elements.
    • mode:string - Gets or sets the selection mode, determining how users can select items in the control. The available values are:

      - ''one'': Only a single cell or row can be selected at any given time.
      - ''many'': Multiple cells or rows can be selected, typically by individually clicking on them.
      - ''extended'': Multiple cells or rows can be selected using a combination of mouse clicks and keyboard modifiers (such as Shift or Ctrl), allowing for range or non-contiguous selections.

      Use this property to control whether users can select only one item, several items, or use advanced selection behaviors.
    • action:string - Controls how selection is triggered: accepts 'click' or 'doubleClick' to specify if selection occurs on a single or double mouse click, respectively. When set to 'none', user interaction does not trigger selection—selection can only be managed programmatically via the API.
    • checkBoxes:object
    • selected:string

    Events

    BbatchChangeTriggered 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.
    CchangeFires 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.
    CcolumnChangeTriggered 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.

    Methods

    AareAllRowsSelectedReturns 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.
    CcheckAllRowsSelects and checks all checkboxes associated with rows in a TreeGrid or grouped data structure, ensuring that every row, including nested and grouped items, is marked as selected. This process guarantees comprehensive selection across all hierarchical levels and groupings within the dataset.
    CcheckRowSelects and checks the checkbox for a specified TreeGrid row, visually indicating that the row is active or selected. This action updates the row's state to reflect user selection and may trigger related event handlers or selection-dependent functionality within the TreeGrid.
    CclearSelectionClears all current selections within the grid, including rows, cells, and columns. This action removes any visual highlights or selection indicators, ensuring that no items remain selected in the interface.
    EensureVisibleScrolls the Grid to ensure that a specific row or cell is visible to the user. If the target row or cell is located on a different page, the Grid will automatically navigate to the appropriate page and then scroll to the desired position. This ensures that the requested row or cell is brought into view, regardless of its current visibility or page location.
    GgetSelectedCellsReturns an array of selected cells, where each cell is represented as an array structured as [row ID, column field, cell value]. - **Row ID**: The unique identifier for the row containing the cell. - **Column field**: The data field name (or key) corresponding to the column of the cell. - **Cell value**: The actual value contained within the cell. This structure allows you to easily identify and access the position and value of each selected cell within the data set.
    GgetSelectedRowIdsReturns an array containing the unique identifiers (IDs) of all rows currently selected by the user within the grid component. Each element in the array corresponds to the ID of a selected row, allowing you to easily reference or manipulate the selected grid items programmatically.
    GgetSelectedRowIndexesReturns an array containing the indices of the rows that are currently selected in the grid. Each element in the array represents the zero-based position of a selected row, allowing you to identify which rows the user has chosen. If no rows are selected, the array will be empty.
    GgetSelectedRowsReturns an array in which each element is a two-element array: the first element is the unique row ID, and the second element is the data object associated with that row. When operating in virtual mode, the data object may be empty if the row’s data has not yet been loaded, as data is retrieved on demand.
    GgetSelectedRowsDataReturns an array containing the data objects corresponding to each row currently selected in the grid. Each object in the array represents the underlying data for one selected row, allowing you to access and manipulate the specific records the user has chosen.
    GgetSelectionReturns an object representing the current selection state of the grid. This includes arrays listing the IDs of selected rows, the identifiers of selected columns, and the coordinates (row ID and data field) of selected cells. Additionally, it specifies the cell that is currently focused by providing its row ID and data field.
    HhasSelectedRowsChecks whether any rows in the grid are currently selected by the user. This property or method returns a boolean value: `true` if at least one row is selected, and `false` if no rows are selected. It is typically used to enable or disable actions that depend on row selection, such as editing or deleting entries.
    SselectSpecifies the selection of a particular row, column, or cell within a data table. If a data field (representing a column) is provided along with a row identifier, the selection targets a specific cell at the intersection of the given row and column. If only a row identifier is supplied without a data field, the entire row is selected. Similarly, providing only a data field without a row identifier selects the entire column.
    SselectAllRowsSelects every row that is currently visible in the Grid, including only those rows that meet the active filters, sorting, and pagination settings. Hidden or filtered-out rows are not selected.
    SselectCellsAllows you to select multiple cells within a grid by specifying arrays of row indices (cell ids) and corresponding column data fields. For example: `grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']);` This will select the cells located at the intersection of:- Row 0 and the 'firstName' column,- Row 1 and the 'quantity' column,- Row 2 and the 'date' column.Each element in the id array matches with the element in the dataFields array by position, ensuring precise cell selection across different rows and columns. This method is useful for batch selection or applying simultaneous actions to multiple, non-contiguous cells.
    SselectCellsByQuerySelects grid cells based on a query string. - Example 1: `grid.selectCellsByQuery('nancy');` selects all cells in the grid whose value is exactly 'nancy'.- Example 2: `grid.selectCellsByQuery('nancy, davolio');` selects all cells within rows where both 'nancy' and 'davolio' values appear in any columns of the same row.The query can be a single value or a comma-separated list of values. When multiple values are specified, only rows containing all the specified values (regardless of column order) will have their cells selected.
    SselectRangeSelects a rectangular range of cells within the grid, defined by specifying both the starting and ending row IDs as well as the data field keys (columns). The selection includes all cells that fall within the rectangle formed by these start and end points. The behavior and outcome of this selection may vary based on the current selection mode of the Grid component (for example, whether it supports cell, row, or column selection)."
    SselectRowsProgrammatically selects rows by their row IDs. Honors current selection mode and other selection settings.
    SselectRowsByIndexSelects rows by zero-based index in the current (sorted/filtered/paged) view, not necessarily by data order alone.
    SselectRowsByQuerySelects rows from a dataset based on a specified query expression. This allows you to filter rows by applying conditions to the values in one or more columns. Supported conditions include equality (equals), partial matches (contains), comparison operators (greater than, less than), prefix matching (starts with), and more. The query expression enables flexible filtering, so only rows that meet the defined criteria are returned.
    SselectRowsRangeSelects all consecutive rows, inclusive, between the specified start and end row IDs. Both the start and end IDs are included in the selection, and only rows with IDs that fall within this continuous range will be selected.
    TtoggleRowToggles the expanded or collapsed state of a TreeGrid row specified by the provided row ID. If the target row is currently collapsed, this action will expand it to reveal its child rows. Conversely, if the row is expanded, it will collapse and hide any child rows. Use this function to dynamically show or hide hierarchical data within the TreeGrid based on user interaction or programmatic control.
    UuncheckAllRowsResets the checked state of all rows in a TreeGrid or GroupingGrid by setting every checkbox to unchecked (`false`). This action ensures that no rows remain selected or checked, effectively deselecting all items in the grid.
    UuncheckRowUnchecks a specific row in the TreeGrid by setting its associated checkbox to an unchecked (false) state. This visually updates the checkbox in the UI and updates the row’s checked status in the underlying data model.
    UunselectDeselects a previously selected row, cell, or column within the data grid, removing any associated highlight or selection state.
    Sorting

    Properties

    SsortableEnables column sorting. Shorthand: sets sorting.enabled to true.
    SsortingProvides 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. Click for more details. Property object's options:
    • enabled:boolean - Enables sorting functionality, allowing users to organize data in ascending or descending order based on specified fields or columns.
    • sort:string[] - Configures which columns will be used for sorting the data and determines their sort order (e.g., ascending or descending) during the sorting operation.
    • maintainSort:boolean - Ensures that the sorting order is preserved when the user edits data within the currently sorted column. If you want the sorting to be applied only once—so that edited data does not automatically re-sort the column—you can disable this feature by setting the property to false. This allows the column's order to remain unchanged after data edits, rather than reapplying the sort.
    • mode:string - Specifies the maximum number of columns by which users can sort the data. When this property is set to 'many', users are allowed to apply sorting to multiple columns simultaneously, enabling multi-level sorting functionality.
    • commandKey:string - Specifies which keyboard key activates multi-column sorting. This property determines the key that users must hold down to enable sorting by multiple columns simultaneously. For example, if commandKey is set to 'Control', users can select and sort multiple columns by holding the 'Control' key while clicking on column headers. Adjust this property to match the desired key for multi-column sorting functionality (e.g., 'Alt', 'Shift', or 'Meta').
    • sortToggleThreeStates:boolean - Allows users to toggle between three sorting options: ascending order, descending order, and no sorting applied. This functionality enables dynamic changes to the sorting state of a data set or list, providing greater flexibility and control over how information is presented.
    • sortToggleOnClick:boolean - Allows users to change the sorting state (e.g., ascending, descending, or none) of a column by clicking its header. This feature is enabled by default, enabling interactive sorting functionality within the table.
    • sortToggleOnClickAndCommandKey:boolean - Allows users to toggle through different column sort states (such as ascending, descending, and unsorted) by clicking on a column header. Holding down the Command key while clicking enables multi-column sorting, letting users modify the sort order of multiple columns at once.

    Events

    SsortTriggered 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.

    Methods

    AaddSortAdds a sort for the given column and direction (e.g. 'asc', 'desc'). Requires sorting to be enabled; has no effect if sorting is off.
    CclearSortRemoves all active sorting from the Grid columns, resetting them to their unsorted state and restoring the data to its original order as initially loaded or received.
    GgetSortedColumnsReturns an object that details the columns currently sorted within a data table. Each key in the object corresponds to a column’s data field name. The value for each key is an object containing:- `sortOrder`: Specifies the sorting direction for the column, either `'asc'` for ascending or `'desc'` for descending.- `sortIndex`: Indicates the column’s priority in multi-column sorting, with lower numbers representing higher priority.This structure allows you to easily determine which columns are sorted, their order of precedence, and the sorting direction applied to each.
    RremoveSortRemoves any active sorting from the specified column. Use this method to clear the sort order applied to a particular data field, returning the column to its default, unsorted state. This is useful when you want to reset or update the sorting configuration for individual columns within a data table.
    SsortByApplies sorting to the Grid based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of Grid sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.
    Other

    Properties

    AaiAn 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. Click for more details. Property object's options:
    • model:string - Specifies the AI model utilized to power text generation and other AI-driven functionalities within the application. This setting determines which underlying AI engine is responsible for producing generated content and handling intelligent features.
    • maxTokens:number - Specifies the maximum number of tokens (which may include words, punctuation, or characters, depending on the model's tokenization method) that the AI is allowed to generate in response to a single request. This limit helps control the length of the output and resource usage.
    • temperature:number - Determines the degree of randomness in the AI-generated output. Lower values yield more deterministic and focused responses, making the AI’s answers predictable and precise. Higher values increase creativity and variability, resulting in more diverse and imaginative responses.
    • url:string - Specifies the endpoint URL used to send AI-related requests. This is usually the URL of your backend service or proxy, which securely forwards requests to OpenAI or another AI service provider. Ensure this URL points to your server that handles authentication, rate limiting, and any additional processing before communicating with the external AI API.
    • key:string - The unique API key required to authenticate and authorize requests made to the AI service provider, ensuring secure access and usage tracking for each client application.
    • prompts:[] - Sets or gets the AI Assistant's prompts.
    • promptVariables:[] - Sets or gets the AI Assistant's prompts variables which will be replaced in the AI prompts. Ex: promptVariables: [{ name: 'review', dataField: 'review' }, { name: 'rating', dataField: 'rating' } ]
    CchartingConfigures 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. Click for more details. Property object's options:
    • enabled:boolean - Specifies whether charting functionality is enabled. When set to true, charting features are available to users; when false, all chart-related features are disabled. This property can be used to retrieve the current status or to enable/disable charting dynamically.
    • colorScheme:string - Sets or retrieves the color palette used for chart elements. This property accepts values that correspond to the 'colorScheme' options available in our Chart component, allowing you to customize or match the chart's appearance to your application's theme.
    • appendTo:string | HTMLElement - Specifies the HTML element that serves as the container for the chart. When set, the chart will be rendered inside the given element. When retrieved, returns the current container element associated with the chart.
    • dialog:object -
      "Retrieves or configures the charting dialog component. Use this property to access the current charting dialog instance or to assign a new dialog interface for displaying and customizing chart settings within the application."
    CcommentsSets cell comments. Example: [{ id: 4, dataField: 'A', comment: 'Hello Smart.Grid' }]
    CconditionalFormattingDefines 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. Click for more details. Property object's options:
    • column:string - The data field of a numeric column to format. Set 'all' to format all numeric columns.
    • condition:string - The formatting condition.
    • firstValue:number - The value to compare by. When condition is 'between', this is the start (from) value.
    • fontFamily:string - The fontFamily to apply to formatted cells.
    • fontSize:string - The fontSize to apply to formatted cells.
    • highlight:string - The background color to apply to formatted cells.
    • secondValue:number - When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
    • text:string - The text color to apply to formatted cells.
    CcontextMenuThe 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. Click for more details. Property object's options:
    • enabled:boolean - Controls the visibility of the context menu within the component. When set to true, the context menu appears upon right-clicking a row, allowing users to access additional actions. If set to false, the context menu is disabled and will not appear when users right-click on a row. This property can be used to enable or restrict context menu interactions as needed.
    • customContextMenuItems:[] - Defines an array of custom context menu items that will appear when the user opens the context menu. Each item in the array specifies the label, action, and additional options for the menu entry, enabling developers to tailor the context menu to their application's specific requirements.
    • dataSource:object - Associates a list of data sources with the context menu, enabling dynamic population of menu items based on the specified data. This allows the context menu to display relevant options according to the provided data sources.
    • selector:string - Specifies the ID or CSS class selector of a Smart.Menu component that will be used as the context menu for the Grid. This allows you to assign a custom menu that appears when users right-click on the Grid. The value should correspond to the Smart.Menu element’s unique ID (preceded by “#”) or a CSS class (preceded by “.”).
    • width:number - Specifies the width of the context menu in pixels. Adjusting this value determines how wide the context menu appears when displayed to users. This property helps ensure the menu fits its content appropriately and aligns with your application's design requirements.
    • height:number | null - Specifies the vertical size of the context menu in pixels, determining how much space it occupies on the screen. Adjusting this value controls the overall height of the menu, which can affect the visibility and accessibility of its menu items.
    CcurrentUserSets 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.
    DdropDownModeEnables or disables the dropdown mode for the component. When true, the component displays as a dropdown instead of a standard input or list.
    DdropDownModeInputDetermines whether the dropdown mode allows text input. When true, users can type in the dropdown field; otherwise, selection is restricted to the provided list items.
    FfooterProvides configuration options for customizing the appearance and behavior of the grid's footer, including visibility, content, styling, and layout settings.
    FformulasEnables 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.
    HheaderProvides detailed configuration options for the grid's header, including display settings, styling, visibility, and customization of header rows and columns. Click for more details. Property object's options:
    • visible:boolean - Controls whether the header is displayed or hidden in the user interface. Adjusting this setting allows you to show or hide the header as needed.
    • template:string | HTMLTemplateElement | {(element: HTMLElement): void} - Defines a customizable template for rendering the header section, allowing you to specify the structure, content, and styling of the header according to your application's requirements.
    • onInit:{(element: HTMLElement): void} - This callback function allows you to customize the Header toolbar by providing direct access to its HTML element. The function receives the Toolbar's HTML Element as an argument, enabling you to modify its structure, add custom buttons, update styles, or bind event listeners according to your application's requirements.
    • buttons:any[] - Specifies which action buttons are shown in the Grid header. The available options are:

      - ''columns'': Displays a button that opens the columns chooser panel, allowing users to show or hide grid columns.
      - ''filter'': Displays a button that opens the filtering panel, enabling users to apply filters to grid data.
      - ''group'': Displays a button that opens the grouping panel, allowing users to group data by specific columns.
      - ''sort'': Displays a button that opens the sorting panel, letting users sort grid data by one or more columns.
      - ''format'': Displays a button that opens the conditional formatting panel, providing options to format cells based on specific conditions.
      - ''search'': Displays a button that opens the search panel, enabling users to search within the grid data.
      - ''colors'': Displays a button that opens a color options panel, allowing users to customize color formatting for the grid.

      Include one or more of these options in an array to control the set of action buttons visible in the Grid header.
    • searchCommand:string - Specifies the type of search command to be executed, determining how the search operation is performed (e.g., basic, advanced, or filtered search). This setting influences the logic and options available during the search process.
    • customButton:object - Custom Toolbar Button: Enables you to add a user-defined button to the application's toolbar. This feature allows you to specify the button's label, icon, and action, providing easy access to custom functionality directly within the toolbar interface.
    Kkeys'Key Handling:' You can customize how key presses are handled by defining key map 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.
    LlocaleSpecifies 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.
    MmessagesAssigns 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.
    OonAfterInitCallback function that is executed after the grid has completed initialization and its Virtual DOM has been fully constructed. This allows you to perform any additional setup or actions that require the grid and its DOM elements to be ready.
    OonBeforeInitCallback function that is executed before the grid initialization process begins. At this stage, the Grid's Virtual DOM has not yet been created, so any DOM manipulations or operations on grid elements should be avoided within this callback. Use this function to perform setup tasks or configure options that need to occur prior to the creation of the grid's internal structure.
    OonCellClass "This callback function, when provided to the Grid, is invoked for each cell to determine the CSS class(es) that should be applied. Use this function to dynamically assign one or more CSS classes to individual cells based on their data, state, or other custom logic."
    OonCellRenderA callback function that is invoked each time a cell is rendered in the grid. Use this function to modify or customize the properties of the GridCell before it is displayed to the user. This allows you to dynamically apply styles, set attributes, or inject content based on the cell's data or state.
    OonCellValueCallback function invoked each time the Grid component requires a cell value for rendering. By implementing this function, you can customize or override the default logic used to retrieve and display cell values, enabling support for computed values, formatted data, or specialized rendering based on row or column context.
    OonChartInitCallback function (chart: Smart.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.
    OonInitCallback function invoked during the grid initialization process, specifically after the Grid's Virtual DOM has been created. This allows you to perform custom actions or setup logic once the grid structure is ready in the DOM, but before it is rendered to the user.
    OonKeyCallback function (event: KeyboardEvent) that is invoked whenever the grid component has focus and the user presses any keyboard key. This function allows you to handle and respond to keyboard interactions within the grid, accessing the pressed key and related event properties via the KeyboardEvent object.
    OonLoadCallback 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.
    OonRenderA 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.
    OonRowClassThis callback function is invoked by the Grid component, if provided, for each row. It is used to determine and return the CSS class name(s) that should be applied to the specific row, allowing for dynamic or conditional styling based on the row data or index.
    OonRowDetailInitCallback function invoked during the initialization of a row’s detail section. This function is triggered before the row detail is rendered, allowing you to customize or modify the detail content. Row details can be displayed either directly beneath the associated row in the main data table, or within a separate dialog window, depending on the configuration.
    OonRowDetailUpdatedCallback function that is invoked when the details of a table row are being updated. This function allows you to implement custom logic or handle events during the row detail update process.
    OonRowHistoryA callback function that is triggered whenever a row’s edit history is updated. This function is invoked only if the 'storeHistory' property is enabled, ensuring that all changes made to a row are recorded. Use this callback to handle actions such as syncing changes, auditing edits, or updating related UI components whenever a row’s edit history changes.
    OonRowInitCallback function invoked during the initialization of a row. Use this function to customize row properties, apply conditional logic, or modify row data before it is rendered. The function receives the row's data and context as parameters, allowing for dynamic adjustments based on specific requirements.
    OonRowMouseEnterCallback function invoked when the mouse enters a row.
    OonRowMouseLeaveCallback function invoked when the mouse leaves a row.
    RrightToLeftGets 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.
    RrowCSSRulesSets 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 < 5, '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.
    RrowDetailConfigures or updates the detailed information or content associated with a specific row, often used to display additional data or expanded views for that row. Click for more details. Property object's options:
    • enabled:boolean - Displays additional information for each row by enabling expandable row details functionality.
    • height:number - Specifies the vertical height, in pixels, for the expanded row details section. This determines how much space is allocated to display additional information beneath a table row when its details are shown.
    • position:string - Specifies the position of the column used to control the dynamic expansion or collapse of row details. This determines where the expand/collapse toggle will appear within the table, allowing users to show or hide additional information for each row.
    • template:string | HTMLTemplateElement - Defines the template used to display the detailed content for each row. This property specifies the HTML or component structure that will be rendered when a row is expanded to show additional information.
    • visible:boolean - Controls the visibility of the column that enables users to dynamically expand or collapse the details of a row. When enabled, this column provides an interactive toggle for showing or hiding additional information associated with each row.
    • dialog:object - Configures the display of row details using a dialog window. When enabled, selecting a row will open a modal dialog showing detailed information for that row. This provides a focused view of row details without navigating away from the main content.
    RrowsThe 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. Click for more details. Property object's options:
    • allowToggle:boolean - Sets or gets the row can be expanded or collapsed.
    • allowResize:boolean - Sets or gets the row can be resized.
    • allowSelect:boolean | null - Sets or gets the row can be selected.
    • allowCheck:boolean - Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
    • checked:boolean - Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
    • cells:Smart.Grid.Cell[] - Gets the Row's Cells array.
    • children:Smart.Grid.Row[] - Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
    • data:any - Gets the row's bound data.
    • detailHeight:number - Sets or gets the row's detail height.
    • detailTemplate:string | HTMLTemplateElement | null - Sets or gets the row's detail template.
    • element:object | null - Gets the HTML Element. The property returns null when the Row is not in the View.
    • expanded:boolean - Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.
    • header:HTMLElement - Gets the row's header element.
    • height:number - Sets or gets the row's height.
    • index:number - Gets the row's bound index.
    • id:string | number - Gets the row's bound id.
    • leaf:boolean - Gets whether the row is leaf row in TreeGrid or Grouping mode.
    • maxHeight:number - Sets or gets the row's maximum height.
    • minHeight:number - Sets or gets the row's minimum height.
    • freeze:string | boolean - Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far).
    • selected:boolean - Sets or gets whether the row is selected.
    • showDetail:boolean - Sets or gets whether the row detail is displayed.
    • setStyle:{(value: any): void} - "Method which applies a style object to all cells. Expects a JSON object with the following allowed values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
    • visible:boolean - Sets or gets whether the row is visible. Set the property to 'false' to hide the row.
    • visibleIndex:number - Gets the visible index of the row.
    • getCell:any - Methods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.
    SsummaryRowProvides detailed configuration options for displaying and customizing the summary row, including its appearance, position, aggregation methods, and which columns are summarized.
    UunlockKeySets 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.
    UusersDefines 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).
    VviewSpecifies 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.

    Methods

    BbatchThis function allows you to execute multiple method calls wrapped with the Grid's beginUpdate() and endUpdate(). Example: grid.batch(() => { grid.setCellValue(2, 'firstName', 'Peter'); grid.setCellValue(3, 'firstName', 'Nancy'); });
    CcloseDropDownCloses the grid's drop-down user interface when the 'dropDownMode' property is set to true, ensuring that any open drop-down menus within the grid are dismissed automatically. This helps maintain a streamlined user experience by hiding drop-down elements when they are no longer needed or when specific actions are triggered.
    CcloseMenuCloses the currently open column menu in a data grid or table interface. This action is typically triggered by user interactions such as right-clicking on a column header or clicking a column menu button, allowing users to dismiss the column-specific options or actions menu.
    CcloseSidePanelCloses the side panel component of the Grid interface, hiding any currently displayed content or options and returning the Grid to its default view.
    CcreateChartGenerates a visual chart representation based on the current data within the Grid. Chart generation requires that the charting feature is enabled in the system configuration. This function allows users to visualize the Grid's dataset in supported chart formats.
    FflashCellEmphasizes a specific cell within the grid, identified by its row ID and column data field.
    FflashRowBriefly flashes the row for the given rowId (transient visual emphasis).
    GgetHorizontalScrollMaxReturns the maximum horizontal scroll offset for the grid’s horizontal scrollbar. This value represents the furthest distance (in pixels) that the grid content can be scrolled horizontally. It is useful for programmatically setting, adjusting, or resetting the grid’s horizontal scroll position to ensure full content visibility or to align with specific scroll actions.
    GgetHorizontalScrollValueRetrieves the current horizontal scroll offset of the grid's horizontal scrollbar, indicating how far the grid content has been scrolled from the left edge in pixels. This value can be used to determine the current scroll position or to programmatically control grid scrolling behavior.
    GgetVerticalScrollMaxReturns the maximum allowable scroll position for the grid's vertical scrollbar. This value represents the greatest vertical offset to which users can scroll within the grid's content area. It can be used to determine the scrollable range or to programmatically set the vertical scrollbar to its lowest (bottom-most) position.
    GgetVerticalScrollValueReturns the current vertical scroll position of the grid, representing the number of pixels the grid’s content has been scrolled vertically from the top. This value corresponds to the position of the grid's vertical scrollbar and can be used to determine how far users have scrolled down within the grid.
    HhasMenuDetermines whether any column’s drop-down menu is currently open and visible within the grid component. This can be used to control grid interactions or UI behaviors that depend on the state of column drop-down menus.
    HhideDetailConceals the details section for the specified row in the grid when the row details feature is enabled, effectively collapsing or hiding any expanded information or custom content associated with that row. This function ensures that only the main data for the row is visible, while any additional details remain hidden until explicitly shown again.
    HhighlightCellEmphasizes a specific cell within the grid, identified by its row ID and column data field. Invoking this method again on the same cell will toggle the highlight on or off. You can optionally specify a CSS class to apply custom styling to the highlighted cell, allowing for personalized visual differentiation.
    HhighlightColumnHighlights all cells within the column corresponding to the specified data field. If this method is called again with the same data field, it toggles the highlight by removing it if already applied, or reapplying it if previously removed.
    HhighlightRowToggles a persistent highlight on the row for the given rowId; calling again with the same id removes it. Optional className overrides the default highlight class.
    OopenContextMenuDisplays the context menu at the given (left, top) screen coordinates. Ensure that context menu functionality is enabled in the grid settings for this method to work.
    OopenDropDownDisplays the grid’s drop-down user interface when the 'dropDownMode' property is set to true, allowing users to interact with additional grid options or filters presented within the drop-down.
    OopenMenuDisplays the drop-down menu associated with the column specified by the provided data field identifier, allowing users to access additional actions or settings related to that column.
    OopenSidePanelDisplays the Grid's side panel, and displays Element in it. This is useful if you have HTML Element on a page and want to move it and display it as a Side panel of the Grid.
    RrenderTriggers a full re-render of the Grid, similar to when it is first initialized. This method reconstructs all underlying HTML elements for rows, columns, and cells from scratch, ensuring a fresh and accurate representation of the data. After rebuilding these elements, it also updates and refreshes the Grid layout to reflect any structural changes. This is useful when foundational data or configuration has changed and a partial update is not sufficient.
    SsetCellStyleApplies inline CSS (backgroundColor, color, fontSize, etc.) to the cell for the given rowId and dataField.
    SsetDropDownLabelSpecifies the label text displayed for the Grid component when the 'dropDownMode' property is enabled. This label helps users identify the purpose or content of the Grid when it appears in drop-down mode.
    SsetHorizontalScrollValueSets the current position of the horizontal scrollbar within a scrollable container. This method allows you to programmatically adjust the horizontal scroll offset, enabling smooth navigation or custom scroll behavior. It can be used in combination with getHorizontalScrollValue to retrieve the current scroll position, and with getHorizontalScrollMax to determine the maximum scrollable distance. This is useful for implementing features such as custom scrolling controls, restoring previous scroll positions, or synchronizing scrolling across multiple elements.
    SsetLocaleSets the locale of a component.
    SsetRowStyleAllows you to apply custom CSS styles to a specific table row, identified by its unique rowId. Supported style properties include background color, text color, font size, font family, text decoration, font style, and font weight. This enables granular control over the appearance of individual rows in your table, ensuring consistency with your application's design requirements.
    SsetVerticalScrollValueSets the current position of the vertical scrollbar within a scrollable container or component. This method allows you to programmatically control the vertical scroll offset, typically specified in pixels or logical units from the top of the content. It can be used in conjunction with the getVerticalScrollValue method to retrieve the current scroll position, and with getVerticalScrollMax to determine the maximum scrollable value. This is useful for synchronizing scrolling behavior, implementing custom scroll controls, or restoring a previous scroll position.
    SshowCellMessageShows a short message under a cell (rowId, dataField, message text)—tooltips, validation hints, or one-off help without a modal.
    SshowDetailRenders an in-depth view of a selected row when the row details feature is activated in the grid configuration. This allows users to access and interact with additional information or actions related to the chosen row.
    SshowSidePanelDisplays the Grid's side panel showing custom content in it. It creates a clone of the content and displays it.

    Properties

    aiAn 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. Click for more details. Property object's options:
       object

      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.

      Properties

      keyThe unique API key required to authenticate and authorize requests made to the AI service provider, ensuring secure access and usage tracking for each client application.
      maxTokensSpecifies the maximum number of tokens (which may include words, punctuation, or characters, depending on the model's tokenization method) that the AI is allowed to generate in response to a single request. This limit helps control the length of the output and resource usage.
      modelSpecifies the AI model utilized to power text generation and other AI-driven functionalities within the application. This setting determines which underlying AI engine is responsible for producing generated content and handling intelligent features.
      promptsSets or gets the AI Assistant's prompts.
      promptVariablesSets or gets the AI Assistant's prompts variables which will be replaced in the AI prompts. Ex: promptVariables: [{ name: 'review', dataField: 'review' }, { name: 'rating', dataField: 'rating' } ]
      temperatureDetermines the degree of randomness in the AI-generated output. Lower values yield more deterministic and focused responses, making the AI’s answers predictable and precise. Higher values increase creativity and variability, resulting in more diverse and imaginative responses.
      urlSpecifies the endpoint URL used to send AI-related requests. This is usually the URL of your backend service or proxy, which securely forwards requests to OpenAI or another AI service provider. Ensure this URL points to your server that handles authentication, rate limiting, and any additional processing before communicating with the external AI API.

      keyThe unique API key required to authenticate and authorize requests made to the AI service provider, ensuring secure access and usage tracking for each client application.string

      The unique API key required to authenticate and authorize requests made to the AI service provider, ensuring secure access and usage tracking for each client application.

      Default value

      ""

      Back to root property: ai

      Examples

      Set a nested field on the element:

      const el = document.querySelector('smart-grid');
el.ai.key = "your-api-key-here";

      Read the nested value:

      const el = document.querySelector('smart-grid');
const key = el.ai.key;

      maxTokensSpecifies the maximum number of tokens (which may include words, punctuation, or characters, depending on the model's tokenization method) that the AI is allowed to generate in response to a single request. This limit helps control the length of the output and resource usage.number

      Specifies the maximum number of tokens (which may include words, punctuation, or characters, depending on the model's tokenization method) that the AI is allowed to generate in response to a single request. This limit helps control the length of the output and resource usage.

      Default value

      200

      Back to root property: ai

      Examples

      Set a nested field on the element:

      const el = document.querySelector('smart-grid');
el.ai.maxTokens = 200;

      Read the nested value:

      const el = document.querySelector('smart-grid');
const maxTokens = el.ai.maxTokens;

      modelSpecifies the AI model utilized to power text generation and other AI-driven functionalities within the application. This setting determines which underlying AI engine is responsible for producing generated content and handling intelligent features.string

      Specifies the AI model utilized to power text generation and other AI-driven functionalities within the application. This setting determines which underlying AI engine is responsible for producing generated content and handling intelligent features.

      Default value

      "gpt-3.5-turbo"

      Back to root property: ai

      Examples

      Set a nested field on the element:

      const el = document.querySelector('smart-grid');
el.ai.model = "gpt-4";

      Read the nested value:

      const el = document.querySelector('smart-grid');
const model = el.ai.model;

      promptsSets or gets the AI Assistant's prompts.[]

      Sets or gets the AI Assistant's prompts.

      Default value

      []

      Back to root property: ai

      Examples

      Set a nested field on the element:

      const el = document.querySelector('smart-grid');
el.ai.prompts = "Some prompt 2";

      Read the nested value:

      const el = document.querySelector('smart-grid');
const prompts = el.ai.prompts;

      promptVariablesSets or gets the AI Assistant's prompts variables which will be replaced in the AI prompts. Ex: promptVariables: [{ name: 'review', dataField: 'review' }, { name: 'rating', dataField: 'rating' } ][]

      Sets or gets the AI Assistant's prompts variables which will be replaced in the AI prompts. Ex: promptVariables: [{ name: 'review', dataField: 'review' }, { name: 'rating', dataField: 'rating' } ]

      Default value

      []

      Back to root property: ai

      Read the nested value:

      const el = document.querySelector('smart-grid');
const promptVariables = el.ai.promptVariables;

      temperatureDetermines the degree of randomness in the AI-generated output. Lower values yield more deterministic and focused responses, making the AI’s answers predictable and precise. Higher values increase creativity and variability, resulting in more diverse and imaginative responses.number

      Determines the degree of randomness in the AI-generated output. Lower values yield more deterministic and focused responses, making the AI’s answers predictable and precise. Higher values increase creativity and variability, resulting in more diverse and imaginative responses.

      Default value

      0.7

      Back to root property: ai

      Examples

      Set a nested field on the element:

      const el = document.querySelector('smart-grid');
el.ai.temperature = 0.7;

      Read the nested value:

      const el = document.querySelector('smart-grid');
const temperature = el.ai.temperature;

      urlSpecifies the endpoint URL used to send AI-related requests. This is usually the URL of your backend service or proxy, which securely forwards requests to OpenAI or another AI service provider. Ensure this URL points to your server that handles authentication, rate limiting, and any additional processing before communicating with the external AI API.string

      Specifies the endpoint URL used to send AI-related requests. This is usually the URL of your backend service or proxy, which securely forwards requests to OpenAI or another AI service provider. Ensure this URL points to your server that handles authentication, rate limiting, and any additional processing before communicating with the external AI API.

      Default value

      ""

      Back to root property: ai

      Examples

      Set a nested field on the element:

      const el = document.querySelector('smart-grid');
el.ai.url = "https://your-backend.com/ai";

      Read the nested value:

      const el = document.querySelector('smart-grid');
const url = el.ai.url;

      appearanceAn 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. Click for more details. Property object's options:
         object

        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.

        Properties

        allowColumnActionButtonAnimationEnables animation for the column action button. When this option is active, the drop-down button that appears upon hovering over a column header will display with a smooth animation effect, enhancing visual feedback for the user. If disabled, the drop-down button will appear instantly without any animation.
        allowColumnFilterButtonAnimationAnimates column filter button state when a filter is applied or cleared (filter button appearance).
        allowColumnLabelAnimationActivates animation for the column label. When a user hovers over the column header or applies sorting—causing the header’s drop-down button to appear—the column label smoothly transitions to the left using an animation effect. This improves the visual feedback and highlights the interactive state of the column header.
        allowColumnMenuAnimationControls whether the column menu displays with an animated transition. When enabled, clicking the drop-down button on a column header will show or hide the menu using a smooth animation effect, enhancing the user experience. If disabled, the menu will appear and disappear instantly without animation.
        allowColumnSortButtonAnimationEnables animated transitions for column sort buttons. When a user clicks on a sortable column header to change the sort order (ascending or descending), the sort button visually animates to indicate the sorting action, enhancing user feedback and interface interactivity.
        allowColumnStickyPositionAllows specific table columns to remain fixed (sticky) on the left or right side while horizontally scrolling, improving table readability and user experience.
        allowHeaderHoverActivates a visual hover effect on header elements. When a user moves their cursor over a header, a distinct hover style is applied to highlight the header and improve interactivity.
        allowHoverActivates a hover effect for table rows. When a user hovers over a row, a distinct style is applied to all cells within that row, improving interactivity and highlighting the row under the cursor.
        allowRowDetailToggleAnimationEnables animated transitions when expanding or collapsing row details in TreeGrid or Grouping mode. When a user clicks to expand or collapse a row, a smooth animation visualizes the row’s content appearing or disappearing, enhancing the user experience by clearly indicating the change in row state.
        allowRowToggleAnimationEnables animated transitions when expanding or collapsing a row in TreeGrid or Grouping mode. When this option is active, rows smoothly slide open or closed, enhancing the user experience by visually indicating the change in row state. This animation is triggered each time a row is expanded to show child nodes or collapsed to hide them.
        allowSortAnimationEnables animated sorting of data records. When sorting is applied, the data records are visually rearranged using smooth transition animations, providing a clear and engaging user experience as the records update their order on the interface.
        alternationCountThe total number of times the row background color alternates, creating a striped (zebra) pattern in the table. Each alternation changes the row color from one specified color to the next in the sequence.
        alternationEndIndicates the ending row index at which the alternating color pattern stops being applied. This index is inclusive, meaning the alternating colors will be applied up to and including this row.
        alternationStartSpecifies the row index from which the alternating color pattern should begin. This determines the first row in the sequence that will receive a different background color, enabling alternating row colors for improved readability.
        autoGenerateColumnLabelModeDetermines the format of the column header labels, allowing them to be displayed as either sequential numbers (e.g., 1, 2, 3…) or letters (e.g., A, B, C…). This property directly influences how column headers are rendered and displayed in the table interface.
        autoGenerateRowLabelModeSpecifies the format of row header labels, allowing you to choose between sequential numbers (e.g., 1, 2, 3, ...) or alphabetical letters (e.g., A, B, C, ...). Changing this property determines how the row headers are displayed in the rendered output.
        autoShowColumnActionButtonIf enabled, this option automatically displays the column action button, allowing users to access additional actions or settings related to the column without manual configuration.
        autoShowColumnFilterButtonIf enabled, this option automatically displays a filter button in each column header, allowing users to quickly access and apply filtering options to the column's data.
        autoShowColumnSortButtonWhen enabled, this property automatically displays the column sort button only when the column is actively sorted. If set to false, the sort button is always visible, regardless of whether the column is currently sorted, indicating that sorting is available for that column.
        displayLoadingIndicatorControls the visibility of the loading indicator in the Grid component. When enabled, a "Loading..." image or animation is displayed as an overlay while the Grid is fetching or processing data, providing visual feedback to users that content is being loaded.
        loadingIndicatorPlaceholderSpecifies the label text shown in the loading indicator. This text appears to inform users that data is currently being loaded or processed. Use this property to customize the loading message for better user experience.
        placeholderSpecifies the placeholder content displayed in the Grid when there are no data items to show. This placeholder provides a visual cue or message to users, indicating that the Grid is currently empty.
        showColumnActionButtonDisplays the column action button, which appears as a drop-down menu icon within the column header. This button allows users to access additional actions or settings related to the specific column, such as sorting, filtering, or customizing the column display.
        showColumnCustomButtonDisplays a user-defined custom button in the column header. This allows developers to add their own button to the top of a column, enabling custom actions or functionality specific to that column.
        showColumnDescriptionButtonDisplays a button that reveals the column description. The appearance and styling of this button can be fully customized using the Grid's CSS classes, allowing you to match it to your application's design.
        showColumnFilterButtonDisplays a filter button in the column header, allowing users to access filtering options for that specific column.
        showColumnGroupCellLinesDisplays dividing lines between cells within column groups, clearly separating each cell to improve readability and organization within grouped columns.
        showColumnGroupLinesDisplays vertical divider lines between columns that are organized into groups, visually separating each column within the group to improve readability and distinction.
        showColumnGroupsInColumnPanelDisplays column groups in the "Hide columns" panel, presenting both column groups and individual columns in a hierarchical, tree-like structure. If this property is set to false, column groups are hidden from the panel, and instead, column labels are prefixed with their corresponding group name for context.
        showColumnHeaderDragIconDisplays a drag handle icon on the column header when drag-and-drop functionality is enabled. The icon becomes visible when the user hovers the mouse cursor near the left edge of the column header, indicating that the column can be dragged to a new position.
        showColumnHeaderLinesDisplays visible lines that separate the headers of columns from one another, making it easier to distinguish between different column headings in a table or grid layout.
        showColumnIconDisplays an icon within the header of the column, providing a visual indicator or representation specific to that column. This icon appears alongside or instead of the column title and can be used to convey additional information or functionality related to the column's contents.
        showColumnLinesDisplays vertical grid lines between columns, making it easier to distinguish and separate individual columns within the layout.
        showColumnSortButtonDisplays a sorting button within the column header, allowing users to sort the column's data in ascending or descending order.
        showFilterColumnBackgroundDisplays a distinct background color on the column header to indicate when a filter has been applied to that column. This visually highlights filtered columns, helping users easily identify which columns are currently filtered.
        showFrozenColumnBackgroundDisplays a distinct background for frozen columns in the grid, making it visually clear which columns are fixed in place when horizontal scrolling is enabled. This feature is active only when the grid contains frozen columns.
        showHorizontalScrollBarOnFixedColumnsDisplays a horizontal scrollbar specifically for fixed columns, allowing users to scroll horizontally within the fixed section when its content exceeds the available width.
        showRowHeaderToggles the visibility of the row header, allowing you to either display or hide the header section for each row in the grid or table.
        showRowHeaderDragIconDisplays a drag handle icon within the row header, allowing users to initiate and perform row drag-and-drop actions for reordering rows.
        showRowHeaderEditIconDisplays an edit icon whenever a cell or row enters the edit state, providing a clear visual indicator that the item is currently being modified.
        showRowHeaderFocusIconDisplays a focus icon whenever a table cell or entire row is focused, providing a clear visual indicator of the current selection for improved accessibility and user interaction.
        showRowHeaderNumberDisplays the row indexes in the row header section of the table. To enable this feature, set the showRowHeader property to true. When activated, each row header will display its corresponding index, providing clear reference points for users.
        showRowHeaderSelectIconDisplays a selection icon when the user's pointer hovers over the row header cell, providing a visual cue that the row can be selected.
        showRowLinesDisplays horizontal lines that separate each row in the table, making it easier to distinguish and read individual rows.
        showSelectionOnTopDisplays the selection with the highest visual priority, ensuring it appears above all other styled elements. This guarantees the selection remains clearly visible and is not obscured by any other interface elements or styles.
        showSortColumnBackgroundHighlights the background of the column currently being sorted, visually indicating which column has an active sort applied.
        showTodayDateAsStringDisplays the current date as the word "Today" instead of the standard date format (e.g., "7/8/2022"). When this property is set to false, the component will show the full numerical date.
        showTooltipsDisplays informative tooltips when the user hovers over table columns or individual cells, providing additional context or details about the data shown.
        showTreeRowHeaderIn TreeGrid, when true, parent (non-leaf) nodes are drawn in the row header column—like group headers—instead of as normal data rows, so depth is easier to see.
        showVerticalScrollBarOnFixedColumnsDisplays a vertical scrollbar specifically on fixed columns, allowing users to scroll through content within those columns when the content exceeds the visible height. This ensures that fixed columns remain accessible and easy to navigate even with overflow content.
        sortAnimationDurationSpecifies the length of time, in milliseconds, that the sorting animation will run when items are sorted. This property takes effect only if the allowSortAnimation property is enabled. Use it to control the speed and smoothness of the sorting transition for a better user experience.
        Try a demo showcasing the appearance property.

        Full working example

        Minimal setup for appearance with the data and bindings you usually use together on this component.

        JavaScript — minimal grid with appearance:

        // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const appearance = { alternationCount: 2, showRowHeader: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	appearance
});
        Related APIs layout refresh() change

        allowColumnActionButtonAnimationEnables animation for the column action button. When this option is active, the drop-down button that appears upon hovering over a column header will display with a smooth animation effect, enhancing visual feedback for the user. If disabled, the drop-down button will appear instantly without any animation.boolean

        Enables animation for the column action button. When this option is active, the drop-down button that appears upon hovering over a column header will display with a smooth animation effect, enhancing visual feedback for the user. If disabled, the drop-down button will appear instantly without any animation.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the allowColumnActionButtonAnimation property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowColumnActionButtonAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowColumnActionButtonAnimation = el.appearance.allowColumnActionButtonAnimation;
        Related APIs appearance layout refresh() change

        allowColumnFilterButtonAnimationAnimates column filter button state when a filter is applied or cleared (filter button appearance).boolean

        Animates column filter button state when a filter is applied or cleared (filter button appearance).

        Default value

        true

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowColumnFilterButtonAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowColumnFilterButtonAnimation = el.appearance.allowColumnFilterButtonAnimation;
        Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

        allowColumnLabelAnimationActivates animation for the column label. When a user hovers over the column header or applies sorting—causing the header’s drop-down button to appear—the column label smoothly transitions to the left using an animation effect. This improves the visual feedback and highlights the interactive state of the column header.boolean

        Activates animation for the column label. When a user hovers over the column header or applies sorting—causing the header’s drop-down button to appear—the column label smoothly transitions to the left using an animation effect. This improves the visual feedback and highlights the interactive state of the column header.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the allowColumnLabelAnimation property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowColumnLabelAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowColumnLabelAnimation = el.appearance.allowColumnLabelAnimation;
        Related APIs appearance layout refresh() change

        allowColumnMenuAnimationControls whether the column menu displays with an animated transition. When enabled, clicking the drop-down button on a column header will show or hide the menu using a smooth animation effect, enhancing the user experience. If disabled, the menu will appear and disappear instantly without animation.boolean

        Controls whether the column menu displays with an animated transition. When enabled, clicking the drop-down button on a column header will show or hide the menu using a smooth animation effect, enhancing the user experience. If disabled, the menu will appear and disappear instantly without animation.

        Default value

        true

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowColumnMenuAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowColumnMenuAnimation = el.appearance.allowColumnMenuAnimation;
        Related APIs behavior refresh() change

        allowColumnSortButtonAnimationEnables animated transitions for column sort buttons. When a user clicks on a sortable column header to change the sort order (ascending or descending), the sort button visually animates to indicate the sorting action, enhancing user feedback and interface interactivity.boolean

        Enables animated transitions for column sort buttons. When a user clicks on a sortable column header to change the sort order (ascending or descending), the sort button visually animates to indicate the sorting action, enhancing user feedback and interface interactivity.

        Default value

        true

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowColumnSortButtonAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowColumnSortButtonAnimation = el.appearance.allowColumnSortButtonAnimation;
        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

        allowColumnStickyPositionAllows specific table columns to remain fixed (sticky) on the left or right side while horizontally scrolling, improving table readability and user experience.boolean

        Allows specific table columns to remain fixed (sticky) on the left or right side while horizontally scrolling, improving table readability and user experience.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the allowColumnStickyPosition property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowColumnStickyPosition = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowColumnStickyPosition = el.appearance.allowColumnStickyPosition;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        allowHeaderHoverActivates a visual hover effect on header elements. When a user moves their cursor over a header, a distinct hover style is applied to highlight the header and improve interactivity.boolean

        Activates a visual hover effect on header elements. When a user moves their cursor over a header, a distinct hover style is applied to highlight the header and improve interactivity.

        Default value

        true

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowHeaderHover = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowHeaderHover = el.appearance.allowHeaderHover;
        Related APIs appearance layout refresh() change

        allowHoverActivates a hover effect for table rows. When a user hovers over a row, a distinct style is applied to all cells within that row, improving interactivity and highlighting the row under the cursor.boolean

        Activates a hover effect for table rows. When a user hovers over a row, a distinct style is applied to all cells within that row, improving interactivity and highlighting the row under the cursor.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the allowHover property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowHover = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowHover = el.appearance.allowHover;
        Related APIs appearance layout refresh() change

        allowRowDetailToggleAnimationEnables animated transitions when expanding or collapsing row details in TreeGrid or Grouping mode. When a user clicks to expand or collapse a row, a smooth animation visualizes the row’s content appearing or disappearing, enhancing the user experience by clearly indicating the change in row state.boolean

        Enables animated transitions when expanding or collapsing row details in TreeGrid or Grouping mode. When a user clicks to expand or collapse a row, a smooth animation visualizes the row’s content appearing or disappearing, enhancing the user experience by clearly indicating the change in row state.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the allowRowDetailToggleAnimation property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowRowDetailToggleAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowRowDetailToggleAnimation = el.appearance.allowRowDetailToggleAnimation;
        Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

        allowRowToggleAnimationEnables animated transitions when expanding or collapsing a row in TreeGrid or Grouping mode. When this option is active, rows smoothly slide open or closed, enhancing the user experience by visually indicating the change in row state. This animation is triggered each time a row is expanded to show child nodes or collapsed to hide them.boolean

        Enables animated transitions when expanding or collapsing a row in TreeGrid or Grouping mode. When this option is active, rows smoothly slide open or closed, enhancing the user experience by visually indicating the change in row state. This animation is triggered each time a row is expanded to show child nodes or collapsed to hide them.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the allowRowToggleAnimation property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowRowToggleAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowRowToggleAnimation = el.appearance.allowRowToggleAnimation;
        Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

        allowSortAnimationEnables animated sorting of data records. When sorting is applied, the data records are visually rearranged using smooth transition animations, providing a clear and engaging user experience as the records update their order on the interface.boolean

        Enables animated sorting of data records. When sorting is applied, the data records are visually rearranged using smooth transition animations, providing a clear and engaging user experience as the records update their order on the interface.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the allowSortAnimation property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.allowSortAnimation = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const allowSortAnimation = el.appearance.allowSortAnimation;
        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

        alternationCountThe total number of times the row background color alternates, creating a striped (zebra) pattern in the table. Each alternation changes the row color from one specified color to the next in the sequence.number

        The total number of times the row background color alternates, creating a striped (zebra) pattern in the table. Each alternation changes the row color from one specified color to the next in the sequence.

        Default value

        0

        Back to root property: appearance

        Try a demo showcasing the alternationCount property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.alternationCount = 10;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const alternationCount = el.appearance.alternationCount;
        Related APIs appearance layout refresh() change

        alternationEndIndicates the ending row index at which the alternating color pattern stops being applied. This index is inclusive, meaning the alternating colors will be applied up to and including this row.number

        Indicates the ending row index at which the alternating color pattern stops being applied. This index is inclusive, meaning the alternating colors will be applied up to and including this row.

        Default value

        0

        Back to root property: appearance

        Try a demo showcasing the alternationEnd property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.alternationEnd = 10;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const alternationEnd = el.appearance.alternationEnd;
        Related APIs appearance layout refresh() change

        alternationStartSpecifies the row index from which the alternating color pattern should begin. This determines the first row in the sequence that will receive a different background color, enabling alternating row colors for improved readability.number

        Specifies the row index from which the alternating color pattern should begin. This determines the first row in the sequence that will receive a different background color, enabling alternating row colors for improved readability.

        Default value

        0

        Back to root property: appearance

        Try a demo showcasing the alternationStart property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.alternationStart = 1;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const alternationStart = el.appearance.alternationStart;
        Related APIs appearance layout refresh() change

        autoGenerateColumnLabelModeDetermines the format of the column header labels, allowing them to be displayed as either sequential numbers (e.g., 1, 2, 3…) or letters (e.g., A, B, C…). This property directly influences how column headers are rendered and displayed in the table interface."number" | "letter"

        Determines the format of the column header labels, allowing them to be displayed as either sequential numbers (e.g., 1, 2, 3…) or letters (e.g., A, B, C…). This property directly influences how column headers are rendered and displayed in the table interface.

        Default value

        "letter"

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.autoGenerateColumnLabelMode = "letter";

        Read the nested value:

        const el = document.querySelector('smart-grid');
const autoGenerateColumnLabelMode = el.appearance.autoGenerateColumnLabelMode;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        autoGenerateRowLabelModeSpecifies the format of row header labels, allowing you to choose between sequential numbers (e.g., 1, 2, 3, ...) or alphabetical letters (e.g., A, B, C, ...). Changing this property determines how the row headers are displayed in the rendered output."number" | "letter"

        Specifies the format of row header labels, allowing you to choose between sequential numbers (e.g., 1, 2, 3, ...) or alphabetical letters (e.g., A, B, C, ...). Changing this property determines how the row headers are displayed in the rendered output.

        Default value

        "number"

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.autoGenerateRowLabelMode = "letter";

        Read the nested value:

        const el = document.querySelector('smart-grid');
const autoGenerateRowLabelMode = el.appearance.autoGenerateRowLabelMode;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        autoShowColumnActionButtonIf enabled, this option automatically displays the column action button, allowing users to access additional actions or settings related to the column without manual configuration.boolean

        If enabled, this option automatically displays the column action button, allowing users to access additional actions or settings related to the column without manual configuration.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the autoShowColumnActionButton property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.autoShowColumnActionButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const autoShowColumnActionButton = el.appearance.autoShowColumnActionButton;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        autoShowColumnFilterButtonIf enabled, this option automatically displays a filter button in each column header, allowing users to quickly access and apply filtering options to the column's data.boolean

        If enabled, this option automatically displays a filter button in each column header, allowing users to quickly access and apply filtering options to the column's data.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the autoShowColumnFilterButton property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.autoShowColumnFilterButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const autoShowColumnFilterButton = el.appearance.autoShowColumnFilterButton;
        Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

        autoShowColumnSortButtonWhen enabled, this property automatically displays the column sort button only when the column is actively sorted. If set to false, the sort button is always visible, regardless of whether the column is currently sorted, indicating that sorting is available for that column.boolean

        When enabled, this property automatically displays the column sort button only when the column is actively sorted. If set to false, the sort button is always visible, regardless of whether the column is currently sorted, indicating that sorting is available for that column.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the autoShowColumnSortButton property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.autoShowColumnSortButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const autoShowColumnSortButton = el.appearance.autoShowColumnSortButton;
        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

        displayLoadingIndicatorControls the visibility of the loading indicator in the Grid component. When enabled, a "Loading..." image or animation is displayed as an overlay while the Grid is fetching or processing data, providing visual feedback to users that content is being loaded.boolean

        Controls the visibility of the loading indicator in the Grid component. When enabled, a "Loading..." image or animation is displayed as an overlay while the Grid is fetching or processing data, providing visual feedback to users that content is being loaded.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the displayLoadingIndicator property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.displayLoadingIndicator = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const displayLoadingIndicator = el.appearance.displayLoadingIndicator;
        Related APIs appearance layout refresh() change

        loadingIndicatorPlaceholderSpecifies the label text shown in the loading indicator. This text appears to inform users that data is currently being loaded or processed. Use this property to customize the loading message for better user experience.string

        Specifies the label text shown in the loading indicator. This text appears to inform users that data is currently being loaded or processed. Use this property to customize the loading message for better user experience.

        Default value

        "Loading..."

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.loadingIndicatorPlaceholder = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const loadingIndicatorPlaceholder = el.appearance.loadingIndicatorPlaceholder;
        Related APIs dataSource refresh() beginUpdate() endUpdate() change

        placeholderSpecifies the placeholder content displayed in the Grid when there are no data items to show. This placeholder provides a visual cue or message to users, indicating that the Grid is currently empty.string

        Specifies the placeholder content displayed in the Grid when there are no data items to show. This placeholder provides a visual cue or message to users, indicating that the Grid is currently empty.

        Default value

        "No Rows"

        Back to root property: appearance

        Try a demo showcasing the placeholder property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.placeholder = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const placeholder = el.appearance.placeholder;
        Related APIs appearance layout refresh() change

        showColumnActionButtonDisplays the column action button, which appears as a drop-down menu icon within the column header. This button allows users to access additional actions or settings related to the specific column, such as sorting, filtering, or customizing the column display.boolean

        Displays the column action button, which appears as a drop-down menu icon within the column header. This button allows users to access additional actions or settings related to the specific column, such as sorting, filtering, or customizing the column display.

        Default value

        true

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnActionButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnActionButton = el.appearance.showColumnActionButton;
        Related APIs behavior refresh() change

        showColumnCustomButtonDisplays a user-defined custom button in the column header. This allows developers to add their own button to the top of a column, enabling custom actions or functionality specific to that column.boolean

        Displays a user-defined custom button in the column header. This allows developers to add their own button to the top of a column, enabling custom actions or functionality specific to that column.

        Default value

        false

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnCustomButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnCustomButton = el.appearance.showColumnCustomButton;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showColumnDescriptionButtonDisplays a button that reveals the column description. The appearance and styling of this button can be fully customized using the Grid's CSS classes, allowing you to match it to your application's design.boolean

        Displays a button that reveals the column description. The appearance and styling of this button can be fully customized using the Grid's CSS classes, allowing you to match it to your application's design.

        Default value

        false

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnDescriptionButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnDescriptionButton = el.appearance.showColumnDescriptionButton;
        Related APIs appearance layout refresh() change

        showColumnFilterButtonDisplays a filter button in the column header, allowing users to access filtering options for that specific column.boolean

        Displays a filter button in the column header, allowing users to access filtering options for that specific column.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showColumnFilterButton property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnFilterButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnFilterButton = el.appearance.showColumnFilterButton;
        Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

        showColumnGroupCellLinesDisplays dividing lines between cells within column groups, clearly separating each cell to improve readability and organization within grouped columns.boolean

        Displays dividing lines between cells within column groups, clearly separating each cell to improve readability and organization within grouped columns.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showColumnGroupCellLines property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnGroupCellLines = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnGroupCellLines = el.appearance.showColumnGroupCellLines;
        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

        showColumnGroupLinesDisplays vertical divider lines between columns that are organized into groups, visually separating each column within the group to improve readability and distinction.boolean

        Displays vertical divider lines between columns that are organized into groups, visually separating each column within the group to improve readability and distinction.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showColumnGroupLines property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnGroupLines = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnGroupLines = el.appearance.showColumnGroupLines;
        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

        showColumnGroupsInColumnPanelDisplays column groups in the "Hide columns" panel, presenting both column groups and individual columns in a hierarchical, tree-like structure. If this property is set to false, column groups are hidden from the panel, and instead, column labels are prefixed with their corresponding group name for context.boolean

        Displays column groups in the "Hide columns" panel, presenting both column groups and individual columns in a hierarchical, tree-like structure. If this property is set to false, column groups are hidden from the panel, and instead, column labels are prefixed with their corresponding group name for context.

        Default value

        false

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnGroupsInColumnPanel = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnGroupsInColumnPanel = el.appearance.showColumnGroupsInColumnPanel;
        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

        showColumnHeaderDragIconDisplays a drag handle icon on the column header when drag-and-drop functionality is enabled. The icon becomes visible when the user hovers the mouse cursor near the left edge of the column header, indicating that the column can be dragged to a new position.boolean

        Displays a drag handle icon on the column header when drag-and-drop functionality is enabled. The icon becomes visible when the user hovers the mouse cursor near the left edge of the column header, indicating that the column can be dragged to a new position.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showColumnHeaderDragIcon property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnHeaderDragIcon = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnHeaderDragIcon = el.appearance.showColumnHeaderDragIcon;
        Related APIs behavior refresh() change

        showColumnHeaderLinesDisplays visible lines that separate the headers of columns from one another, making it easier to distinguish between different column headings in a table or grid layout.boolean

        Displays visible lines that separate the headers of columns from one another, making it easier to distinguish between different column headings in a table or grid layout.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showColumnHeaderLines property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnHeaderLines = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnHeaderLines = el.appearance.showColumnHeaderLines;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showColumnIconDisplays an icon within the header of the column, providing a visual indicator or representation specific to that column. This icon appears alongside or instead of the column title and can be used to convey additional information or functionality related to the column's contents.boolean

        Displays an icon within the header of the column, providing a visual indicator or representation specific to that column. This icon appears alongside or instead of the column title and can be used to convey additional information or functionality related to the column's contents.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showColumnIcon property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnIcon = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnIcon = el.appearance.showColumnIcon;
        Related APIs appearance layout refresh() change

        showColumnLinesDisplays vertical grid lines between columns, making it easier to distinguish and separate individual columns within the layout.boolean

        Displays vertical grid lines between columns, making it easier to distinguish and separate individual columns within the layout.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showColumnLines property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnLines = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnLines = el.appearance.showColumnLines;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showColumnSortButtonDisplays a sorting button within the column header, allowing users to sort the column's data in ascending or descending order.boolean

        Displays a sorting button within the column header, allowing users to sort the column's data in ascending or descending order.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showColumnSortButton property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showColumnSortButton = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showColumnSortButton = el.appearance.showColumnSortButton;
        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

        showFilterColumnBackgroundDisplays a distinct background color on the column header to indicate when a filter has been applied to that column. This visually highlights filtered columns, helping users easily identify which columns are currently filtered.boolean

        Displays a distinct background color on the column header to indicate when a filter has been applied to that column. This visually highlights filtered columns, helping users easily identify which columns are currently filtered.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showFilterColumnBackground property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showFilterColumnBackground = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showFilterColumnBackground = el.appearance.showFilterColumnBackground;
        Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

        showFrozenColumnBackgroundDisplays a distinct background for frozen columns in the grid, making it visually clear which columns are fixed in place when horizontal scrolling is enabled. This feature is active only when the grid contains frozen columns.boolean

        Displays a distinct background for frozen columns in the grid, making it visually clear which columns are fixed in place when horizontal scrolling is enabled. This feature is active only when the grid contains frozen columns.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showFrozenColumnBackground property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showFrozenColumnBackground = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showFrozenColumnBackground = el.appearance.showFrozenColumnBackground;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showHorizontalScrollBarOnFixedColumnsDisplays a horizontal scrollbar specifically for fixed columns, allowing users to scroll horizontally within the fixed section when its content exceeds the available width.boolean

        Displays a horizontal scrollbar specifically for fixed columns, allowing users to scroll horizontally within the fixed section when its content exceeds the available width.

        Default value

        false

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showHorizontalScrollBarOnFixedColumns = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showHorizontalScrollBarOnFixedColumns = el.appearance.showHorizontalScrollBarOnFixedColumns;
        Related APIs behavior refresh() change

        showRowHeaderToggles the visibility of the row header, allowing you to either display or hide the header section for each row in the grid or table.boolean

        Toggles the visibility of the row header, allowing you to either display or hide the header section for each row in the grid or table.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showRowHeader property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showRowHeader = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showRowHeader = el.appearance.showRowHeader;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showRowHeaderDragIconDisplays a drag handle icon within the row header, allowing users to initiate and perform row drag-and-drop actions for reordering rows.boolean

        Displays a drag handle icon within the row header, allowing users to initiate and perform row drag-and-drop actions for reordering rows.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showRowHeaderDragIcon property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showRowHeaderDragIcon = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showRowHeaderDragIcon = el.appearance.showRowHeaderDragIcon;
        Related APIs behavior refresh() change

        showRowHeaderEditIconDisplays an edit icon whenever a cell or row enters the edit state, providing a clear visual indicator that the item is currently being modified.boolean

        Displays an edit icon whenever a cell or row enters the edit state, providing a clear visual indicator that the item is currently being modified.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showRowHeaderEditIcon property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showRowHeaderEditIcon = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showRowHeaderEditIcon = el.appearance.showRowHeaderEditIcon;
        Related APIs appearance layout refresh() change

        showRowHeaderFocusIconDisplays a focus icon whenever a table cell or entire row is focused, providing a clear visual indicator of the current selection for improved accessibility and user interaction.boolean

        Displays a focus icon whenever a table cell or entire row is focused, providing a clear visual indicator of the current selection for improved accessibility and user interaction.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showRowHeaderFocusIcon property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showRowHeaderFocusIcon = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showRowHeaderFocusIcon = el.appearance.showRowHeaderFocusIcon;
        Related APIs selection select() unselect() selectAllRows() clearSelection() change

        showRowHeaderNumberDisplays the row indexes in the row header section of the table. To enable this feature, set the showRowHeader property to true. When activated, each row header will display its corresponding index, providing clear reference points for users.boolean

        Displays the row indexes in the row header section of the table. To enable this feature, set the showRowHeader property to true. When activated, each row header will display its corresponding index, providing clear reference points for users.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showRowHeaderNumber property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showRowHeaderNumber = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showRowHeaderNumber = el.appearance.showRowHeaderNumber;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showRowHeaderSelectIconDisplays a selection icon when the user's pointer hovers over the row header cell, providing a visual cue that the row can be selected.boolean

        Displays a selection icon when the user's pointer hovers over the row header cell, providing a visual cue that the row can be selected.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showRowHeaderSelectIcon property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showRowHeaderSelectIcon = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showRowHeaderSelectIcon = el.appearance.showRowHeaderSelectIcon;
        Related APIs selection select() unselect() selectAllRows() clearSelection() change

        showRowLinesDisplays horizontal lines that separate each row in the table, making it easier to distinguish and read individual rows.boolean

        Displays horizontal lines that separate each row in the table, making it easier to distinguish and read individual rows.

        Default value

        true

        Back to root property: appearance

        Try a demo showcasing the showRowLines property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showRowLines = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showRowLines = el.appearance.showRowLines;
        Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

        showSelectionOnTopDisplays the selection with the highest visual priority, ensuring it appears above all other styled elements. This guarantees the selection remains clearly visible and is not obscured by any other interface elements or styles.boolean

        Displays the selection with the highest visual priority, ensuring it appears above all other styled elements. This guarantees the selection remains clearly visible and is not obscured by any other interface elements or styles.

        Default value

        false

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showSelectionOnTop = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showSelectionOnTop = el.appearance.showSelectionOnTop;
        Related APIs selection select() unselect() selectAllRows() clearSelection() change

        showSortColumnBackgroundHighlights the background of the column currently being sorted, visually indicating which column has an active sort applied.boolean

        Highlights the background of the column currently being sorted, visually indicating which column has an active sort applied.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showSortColumnBackground property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showSortColumnBackground = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showSortColumnBackground = el.appearance.showSortColumnBackground;
        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

        showTodayDateAsStringDisplays the current date as the word "Today" instead of the standard date format (e.g., "7/8/2022"). When this property is set to false, the component will show the full numerical date.boolean

        Displays the current date as the word "Today" instead of the standard date format (e.g., "7/8/2022"). When this property is set to false, the component will show the full numerical date.

        Default value

        true

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showTodayDateAsString = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showTodayDateAsString = el.appearance.showTodayDateAsString;

        showTooltipsDisplays informative tooltips when the user hovers over table columns or individual cells, providing additional context or details about the data shown.boolean

        Displays informative tooltips when the user hovers over table columns or individual cells, providing additional context or details about the data shown.

        Default value

        false

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showTooltips = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showTooltips = el.appearance.showTooltips;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showTreeRowHeaderIn TreeGrid, when true, parent (non-leaf) nodes are drawn in the row header column—like group headers—instead of as normal data rows, so depth is easier to see.boolean

        In TreeGrid, when true, parent (non-leaf) nodes are drawn in the row header column—like group headers—instead of as normal data rows, so depth is easier to see.

        Default value

        false

        Back to root property: appearance

        Try a demo showcasing the showTreeRowHeader property.

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showTreeRowHeader = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showTreeRowHeader = el.appearance.showTreeRowHeader;
        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

        showVerticalScrollBarOnFixedColumnsDisplays a vertical scrollbar specifically on fixed columns, allowing users to scroll through content within those columns when the content exceeds the visible height. This ensures that fixed columns remain accessible and easy to navigate even with overflow content.boolean

        Displays a vertical scrollbar specifically on fixed columns, allowing users to scroll through content within those columns when the content exceeds the visible height. This ensures that fixed columns remain accessible and easy to navigate even with overflow content.

        Default value

        false

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.showVerticalScrollBarOnFixedColumns = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const showVerticalScrollBarOnFixedColumns = el.appearance.showVerticalScrollBarOnFixedColumns;
        Related APIs behavior refresh() change

        sortAnimationDurationSpecifies the length of time, in milliseconds, that the sorting animation will run when items are sorted. This property takes effect only if the allowSortAnimation property is enabled. Use it to control the speed and smoothness of the sorting transition for a better user experience.number

        Specifies the length of time, in milliseconds, that the sorting animation will run when items are sorted. This property takes effect only if the allowSortAnimation property is enabled. Use it to control the speed and smoothness of the sorting transition for a better user experience.

        Default value

        500

        Back to root property: appearance

        Examples

        Set a nested field on the element:

        const el = document.querySelector('smart-grid');
el.appearance.sortAnimationDuration = true;

        Read the nested value:

        const el = document.querySelector('smart-grid');
const sortAnimationDuration = el.appearance.sortAnimationDuration;
        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

        behaviorAn object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings. Click for more details. Property object's options:
           object

          An object that defines configuration options controlling the grid’s behavior, such as layout properties, sorting and filtering capabilities, selection modes, and responsiveness settings.

          Properties

          allowColumnAutoSizeOnDoubleClickAutomatically resizes a column to fit its content when the user double-clicks on the right edge of the column header.
          allowColumnFreezeControls whether users can freeze (or pin) columns using drag-and-drop interactions. - 'When other columns are already frozen/pinned:' Dragging a column into the frozen area will immediately add it to that section. - 'When no columns are currently frozen/pinned:' Dragging a column to the edge of the grid and holding it there for about one second will automatically activate the frozen area and pin the column.Enabling this option provides an intuitive way for users to freeze columns directly from the grid interface.
          allowColumnReorderSpecifies whether users are allowed to reorder columns by dragging them to new positions within the table or grid.
          allowMouseWheelSpecifies whether users can scroll the content using the mouse wheel. If enabled, the mouse wheel will allow vertical or horizontal scrolling within the element; if disabled, mouse wheel actions will have no scrolling effect.
          allowRowAutoSizeOnDoubleClickAutomatically resizes the row height to fit its content when the bottom border of the row is double-clicked.
          allowRowReorderSpecifies whether the functionality to reorder rows—such as through drag-and-drop or other user interactions—is enabled. When set to true, users can change the order of rows within the table or list component.
          columnResizeModeSpecifies how column resizing is handled. In split mode, when a column is resized, its width increases or decreases, and the adjacent (next) column’s width is adjusted in the opposite direction, so the combined width of both columns remains constant. In growAndShrink mode, only the resized column's width changes; the widths of other columns remain unaffected.
          rowResizeModeSpecifies how rows are resized within the container. - In the split resize mode, resizing a row will both increase or decrease the height of the target (resized) row and inversely adjust the height of the immediately following (sibling) row, ensuring the total height remains constant.- In the growAndShrink resize mode, only the targeted row's height is adjusted—either increasing or decreasing—without affecting the size of neighboring rows.

          Full working example

          Minimal setup for behavior with the data and bindings you usually use together on this component.

          JavaScript — minimal grid with behavior:

          // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const behavior = { columnResizeMode: 'growAndShrink' };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	behavior
});
          Related APIs refresh() change

          allowColumnAutoSizeOnDoubleClickAutomatically resizes a column to fit its content when the user double-clicks on the right edge of the column header.boolean

          Automatically resizes a column to fit its content when the user double-clicks on the right edge of the column header.

          Default value

          true

          Back to root property: behavior

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.allowColumnAutoSizeOnDoubleClick = true;

          Read the nested value:

          const el = document.querySelector('smart-grid');
const allowColumnAutoSizeOnDoubleClick = el.behavior.allowColumnAutoSizeOnDoubleClick;
          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

          allowColumnFreezeControls whether users can freeze (or pin) columns using drag-and-drop interactions. - 'When other columns are already frozen/pinned:' Dragging a column into the frozen area will immediately add it to that section. - 'When no columns are currently frozen/pinned:' Dragging a column to the edge of the grid and holding it there for about one second will automatically activate the frozen area and pin the column.Enabling this option provides an intuitive way for users to freeze columns directly from the grid interface.boolean

          Controls whether users can freeze (or pin) columns using drag-and-drop interactions.

          - 'When other columns are already frozen/pinned:' Dragging a column into the frozen area will immediately add it to that section.
          - 'When no columns are currently frozen/pinned:' Dragging a column to the edge of the grid and holding it there for about one second will automatically activate the frozen area and pin the column.

          Enabling this option provides an intuitive way for users to freeze columns directly from the grid interface.

          Default value

          false

          Back to root property: behavior

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.allowColumnFreeze = true;

          Read the nested value:

          const el = document.querySelector('smart-grid');
const allowColumnFreeze = el.behavior.allowColumnFreeze;
          Related APIs behavior refresh() change

          allowColumnReorderSpecifies whether users are allowed to reorder columns by dragging them to new positions within the table or grid.boolean

          Specifies whether users are allowed to reorder columns by dragging them to new positions within the table or grid.

          Default value

          false

          Back to root property: behavior

          Try a demo showcasing the allowColumnReorder property.

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.allowColumnReorder = true;

          Read the nested value:

          const el = document.querySelector('smart-grid');
const allowColumnReorder = el.behavior.allowColumnReorder;
          Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

          allowMouseWheelSpecifies whether users can scroll the content using the mouse wheel. If enabled, the mouse wheel will allow vertical or horizontal scrolling within the element; if disabled, mouse wheel actions will have no scrolling effect.boolean

          Specifies whether users can scroll the content using the mouse wheel. If enabled, the mouse wheel will allow vertical or horizontal scrolling within the element; if disabled, mouse wheel actions will have no scrolling effect.

          Default value

          true

          Back to root property: behavior

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.allowMouseWheel = true;

          Read the nested value:

          const el = document.querySelector('smart-grid');
const allowMouseWheel = el.behavior.allowMouseWheel;
          Related APIs behavior refresh() change

          allowRowAutoSizeOnDoubleClickAutomatically resizes the row height to fit its content when the bottom border of the row is double-clicked.boolean

          Automatically resizes the row height to fit its content when the bottom border of the row is double-clicked.

          Default value

          true

          Back to root property: behavior

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.allowRowAutoSizeOnDoubleClick = true;

          Read the nested value:

          const el = document.querySelector('smart-grid');
const allowRowAutoSizeOnDoubleClick = el.behavior.allowRowAutoSizeOnDoubleClick;
          Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

          allowRowReorderSpecifies whether the functionality to reorder rows—such as through drag-and-drop or other user interactions—is enabled. When set to true, users can change the order of rows within the table or list component.boolean

          Specifies whether the functionality to reorder rows—such as through drag-and-drop or other user interactions—is enabled. When set to true, users can change the order of rows within the table or list component.

          Default value

          false

          Back to root property: behavior

          Try a demo showcasing the allowRowReorder property.

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.allowRowReorder = true;

          Read the nested value:

          const el = document.querySelector('smart-grid');
const allowRowReorder = el.behavior.allowRowReorder;
          Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

          columnResizeModeSpecifies how column resizing is handled. In split mode, when a column is resized, its width increases or decreases, and the adjacent (next) column’s width is adjusted in the opposite direction, so the combined width of both columns remains constant. In growAndShrink mode, only the resized column's width changes; the widths of other columns remain unaffected."none" | "split" | "growAndShrink"

          Specifies how column resizing is handled.
          In split mode, when a column is resized, its width increases or decreases, and the adjacent (next) column’s width is adjusted in the opposite direction, so the combined width of both columns remains constant.
          In growAndShrink mode, only the resized column's width changes; the widths of other columns remain unaffected.

          Default value

          "none"

          Back to root property: behavior

          Try a demo showcasing the columnResizeMode property.

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.columnResizeMode = "split";

          Read the nested value:

          const el = document.querySelector('smart-grid');
const columnResizeMode = el.behavior.columnResizeMode;
          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

          rowResizeModeSpecifies how rows are resized within the container. - In the split resize mode, resizing a row will both increase or decrease the height of the target (resized) row and inversely adjust the height of the immediately following (sibling) row, ensuring the total height remains constant.- In the growAndShrink resize mode, only the targeted row's height is adjusted—either increasing or decreasing—without affecting the size of neighboring rows."none" | "split" | "growAndShrink"

          Specifies how rows are resized within the container.
          - In the split resize mode, resizing a row will both increase or decrease the height of the target (resized) row and inversely adjust the height of the immediately following (sibling) row, ensuring the total height remains constant.
          - In the growAndShrink resize mode, only the targeted row's height is adjusted—either increasing or decreasing—without affecting the size of neighboring rows.

          Default value

          "none"

          Back to root property: behavior

          Try a demo showcasing the rowResizeMode property.

          Examples

          Set a nested field on the element:

          const el = document.querySelector('smart-grid');
el.behavior.rowResizeMode = "split";

          Read the nested value:

          const el = document.querySelector('smart-grid');
const rowResizeMode = el.behavior.rowResizeMode;
          Related APIs behavior refresh() change

          chartingConfigures 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. Click for more details. Property object's options:
             object

            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.

            Properties

            appendToSpecifies the HTML element that serves as the container for the chart. When set, the chart will be rendered inside the given element. When retrieved, returns the current container element associated with the chart.
            colorSchemeSets or retrieves the color palette used for chart elements. This property accepts values that correspond to the 'colorScheme' options available in our Chart component, allowing you to customize or match the chart's appearance to your application's theme.
            dialog"Retrieves or configures the charting dialog component. Use this property to access the current charting dialog instance or to assign a new dialog interface for displaying and customizing chart settings within the application." Click for more details. Property object's options:
            • header:string - Sets or retrieves the text or content displayed in the dialog's header section. This property allows you to customize what appears at the top of the dialog, such as a title, instructions, or branding. When used as a setter, it updates the displayed header; when used as a getter, it returns the current header value.
            • height:number - Specifies or retrieves the height of the dialog window. When set, this property defines the vertical size of the dialog in pixels or other valid CSS units. When accessed, it returns the current height value applied to the dialog.
            • width:number - Specifies the width of the dialog. You can use this property to set a custom width for the dialog, or retrieve its current width value. Accepts values in CSS units such as pixels (e.g., '400px'), percentages (e.g., '50%'), or other valid CSS width formats.
            • left:string | number - Specifies or retrieves the horizontal position (in pixels) of the dialog's left edge relative to its containing element or the viewport. This property allows you to set where the dialog appears from the left side, or to obtain its current left offset.
            • top:string | number - Specifies or retrieves the distance, in pixels, between the top edge of the dialog and the top edge of the containing element or viewport. This property allows you to programmatically set or obtain the vertical position of the dialog on the screen.
            • enabled:boolean - Specifies or retrieves whether the dialog is currently enabled. When set to true, the dialog is active and can interact with user input; when set to false, the dialog is disabled and user interaction is blocked.
            • visible:boolean - Determines whether the dialog is currently visible on the screen. Returns true if the dialog is being displayed; otherwise, returns false.
            enabledSpecifies whether charting functionality is enabled. When set to true, charting features are available to users; when false, all chart-related features are disabled. This property can be used to retrieve the current status or to enable/disable charting dynamically.
            Try a demo showcasing the charting property.
            Related APIs appearance layout refresh() change

            appendToSpecifies the HTML element that serves as the container for the chart. When set, the chart will be rendered inside the given element. When retrieved, returns the current container element associated with the chart.string | HTMLElement

            Specifies the HTML element that serves as the container for the chart. When set, the chart will be rendered inside the given element. When retrieved, returns the current container element associated with the chart.

            Back to root property: charting

            Try a demo showcasing the appendTo property.

            Read the nested value:

            const el = document.querySelector('smart-grid');
const appendTo = el.charting.appendTo;

            colorSchemeSets or retrieves the color palette used for chart elements. This property accepts values that correspond to the 'colorScheme' options available in our Chart component, allowing you to customize or match the chart's appearance to your application's theme.string

            Sets or retrieves the color palette used for chart elements. This property accepts values that correspond to the 'colorScheme' options available in our Chart component, allowing you to customize or match the chart's appearance to your application's theme.

            Default value

            "scheme01"

            Back to root property: charting

            Try a demo showcasing the colorScheme property.

            Read the nested value:

            const el = document.querySelector('smart-grid');
const colorScheme = el.charting.colorScheme;
            Related APIs appearance layout refresh() change

            dialog"Retrieves or configures the charting dialog component. Use this property to access the current charting dialog instance or to assign a new dialog interface for displaying and customizing chart settings within the application." Click for more details. Property object's options:
               object


              "Retrieves or configures the charting dialog component. Use this property to access the current charting dialog instance or to assign a new dialog interface for displaying and customizing chart settings within the application."

              Properties

              enabledSpecifies or retrieves whether the dialog is currently enabled. When set to true, the dialog is active and can interact with user input; when set to false, the dialog is disabled and user interaction is blocked.
              headerSets or retrieves the text or content displayed in the dialog's header section. This property allows you to customize what appears at the top of the dialog, such as a title, instructions, or branding. When used as a setter, it updates the displayed header; when used as a getter, it returns the current header value.
              heightSpecifies or retrieves the height of the dialog window. When set, this property defines the vertical size of the dialog in pixels or other valid CSS units. When accessed, it returns the current height value applied to the dialog.
              leftSpecifies or retrieves the horizontal position (in pixels) of the dialog's left edge relative to its containing element or the viewport. This property allows you to set where the dialog appears from the left side, or to obtain its current left offset.
              topSpecifies or retrieves the distance, in pixels, between the top edge of the dialog and the top edge of the containing element or viewport. This property allows you to programmatically set or obtain the vertical position of the dialog on the screen.
              visibleDetermines whether the dialog is currently visible on the screen. Returns true if the dialog is being displayed; otherwise, returns false.
              widthSpecifies the width of the dialog. You can use this property to set a custom width for the dialog, or retrieve its current width value. Accepts values in CSS units such as pixels (e.g., '400px'), percentages (e.g., '50%'), or other valid CSS width formats.

              Back to root property: charting

              Try a demo showcasing the dialog property.

              Read the nested value:

              const el = document.querySelector('smart-grid');
const dialog = el.charting.dialog;

              enabledSpecifies or retrieves whether the dialog is currently enabled. When set to true, the dialog is active and can interact with user input; when set to false, the dialog is disabled and user interaction is blocked.boolean

              Specifies or retrieves whether the dialog is currently enabled. When set to true, the dialog is active and can interact with user input; when set to false, the dialog is disabled and user interaction is blocked.

              Default value

              true

              Back to root property: charting

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.dialog.enabled = true;

              Read the nested value:

              const el = document.querySelector('smart-grid');
const enabled = el.charting.dialog.enabled;

              headerSets or retrieves the text or content displayed in the dialog's header section. This property allows you to customize what appears at the top of the dialog, such as a title, instructions, or branding. When used as a setter, it updates the displayed header; when used as a getter, it returns the current header value.string

              Sets or retrieves the text or content displayed in the dialog's header section. This property allows you to customize what appears at the top of the dialog, such as a title, instructions, or branding. When used as a setter, it updates the displayed header; when used as a getter, it returns the current header value.

              Default value

              "{{message}}"

              Back to root property: charting

              Try a demo showcasing the header property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.dialog.header = "Edit chart";

              Read the nested value:

              const el = document.querySelector('smart-grid');
const header = el.charting.dialog.header;
              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

              heightSpecifies or retrieves the height of the dialog window. When set, this property defines the vertical size of the dialog in pixels or other valid CSS units. When accessed, it returns the current height value applied to the dialog.number

              Specifies or retrieves the height of the dialog window. When set, this property defines the vertical size of the dialog in pixels or other valid CSS units. When accessed, it returns the current height value applied to the dialog.

              Default value

              400

              Back to root property: charting

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.dialog.height = 400;

              Read the nested value:

              const el = document.querySelector('smart-grid');
const height = el.charting.dialog.height;

              leftSpecifies or retrieves the horizontal position (in pixels) of the dialog's left edge relative to its containing element or the viewport. This property allows you to set where the dialog appears from the left side, or to obtain its current left offset.string | number

              Specifies or retrieves the horizontal position (in pixels) of the dialog's left edge relative to its containing element or the viewport. This property allows you to set where the dialog appears from the left side, or to obtain its current left offset.

              Default value

              center

              Back to root property: charting

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.dialog.left = "center";

              Read the nested value:

              const el = document.querySelector('smart-grid');
const left = el.charting.dialog.left;

              topSpecifies or retrieves the distance, in pixels, between the top edge of the dialog and the top edge of the containing element or viewport. This property allows you to programmatically set or obtain the vertical position of the dialog on the screen.string | number

              Specifies or retrieves the distance, in pixels, between the top edge of the dialog and the top edge of the containing element or viewport. This property allows you to programmatically set or obtain the vertical position of the dialog on the screen.

              Default value

              center

              Back to root property: charting

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.dialog.top = "center";

              Read the nested value:

              const el = document.querySelector('smart-grid');
const top = el.charting.dialog.top;

              visibleDetermines whether the dialog is currently visible on the screen. Returns true if the dialog is being displayed; otherwise, returns false.boolean

              Determines whether the dialog is currently visible on the screen. Returns true if the dialog is being displayed; otherwise, returns false.

              Default value

              false

              Back to root property: charting

              Try a demo showcasing the visible property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.dialog.visible = true;

              Read the nested value:

              const el = document.querySelector('smart-grid');
const visible = el.charting.dialog.visible;

              widthSpecifies the width of the dialog. You can use this property to set a custom width for the dialog, or retrieve its current width value. Accepts values in CSS units such as pixels (e.g., '400px'), percentages (e.g., '50%'), or other valid CSS width formats.number

              Specifies the width of the dialog. You can use this property to set a custom width for the dialog, or retrieve its current width value. Accepts values in CSS units such as pixels (e.g., '400px'), percentages (e.g., '50%'), or other valid CSS width formats.

              Default value

              400

              Back to root property: charting

              Try a demo showcasing the width property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.dialog.width = 400;

              Read the nested value:

              const el = document.querySelector('smart-grid');
const width = el.charting.dialog.width;

              enabledSpecifies whether charting functionality is enabled. When set to true, charting features are available to users; when false, all chart-related features are disabled. This property can be used to retrieve the current status or to enable/disable charting dynamically.boolean

              Specifies whether charting functionality is enabled. When set to true, charting features are available to users; when false, all chart-related features are disabled. This property can be used to retrieve the current status or to enable/disable charting dynamically.

              Default value

              false

              Back to root property: charting

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.charting.enabled = true;

              Read the nested value:

              const el = document.querySelector('smart-grid');
const enabled = el.charting.enabled;

              checkBoxesConfigures the checkbox options for the TreeGrid component, allowing you to enable or customize checkbox display, selection behavior, and interaction within the hierarchical grid structure. object

              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.

              Properties

              hasThreeStatesEnables or disables the three-state mode for TreeGrid checkboxes. When three-state mode is enabled, selecting or deselecting a checkbox will cascade the change to all its child rows, and parent row checkboxes will automatically reflect the checked, unchecked, or indeterminate state based on the selection status of their child rows. This ensures hierarchical relationships are visually and functionally represented in the checkbox states.
              visibleControls whether the checkboxes in the TreeGrid are displayed or hidden, allowing you to enable or disable checkbox visibility for tree nodes.
              Try a demo showcasing the checkBoxes property.
              Related APIs behavior refresh() change

              hasThreeStatesEnables or disables the three-state mode for TreeGrid checkboxes. When three-state mode is enabled, selecting or deselecting a checkbox will cascade the change to all its child rows, and parent row checkboxes will automatically reflect the checked, unchecked, or indeterminate state based on the selection status of their child rows. This ensures hierarchical relationships are visually and functionally represented in the checkbox states.boolean

              Enables or disables the three-state mode for TreeGrid checkboxes. When three-state mode is enabled, selecting or deselecting a checkbox will cascade the change to all its child rows, and parent row checkboxes will automatically reflect the checked, unchecked, or indeterminate state based on the selection status of their child rows. This ensures hierarchical relationships are visually and functionally represented in the checkbox states.

              Default value

              false

              Back to root property: checkBoxes

              Try a demo showcasing the hasThreeStates property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.checkBoxes[0].hasThreeStates = true;

              Read the nested value:

              const el = document.querySelector('smart-grid');
const hasThreeStates = el.checkBoxes[0].hasThreeStates;
              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

              visibleControls whether the checkboxes in the TreeGrid are displayed or hidden, allowing you to enable or disable checkbox visibility for tree nodes.boolean

              Controls whether the checkboxes in the TreeGrid are displayed or hidden, allowing you to enable or disable checkbox visibility for tree nodes.

              Default value

              false

              Back to root property: checkBoxes

              Try a demo showcasing the visible property.

              Examples

              Set a nested field on the element:

              const el = document.querySelector('smart-grid');
el.checkBoxes[0].visible = true;

              Read the nested value:

              const el = document.querySelector('smart-grid');
const visible = el.checkBoxes[0].visible;

              clipboardThe 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. Click for more details. Property object's options:
                 object

                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.

                Properties

                autoFillModeDefines whether and how the values of copied and pasted cells are automatically filled using pattern detection during Drag & Drop or multiple cell selection operations. This setting determines how pasted data is handled:- 'none': No auto-fill or pattern detection is applied. Pasted cells remain as they are, with no changes or repetition beyond what was directly copied.- 'copy': The exact cell values are duplicated into the new locations without attempting to follow or extend any logical sequence or pattern.- 'fillSeries': Enables automatic pattern detection and series continuation. If the selection forms a recognizable sequence—for example, '1, 2'—the pasted cells will extend this pattern (e.g., '1, 2, 3, 4, ...'), filling additional cells with the next values in the detected sequence.This option helps users quickly extend numeric, date, or other discernible patterns when dragging or pasting multiple cells.
                copyHeadersToClipboardDetermines whether the column headers are included when copying data to the clipboard. When enabled, copying data will also copy the column headers; when disabled, only the data will be copied. This setting can be used to set or retrieve the current behavior.
                enabledSpecifies whether the property is currently active (enabled) or inactive (disabled). You can use this setting to retrieve the current status or to enable or disable the property as needed.
                onPasteValueDefines or retrieves a callback function that is triggered when a paste event occurs, allowing custom handling of pasted content.

                autoFillModeDefines whether and how the values of copied and pasted cells are automatically filled using pattern detection during Drag & Drop or multiple cell selection operations. This setting determines how pasted data is handled:- 'none': No auto-fill or pattern detection is applied. Pasted cells remain as they are, with no changes or repetition beyond what was directly copied.- 'copy': The exact cell values are duplicated into the new locations without attempting to follow or extend any logical sequence or pattern.- 'fillSeries': Enables automatic pattern detection and series continuation. If the selection forms a recognizable sequence—for example, '1, 2'—the pasted cells will extend this pattern (e.g., '1, 2, 3, 4, ...'), filling additional cells with the next values in the detected sequence.This option helps users quickly extend numeric, date, or other discernible patterns when dragging or pasting multiple cells."none" | "copy" | "fillSeries"

                Defines whether and how the values of copied and pasted cells are automatically filled using pattern detection during Drag & Drop or multiple cell selection operations. This setting determines how pasted data is handled:

                - 'none': No auto-fill or pattern detection is applied. Pasted cells remain as they are, with no changes or repetition beyond what was directly copied.
                - 'copy': The exact cell values are duplicated into the new locations without attempting to follow or extend any logical sequence or pattern.
                - 'fillSeries': Enables automatic pattern detection and series continuation. If the selection forms a recognizable sequence—for example, '1, 2'—the pasted cells will extend this pattern (e.g., '1, 2, 3, 4, ...'), filling additional cells with the next values in the detected sequence.

                This option helps users quickly extend numeric, date, or other discernible patterns when dragging or pasting multiple cells.

                Default value

                "fillSeries"

                Back to root property: clipboard

                Examples

                Set a nested field on the element:

                const el = document.querySelector('smart-grid');
el.clipboard.autoFillMode = "copy";

                Read the nested value:

                const el = document.querySelector('smart-grid');
const autoFillMode = el.clipboard.autoFillMode;
                Related APIs behavior refresh() change

                copyHeadersToClipboardDetermines whether the column headers are included when copying data to the clipboard. When enabled, copying data will also copy the column headers; when disabled, only the data will be copied. This setting can be used to set or retrieve the current behavior.boolean

                Determines whether the column headers are included when copying data to the clipboard. When enabled, copying data will also copy the column headers; when disabled, only the data will be copied. This setting can be used to set or retrieve the current behavior.

                Default value

                false

                Back to root property: clipboard

                Examples

                Set a nested field on the element:

                const el = document.querySelector('smart-grid');
el.clipboard.copyHeadersToClipboard = true;

                Read the nested value:

                const el = document.querySelector('smart-grid');
const copyHeadersToClipboard = el.clipboard.copyHeadersToClipboard;
                Related APIs behavior refresh() change

                enabledSpecifies whether the property is currently active (enabled) or inactive (disabled). You can use this setting to retrieve the current status or to enable or disable the property as needed.boolean

                Specifies whether the property is currently active (enabled) or inactive (disabled). You can use this setting to retrieve the current status or to enable or disable the property as needed.

                Default value

                true

                Back to root property: clipboard

                Examples

                Set a nested field on the element:

                const el = document.querySelector('smart-grid');
el.clipboard.enabled = true;

                Read the nested value:

                const el = document.querySelector('smart-grid');
const enabled = el.clipboard.enabled;

                onPasteValueDefines or retrieves a callback function that is triggered when a paste event occurs, allowing custom handling of pasted content.{(args: {value: any, oldValue: any, dataField: string, id: string | number}): void}

                Defines or retrieves a callback function that is triggered when a paste event occurs, allowing custom handling of pasted content.

                Back to root property: clipboard

                Read the nested value:

                const el = document.querySelector('smart-grid');
const onPasteValue = el.clipboard.onPasteValue;

                columnGroupsProvides a detailed configuration of column group settings, including group names, ordering, visibility, and any hierarchical relationships between columns within the group. Click for more details. Property object's options:
                  {label: string, name: string, align: 'left' | 'center' | 'right', verticalAlign: 'top' | 'center' | 'bottom', parentGroup: string}[]

                  Provides a detailed configuration of column group settings, including group names, ordering, visibility, and any hierarchical relationships between columns within the group.

                  Properties

                  alignSets the align.
                  collapsibleSets whether the column group can be collapsed.
                  labelSets the label.
                  labelTemplateSets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
                  nameSets the name of the column group.
                  parentGroupSets the name of the parent column group.
                  verticalAlignSets the vertical align.
                  Try a demo showcasing the columnGroups property. 
                  Example about columnGroups
                  
const grid = new Smart.Grid('#grid', {
	dataSource: new Smart.DataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	columnGroups: [{ label: 'Name', align: 'center', name: 'name'}],
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
                  Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                  alignSets the align."left" | "center" | "right"

                  Sets the align.

                  Default value

                  "center"

                  Back to root property: columnGroups

                  Try a demo showcasing the align property.

                  Examples

                  Set a nested field on the element:

                  const el = document.querySelector('smart-grid');
el.columnGroups[0].align = "right";

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const align = el.columnGroups[0].align;

                  collapsibleSets whether the column group can be collapsed.boolean

                  Sets whether the column group can be collapsed.

                  Default value

                  false

                  Back to root property: columnGroups

                  Try a demo showcasing the collapsible property.

                  Examples

                  Set a nested field on the element:

                  const el = document.querySelector('smart-grid');
el.columnGroups[0].collapsible = true;

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const collapsible = el.columnGroups[0].collapsible;
                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                  labelSets the label.string

                  Sets the label.

                  Default value

                  ""

                  Back to root property: columnGroups

                  Try a demo showcasing the label property.

                  Examples

                  Set a nested field on the element:

                  const el = document.querySelector('smart-grid');
el.columnGroups[0].label = "Date";

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const label = el.columnGroups[0].label;

                  labelTemplateSets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.string | HTMLTemplateElement | HTMLElement | {(label: string): string}

                  Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.

                  Default value

                  ""

                  Back to root property: columnGroups

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const labelTemplate = el.columnGroups[0].labelTemplate;
                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                  nameSets the name of the column group.string

                  Sets the name of the column group.

                  Default value

                  ""

                  Back to root property: columnGroups

                  Try a demo showcasing the name property.

                  Examples

                  Set a nested field on the element:

                  const el = document.querySelector('smart-grid');
el.columnGroups[0].name = "Date";

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const name = el.columnGroups[0].name;
                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                  parentGroupSets the name of the parent column group.string

                  Sets the name of the parent column group.

                  Default value

                  ""

                  Back to root property: columnGroups

                  Try a demo showcasing the parentGroup property.

                  Examples

                  Set a nested field on the element:

                  const el = document.querySelector('smart-grid');
el.columnGroups[0].parentGroup = "Project";

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const parentGroup = el.columnGroups[0].parentGroup;
                  Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                  verticalAlignSets the vertical align."top" | "center" | "bottom"

                  Sets the vertical align.

                  Default value

                  "center"

                  Back to root property: columnGroups

                  Try a demo showcasing the verticalAlign property.

                  Examples

                  Set a nested field on the element:

                  const el = document.querySelector('smart-grid');
el.columnGroups[0].verticalAlign = "center";

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const verticalAlign = el.columnGroups[0].verticalAlign;

                  columnHeaderProvides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid. object

                  Provides configuration options for customizing the appearance, labels, alignment, and behavior of column headers in a data table or grid.

                  Properties

                  visibleControls whether the column headers are displayed or hidden in the table or grid component.
                  Related APIs columns addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                  visibleControls whether the column headers are displayed or hidden in the table or grid component.boolean

                  Controls whether the column headers are displayed or hidden in the table or grid component.

                  Default value

                  true

                  Back to root property: columnHeader

                  Try a demo showcasing the visible property.

                  Read the nested value:

                  const el = document.querySelector('smart-grid');
const visible = el.columnHeader.visible;
                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                  columnMenuThe 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. Click for more details. Property object's options:
                     object

                    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.

                    Properties

                    autoCloseAutomatically closes the column menu when it is open. This ensures the menu is hidden from view, typically after a user action such as selecting an option or clicking outside the menu. This helps improve user experience by keeping the interface clean and responsive.
                    dataSourceSpecifies the data sources available for selection or display within the column menu, allowing users to choose or interact with different data sets directly from the column menu interface. Click for more details. Property object's options:
                    • columnMenuCustomizeType:object - Provides configuration options for customizing the appearance and behavior of the column menu, including settings for menu item visibility, ordering, and custom actions.
                    • columnMenuItemRename:object - Provides configuration options for the "Rename" item within a column menu. Defines how the rename functionality behaves and appears in the column menu, including available settings such as labels, visibility, and callbacks for renaming actions.
                    • columnMenuItemEditDescription:object - Provides configuration options for customizing the edit description feature within a column menu item, allowing you to define how the description field appears, behaves, and is edited by users in the menu.
                    • columnMenuItemClone:object - Provides the configuration options for the "Duplicate" item within the column menu, allowing developers to customize its behavior, appearance, and availability in the user interface.
                    • columnMenuItemInsertLeft:object - Provides the configuration settings for the "Insert Left" option in the column menu, allowing customization of its behavior, appearance, and availability within the user interface.
                    • columnMenuItemInsertRight:object - Provides detailed configuration options for the "Insert Right" menu item within a column menu. Specifies how the "Insert Right" action appears and behaves when users interact with the column menu, including display text, icons, visibility, and event handling.
                    • columnMenuItemSortAsc:object - Provides configuration options for the "Sort Ascending" item in the column menu, allowing you to customize its appearance, behavior, and availability within the menu. This includes enabling or disabling the sort option, modifying its display text, and adjusting its icon or associated actions.
                    • columnMenuItemSortDesc:object - Provides configuration options for the "Sort Descending" action within the column menu, allowing customization of its appearance, behavior, and accessibility in sortable grid or table components.
                    • columnMenuItemSort:object - Provides configuration options for the column menu item that enables users to add sorting functionality to table columns, allowing customization of sorting behavior and display within the column menu.
                    • columnMenuItemRemoveSort:object - Provides configuration options for the "Remove Sort" item within a column's menu, allowing you to customize its appearance, behavior, and availability in the column menu interface.
                    • columnMenuItemFilter:object - Provides detailed configuration options for the filter functionality within a column menu item, allowing customization of filtering behavior, appearance, and available filter types in the column menu of a data grid or table component.
                    • columnMenuItemRemoveFilter:object - Provides configuration options for the "Remove Filter" item within the column menu, allowing customization of its appearance, behavior, and availability.
                    • columnMenuItemGroupBy:object - Provides the configuration options for the 'Group By' item within the column menu, allowing customization of grouping behavior, display text, and related features in the column menu interface.
                    • columnMenuItemRemoveGroupBy:object - Provides configuration options for the "Group By" feature within a column menu, allowing you to customize how columns are grouped, displayed, and interacted with in the menu interface.
                    • columnMenuItemHide:object - Provides the configuration options for the "Hide" menu item within the column menu, allowing developers to control the visibility settings and behavior of column hiding functionality in the grid.
                    • columnMenuItemDelete:object - Provides configuration options for the "Delete" item within the column menu, allowing you to customize its behavior, appearance, and availability in the menu.
                    enabledControls the visibility of the column menu. When set to true, the column menu appears when the user hovers over the column header, providing additional options for manipulating the column. If set to false, the column menu is disabled and will not be displayed on hover. This property can be used to enable or disable the column menu programmatically.
                    heightDefines the vertical height, in pixels, of the column menu component. Adjusting this value determines how much vertical space the column menu occupies, which can impact the display and usability of the menu's content items.
                    visibleRetrieves the current visibility status of the column menu. This function returns true if the column menu is currently displayed to the user; otherwise, it returns false.
                    widthSpecifies the width, in pixels, of the column menu panel. This determines how wide the menu appears when a user opens the column options in the table or grid interface. Adjust this value to control the available space for menu items and improve usability.
                    Try a demo showcasing the columnMenu property.
                    Related APIs appearance layout refresh() change

                    autoCloseAutomatically closes the column menu when it is open. This ensures the menu is hidden from view, typically after a user action such as selecting an option or clicking outside the menu. This helps improve user experience by keeping the interface clean and responsive.boolean

                    Automatically closes the column menu when it is open. This ensures the menu is hidden from view, typically after a user action such as selecting an option or clicking outside the menu. This helps improve user experience by keeping the interface clean and responsive.

                    Default value

                    true

                    Back to root property: columnMenu

                    Examples

                    Set a nested field on the element:

                    const el = document.querySelector('smart-grid');
el.columnMenu.autoClose = true;

                    Read the nested value:

                    const el = document.querySelector('smart-grid');
const autoClose = el.columnMenu.autoClose;
                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                    dataSourceSpecifies the data sources available for selection or display within the column menu, allowing users to choose or interact with different data sets directly from the column menu interface. Click for more details. Property object's options:
                       object

                      Specifies the data sources available for selection or display within the column menu, allowing users to choose or interact with different data sets directly from the column menu interface.

                      Properties

                      columnMenuCustomizeTypeProvides configuration options for customizing the appearance and behavior of the column menu, including settings for menu item visibility, ordering, and custom actions. Click for more details. Property object's options:
                      • command:string - Specifies the command associated with the custom type in the column menu. This determines the action or operation that will be executed when the customized menu item is selected.
                      • enabled:boolean - Allows you to customize the column menu type, enabling the selection or configuration of different menu layouts and options for columns. This property provides flexibility to tailor the appearance and functionality of the column menu according to your application’s requirements.
                      • visible:boolean - Controls whether the column menu's customization options are visible to the user. When enabled, users can access and modify column settings through the column menu interface.
                      • icon:string - Specifies the icon displayed for the customized column menu type. This property allows you to define a specific icon that represents the customized menu in the column header, enhancing usability and visual distinction within the user interface.
                      • label:string - Specifies the label text displayed for the customized column menu type. This determines the visible name or title shown in the menu for the corresponding column, helping users identify the menu's purpose or functionality.
                      columnMenuItemCloneProvides the configuration options for the "Duplicate" item within the column menu, allowing developers to customize its behavior, appearance, and availability in the user interface. Click for more details. Property object's options:
                      • command:string - Specifies the command to be executed when the "Duplicate" option is selected from the column menu. This determines the action that occurs when a user chooses to duplicate a column.
                      • visible:boolean - Controls whether the "Duplicate" option appears in the column menu, enabling users to duplicate columns when it is visible.
                      • enabled:boolean - Enables the "Duplicate" option in the column menu, allowing users to create a copy of an existing column with its current settings.
                      • icon:string - Specifies the icon displayed for the "Duplicate" option within the column menu, allowing customization of its visual representation.
                      • label:string - Specifies the text displayed for the "Duplicate" option in the column menu, allowing users to duplicate a column. This label helps identify the action to copy or replicate a column within the menu interface.
                      columnMenuItemDeleteProvides configuration options for the "Delete" item within the column menu, allowing you to customize its behavior, appearance, and availability in the menu. Click for more details. Property object's options:
                      • command:string - Specifies the command to be executed when the "Delete" item is selected from the column menu. This determines the action performed when a user chooses to delete a column via the menu.
                      • enabled:boolean - Allows users to access and use the "Delete" option within the column menu, enabling them to remove specific columns from the table through the menu interface.
                      • visible:boolean - Controls whether the "Delete" option is visible in the column menu. If set to true, users will see and be able to select "Delete" from the column menu; if set to false, the "Delete" option will be hidden from the menu.
                      • icon:string - Specifies the icon displayed for the "Delete" option in the column menu, allowing you to customize the visual representation of the delete action within the column menu dropdown.
                      • label:string - Defines the text displayed for the "Delete" option in the column menu, allowing you to customize the label that appears when users interact with the column’s menu.
                      columnMenuItemEditDescriptionProvides configuration options for customizing the edit description feature within a column menu item, allowing you to define how the description field appears, behaves, and is edited by users in the menu. Click for more details. Property object's options:
                      • command:string - Defines the command that executes when the "Edit Description" option is selected in the column menu item, specifying the action or function to be performed.
                      • enabled:boolean - Allows customization of the description text displayed in the column menu’s "Edit" item. This setting lets you modify or enable the descriptive tooltip or label that appears when users interact with the "Edit" option in the column menu, improving accessibility and user guidance.
                      • visible:boolean - Controls whether the "Edit Description" option appears in the column menu. When enabled, users can access and modify the description of the column through the menu; when disabled, the option is hidden from the column menu.
                      • icon:string - Sets the icon displayed in the column menu for the "Edit Description" menu item. This property allows you to customize the visual icon that appears next to the "Edit Description" option in the column menu, helping users quickly identify the action.
                      • label:string - Specifies the text label displayed for the "Edit Description" option in the column menu. This label helps users identify the action to edit the description associated with a column within the menu interface. Adjust this value to customize the menu item’s text for localization or branding purposes.
                      columnMenuItemFilterProvides detailed configuration options for the filter functionality within a column menu item, allowing customization of filtering behavior, appearance, and available filter types in the column menu of a data grid or table component. Click for more details. Property object's options:
                      • command:string - Specifies the command to be executed when the filter option in the column menu is selected. This determines the action that occurs when a user chooses to filter a column via the menu.
                      • visible:string - Controls whether the filter option is displayed in the column menu. When enabled, users can access and apply filters to the column through the menu. Disabling this option hides the filter functionality from the column menu.
                      • enabled:boolean - Activates the filter option within the column menu, allowing users to filter data based on values within the selected column. This feature adds a filtering interface to the column menu, making it easier to display only the rows that meet specific criteria.
                      • icon:string - Specifies the icon displayed for the filter option in the column menu. This allows customization of the filter menu item's icon to improve user interface consistency and visual recognition.
                      • label:string - Defines the text label displayed for the filter option within the column menu. This label helps users identify and access filtering functionality for the column in the data grid or table interface.
                      columnMenuItemGroupByProvides the configuration options for the 'Group By' item within the column menu, allowing customization of grouping behavior, display text, and related features in the column menu interface. Click for more details. Property object's options:
                      • command:string - Specifies the command that is executed when the "Group By" option is selected in the column menu item group. This determines the action performed when a user chooses to group data by a specific column using the menu.
                      • enabled:boolean - Enables the "Group By" option in the column menu, allowing users to group data rows based on the selected column directly from the menu.
                      • visible:string - Controls whether the "Group By" option is visible in the column menu, allowing users to group table data by the selected column when enabled.
                      • icon:string - Specifies the icon displayed for the "Group by" option within the column menu, allowing customization of the visual indicator associated with the grouping functionality.
                      • label:string - Defines the text label displayed for the "Group by" option within the column menu, allowing users to group data in the column accordingly.
                      columnMenuItemHideProvides the configuration options for the "Hide" menu item within the column menu, allowing developers to control the visibility settings and behavior of column hiding functionality in the grid. Click for more details. Property object's options:
                      • command:string - Specifies the command that is executed when the "Hide" option is selected from the column menu, typically used to hide the associated column from view in a data grid or table.
                      • enabled:boolean - Allows users to hide or display specific columns through the column menu. When enabled, a “Hide” option appears in the column menu, letting users control the visibility of individual columns in the data grid or table.
                      • visible:boolean - Sets whether the "Hide" option is visible in the column menu. If enabled, users can choose to hide the column from view using the menu. If disabled, the "Hide" option will not appear in the column menu, preventing users from hiding the column through the UI.
                      • icon:string - Specifies the icon displayed next to the "Hide Column" option in the column menu. Adjust this property to customize the appearance of the hide action within the column menu.
                      • label:string - Specifies the text label displayed for the "Hide Column" menu item in the column options menu. This label determines how the action to hide a column is presented to users within the column menu.
                      columnMenuItemInsertLeftProvides the configuration settings for the "Insert Left" option in the column menu, allowing customization of its behavior, appearance, and availability within the user interface. Click for more details. Property object's options:
                      • command:string - Specifies the command executed when the "Insert Left" option is selected from the column menu. This command typically adds a new column to the left of the selected column in a table or grid.
                      • visible:boolean - Controls whether the "Insert Left" option is visible in the column menu. When enabled, users can insert a new column to the left of the selected column via the menu.
                      • enabled:boolean - Enables the "Insert Left" option in the column menu, allowing users to add a new column to the left of the selected column.
                      • icon:string - Specifies the icon to display for the "Insert Left" option in the column menu. This icon visually represents the action of inserting a new column to the left of the selected column in the menu interface.
                      • label:string - Sets the text label displayed for the "Insert Left" option in the column menu. This label appears in the menu that allows users to insert a new column to the left of the selected column.
                      columnMenuItemInsertRightProvides detailed configuration options for the "Insert Right" menu item within a column menu. Specifies how the "Insert Right" action appears and behaves when users interact with the column menu, including display text, icons, visibility, and event handling. Click for more details. Property object's options:
                      • command:string - Specifies the command executed when the "Insert Right" option is selected from the column menu item. This command typically adds a new column to the right of the currently selected column.
                      • visible:boolean - Controls the visibility of the "Insert Right" option in the column menu. When enabled, users can add a new column to the right of the selected column through the menu.
                      • enabled:boolean - Allows users to insert a new column to the right of the selected column via the column menu.
                      • icon:string - Specifies the icon displayed for the "Insert Right" item in the column menu. This icon visually represents the action of inserting a new column to the right of the selected column in the menu interface.
                      • label:string - Sets the text label displayed for the "Insert Right" option in the column menu.
                      columnMenuItemRemoveFilterProvides configuration options for the "Remove Filter" item within the column menu, allowing customization of its appearance, behavior, and availability. Click for more details. Property object's options:
                      • command:string - Specifies the command that is executed when the "Remove Filter" option is selected from the column menu. This determines the action taken to clear filters applied to the selected column.
                      • enabled:boolean - Allows users to access the "Remove Filter" option within the column menu, enabling them to quickly clear any filters applied to that column from the menu interface.
                      • visible:string - Controls whether the "Remove Filter" option is visible in the column menu. When enabled, users can access the option to clear applied filters from the specific column through the menu. Disabling this will hide the "Remove Filter" menu item, preventing users from removing filters via the column menu interface.
                      • icon:string - Specifies the icon displayed for the "Remove Filter" option in the column menu, allowing you to customize the visual appearance of the menu item that clears applied filters from the column.
                      • label:string - Defines the text displayed for the "Remove Filter" option in the column menu, allowing users to clear any applied filters from the selected column.
                      columnMenuItemRemoveGroupByProvides configuration options for the "Group By" feature within a column menu, allowing you to customize how columns are grouped, displayed, and interacted with in the menu interface. Click for more details. Property object's options:
                      • command:string - Defines the command executed when the "group by" option is selected in the column menu, allowing customization of the grouping action for the column.
                      • enabled:boolean - Allows users to group columns through the column menu by enabling the "Group By" option. When activated, this feature displays a "Group By" menu item within the column menu, letting users organize and group data directly from the grid’s column interface.
                      • visible:string - Controls whether the "group by" option appears in the column menu, allowing users to group table data by the selected column. When enabled, the "group by" menu item is visible; when disabled, it is hidden from the column menu.
                      • icon:string - Specifies the icon displayed for the "Group By" option within the column menu item group. This icon visually represents the grouping functionality in the column menu for improved user recognition and interaction.
                      • label:string - Specifies the text label displayed for the "Group by" option within the column menu, allowing users to group data in the table by the selected column.
                      columnMenuItemRemoveSortProvides configuration options for the "Remove Sort" item within a column's menu, allowing you to customize its appearance, behavior, and availability in the column menu interface. Click for more details. Property object's options:
                      • command:string - Defines the command executed when the "Remove Sort" option is selected in the column menu. This command is triggered to clear any sorting applied to the corresponding column.
                      • visible:string - Controls whether the "Remove Sort" option appears in the column menu, allowing users to clear any applied sorting on that column. When enabled, users can remove the current sort order directly from the column's context menu.
                      • enabled:boolean - Allows users to access the "Remove Sort" option within the column menu, enabling them to clear any applied sorting on the selected column.
                      • icon:string - Specifies the icon displayed for the "Remove Sort" option in the column menu. This icon visually represents the action and helps users identify the functionality to clear any active sorting applied to the column.
                      • label:string - Defines the text displayed for the "Remove Sort" option in the column menu, allowing users to clear any applied sorting on that column.
                      columnMenuItemRenameProvides configuration options for the "Rename" item within a column menu. Defines how the rename functionality behaves and appears in the column menu, including available settings such as labels, visibility, and callbacks for renaming actions. Click for more details. Property object's options:
                      • command:string - Specifies the command to be executed when the "Rename" option is selected in the column menu. This command defines the behavior that occurs when a user chooses to rename a column from the menu interface.
                      • enabled:boolean - Allows users to rename columns through an option in the column menu. When enabled, a "Rename" item appears in the column menu, letting users modify the column header text directly from the menu interface.
                      • visible:boolean - Controls whether the "Rename" option is visible in the column menu, allowing users to rename columns if enabled.
                      • icon:string - Specifies the icon displayed next to the "Rename" option in the column menu, allowing you to customize its appearance.
                      • label:string - Defines the text displayed for the "Rename" option in the column menu, allowing users to rename a column.
                      columnMenuItemSortProvides configuration options for the column menu item that enables users to add sorting functionality to table columns, allowing customization of sorting behavior and display within the column menu. Click for more details. Property object's options:
                      • command:string - Specifies the command executed when the column menu item is selected, enabling the addition of sorting functionality to the corresponding column. This allows users to sort the column's data directly from the column menu.
                      • visible:string - Controls whether the "Sort" option is displayed in the column menu. When enabled, users can access sorting features directly from the column header menu. Disabling this option hides the sorting functionality from the column menu, preventing users from sorting the column through the menu interface.
                      • enabled:boolean - Enables the sorting functionality within the column menu, allowing users to sort data in ascending or descending order directly from the column header menu.
                      • icon:string - Specifies the icon displayed next to the "Sort" option in the column menu, allowing customization of its appearance to match your application's design or user preferences.
                      • label:string - Specifies the text label displayed for the "Sort" menu item within the column menu, allowing customization of the sort option’s name for user interfaces.
                      columnMenuItemSortAscProvides configuration options for the "Sort Ascending" item in the column menu, allowing you to customize its appearance, behavior, and availability within the menu. This includes enabling or disabling the sort option, modifying its display text, and adjusting its icon or associated actions. Click for more details. Property object's options:
                      • command:string - Specifies the command executed when the column menu item's "Sort Ascending" option is selected. This command typically sorts the data in the column in ascending order when triggered.
                      • visible:string - Controls whether the "Sort Ascending" option is visible in the column menu. When enabled, users can access the "Sort Ascending" action from the column menu; when disabled, this sorting option will be hidden from the menu.
                      • enabled:boolean - Allows users to sort the column in ascending order via the column menu option. When enabled, a "Sort Ascending" item appears in the column menu, letting users sort the column’s data from lowest to highest or A to Z.
                      • icon:string - Specifies the icon displayed for the "Sort Ascending" option within the column menu. This icon visually indicates the action of sorting the column's data in ascending order when selected by the user.
                      • label:string - Specifies the text label displayed for the "Sort Ascending" option within the column menu, allowing users to sort the selected column in ascending order.
                      columnMenuItemSortDescProvides configuration options for the "Sort Descending" action within the column menu, allowing customization of its appearance, behavior, and accessibility in sortable grid or table components. Click for more details. Property object's options:
                      • command:string - Configures the action for the column menu item that triggers sorting in descending order. This option defines the command executed when the user selects "Sort Descending" from a column's menu, typically reordering the column data from highest to lowest or Z to A.
                      • visible:string - Controls whether the "Sort Descending" option is visible in the column menu. When enabled, users can access and use the "Sort Descending" action from the column menu. When disabled, the "Sort Descending" menu item will be hidden, preventing users from sorting the column in descending order through the menu interface.
                      • enabled:boolean - Enables the "Sort Descending" option in the column menu, allowing users to sort the data in the selected column from highest to lowest or in reverse alphabetical order.
                      • icon:string - Specifies the icon displayed for the "Sort Descending" option in the column menu. This icon is used to visually indicate the action of sorting the column's data in descending order.
                      • label:string - Specifies the text label displayed for the "Sort Descending" option in the column menu. This label helps users identify and select the action to sort the column’s data in descending order.

                      Back to root property: columnMenu

                      Try a demo showcasing the dataSource property.

                      Read the nested value:

                      const el = document.querySelector('smart-grid');
const dataSource = el.columnMenu.dataSource;
                      Related APIs refresh() beginUpdate() endUpdate() change

                      columnMenuCustomizeTypeProvides configuration options for customizing the appearance and behavior of the column menu, including settings for menu item visibility, ordering, and custom actions. Click for more details. Property object's options:
                         object

                        Provides configuration options for customizing the appearance and behavior of the column menu, including settings for menu item visibility, ordering, and custom actions.

                        Properties

                        commandSpecifies the command associated with the custom type in the column menu. This determines the action or operation that will be executed when the customized menu item is selected.
                        enabledAllows you to customize the column menu type, enabling the selection or configuration of different menu layouts and options for columns. This property provides flexibility to tailor the appearance and functionality of the column menu according to your application’s requirements.
                        iconSpecifies the icon displayed for the customized column menu type. This property allows you to define a specific icon that represents the customized menu in the column header, enhancing usability and visual distinction within the user interface.
                        labelSpecifies the label text displayed for the customized column menu type. This determines the visible name or title shown in the menu for the corresponding column, helping users identify the menu's purpose or functionality.
                        visibleControls whether the column menu's customization options are visible to the user. When enabled, users can access and modify column settings through the column menu interface.

                        Back to root property: columnMenu

                        Try a demo showcasing the columnMenuCustomizeType property.

                        Read the nested value:

                        const el = document.querySelector('smart-grid');
const columnMenuCustomizeType = el.columnMenu.dataSource.columnMenuCustomizeType;
                        Related APIs appearance layout refresh() change

                        commandSpecifies the command associated with the custom type in the column menu. This determines the action or operation that will be executed when the customized menu item is selected.string

                        Specifies the command associated with the custom type in the column menu. This determines the action or operation that will be executed when the customized menu item is selected.

                        Default value

                        "customizeTypeCommand"

                        Back to root property: columnMenu

                        Try a demo showcasing the command property.

                        Read the nested value:

                        const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuCustomizeType.command;
                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                        enabledAllows you to customize the column menu type, enabling the selection or configuration of different menu layouts and options for columns. This property provides flexibility to tailor the appearance and functionality of the column menu according to your application’s requirements.boolean

                        Allows you to customize the column menu type, enabling the selection or configuration of different menu layouts and options for columns. This property provides flexibility to tailor the appearance and functionality of the column menu according to your application’s requirements.

                        Default value

                        true

                        Back to root property: columnMenu

                        Examples

                        Set a nested field on the element:

                        const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuCustomizeType.enabled = true;

                        Read the nested value:

                        const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuCustomizeType.enabled;
                        Related APIs appearance layout refresh() change

                        iconSpecifies the icon displayed for the customized column menu type. This property allows you to define a specific icon that represents the customized menu in the column header, enhancing usability and visual distinction within the user interface.string

                        Specifies the icon displayed for the customized column menu type. This property allows you to define a specific icon that represents the customized menu in the column header, enhancing usability and visual distinction within the user interface.

                        Default value

                        "smart-icon-customize"

                        Back to root property: columnMenu

                        Try a demo showcasing the icon property.

                        Read the nested value:

                        const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuCustomizeType.icon;
                        Related APIs appearance layout refresh() change

                        labelSpecifies the label text displayed for the customized column menu type. This determines the visible name or title shown in the menu for the corresponding column, helping users identify the menu's purpose or functionality.string

                        Specifies the label text displayed for the customized column menu type. This determines the visible name or title shown in the menu for the corresponding column, helping users identify the menu's purpose or functionality.

                        Default value

                        "{{messages}}"

                        Back to root property: columnMenu

                        Try a demo showcasing the label property.

                        Read the nested value:

                        const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuCustomizeType.label;
                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                        visibleControls whether the column menu's customization options are visible to the user. When enabled, users can access and modify column settings through the column menu interface.boolean

                        Controls whether the column menu's customization options are visible to the user. When enabled, users can access and modify column settings through the column menu interface.

                        Default value

                        false

                        Back to root property: columnMenu

                        Try a demo showcasing the visible property.

                        Examples

                        Set a nested field on the element:

                        const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuCustomizeType.visible = true;

                        Read the nested value:

                        const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuCustomizeType.visible;
                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                        columnMenuItemCloneProvides the configuration options for the "Duplicate" item within the column menu, allowing developers to customize its behavior, appearance, and availability in the user interface. Click for more details. Property object's options:
                           object

                          Provides the configuration options for the "Duplicate" item within the column menu, allowing developers to customize its behavior, appearance, and availability in the user interface.

                          Properties

                          commandSpecifies the command to be executed when the "Duplicate" option is selected from the column menu. This determines the action that occurs when a user chooses to duplicate a column.
                          enabledEnables the "Duplicate" option in the column menu, allowing users to create a copy of an existing column with its current settings.
                          iconSpecifies the icon displayed for the "Duplicate" option within the column menu, allowing customization of its visual representation.
                          labelSpecifies the text displayed for the "Duplicate" option in the column menu, allowing users to duplicate a column. This label helps identify the action to copy or replicate a column within the menu interface.
                          visibleControls whether the "Duplicate" option appears in the column menu, enabling users to duplicate columns when it is visible.

                          Back to root property: columnMenu

                          Read the nested value:

                          const el = document.querySelector('smart-grid');
const columnMenuItemClone = el.columnMenu.dataSource.columnMenuItemClone;
                          Related APIs appearance layout refresh() change

                          commandSpecifies the command to be executed when the "Duplicate" option is selected from the column menu. This determines the action that occurs when a user chooses to duplicate a column.string

                          Specifies the command to be executed when the "Duplicate" option is selected from the column menu. This determines the action that occurs when a user chooses to duplicate a column.

                          Default value

                          "duplicateCommand"

                          Back to root property: columnMenu

                          Try a demo showcasing the command property.

                          Read the nested value:

                          const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemClone.command;
                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                          enabledEnables the "Duplicate" option in the column menu, allowing users to create a copy of an existing column with its current settings.boolean

                          Enables the "Duplicate" option in the column menu, allowing users to create a copy of an existing column with its current settings.

                          Default value

                          true

                          Back to root property: columnMenu

                          Examples

                          Set a nested field on the element:

                          const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemClone.enabled = true;

                          Read the nested value:

                          const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemClone.enabled;
                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                          iconSpecifies the icon displayed for the "Duplicate" option within the column menu, allowing customization of its visual representation.string

                          Specifies the icon displayed for the "Duplicate" option within the column menu, allowing customization of its visual representation.

                          Default value

                          "smart-icon-duplicate"

                          Back to root property: columnMenu

                          Try a demo showcasing the icon property.

                          Read the nested value:

                          const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemClone.icon;
                          Related APIs appearance layout refresh() change

                          labelSpecifies the text displayed for the "Duplicate" option in the column menu, allowing users to duplicate a column. This label helps identify the action to copy or replicate a column within the menu interface.string

                          Specifies the text displayed for the "Duplicate" option in the column menu, allowing users to duplicate a column. This label helps identify the action to copy or replicate a column within the menu interface.

                          Default value

                          "{{messages}}"

                          Back to root property: columnMenu

                          Try a demo showcasing the label property.

                          Read the nested value:

                          const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemClone.label;
                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                          visibleControls whether the "Duplicate" option appears in the column menu, enabling users to duplicate columns when it is visible.boolean

                          Controls whether the "Duplicate" option appears in the column menu, enabling users to duplicate columns when it is visible.

                          Default value

                          false

                          Back to root property: columnMenu

                          Try a demo showcasing the visible property.

                          Examples

                          Set a nested field on the element:

                          const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemClone.visible = true;

                          Read the nested value:

                          const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemClone.visible;
                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                          columnMenuItemDeleteProvides configuration options for the "Delete" item within the column menu, allowing you to customize its behavior, appearance, and availability in the menu. Click for more details. Property object's options:
                             object

                            Provides configuration options for the "Delete" item within the column menu, allowing you to customize its behavior, appearance, and availability in the menu.

                            Properties

                            commandSpecifies the command to be executed when the "Delete" item is selected from the column menu. This determines the action performed when a user chooses to delete a column via the menu.
                            enabledAllows users to access and use the "Delete" option within the column menu, enabling them to remove specific columns from the table through the menu interface.
                            iconSpecifies the icon displayed for the "Delete" option in the column menu, allowing you to customize the visual representation of the delete action within the column menu dropdown.
                            labelDefines the text displayed for the "Delete" option in the column menu, allowing you to customize the label that appears when users interact with the column’s menu.
                            visibleControls whether the "Delete" option is visible in the column menu. If set to true, users will see and be able to select "Delete" from the column menu; if set to false, the "Delete" option will be hidden from the menu.

                            Back to root property: columnMenu

                            Try a demo showcasing the columnMenuItemDelete property.

                            Read the nested value:

                            const el = document.querySelector('smart-grid');
const columnMenuItemDelete = el.columnMenu.dataSource.columnMenuItemDelete;
                            Related APIs appearance layout refresh() change

                            commandSpecifies the command to be executed when the "Delete" item is selected from the column menu. This determines the action performed when a user chooses to delete a column via the menu.string

                            Specifies the command to be executed when the "Delete" item is selected from the column menu. This determines the action performed when a user chooses to delete a column via the menu.

                            Default value

                            "deleteColumnCommand"

                            Back to root property: columnMenu

                            Try a demo showcasing the command property.

                            Read the nested value:

                            const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemDelete.command;
                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                            enabledAllows users to access and use the "Delete" option within the column menu, enabling them to remove specific columns from the table through the menu interface.boolean

                            Allows users to access and use the "Delete" option within the column menu, enabling them to remove specific columns from the table through the menu interface.

                            Default value

                            true

                            Back to root property: columnMenu

                            Examples

                            Set a nested field on the element:

                            const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemDelete.enabled = true;

                            Read the nested value:

                            const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemDelete.enabled;
                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                            iconSpecifies the icon displayed for the "Delete" option in the column menu, allowing you to customize the visual representation of the delete action within the column menu dropdown.string

                            Specifies the icon displayed for the "Delete" option in the column menu, allowing you to customize the visual representation of the delete action within the column menu dropdown.

                            Default value

                            "smart-icon-delete"

                            Back to root property: columnMenu

                            Try a demo showcasing the icon property.

                            Read the nested value:

                            const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemDelete.icon;
                            Related APIs appearance layout refresh() change

                            labelDefines the text displayed for the "Delete" option in the column menu, allowing you to customize the label that appears when users interact with the column’s menu.string

                            Defines the text displayed for the "Delete" option in the column menu, allowing you to customize the label that appears when users interact with the column’s menu.

                            Default value

                            "{{messages}}"

                            Back to root property: columnMenu

                            Try a demo showcasing the label property.

                            Read the nested value:

                            const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemDelete.label;
                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                            visibleControls whether the "Delete" option is visible in the column menu. If set to true, users will see and be able to select "Delete" from the column menu; if set to false, the "Delete" option will be hidden from the menu.boolean

                            Controls whether the "Delete" option is visible in the column menu. If set to true, users will see and be able to select "Delete" from the column menu; if set to false, the "Delete" option will be hidden from the menu.

                            Default value

                            false

                            Back to root property: columnMenu

                            Try a demo showcasing the visible property.

                            Examples

                            Set a nested field on the element:

                            const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemDelete.visible = true;

                            Read the nested value:

                            const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemDelete.visible;
                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                            columnMenuItemEditDescriptionProvides configuration options for customizing the edit description feature within a column menu item, allowing you to define how the description field appears, behaves, and is edited by users in the menu. Click for more details. Property object's options:
                               object

                              Provides configuration options for customizing the edit description feature within a column menu item, allowing you to define how the description field appears, behaves, and is edited by users in the menu.

                              Properties

                              commandDefines the command that executes when the "Edit Description" option is selected in the column menu item, specifying the action or function to be performed.
                              enabledAllows customization of the description text displayed in the column menu’s "Edit" item. This setting lets you modify or enable the descriptive tooltip or label that appears when users interact with the "Edit" option in the column menu, improving accessibility and user guidance.
                              iconSets the icon displayed in the column menu for the "Edit Description" menu item. This property allows you to customize the visual icon that appears next to the "Edit Description" option in the column menu, helping users quickly identify the action.
                              labelSpecifies the text label displayed for the "Edit Description" option in the column menu. This label helps users identify the action to edit the description associated with a column within the menu interface. Adjust this value to customize the menu item’s text for localization or branding purposes.
                              visibleControls whether the "Edit Description" option appears in the column menu. When enabled, users can access and modify the description of the column through the menu; when disabled, the option is hidden from the column menu.

                              Back to root property: columnMenu

                              Try a demo showcasing the columnMenuItemEditDescription property.

                              Read the nested value:

                              const el = document.querySelector('smart-grid');
const columnMenuItemEditDescription = el.columnMenu.dataSource.columnMenuItemEditDescription;
                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                              commandDefines the command that executes when the "Edit Description" option is selected in the column menu item, specifying the action or function to be performed.string

                              Defines the command that executes when the "Edit Description" option is selected in the column menu item, specifying the action or function to be performed.

                              Default value

                              "editDescriptionCommand"

                              Back to root property: columnMenu

                              Try a demo showcasing the command property.

                              Read the nested value:

                              const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemEditDescription.command;
                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                              enabledAllows customization of the description text displayed in the column menu’s "Edit" item. This setting lets you modify or enable the descriptive tooltip or label that appears when users interact with the "Edit" option in the column menu, improving accessibility and user guidance.boolean

                              Allows customization of the description text displayed in the column menu’s "Edit" item. This setting lets you modify or enable the descriptive tooltip or label that appears when users interact with the "Edit" option in the column menu, improving accessibility and user guidance.

                              Default value

                              true

                              Back to root property: columnMenu

                              Examples

                              Set a nested field on the element:

                              const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemEditDescription.enabled = true;

                              Read the nested value:

                              const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemEditDescription.enabled;
                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                              iconSets the icon displayed in the column menu for the "Edit Description" menu item. This property allows you to customize the visual icon that appears next to the "Edit Description" option in the column menu, helping users quickly identify the action.string

                              Sets the icon displayed in the column menu for the "Edit Description" menu item. This property allows you to customize the visual icon that appears next to the "Edit Description" option in the column menu, helping users quickly identify the action.

                              Default value

                              "smart-icon-description"

                              Back to root property: columnMenu

                              Try a demo showcasing the icon property.

                              Read the nested value:

                              const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemEditDescription.icon;
                              Related APIs appearance layout refresh() change

                              labelSpecifies the text label displayed for the "Edit Description" option in the column menu. This label helps users identify the action to edit the description associated with a column within the menu interface. Adjust this value to customize the menu item’s text for localization or branding purposes.string

                              Specifies the text label displayed for the "Edit Description" option in the column menu. This label helps users identify the action to edit the description associated with a column within the menu interface. Adjust this value to customize the menu item’s text for localization or branding purposes.

                              Default value

                              "{{messages}}"

                              Back to root property: columnMenu

                              Try a demo showcasing the label property.

                              Read the nested value:

                              const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemEditDescription.label;
                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                              visibleControls whether the "Edit Description" option appears in the column menu. When enabled, users can access and modify the description of the column through the menu; when disabled, the option is hidden from the column menu.boolean

                              Controls whether the "Edit Description" option appears in the column menu. When enabled, users can access and modify the description of the column through the menu; when disabled, the option is hidden from the column menu.

                              Default value

                              false

                              Back to root property: columnMenu

                              Try a demo showcasing the visible property.

                              Examples

                              Set a nested field on the element:

                              const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemEditDescription.visible = true;

                              Read the nested value:

                              const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemEditDescription.visible;
                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                              columnMenuItemFilterProvides detailed configuration options for the filter functionality within a column menu item, allowing customization of filtering behavior, appearance, and available filter types in the column menu of a data grid or table component. Click for more details. Property object's options:
                                 object

                                Provides detailed configuration options for the filter functionality within a column menu item, allowing customization of filtering behavior, appearance, and available filter types in the column menu of a data grid or table component.

                                Properties

                                commandSpecifies the command to be executed when the filter option in the column menu is selected. This determines the action that occurs when a user chooses to filter a column via the menu.
                                enabledActivates the filter option within the column menu, allowing users to filter data based on values within the selected column. This feature adds a filtering interface to the column menu, making it easier to display only the rows that meet specific criteria.
                                iconSpecifies the icon displayed for the filter option in the column menu. This allows customization of the filter menu item's icon to improve user interface consistency and visual recognition.
                                labelDefines the text label displayed for the filter option within the column menu. This label helps users identify and access filtering functionality for the column in the data grid or table interface.
                                visibleControls whether the filter option is displayed in the column menu. When enabled, users can access and apply filters to the column through the menu. Disabling this option hides the filter functionality from the column menu.

                                Back to root property: columnMenu

                                Try a demo showcasing the columnMenuItemFilter property.

                                Read the nested value:

                                const el = document.querySelector('smart-grid');
const columnMenuItemFilter = el.columnMenu.dataSource.columnMenuItemFilter;
                                Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                commandSpecifies the command to be executed when the filter option in the column menu is selected. This determines the action that occurs when a user chooses to filter a column via the menu.string

                                Specifies the command to be executed when the filter option in the column menu is selected. This determines the action that occurs when a user chooses to filter a column via the menu.

                                Default value

                                "addFilterCommand"

                                Back to root property: columnMenu

                                Try a demo showcasing the command property.

                                Read the nested value:

                                const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemFilter.command;
                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                enabledActivates the filter option within the column menu, allowing users to filter data based on values within the selected column. This feature adds a filtering interface to the column menu, making it easier to display only the rows that meet specific criteria.boolean

                                Activates the filter option within the column menu, allowing users to filter data based on values within the selected column. This feature adds a filtering interface to the column menu, making it easier to display only the rows that meet specific criteria.

                                Default value

                                true

                                Back to root property: columnMenu

                                Examples

                                Set a nested field on the element:

                                const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemFilter.enabled = true;

                                Read the nested value:

                                const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemFilter.enabled;
                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                iconSpecifies the icon displayed for the filter option in the column menu. This allows customization of the filter menu item's icon to improve user interface consistency and visual recognition.string

                                Specifies the icon displayed for the filter option in the column menu. This allows customization of the filter menu item's icon to improve user interface consistency and visual recognition.

                                Default value

                                "smart-icon-add-filter"

                                Back to root property: columnMenu

                                Try a demo showcasing the icon property.

                                Read the nested value:

                                const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemFilter.icon;
                                Related APIs appearance layout refresh() change

                                labelDefines the text label displayed for the filter option within the column menu. This label helps users identify and access filtering functionality for the column in the data grid or table interface.string

                                Defines the text label displayed for the filter option within the column menu. This label helps users identify and access filtering functionality for the column in the data grid or table interface.

                                Default value

                                "{{messages}}"

                                Back to root property: columnMenu

                                Try a demo showcasing the label property.

                                Read the nested value:

                                const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemFilter.label;
                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                visibleControls whether the filter option is displayed in the column menu. When enabled, users can access and apply filters to the column through the menu. Disabling this option hides the filter functionality from the column menu.string

                                Controls whether the filter option is displayed in the column menu. When enabled, users can access and apply filters to the column through the menu. Disabling this option hides the filter functionality from the column menu.

                                Default value

                                "auto"

                                Back to root property: columnMenu

                                Try a demo showcasing the visible property.

                                Read the nested value:

                                const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemFilter.visible;
                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                columnMenuItemGroupByProvides the configuration options for the 'Group By' item within the column menu, allowing customization of grouping behavior, display text, and related features in the column menu interface. Click for more details. Property object's options:
                                   object

                                  Provides the configuration options for the 'Group By' item within the column menu, allowing customization of grouping behavior, display text, and related features in the column menu interface.

                                  Properties

                                  commandSpecifies the command that is executed when the "Group By" option is selected in the column menu item group. This determines the action performed when a user chooses to group data by a specific column using the menu.
                                  enabledEnables the "Group By" option in the column menu, allowing users to group data rows based on the selected column directly from the menu.
                                  iconSpecifies the icon displayed for the "Group by" option within the column menu, allowing customization of the visual indicator associated with the grouping functionality.
                                  labelDefines the text label displayed for the "Group by" option within the column menu, allowing users to group data in the column accordingly.
                                  visibleControls whether the "Group By" option is visible in the column menu, allowing users to group table data by the selected column when enabled.

                                  Back to root property: columnMenu

                                  Try a demo showcasing the columnMenuItemGroupBy property.

                                  Read the nested value:

                                  const el = document.querySelector('smart-grid');
const columnMenuItemGroupBy = el.columnMenu.dataSource.columnMenuItemGroupBy;
                                  Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                  commandSpecifies the command that is executed when the "Group By" option is selected in the column menu item group. This determines the action performed when a user chooses to group data by a specific column using the menu.string

                                  Specifies the command that is executed when the "Group By" option is selected in the column menu item group. This determines the action performed when a user chooses to group data by a specific column using the menu.

                                  Default value

                                  "groupByCommand"

                                  Back to root property: columnMenu

                                  Try a demo showcasing the command property.

                                  Read the nested value:

                                  const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemGroupBy.command;
                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                  enabledEnables the "Group By" option in the column menu, allowing users to group data rows based on the selected column directly from the menu.boolean

                                  Enables the "Group By" option in the column menu, allowing users to group data rows based on the selected column directly from the menu.

                                  Default value

                                  true

                                  Back to root property: columnMenu

                                  Examples

                                  Set a nested field on the element:

                                  const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemGroupBy.enabled = true;

                                  Read the nested value:

                                  const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemGroupBy.enabled;
                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                  iconSpecifies the icon displayed for the "Group by" option within the column menu, allowing customization of the visual indicator associated with the grouping functionality.string

                                  Specifies the icon displayed for the "Group by" option within the column menu, allowing customization of the visual indicator associated with the grouping functionality.

                                  Default value

                                  "smart-icon-group-by"

                                  Back to root property: columnMenu

                                  Try a demo showcasing the icon property.

                                  Read the nested value:

                                  const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemGroupBy.icon;
                                  Related APIs appearance layout refresh() change

                                  labelDefines the text label displayed for the "Group by" option within the column menu, allowing users to group data in the column accordingly.string

                                  Defines the text label displayed for the "Group by" option within the column menu, allowing users to group data in the column accordingly.

                                  Default value

                                  "{{messages}}"

                                  Back to root property: columnMenu

                                  Try a demo showcasing the label property.

                                  Read the nested value:

                                  const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemGroupBy.label;
                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                  visibleControls whether the "Group By" option is visible in the column menu, allowing users to group table data by the selected column when enabled.string

                                  Controls whether the "Group By" option is visible in the column menu, allowing users to group table data by the selected column when enabled.

                                  Default value

                                  "auto"

                                  Back to root property: columnMenu

                                  Try a demo showcasing the visible property.

                                  Read the nested value:

                                  const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemGroupBy.visible;
                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                  columnMenuItemHideProvides the configuration options for the "Hide" menu item within the column menu, allowing developers to control the visibility settings and behavior of column hiding functionality in the grid. Click for more details. Property object's options:
                                     object

                                    Provides the configuration options for the "Hide" menu item within the column menu, allowing developers to control the visibility settings and behavior of column hiding functionality in the grid.

                                    Properties

                                    commandSpecifies the command that is executed when the "Hide" option is selected from the column menu, typically used to hide the associated column from view in a data grid or table.
                                    enabledAllows users to hide or display specific columns through the column menu. When enabled, a “Hide” option appears in the column menu, letting users control the visibility of individual columns in the data grid or table.
                                    iconSpecifies the icon displayed next to the "Hide Column" option in the column menu. Adjust this property to customize the appearance of the hide action within the column menu.
                                    labelSpecifies the text label displayed for the "Hide Column" menu item in the column options menu. This label determines how the action to hide a column is presented to users within the column menu.
                                    visibleSets whether the "Hide" option is visible in the column menu. If enabled, users can choose to hide the column from view using the menu. If disabled, the "Hide" option will not appear in the column menu, preventing users from hiding the column through the UI.

                                    Back to root property: columnMenu

                                    Try a demo showcasing the columnMenuItemHide property.

                                    Read the nested value:

                                    const el = document.querySelector('smart-grid');
const columnMenuItemHide = el.columnMenu.dataSource.columnMenuItemHide;
                                    Related APIs behavior refresh() change

                                    commandSpecifies the command that is executed when the "Hide" option is selected from the column menu, typically used to hide the associated column from view in a data grid or table.string

                                    Specifies the command that is executed when the "Hide" option is selected from the column menu, typically used to hide the associated column from view in a data grid or table.

                                    Default value

                                    "hideColumnCommand"

                                    Back to root property: columnMenu

                                    Try a demo showcasing the command property.

                                    Read the nested value:

                                    const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemHide.command;
                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                    enabledAllows users to hide or display specific columns through the column menu. When enabled, a “Hide” option appears in the column menu, letting users control the visibility of individual columns in the data grid or table.boolean

                                    Allows users to hide or display specific columns through the column menu. When enabled, a “Hide” option appears in the column menu, letting users control the visibility of individual columns in the data grid or table.

                                    Default value

                                    true

                                    Back to root property: columnMenu

                                    Examples

                                    Set a nested field on the element:

                                    const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemHide.enabled = true;

                                    Read the nested value:

                                    const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemHide.enabled;
                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                    iconSpecifies the icon displayed next to the "Hide Column" option in the column menu. Adjust this property to customize the appearance of the hide action within the column menu.string

                                    Specifies the icon displayed next to the "Hide Column" option in the column menu. Adjust this property to customize the appearance of the hide action within the column menu.

                                    Default value

                                    "smart-icon-hide"

                                    Back to root property: columnMenu

                                    Try a demo showcasing the icon property.

                                    Read the nested value:

                                    const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemHide.icon;
                                    Related APIs appearance layout refresh() change

                                    labelSpecifies the text label displayed for the "Hide Column" menu item in the column options menu. This label determines how the action to hide a column is presented to users within the column menu.string

                                    Specifies the text label displayed for the "Hide Column" menu item in the column options menu. This label determines how the action to hide a column is presented to users within the column menu.

                                    Default value

                                    "{{messages}}"

                                    Back to root property: columnMenu

                                    Try a demo showcasing the label property.

                                    Read the nested value:

                                    const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemHide.label;
                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                    visibleSets whether the "Hide" option is visible in the column menu. If enabled, users can choose to hide the column from view using the menu. If disabled, the "Hide" option will not appear in the column menu, preventing users from hiding the column through the UI.boolean

                                    Sets whether the "Hide" option is visible in the column menu. If enabled, users can choose to hide the column from view using the menu. If disabled, the "Hide" option will not appear in the column menu, preventing users from hiding the column through the UI.

                                    Default value

                                    false

                                    Back to root property: columnMenu

                                    Try a demo showcasing the visible property.

                                    Read the nested value:

                                    const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemHide.visible;
                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                    columnMenuItemInsertLeftProvides the configuration settings for the "Insert Left" option in the column menu, allowing customization of its behavior, appearance, and availability within the user interface. Click for more details. Property object's options:
                                       object

                                      Provides the configuration settings for the "Insert Left" option in the column menu, allowing customization of its behavior, appearance, and availability within the user interface.

                                      Properties

                                      commandSpecifies the command executed when the "Insert Left" option is selected from the column menu. This command typically adds a new column to the left of the selected column in a table or grid.
                                      enabledEnables the "Insert Left" option in the column menu, allowing users to add a new column to the left of the selected column.
                                      iconSpecifies the icon to display for the "Insert Left" option in the column menu. This icon visually represents the action of inserting a new column to the left of the selected column in the menu interface.
                                      labelSets the text label displayed for the "Insert Left" option in the column menu. This label appears in the menu that allows users to insert a new column to the left of the selected column.
                                      visibleControls whether the "Insert Left" option is visible in the column menu. When enabled, users can insert a new column to the left of the selected column via the menu.

                                      Back to root property: columnMenu

                                      Try a demo showcasing the columnMenuItemInsertLeft property.

                                      Read the nested value:

                                      const el = document.querySelector('smart-grid');
const columnMenuItemInsertLeft = el.columnMenu.dataSource.columnMenuItemInsertLeft;
                                      Related APIs appearance layout refresh() change

                                      commandSpecifies the command executed when the "Insert Left" option is selected from the column menu. This command typically adds a new column to the left of the selected column in a table or grid.string

                                      Specifies the command executed when the "Insert Left" option is selected from the column menu. This command typically adds a new column to the left of the selected column in a table or grid.

                                      Default value

                                      "insertLeftCommand"

                                      Back to root property: columnMenu

                                      Try a demo showcasing the command property.

                                      Read the nested value:

                                      const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemInsertLeft.command;
                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                      enabledEnables the "Insert Left" option in the column menu, allowing users to add a new column to the left of the selected column.boolean

                                      Enables the "Insert Left" option in the column menu, allowing users to add a new column to the left of the selected column.

                                      Default value

                                      true

                                      Back to root property: columnMenu

                                      Examples

                                      Set a nested field on the element:

                                      const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemInsertLeft.enabled = true;

                                      Read the nested value:

                                      const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemInsertLeft.enabled;
                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                      iconSpecifies the icon to display for the "Insert Left" option in the column menu. This icon visually represents the action of inserting a new column to the left of the selected column in the menu interface.string

                                      Specifies the icon to display for the "Insert Left" option in the column menu. This icon visually represents the action of inserting a new column to the left of the selected column in the menu interface.

                                      Default value

                                      "smart-icon-insert-left"

                                      Back to root property: columnMenu

                                      Try a demo showcasing the icon property.

                                      Read the nested value:

                                      const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemInsertLeft.icon;
                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                      labelSets the text label displayed for the "Insert Left" option in the column menu. This label appears in the menu that allows users to insert a new column to the left of the selected column.string

                                      Sets the text label displayed for the "Insert Left" option in the column menu. This label appears in the menu that allows users to insert a new column to the left of the selected column.

                                      Default value

                                      "{{messages}}"

                                      Back to root property: columnMenu

                                      Try a demo showcasing the label property.

                                      Read the nested value:

                                      const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemInsertLeft.label;
                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                      visibleControls whether the "Insert Left" option is visible in the column menu. When enabled, users can insert a new column to the left of the selected column via the menu.boolean

                                      Controls whether the "Insert Left" option is visible in the column menu. When enabled, users can insert a new column to the left of the selected column via the menu.

                                      Default value

                                      false

                                      Back to root property: columnMenu

                                      Try a demo showcasing the visible property.

                                      Examples

                                      Set a nested field on the element:

                                      const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemInsertLeft.visible = true;

                                      Read the nested value:

                                      const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemInsertLeft.visible;
                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                      columnMenuItemInsertRightProvides detailed configuration options for the "Insert Right" menu item within a column menu. Specifies how the "Insert Right" action appears and behaves when users interact with the column menu, including display text, icons, visibility, and event handling. Click for more details. Property object's options:
                                         object

                                        Provides detailed configuration options for the "Insert Right" menu item within a column menu. Specifies how the "Insert Right" action appears and behaves when users interact with the column menu, including display text, icons, visibility, and event handling.

                                        Properties

                                        commandSpecifies the command executed when the "Insert Right" option is selected from the column menu item. This command typically adds a new column to the right of the currently selected column.
                                        enabledAllows users to insert a new column to the right of the selected column via the column menu.
                                        iconSpecifies the icon displayed for the "Insert Right" item in the column menu. This icon visually represents the action of inserting a new column to the right of the selected column in the menu interface.
                                        labelSets the text label displayed for the "Insert Right" option in the column menu.
                                        visibleControls the visibility of the "Insert Right" option in the column menu. When enabled, users can add a new column to the right of the selected column through the menu.

                                        Back to root property: columnMenu

                                        Try a demo showcasing the columnMenuItemInsertRight property.

                                        Read the nested value:

                                        const el = document.querySelector('smart-grid');
const columnMenuItemInsertRight = el.columnMenu.dataSource.columnMenuItemInsertRight;
                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                        commandSpecifies the command executed when the "Insert Right" option is selected from the column menu item. This command typically adds a new column to the right of the currently selected column.string

                                        Specifies the command executed when the "Insert Right" option is selected from the column menu item. This command typically adds a new column to the right of the currently selected column.

                                        Default value

                                        "insertRightCommand"

                                        Back to root property: columnMenu

                                        Try a demo showcasing the command property.

                                        Read the nested value:

                                        const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemInsertRight.command;
                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                        enabledAllows users to insert a new column to the right of the selected column via the column menu.boolean

                                        Allows users to insert a new column to the right of the selected column via the column menu.

                                        Default value

                                        true

                                        Back to root property: columnMenu

                                        Examples

                                        Set a nested field on the element:

                                        const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemInsertRight.enabled = true;

                                        Read the nested value:

                                        const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemInsertRight.enabled;
                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                        iconSpecifies the icon displayed for the "Insert Right" item in the column menu. This icon visually represents the action of inserting a new column to the right of the selected column in the menu interface.string

                                        Specifies the icon displayed for the "Insert Right" item in the column menu. This icon visually represents the action of inserting a new column to the right of the selected column in the menu interface.

                                        Default value

                                        "smart-icon-insert-right"

                                        Back to root property: columnMenu

                                        Try a demo showcasing the icon property.

                                        Read the nested value:

                                        const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemInsertRight.icon;
                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                        labelSets the text label displayed for the "Insert Right" option in the column menu.string

                                        Sets the text label displayed for the "Insert Right" option in the column menu.

                                        Default value

                                        "{{messages}}"

                                        Back to root property: columnMenu

                                        Try a demo showcasing the label property.

                                        Read the nested value:

                                        const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemInsertRight.label;
                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                        visibleControls the visibility of the "Insert Right" option in the column menu. When enabled, users can add a new column to the right of the selected column through the menu.boolean

                                        Controls the visibility of the "Insert Right" option in the column menu. When enabled, users can add a new column to the right of the selected column through the menu.

                                        Default value

                                        false

                                        Back to root property: columnMenu

                                        Try a demo showcasing the visible property.

                                        Examples

                                        Set a nested field on the element:

                                        const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemInsertRight.visible = true;

                                        Read the nested value:

                                        const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemInsertRight.visible;
                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                        columnMenuItemRemoveFilterProvides configuration options for the "Remove Filter" item within the column menu, allowing customization of its appearance, behavior, and availability. Click for more details. Property object's options:
                                           object

                                          Provides configuration options for the "Remove Filter" item within the column menu, allowing customization of its appearance, behavior, and availability.

                                          Properties

                                          commandSpecifies the command that is executed when the "Remove Filter" option is selected from the column menu. This determines the action taken to clear filters applied to the selected column.
                                          enabledAllows users to access the "Remove Filter" option within the column menu, enabling them to quickly clear any filters applied to that column from the menu interface.
                                          iconSpecifies the icon displayed for the "Remove Filter" option in the column menu, allowing you to customize the visual appearance of the menu item that clears applied filters from the column.
                                          labelDefines the text displayed for the "Remove Filter" option in the column menu, allowing users to clear any applied filters from the selected column.
                                          visibleControls whether the "Remove Filter" option is visible in the column menu. When enabled, users can access the option to clear applied filters from the specific column through the menu. Disabling this will hide the "Remove Filter" menu item, preventing users from removing filters via the column menu interface.

                                          Back to root property: columnMenu

                                          Try a demo showcasing the columnMenuItemRemoveFilter property.

                                          Read the nested value:

                                          const el = document.querySelector('smart-grid');
const columnMenuItemRemoveFilter = el.columnMenu.dataSource.columnMenuItemRemoveFilter;
                                          Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                          commandSpecifies the command that is executed when the "Remove Filter" option is selected from the column menu. This determines the action taken to clear filters applied to the selected column.string

                                          Specifies the command that is executed when the "Remove Filter" option is selected from the column menu. This determines the action taken to clear filters applied to the selected column.

                                          Default value

                                          "removeFilterCommand"

                                          Back to root property: columnMenu

                                          Try a demo showcasing the command property.

                                          Read the nested value:

                                          const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemRemoveFilter.command;
                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                          enabledAllows users to access the "Remove Filter" option within the column menu, enabling them to quickly clear any filters applied to that column from the menu interface.boolean

                                          Allows users to access the "Remove Filter" option within the column menu, enabling them to quickly clear any filters applied to that column from the menu interface.

                                          Default value

                                          true

                                          Back to root property: columnMenu

                                          Examples

                                          Set a nested field on the element:

                                          const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemRemoveFilter.enabled = true;

                                          Read the nested value:

                                          const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemRemoveFilter.enabled;
                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                          iconSpecifies the icon displayed for the "Remove Filter" option in the column menu, allowing you to customize the visual appearance of the menu item that clears applied filters from the column.string

                                          Specifies the icon displayed for the "Remove Filter" option in the column menu, allowing you to customize the visual appearance of the menu item that clears applied filters from the column.

                                          Default value

                                          "smart-icon-cancel-circled-outline"

                                          Back to root property: columnMenu

                                          Try a demo showcasing the icon property.

                                          Read the nested value:

                                          const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemRemoveFilter.icon;
                                          Related APIs appearance layout refresh() change

                                          labelDefines the text displayed for the "Remove Filter" option in the column menu, allowing users to clear any applied filters from the selected column.string

                                          Defines the text displayed for the "Remove Filter" option in the column menu, allowing users to clear any applied filters from the selected column.

                                          Default value

                                          "{{messages}}"

                                          Back to root property: columnMenu

                                          Try a demo showcasing the label property.

                                          Read the nested value:

                                          const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemRemoveFilter.label;
                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                          visibleControls whether the "Remove Filter" option is visible in the column menu. When enabled, users can access the option to clear applied filters from the specific column through the menu. Disabling this will hide the "Remove Filter" menu item, preventing users from removing filters via the column menu interface.string

                                          Controls whether the "Remove Filter" option is visible in the column menu. When enabled, users can access the option to clear applied filters from the specific column through the menu. Disabling this will hide the "Remove Filter" menu item, preventing users from removing filters via the column menu interface.

                                          Default value

                                          "auto"

                                          Back to root property: columnMenu

                                          Try a demo showcasing the visible property.

                                          Read the nested value:

                                          const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemRemoveFilter.visible;
                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                          columnMenuItemRemoveGroupByProvides configuration options for the "Group By" feature within a column menu, allowing you to customize how columns are grouped, displayed, and interacted with in the menu interface. Click for more details. Property object's options:
                                             object

                                            Provides configuration options for the "Group By" feature within a column menu, allowing you to customize how columns are grouped, displayed, and interacted with in the menu interface.

                                            Properties

                                            commandDefines the command executed when the "group by" option is selected in the column menu, allowing customization of the grouping action for the column.
                                            enabledAllows users to group columns through the column menu by enabling the "Group By" option. When activated, this feature displays a "Group By" menu item within the column menu, letting users organize and group data directly from the grid’s column interface.
                                            iconSpecifies the icon displayed for the "Group By" option within the column menu item group. This icon visually represents the grouping functionality in the column menu for improved user recognition and interaction.
                                            labelSpecifies the text label displayed for the "Group by" option within the column menu, allowing users to group data in the table by the selected column.
                                            visibleControls whether the "group by" option appears in the column menu, allowing users to group table data by the selected column. When enabled, the "group by" menu item is visible; when disabled, it is hidden from the column menu.

                                            Back to root property: columnMenu

                                            Try a demo showcasing the columnMenuItemRemoveGroupBy property.

                                            Read the nested value:

                                            const el = document.querySelector('smart-grid');
const columnMenuItemRemoveGroupBy = el.columnMenu.dataSource.columnMenuItemRemoveGroupBy;
                                            Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                            commandDefines the command executed when the "group by" option is selected in the column menu, allowing customization of the grouping action for the column.string

                                            Defines the command executed when the "group by" option is selected in the column menu, allowing customization of the grouping action for the column.

                                            Default value

                                            "groupByCommand"

                                            Back to root property: columnMenu

                                            Try a demo showcasing the command property.

                                            Read the nested value:

                                            const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemRemoveGroupBy.command;
                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                            enabledAllows users to group columns through the column menu by enabling the "Group By" option. When activated, this feature displays a "Group By" menu item within the column menu, letting users organize and group data directly from the grid’s column interface.boolean

                                            Allows users to group columns through the column menu by enabling the "Group By" option. When activated, this feature displays a "Group By" menu item within the column menu, letting users organize and group data directly from the grid’s column interface.

                                            Default value

                                            true

                                            Back to root property: columnMenu

                                            Examples

                                            Set a nested field on the element:

                                            const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemRemoveGroupBy.enabled = true;

                                            Read the nested value:

                                            const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemRemoveGroupBy.enabled;
                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                            iconSpecifies the icon displayed for the "Group By" option within the column menu item group. This icon visually represents the grouping functionality in the column menu for improved user recognition and interaction.string

                                            Specifies the icon displayed for the "Group By" option within the column menu item group. This icon visually represents the grouping functionality in the column menu for improved user recognition and interaction.

                                            Default value

                                            "smart-icon-group-by"

                                            Back to root property: columnMenu

                                            Try a demo showcasing the icon property.

                                            Read the nested value:

                                            const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemRemoveGroupBy.icon;
                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                            labelSpecifies the text label displayed for the "Group by" option within the column menu, allowing users to group data in the table by the selected column.string

                                            Specifies the text label displayed for the "Group by" option within the column menu, allowing users to group data in the table by the selected column.

                                            Default value

                                            "{{messages}}"

                                            Back to root property: columnMenu

                                            Try a demo showcasing the label property.

                                            Read the nested value:

                                            const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemRemoveGroupBy.label;
                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                            visibleControls whether the "group by" option appears in the column menu, allowing users to group table data by the selected column. When enabled, the "group by" menu item is visible; when disabled, it is hidden from the column menu.string

                                            Controls whether the "group by" option appears in the column menu, allowing users to group table data by the selected column. When enabled, the "group by" menu item is visible; when disabled, it is hidden from the column menu.

                                            Default value

                                            "auto"

                                            Back to root property: columnMenu

                                            Try a demo showcasing the visible property.

                                            Read the nested value:

                                            const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemRemoveGroupBy.visible;
                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                            columnMenuItemRemoveSortProvides configuration options for the "Remove Sort" item within a column's menu, allowing you to customize its appearance, behavior, and availability in the column menu interface. Click for more details. Property object's options:
                                               object

                                              Provides configuration options for the "Remove Sort" item within a column's menu, allowing you to customize its appearance, behavior, and availability in the column menu interface.

                                              Properties

                                              commandDefines the command executed when the "Remove Sort" option is selected in the column menu. This command is triggered to clear any sorting applied to the corresponding column.
                                              enabledAllows users to access the "Remove Sort" option within the column menu, enabling them to clear any applied sorting on the selected column.
                                              iconSpecifies the icon displayed for the "Remove Sort" option in the column menu. This icon visually represents the action and helps users identify the functionality to clear any active sorting applied to the column.
                                              labelDefines the text displayed for the "Remove Sort" option in the column menu, allowing users to clear any applied sorting on that column.
                                              visibleControls whether the "Remove Sort" option appears in the column menu, allowing users to clear any applied sorting on that column. When enabled, users can remove the current sort order directly from the column's context menu.

                                              Back to root property: columnMenu

                                              Try a demo showcasing the columnMenuItemRemoveSort property.

                                              Read the nested value:

                                              const el = document.querySelector('smart-grid');
const columnMenuItemRemoveSort = el.columnMenu.dataSource.columnMenuItemRemoveSort;
                                              Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                              commandDefines the command executed when the "Remove Sort" option is selected in the column menu. This command is triggered to clear any sorting applied to the corresponding column.string

                                              Defines the command executed when the "Remove Sort" option is selected in the column menu. This command is triggered to clear any sorting applied to the corresponding column.

                                              Default value

                                              "removeSortCommand"

                                              Back to root property: columnMenu

                                              Try a demo showcasing the command property.

                                              Read the nested value:

                                              const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemRemoveSort.command;
                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                              enabledAllows users to access the "Remove Sort" option within the column menu, enabling them to clear any applied sorting on the selected column.boolean

                                              Allows users to access the "Remove Sort" option within the column menu, enabling them to clear any applied sorting on the selected column.

                                              Default value

                                              true

                                              Back to root property: columnMenu

                                              Examples

                                              Set a nested field on the element:

                                              const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemRemoveSort.enabled = true;

                                              Read the nested value:

                                              const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemRemoveSort.enabled;
                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                              iconSpecifies the icon displayed for the "Remove Sort" option in the column menu. This icon visually represents the action and helps users identify the functionality to clear any active sorting applied to the column.string

                                              Specifies the icon displayed for the "Remove Sort" option in the column menu. This icon visually represents the action and helps users identify the functionality to clear any active sorting applied to the column.

                                              Default value

                                              "smart-icon-cancel-circled"

                                              Back to root property: columnMenu

                                              Try a demo showcasing the icon property.

                                              Read the nested value:

                                              const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemRemoveSort.icon;
                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                              labelDefines the text displayed for the "Remove Sort" option in the column menu, allowing users to clear any applied sorting on that column.string

                                              Defines the text displayed for the "Remove Sort" option in the column menu, allowing users to clear any applied sorting on that column.

                                              Default value

                                              "{{messages}}"

                                              Back to root property: columnMenu

                                              Try a demo showcasing the label property.

                                              Read the nested value:

                                              const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemRemoveSort.label;
                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                              visibleControls whether the "Remove Sort" option appears in the column menu, allowing users to clear any applied sorting on that column. When enabled, users can remove the current sort order directly from the column's context menu.string

                                              Controls whether the "Remove Sort" option appears in the column menu, allowing users to clear any applied sorting on that column. When enabled, users can remove the current sort order directly from the column's context menu.

                                              Default value

                                              "auto"

                                              Back to root property: columnMenu

                                              Try a demo showcasing the visible property.

                                              Read the nested value:

                                              const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemRemoveSort.visible;
                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                              columnMenuItemRenameProvides configuration options for the "Rename" item within a column menu. Defines how the rename functionality behaves and appears in the column menu, including available settings such as labels, visibility, and callbacks for renaming actions. Click for more details. Property object's options:
                                                 object

                                                Provides configuration options for the "Rename" item within a column menu. Defines how the rename functionality behaves and appears in the column menu, including available settings such as labels, visibility, and callbacks for renaming actions.

                                                Properties

                                                commandSpecifies the command to be executed when the "Rename" option is selected in the column menu. This command defines the behavior that occurs when a user chooses to rename a column from the menu interface.
                                                enabledAllows users to rename columns through an option in the column menu. When enabled, a "Rename" item appears in the column menu, letting users modify the column header text directly from the menu interface.
                                                iconSpecifies the icon displayed next to the "Rename" option in the column menu, allowing you to customize its appearance.
                                                labelDefines the text displayed for the "Rename" option in the column menu, allowing users to rename a column.
                                                visibleControls whether the "Rename" option is visible in the column menu, allowing users to rename columns if enabled.

                                                Back to root property: columnMenu

                                                Try a demo showcasing the columnMenuItemRename property.

                                                Read the nested value:

                                                const el = document.querySelector('smart-grid');
const columnMenuItemRename = el.columnMenu.dataSource.columnMenuItemRename;
                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                commandSpecifies the command to be executed when the "Rename" option is selected in the column menu. This command defines the behavior that occurs when a user chooses to rename a column from the menu interface.string

                                                Specifies the command to be executed when the "Rename" option is selected in the column menu. This command defines the behavior that occurs when a user chooses to rename a column from the menu interface.

                                                Default value

                                                "renameCommand"

                                                Back to root property: columnMenu

                                                Try a demo showcasing the command property.

                                                Read the nested value:

                                                const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemRename.command;
                                                Related APIs behavior refresh() change

                                                enabledAllows users to rename columns through an option in the column menu. When enabled, a "Rename" item appears in the column menu, letting users modify the column header text directly from the menu interface.boolean

                                                Allows users to rename columns through an option in the column menu. When enabled, a "Rename" item appears in the column menu, letting users modify the column header text directly from the menu interface.

                                                Default value

                                                true

                                                Back to root property: columnMenu

                                                Examples

                                                Set a nested field on the element:

                                                const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemRename.enabled = true;

                                                Read the nested value:

                                                const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemRename.enabled;
                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                iconSpecifies the icon displayed next to the "Rename" option in the column menu, allowing you to customize its appearance.string

                                                Specifies the icon displayed next to the "Rename" option in the column menu, allowing you to customize its appearance.

                                                Default value

                                                "smart-icon-rename"

                                                Back to root property: columnMenu

                                                Try a demo showcasing the icon property.

                                                Read the nested value:

                                                const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemRename.icon;
                                                Related APIs appearance layout refresh() change

                                                labelDefines the text displayed for the "Rename" option in the column menu, allowing users to rename a column.string

                                                Defines the text displayed for the "Rename" option in the column menu, allowing users to rename a column.

                                                Default value

                                                "{{messages}}"

                                                Back to root property: columnMenu

                                                Try a demo showcasing the label property.

                                                Read the nested value:

                                                const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemRename.label;
                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                visibleControls whether the "Rename" option is visible in the column menu, allowing users to rename columns if enabled.boolean

                                                Controls whether the "Rename" option is visible in the column menu, allowing users to rename columns if enabled.

                                                Default value

                                                false

                                                Back to root property: columnMenu

                                                Try a demo showcasing the visible property.

                                                Examples

                                                Set a nested field on the element:

                                                const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemRename.visible = true;

                                                Read the nested value:

                                                const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemRename.visible;
                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                columnMenuItemSortProvides configuration options for the column menu item that enables users to add sorting functionality to table columns, allowing customization of sorting behavior and display within the column menu. Click for more details. Property object's options:
                                                   object

                                                  Provides configuration options for the column menu item that enables users to add sorting functionality to table columns, allowing customization of sorting behavior and display within the column menu.

                                                  Properties

                                                  commandSpecifies the command executed when the column menu item is selected, enabling the addition of sorting functionality to the corresponding column. This allows users to sort the column's data directly from the column menu.
                                                  enabledEnables the sorting functionality within the column menu, allowing users to sort data in ascending or descending order directly from the column header menu.
                                                  iconSpecifies the icon displayed next to the "Sort" option in the column menu, allowing customization of its appearance to match your application's design or user preferences.
                                                  labelSpecifies the text label displayed for the "Sort" menu item within the column menu, allowing customization of the sort option’s name for user interfaces.
                                                  visibleControls whether the "Sort" option is displayed in the column menu. When enabled, users can access sorting features directly from the column header menu. Disabling this option hides the sorting functionality from the column menu, preventing users from sorting the column through the menu interface.

                                                  Back to root property: columnMenu

                                                  Read the nested value:

                                                  const el = document.querySelector('smart-grid');
const columnMenuItemSort = el.columnMenu.dataSource.columnMenuItemSort;
                                                  Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                  commandSpecifies the command executed when the column menu item is selected, enabling the addition of sorting functionality to the corresponding column. This allows users to sort the column's data directly from the column menu.string

                                                  Specifies the command executed when the column menu item is selected, enabling the addition of sorting functionality to the corresponding column. This allows users to sort the column's data directly from the column menu.

                                                  Default value

                                                  "addSortCommand"

                                                  Back to root property: columnMenu

                                                  Try a demo showcasing the command property.

                                                  Read the nested value:

                                                  const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemSort.command;
                                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                  enabledEnables the sorting functionality within the column menu, allowing users to sort data in ascending or descending order directly from the column header menu.boolean

                                                  Enables the sorting functionality within the column menu, allowing users to sort data in ascending or descending order directly from the column header menu.

                                                  Default value

                                                  true

                                                  Back to root property: columnMenu

                                                  Examples

                                                  Set a nested field on the element:

                                                  const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemSort.enabled = true;

                                                  Read the nested value:

                                                  const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemSort.enabled;
                                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                  iconSpecifies the icon displayed next to the "Sort" option in the column menu, allowing customization of its appearance to match your application's design or user preferences.string

                                                  Specifies the icon displayed next to the "Sort" option in the column menu, allowing customization of its appearance to match your application's design or user preferences.

                                                  Default value

                                                  "smart-icon-sort"

                                                  Back to root property: columnMenu

                                                  Try a demo showcasing the icon property.

                                                  Read the nested value:

                                                  const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemSort.icon;
                                                  Related APIs appearance layout refresh() change

                                                  labelSpecifies the text label displayed for the "Sort" menu item within the column menu, allowing customization of the sort option’s name for user interfaces.string

                                                  Specifies the text label displayed for the "Sort" menu item within the column menu, allowing customization of the sort option’s name for user interfaces.

                                                  Default value

                                                  "{{messages}}"

                                                  Back to root property: columnMenu

                                                  Try a demo showcasing the label property.

                                                  Read the nested value:

                                                  const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemSort.label;
                                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                  visibleControls whether the "Sort" option is displayed in the column menu. When enabled, users can access sorting features directly from the column header menu. Disabling this option hides the sorting functionality from the column menu, preventing users from sorting the column through the menu interface.string

                                                  Controls whether the "Sort" option is displayed in the column menu. When enabled, users can access sorting features directly from the column header menu. Disabling this option hides the sorting functionality from the column menu, preventing users from sorting the column through the menu interface.

                                                  Default value

                                                  "auto"

                                                  Back to root property: columnMenu

                                                  Try a demo showcasing the visible property.

                                                  Read the nested value:

                                                  const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemSort.visible;
                                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                  columnMenuItemSortAscProvides configuration options for the "Sort Ascending" item in the column menu, allowing you to customize its appearance, behavior, and availability within the menu. This includes enabling or disabling the sort option, modifying its display text, and adjusting its icon or associated actions. Click for more details. Property object's options:
                                                     object

                                                    Provides configuration options for the "Sort Ascending" item in the column menu, allowing you to customize its appearance, behavior, and availability within the menu. This includes enabling or disabling the sort option, modifying its display text, and adjusting its icon or associated actions.

                                                    Properties

                                                    commandSpecifies the command executed when the column menu item's "Sort Ascending" option is selected. This command typically sorts the data in the column in ascending order when triggered.
                                                    enabledAllows users to sort the column in ascending order via the column menu option. When enabled, a "Sort Ascending" item appears in the column menu, letting users sort the column’s data from lowest to highest or A to Z.
                                                    iconSpecifies the icon displayed for the "Sort Ascending" option within the column menu. This icon visually indicates the action of sorting the column's data in ascending order when selected by the user.
                                                    labelSpecifies the text label displayed for the "Sort Ascending" option within the column menu, allowing users to sort the selected column in ascending order.
                                                    visibleControls whether the "Sort Ascending" option is visible in the column menu. When enabled, users can access the "Sort Ascending" action from the column menu; when disabled, this sorting option will be hidden from the menu.

                                                    Back to root property: columnMenu

                                                    Try a demo showcasing the columnMenuItemSortAsc property.

                                                    Read the nested value:

                                                    const el = document.querySelector('smart-grid');
const columnMenuItemSortAsc = el.columnMenu.dataSource.columnMenuItemSortAsc;
                                                    Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                    commandSpecifies the command executed when the column menu item's "Sort Ascending" option is selected. This command typically sorts the data in the column in ascending order when triggered.string

                                                    Specifies the command executed when the column menu item's "Sort Ascending" option is selected. This command typically sorts the data in the column in ascending order when triggered.

                                                    Default value

                                                    "sortAscCommand"

                                                    Back to root property: columnMenu

                                                    Try a demo showcasing the command property.

                                                    Read the nested value:

                                                    const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemSortAsc.command;
                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                    enabledAllows users to sort the column in ascending order via the column menu option. When enabled, a "Sort Ascending" item appears in the column menu, letting users sort the column’s data from lowest to highest or A to Z.boolean

                                                    Allows users to sort the column in ascending order via the column menu option. When enabled, a "Sort Ascending" item appears in the column menu, letting users sort the column’s data from lowest to highest or A to Z.

                                                    Default value

                                                    true

                                                    Back to root property: columnMenu

                                                    Examples

                                                    Set a nested field on the element:

                                                    const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemSortAsc.enabled = true;

                                                    Read the nested value:

                                                    const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemSortAsc.enabled;
                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                    iconSpecifies the icon displayed for the "Sort Ascending" option within the column menu. This icon visually indicates the action of sorting the column's data in ascending order when selected by the user.string

                                                    Specifies the icon displayed for the "Sort Ascending" option within the column menu. This icon visually indicates the action of sorting the column's data in ascending order when selected by the user.

                                                    Default value

                                                    "smart-icon-sort-a-z"

                                                    Back to root property: columnMenu

                                                    Try a demo showcasing the icon property.

                                                    Read the nested value:

                                                    const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemSortAsc.icon;
                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                    labelSpecifies the text label displayed for the "Sort Ascending" option within the column menu, allowing users to sort the selected column in ascending order.string

                                                    Specifies the text label displayed for the "Sort Ascending" option within the column menu, allowing users to sort the selected column in ascending order.

                                                    Default value

                                                    "{{messages}}"

                                                    Back to root property: columnMenu

                                                    Try a demo showcasing the label property.

                                                    Read the nested value:

                                                    const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemSortAsc.label;
                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                    visibleControls whether the "Sort Ascending" option is visible in the column menu. When enabled, users can access the "Sort Ascending" action from the column menu; when disabled, this sorting option will be hidden from the menu.string

                                                    Controls whether the "Sort Ascending" option is visible in the column menu. When enabled, users can access the "Sort Ascending" action from the column menu; when disabled, this sorting option will be hidden from the menu.

                                                    Default value

                                                    "auto"

                                                    Back to root property: columnMenu

                                                    Try a demo showcasing the visible property.

                                                    Read the nested value:

                                                    const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemSortAsc.visible;
                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                    columnMenuItemSortDescProvides configuration options for the "Sort Descending" action within the column menu, allowing customization of its appearance, behavior, and accessibility in sortable grid or table components. Click for more details. Property object's options:
                                                       object

                                                      Provides configuration options for the "Sort Descending" action within the column menu, allowing customization of its appearance, behavior, and accessibility in sortable grid or table components.

                                                      Properties

                                                      commandConfigures the action for the column menu item that triggers sorting in descending order. This option defines the command executed when the user selects "Sort Descending" from a column's menu, typically reordering the column data from highest to lowest or Z to A.
                                                      enabledEnables the "Sort Descending" option in the column menu, allowing users to sort the data in the selected column from highest to lowest or in reverse alphabetical order.
                                                      iconSpecifies the icon displayed for the "Sort Descending" option in the column menu. This icon is used to visually indicate the action of sorting the column's data in descending order.
                                                      labelSpecifies the text label displayed for the "Sort Descending" option in the column menu. This label helps users identify and select the action to sort the column’s data in descending order.
                                                      visibleControls whether the "Sort Descending" option is visible in the column menu. When enabled, users can access and use the "Sort Descending" action from the column menu. When disabled, the "Sort Descending" menu item will be hidden, preventing users from sorting the column in descending order through the menu interface.

                                                      Back to root property: columnMenu

                                                      Try a demo showcasing the columnMenuItemSortDesc property.

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const columnMenuItemSortDesc = el.columnMenu.dataSource.columnMenuItemSortDesc;
                                                      Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                      commandConfigures the action for the column menu item that triggers sorting in descending order. This option defines the command executed when the user selects "Sort Descending" from a column's menu, typically reordering the column data from highest to lowest or Z to A.string

                                                      Configures the action for the column menu item that triggers sorting in descending order. This option defines the command executed when the user selects "Sort Descending" from a column's menu, typically reordering the column data from highest to lowest or Z to A.

                                                      Default value

                                                      "sortDescCommand"

                                                      Back to root property: columnMenu

                                                      Try a demo showcasing the command property.

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const command = el.columnMenu.dataSource.columnMenuItemSortDesc.command;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      enabledEnables the "Sort Descending" option in the column menu, allowing users to sort the data in the selected column from highest to lowest or in reverse alphabetical order.boolean

                                                      Enables the "Sort Descending" option in the column menu, allowing users to sort the data in the selected column from highest to lowest or in reverse alphabetical order.

                                                      Default value

                                                      true

                                                      Back to root property: columnMenu

                                                      Examples

                                                      Set a nested field on the element:

                                                      const el = document.querySelector('smart-grid');
el.columnMenu.dataSource.columnMenuItemSortDesc.enabled = true;

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.dataSource.columnMenuItemSortDesc.enabled;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      iconSpecifies the icon displayed for the "Sort Descending" option in the column menu. This icon is used to visually indicate the action of sorting the column's data in descending order.string

                                                      Specifies the icon displayed for the "Sort Descending" option in the column menu. This icon is used to visually indicate the action of sorting the column's data in descending order.

                                                      Default value

                                                      "smart-icon-sort-z-a"

                                                      Back to root property: columnMenu

                                                      Try a demo showcasing the icon property.

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const icon = el.columnMenu.dataSource.columnMenuItemSortDesc.icon;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      labelSpecifies the text label displayed for the "Sort Descending" option in the column menu. This label helps users identify and select the action to sort the column’s data in descending order.string

                                                      Specifies the text label displayed for the "Sort Descending" option in the column menu. This label helps users identify and select the action to sort the column’s data in descending order.

                                                      Default value

                                                      "{{messages}}"

                                                      Back to root property: columnMenu

                                                      Try a demo showcasing the label property.

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const label = el.columnMenu.dataSource.columnMenuItemSortDesc.label;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      visibleControls whether the "Sort Descending" option is visible in the column menu. When enabled, users can access and use the "Sort Descending" action from the column menu. When disabled, the "Sort Descending" menu item will be hidden, preventing users from sorting the column in descending order through the menu interface.string

                                                      Controls whether the "Sort Descending" option is visible in the column menu. When enabled, users can access and use the "Sort Descending" action from the column menu. When disabled, the "Sort Descending" menu item will be hidden, preventing users from sorting the column in descending order through the menu interface.

                                                      Default value

                                                      "auto"

                                                      Back to root property: columnMenu

                                                      Try a demo showcasing the visible property.

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const visible = el.columnMenu.dataSource.columnMenuItemSortDesc.visible;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      enabledControls the visibility of the column menu. When set to true, the column menu appears when the user hovers over the column header, providing additional options for manipulating the column. If set to false, the column menu is disabled and will not be displayed on hover. This property can be used to enable or disable the column menu programmatically.boolean

                                                      Controls the visibility of the column menu. When set to true, the column menu appears when the user hovers over the column header, providing additional options for manipulating the column. If set to false, the column menu is disabled and will not be displayed on hover. This property can be used to enable or disable the column menu programmatically.

                                                      Default value

                                                      false

                                                      Back to root property: columnMenu

                                                      Examples

                                                      Set a nested field on the element:

                                                      const el = document.querySelector('smart-grid');
el.columnMenu.enabled = true;

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const enabled = el.columnMenu.enabled;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      heightDefines the vertical height, in pixels, of the column menu component. Adjusting this value determines how much vertical space the column menu occupies, which can impact the display and usability of the menu's content items.number | null

                                                      Defines the vertical height, in pixels, of the column menu component. Adjusting this value determines how much vertical space the column menu occupies, which can impact the display and usability of the menu's content items.

                                                      Back to root property: columnMenu

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const height = el.columnMenu.height;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      visibleRetrieves the current visibility status of the column menu. This function returns true if the column menu is currently displayed to the user; otherwise, it returns false.boolean

                                                      Retrieves the current visibility status of the column menu. This function returns true if the column menu is currently displayed to the user; otherwise, it returns false.

                                                      Default value

                                                      false

                                                      Back to root property: columnMenu

                                                      Try a demo showcasing the visible property.

                                                      Examples

                                                      Set a nested field on the element:

                                                      const el = document.querySelector('smart-grid');
el.columnMenu.visible = true;

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const visible = el.columnMenu.visible;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      widthSpecifies the width, in pixels, of the column menu panel. This determines how wide the menu appears when a user opens the column options in the table or grid interface. Adjust this value to control the available space for menu items and improve usability.number

                                                      Specifies the width, in pixels, of the column menu panel. This determines how wide the menu appears when a user opens the column options in the table or grid interface. Adjust this value to control the available space for menu items and improve usability.

                                                      Default value

                                                      250

                                                      Back to root property: columnMenu

                                                      Try a demo showcasing the width property.

                                                      Read the nested value:

                                                      const el = document.querySelector('smart-grid');
const width = el.columnMenu.width;
                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                      columnReorderEnables drag-and-drop column reordering. Shorthand: sets behavior.allowColumnReorder to true.boolean

                                                      Enables drag-and-drop column reordering. Shorthand: sets behavior.allowColumnReorder to true.

                                                      Default value

                                                      false

                                                      Examples

                                                      Markup and runtime examples for columnReorder:

                                                      HTML attribute:

                                                      <smart-grid column-reorder></smart-grid>

                                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                      const el = document.querySelector('smart-grid');
el.columnReorder = true;

                                                      Read the current value:

                                                      const el = document.querySelector('smart-grid');
const columnReorder = el.columnReorder;
                                                      Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                      columnResizeEnables column resizing by dragging column edges. Shorthand: sets behavior.columnResize to the string growAndShrink (see behavior).boolean

                                                      Enables column resizing by dragging column edges. Shorthand: sets behavior.columnResize to the string growAndShrink (see behavior).

                                                      Default value

                                                      false

                                                      Examples

                                                      Markup and runtime examples for columnResize:

                                                      HTML attribute:

                                                      <smart-grid column-resize></smart-grid>

                                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                      const el = document.querySelector('smart-grid');
el.columnResize = true;

                                                      Read the current value:

                                                      const el = document.querySelector('smart-grid');
const columnResize = el.columnResize;
                                                      Related APIs behavior refresh() change

                                                      columnsThe 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. Click for more details. Property object's options:
                                                        {label: string, dataField: string}[] | string[] | number | Smart.Grid.Column[]

                                                        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.

                                                        Default value

                                                        null

                                                        Properties

                                                        alignSets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
                                                        allowEditSets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }
                                                        allowExportSets or gets whether the column can be exported.
                                                        allowFilterSets or gets whether the column can be filtered.
                                                        allowGroupSets or gets whether the column can be grouped.
                                                        allowHeaderEditSets or gets whether the column can be edited, when header editing is enabled.
                                                        allowHideSets or gets whether the column can be hidden.
                                                        allowNullSets or gets whether the column can have 'null' values.
                                                        allowReorderSets or gets whether the column can be reordered.
                                                        allowResizeSets or gets whether the column can be resized.
                                                        allowSelectSets or gets whether the column can be selected.
                                                        allowSortSets or gets whether the column can be sorted.
                                                        cardHeightSets or gets the cell's height in card view mode.
                                                        cellsAlignControls the horizontal alignment of cell content. Acceptable values:'left' - Aligns content to the left'right' - Aligns content to the right'center' - Centers content horizontally
                                                        cellsClassNameSets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }
                                                        cellsCSSRulesSets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value <5, 'three': settings => settings.value === 3 }. The settings object contains the following properties: index, value, dataField, row, api.
                                                        cellsFormatDefines the format applied to the column's cell values. Supports number and date format strings. Examples for numeric formatting:'d' - Decimal numbers (e.g., 25)'f' - Floating-point numbers (e.g., 25.50)'n' - Integer numbers with thousands separator (e.g., 1,000)'c' - Currency format (e.g., $25.50)'p' - Percentage format (e.g., 50%)To define decimal places, append a number (e.g., 'c2' = $25.26).Examples for date formatting:'d' - Short date (e.g., 3/25/2025)'D' - Long date (e.g., Tuesday, March 25, 2026)'t' - Short time (e.g., 1:30 PM)'T' - Long time (e.g., 1:30:45 PM)'f' - Long date + short time'F' - Long date + long time'M' - Month/day (e.g., March 25)'Y' - Year and month (e.g., 2026 March)'S' - Sortable, culture-invariant format (e.g., 2026-03-25T13:30:45)Custom date format tokens:'dd' - Day of month (e.g., 01-31)'MMMM' - Full month name'yyyy' - 4-digit yearAnd many more standard date/time tokens
                                                        cellsRendererSets or gets the column's cells renderer function for custom html rendering in the cells. For more advanced scenarios use formatFunction or template, but for simple html rendering, you can use this.
                                                        cellsVerticalAlignSets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'
                                                        cellsWrapSets or gets the column's cells wrapping. Accepts: true or false.
                                                        classNameSets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.
                                                        collapsedSets or gets whether the column is collapsed.
                                                        columnGroupSets the name of the column group.
                                                        dataFieldSets or gets the column's data source bound field.
                                                        dataSetSets or gets custom data object related to the column.
                                                        dataTypeSets or gets the column's data type. Any of the following value is valid: 'string', 'number', 'int', 'date', 'bool', 'object', 'any'
                                                        descriptionSets or gets the column's description. The description of the column is displayed in the column's header, when the end-user moves the pointer over the description button. 'showDescriptionButton' property determines whether the description button is visible.
                                                        detailColumnsSets or gets which columns will be expanded/collapsed when the column is collapsible. The property expects an array of data fields.
                                                        displayFieldSets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.
                                                        editorSets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.
                                                        elementGets the HTML Element. The property returns null when the Column is not in the View.
                                                        filterSets or gets the filter of the column. Example: ['contains Andrew or contains Nancy']. Example with numeric filter ['quantity', '<= 3 and >= 8']. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - ['EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']. Example with a string filter applied to a string column - ['CONTAINS' 'burke' or 'CONTAINS' 'peterson']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'
                                                        filterEditorSets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: number
                                                        filterMenuModeSets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed.
                                                        formatFunctionSets or gets the column's format function.
                                                        formatSettingsDefines the formatting settings applied to the column's values. You can use built-in formatting options or provide advanced internationalization formats using Intl objects. For example, to apply currency formatting: 'Intl: { NumberFormat: { style: "currency", currency: "EUR" } }', or for date formatting: 'Intl: { DateTimeFormat: { dateStyle: "full" } }'. Click for more details. Property object's options:
                                                          formulaSets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')
                                                          freezeSets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).
                                                          getCellValueThis function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.
                                                          getFilterPanelGets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu. The function works in combination with updateFilterPanel
                                                          groupSets or gets the column's group.
                                                          headerTemplateSets or gets the column header's template function. The property expects a function(element) { } which can be used to set up the column's header label.
                                                          iconSets or gets the column's icon. Expects CSS class name.
                                                          labelSets or gets the text displayed in the column's header.
                                                          labelTemplateSets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.
                                                          minWidthSets or gets the minimum width.
                                                          onCellClickSets or gets the column's click handler.
                                                          optionsSets or gets the column options for editors such as list, dropdownlist or tags.
                                                          relationFieldSpecifies the data field within the current data source that participates in the relationship defined by 'relationId'. Both 'relationField' and 'relationId' must be configured to create a valid relation.
                                                          relationIdDefines the unique identifier of a relation within dataSourceSettings.relations. Must be used together with the 'relationField' property to establish the relationship mapping.
                                                          rowSpanSets or gets the column's rowSpan function. Allows you to dynamically span cells.
                                                          showActionButtonSets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
                                                          showDescriptionButtonSets or gets whether the column's header description button is displayed.
                                                          showIconSets or gets whether the column's header icon is displayed.
                                                          sortComparatorSets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) => { if (value1 === value2) return 0; return value1 <value2; }
                                                          sortIndexSets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.
                                                          sortOrderSets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null.
                                                          summarySets or gets the column summary. The property should be set to an array with the following possible values: 'sum', 'min', 'max', 'avg', 'count', 'median', 'stdev', 'stdevp', 'var', 'varp'.
                                                          templateSets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.
                                                          templateSettingsSets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.
                                                          tooltipSets or gets the column's tooltip.
                                                          tooltipRendererSets or gets the column's tooltip renderer which renders tooltips for the column cells. (rowId, dataField, cellValue, formattedValue, data)
                                                          updateFilterPanelUpdates the column's filter panel. The function works in combination with getFilterPanel
                                                          validationRulesSets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message. Click for more details. Property object's options:
                                                            verticalAlignSets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
                                                            visibleSets or gets whether the column is visible. Set the property to 'false' to hide the column.
                                                            widthSets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
                                                            Try a demo showcasing the columns property.

                                                            Full working example

                                                            Minimal setup for columns with the data and bindings you usually use together on this component.

                                                            JavaScript — minimal grid with columns:

                                                            // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns
});
                                                            Related APIs columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            alignSets or gets the column's header alignment. Accepts: 'left', 'right', 'center'"left" | "right" | "center"

                                                            Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'

                                                            Default value

                                                            "left"

                                                            Back to root property: columns

                                                            Try a demo showcasing the align property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].align = "right";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const align = el.columns[0].align;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            allowEditSets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }any

                                                            Sets or gets whether the column can be edited. The property can be 'boolean' i.e accept true and false values. To dynamically determine which cells are editable, a callback function can be supplied to the 'allowEdit' property. For example: allowEdit: (id, dataField, value, data) => { return value === 'Cappuccino'; }

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowEdit property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowEdit = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowEdit = el.columns[0].allowEdit;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            allowExportSets or gets whether the column can be exported.boolean

                                                            Sets or gets whether the column can be exported.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowExport property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowExport = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowExport = el.columns[0].allowExport;
                                                            Related APIs dataExport exportData() print()

                                                            allowFilterSets or gets whether the column can be filtered.boolean

                                                            Sets or gets whether the column can be filtered.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowFilter property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowFilter = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowFilter = el.columns[0].allowFilter;
                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                            allowGroupSets or gets whether the column can be grouped.boolean

                                                            Sets or gets whether the column can be grouped.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowGroup property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowGroup = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowGroup = el.columns[0].allowGroup;
                                                            Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                            allowHeaderEditSets or gets whether the column can be edited, when header editing is enabled.boolean

                                                            Sets or gets whether the column can be edited, when header editing is enabled.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowHeaderEdit property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowHeaderEdit = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowHeaderEdit = el.columns[0].allowHeaderEdit;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            allowHideSets or gets whether the column can be hidden.boolean

                                                            Sets or gets whether the column can be hidden.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowHide property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowHide = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowHide = el.columns[0].allowHide;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            allowNullSets or gets whether the column can have 'null' values.boolean

                                                            Sets or gets whether the column can have 'null' values.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowNull property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowNull = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowNull = el.columns[0].allowNull;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            allowReorderSets or gets whether the column can be reordered.boolean

                                                            Sets or gets whether the column can be reordered.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowReorder property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowReorder = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowReorder = el.columns[0].allowReorder;
                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                            allowResizeSets or gets whether the column can be resized.boolean

                                                            Sets or gets whether the column can be resized.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowResize property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowResize = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowResize = el.columns[0].allowResize;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            allowSelectSets or gets whether the column can be selected.boolean | null

                                                            Sets or gets whether the column can be selected.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowSelect property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowSelect = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowSelect = el.columns[0].allowSelect;
                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                            allowSortSets or gets whether the column can be sorted.boolean

                                                            Sets or gets whether the column can be sorted.

                                                            Default value

                                                            true

                                                            Back to root property: columns

                                                            Try a demo showcasing the allowSort property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].allowSort = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const allowSort = el.columns[0].allowSort;
                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                            cardHeightSets or gets the cell's height in card view mode.number

                                                            Sets or gets the cell's height in card view mode.

                                                            Default value

                                                            0

                                                            Back to root property: columns

                                                            Try a demo showcasing the cardHeight property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].cardHeight = 3;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cardHeight = el.columns[0].cardHeight;
                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                            cellsAlignControls the horizontal alignment of cell content. Acceptable values:'left' - Aligns content to the left'right' - Aligns content to the right'center' - Centers content horizontally"left" | "right" | "center"

                                                            Controls the horizontal alignment of cell content. Acceptable values:

                                                            'left' - Aligns content to the left

                                                            'right' - Aligns content to the right

                                                            'center' - Centers content horizontally

                                                            Default value

                                                            "left"

                                                            Back to root property: columns

                                                            Try a demo showcasing the cellsAlign property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].cellsAlign = "center";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cellsAlign = el.columns[0].cellsAlign;
                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                            cellsClassNameSets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }any

                                                            Sets or gets the column's cells CSS class name(s). The property can be used with string and function. You can apply multiple CSS class names by separating them with space or you can return a CSS class name(s) when you use it as a function. The function gets called with the following parameters: index - row's index, dataField - column's data field, cellValue - current cell's value, rowData - current row's data, row - GridRow object. Ex: cellsClassName: (index, dataField, value, rowData, row) => { if (index === 0) { return 'cell-class-1' } }

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the cellsClassName property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].cellsClassName = "my-css-class-2";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cellsClassName = el.columns[0].cellsClassName;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            cellsCSSRulesSets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value <5, 'three': settings => settings.value === 3 }. The settings object contains the following properties: index, value, dataField, row, api.any

                                                            Sets or gets the column's cells CSS class rules. Different CSS class names are conditionally applied. Example: label: 'Quantity', dataField: 'quantity', editor: 'numberInput', cellsClassRules: { 'one': settings => settings.value > 5, 'two': settings => settings.value <5, 'three': settings => settings.value === 3 }. The settings object contains the following properties: index, value, dataField, row, api.

                                                            Back to root property: columns

                                                            Try a demo showcasing the cellsCSSRules property.

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cellsCSSRules = el.columns[0].cellsCSSRules;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            cellsFormatDefines the format applied to the column's cell values. Supports number and date format strings. Examples for numeric formatting:'d' - Decimal numbers (e.g., 25)'f' - Floating-point numbers (e.g., 25.50)'n' - Integer numbers with thousands separator (e.g., 1,000)'c' - Currency format (e.g., $25.50)'p' - Percentage format (e.g., 50%)To define decimal places, append a number (e.g., 'c2' = $25.26).Examples for date formatting:'d' - Short date (e.g., 3/25/2025)'D' - Long date (e.g., Tuesday, March 25, 2026)'t' - Short time (e.g., 1:30 PM)'T' - Long time (e.g., 1:30:45 PM)'f' - Long date + short time'F' - Long date + long time'M' - Month/day (e.g., March 25)'Y' - Year and month (e.g., 2026 March)'S' - Sortable, culture-invariant format (e.g., 2026-03-25T13:30:45)Custom date format tokens:'dd' - Day of month (e.g., 01-31)'MMMM' - Full month name'yyyy' - 4-digit yearAnd many more standard date/time tokensstring

                                                            Defines the format applied to the column's cell values. Supports number and date format strings. Examples for numeric formatting:

                                                            'd' - Decimal numbers (e.g., 25)

                                                            'f' - Floating-point numbers (e.g., 25.50)

                                                            'n' - Integer numbers with thousands separator (e.g., 1,000)

                                                            'c' - Currency format (e.g., $25.50)

                                                            'p' - Percentage format (e.g., 50%)
                                                            To define decimal places, append a number (e.g., 'c2' = $25.26).

                                                            Examples for date formatting:

                                                            'd' - Short date (e.g., 3/25/2025)

                                                            'D' - Long date (e.g., Tuesday, March 25, 2026)

                                                            't' - Short time (e.g., 1:30 PM)

                                                            'T' - Long time (e.g., 1:30:45 PM)

                                                            'f' - Long date + short time

                                                            'F' - Long date + long time

                                                            'M' - Month/day (e.g., March 25)

                                                            'Y' - Year and month (e.g., 2026 March)

                                                            'S' - Sortable, culture-invariant format (e.g., 2026-03-25T13:30:45)

                                                            Custom date format tokens:

                                                            'dd' - Day of month (e.g., 01-31)

                                                            'MMMM' - Full month name

                                                            'yyyy' - 4-digit year

                                                            And many more standard date/time tokens

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the cellsFormat property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].cellsFormat = "c2";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cellsFormat = el.columns[0].cellsFormat;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            cellsRendererSets or gets the column's cells renderer function for custom html rendering in the cells. For more advanced scenarios use formatFunction or template, but for simple html rendering, you can use this.{(rowId: string | number, dataField: string, cellValue: any, rowData: any, cellElement: any): string}

                                                            Sets or gets the column's cells renderer function for custom html rendering in the cells. For more advanced scenarios use formatFunction or template, but for simple html rendering, you can use this.

                                                            Back to root property: columns

                                                            Try a demo showcasing the cellsRenderer property.

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cellsRenderer = el.columns[0].cellsRenderer;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            cellsVerticalAlignSets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'"top" | "bottom" | "center"

                                                            Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'

                                                            Default value

                                                            "center"

                                                            Back to root property: columns

                                                            Try a demo showcasing the cellsVerticalAlign property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].cellsVerticalAlign = "bottom";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cellsVerticalAlign = el.columns[0].cellsVerticalAlign;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            cellsWrapSets or gets the column's cells wrapping. Accepts: true or false.boolean

                                                            Sets or gets the column's cells wrapping. Accepts: true or false.

                                                            Default value

                                                            false

                                                            Back to root property: columns

                                                            Try a demo showcasing the cellsWrap property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].cellsWrap = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const cellsWrap = el.columns[0].cellsWrap;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            classNameSets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.string

                                                            Sets or gets the column's header CSS class name. You can apply multiple CSS class names by separating them with space.

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the className property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].className = "my-css-class-2";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const className = el.columns[0].className;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            collapsedSets or gets whether the column is collapsed.boolean

                                                            Sets or gets whether the column is collapsed.

                                                            Default value

                                                            false

                                                            Back to root property: columns

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].collapsed = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const collapsed = el.columns[0].collapsed;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            columnGroupSets the name of the column group.string

                                                            Sets the name of the column group.

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the columnGroup property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].columnGroup = "Date";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const columnGroup = el.columns[0].columnGroup;
                                                            Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                            dataFieldSets or gets the column's data source bound field.string

                                                            Sets or gets the column's data source bound field.

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the dataField property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].dataField = "lastName";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const dataField = el.columns[0].dataField;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            dataSetSets or gets custom data object related to the column.any

                                                            Sets or gets custom data object related to the column.

                                                            Back to root property: columns

                                                            Try a demo showcasing the dataSet property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].dataSet = true;

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const dataSet = el.columns[0].dataSet;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            dataTypeSets or gets the column's data type. Any of the following value is valid: 'string', 'number', 'int', 'date', 'bool', 'object', 'any'string

                                                            Sets or gets the column's data type. Any of the following value is valid: 'string', 'number', 'int', 'date', 'bool', 'object', 'any'

                                                            Default value

                                                            "string"

                                                            Back to root property: columns

                                                            Try a demo showcasing the dataType property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].dataType = "number";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const dataType = el.columns[0].dataType;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            descriptionSets or gets the column's description. The description of the column is displayed in the column's header, when the end-user moves the pointer over the description button. 'showDescriptionButton' property determines whether the description button is visible.string

                                                            Sets or gets the column's description. The description of the column is displayed in the column's header, when the end-user moves the pointer over the description button. 'showDescriptionButton' property determines whether the description button is visible.

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the description property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].description = "lastName";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const description = el.columns[0].description;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            detailColumnsSets or gets which columns will be expanded/collapsed when the column is collapsible. The property expects an array of data fields. []

                                                            Sets or gets which columns will be expanded/collapsed when the column is collapsible. The property expects an array of data fields.

                                                            Back to root property: columns

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const detailColumns = el.columns[0].detailColumns;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            displayFieldSets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.string

                                                            Sets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the displayField property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].displayField = "lastName";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const displayField = el.columns[0].displayField;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            editorSets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.string | {template?: string, settings?: any, onInit?: any, onRender?: any, setValue?: any, getValue?: any}

                                                            Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.

                                                            Back to root property: columns

                                                            Try a demo showcasing the editor property.

                                                            Examples

                                                            Set a nested field on the element:

                                                            const el = document.querySelector('smart-grid');
el.columns[0].editor = "numberInput";

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const editor = el.columns[0].editor;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            elementGets the HTML Element. The property returns null when the Column is not in the View.HTMLElement

                                                            Gets the HTML Element. The property returns null when the Column is not in the View.

                                                            Back to root property: columns

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const element = el.columns[0].element;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            filterSets or gets the filter of the column. Example: ['contains Andrew or contains Nancy']. Example with numeric filter ['quantity', '<= 3 and >= 8']. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - ['EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']. Example with a string filter applied to a string column - ['CONTAINS' 'burke' or 'CONTAINS' 'peterson']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'any

                                                            Sets or gets the filter of the column. Example: ['contains Andrew or contains Nancy']. Example with numeric filter ['quantity', '<= 3 and >= 8']. Additional example with filter which we want to apply to a column with filterMenuMode='excel' - ['EQUAL' 'Andrew' or 'EQUAL' 'Antoni' or 'EQUAL' 'Beate']. Example with a string filter applied to a string column - ['CONTAINS' 'burke' or 'CONTAINS' 'peterson']. Filter conditions which you can use in the expressions: '=', 'EQUAL','<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN','>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL','starts with', 'STARTS_WITH','ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS','DOES_NOT_CONTAIN', 'NULL','NOT_NULL'

                                                            Default value

                                                            ""

                                                            Back to root property: columns

                                                            Try a demo showcasing the filter property.

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const filter = el.columns[0].filter;
                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter()

                                                            filterEditorSets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: numberany

                                                            Sets or gets the column's filter editor. The value is an object with the following possible options: template: string, condition: string, onInit: any - callback function for init purposes, min: number, max: number, minLength: number, maxLength: number

                                                            Back to root property: columns

                                                            Try a demo showcasing the filterEditor property.

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const filterEditor = el.columns[0].filterEditor;
                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                            filterMenuModeSets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed."basic" | "default" | "excel" | "multi"

                                                            Sets or gets the filter menu mode of the column. In 'basic' mode, a single input is displayed in the filter menu. In 'default' mode, two input options are available for more precise filtering. In 'excel' mode, checked list with unique values is displayed.

                                                            Default value

                                                            "default"

                                                            Back to root property: columns

                                                            Try a demo showcasing the filterMenuMode property.

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const filterMenuMode = el.columns[0].filterMenuMode;
                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                            formatFunctionSets or gets the column's format function.{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, oldValue?: any, value?: any, template?: any, data?: any}): void}

                                                            Sets or gets the column's format function.

                                                            Back to root property: columns

                                                            Try a demo showcasing the formatFunction property.

                                                            Read the nested value:

                                                            const el = document.querySelector('smart-grid');
const formatFunction = el.columns[0].formatFunction;
                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                            formatSettingsDefines the formatting settings applied to the column's values. You can use built-in formatting options or provide advanced internationalization formats using Intl objects. For example, to apply currency formatting: 'Intl: { NumberFormat: { style: "currency", currency: "EUR" } }', or for date formatting: 'Intl: { DateTimeFormat: { dateStyle: "full" } }'. Click for more details. Property object's options:
                                                              any

                                                              Defines the formatting settings applied to the column's values. You can use built-in formatting options or provide advanced internationalization formats using Intl objects. For example, to apply currency formatting: 'Intl: { NumberFormat: { style: "currency", currency: "EUR" } }', or for date formatting: 'Intl: { DateTimeFormat: { dateStyle: "full" } }'.



                                                              The formatSettings property's object value may have the following properties:
                                                              • decimalPlaces: number - Specifies the number of decimal places to display for numeric values.
                                                              • negativeWithBrackets: boolean - If true, negative numbers are displayed within brackets, e.g., (100) instead of -100.
                                                              • prefix: string - Adds a prefix to the formatted value, commonly used for symbols like '$' or '€'.
                                                              • sufix: string - Adds a suffix to the formatted value, often used for units or currency codes (e.g., 'USD', 'kg').
                                                              • thousandsSeparator: string - Defines the character used to separate thousands in numeric values.
                                                              • dateFormat: string - Specifies the format string used for displaying date values. Supports standard date format patterns.

                                                              Back to root property: columns

                                                              Try a demo showcasing the formatSettings property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const formatSettings = el.columns[0].formatSettings;
                                                              Related APIs appearance layout refresh() change

                                                              formulaSets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')string

                                                              Sets or gets the column's formula. The formula you set will be applied to all cells. Example: COL(Name) & '-' & COL(Price) or IF(COL(Price) * COL(Quantity) > 5, 'Yes', 'No')

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the formula property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].formula = "COL(Quantity) * COL(Price)";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const formula = el.columns[0].formula;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              freezeSets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far)."near" | "far" | "true" | "false"

                                                              Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).

                                                              Default value

                                                              false

                                                              Back to root property: columns

                                                              Try a demo showcasing the freeze property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].freeze = "far";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const freeze = el.columns[0].freeze;
                                                              Related APIs behavior refresh() change

                                                              getCellValueThis function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.any

                                                              This function allows you to provide custom cell values, which will be displayed in the column's cells. The grid passes 3 arguments to the function - row id, column's dataField and row's data.

                                                              Back to root property: columns

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const getCellValue = el.columns[0].getCellValue;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              getFilterPanelGets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu. The function works in combination with updateFilterPanelany

                                                              Gets the column's filter panel. The function should return HTMLElement which will represent the filter UI panel displayed in the filter menu. The function works in combination with updateFilterPanel

                                                              Back to root property: columns

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const getFilterPanel = el.columns[0].getFilterPanel;
                                                              Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                              groupSets or gets the column's group.string

                                                              Sets or gets the column's group.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the group property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].group = "lastName";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const group = el.columns[0].group;
                                                              Related APIs grouping groupable addGroup() removeGroup() clearGroups()

                                                              headerTemplateSets or gets the column header's template function. The property expects a function(element) { } which can be used to set up the column's header label.HTMLElement

                                                              Sets or gets the column header's template function. The property expects a function(element) { } which can be used to set up the column's header label.

                                                              Back to root property: columns

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const headerTemplate = el.columns[0].headerTemplate;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              iconSets or gets the column's icon. Expects CSS class name.string

                                                              Sets or gets the column's icon. Expects CSS class name.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the icon property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const icon = el.columns[0].icon;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              labelSets or gets the text displayed in the column's header.string

                                                              Sets or gets the text displayed in the column's header.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the label property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].label = "Last Name";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const label = el.columns[0].label;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              labelTemplateSets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.string | HTMLTemplateElement | HTMLElement | {(label: string): string}

                                                              Sets or gets the column header's template. The property expects the 'id' of HTMLTemplateElement, HTML string or function which returns html string.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const labelTemplate = el.columns[0].labelTemplate;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              minWidthSets or gets the minimum width.number

                                                              Sets or gets the minimum width.

                                                              Default value

                                                              30

                                                              Back to root property: columns

                                                              Try a demo showcasing the minWidth property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const minWidth = el.columns[0].minWidth;

                                                              onCellClickSets or gets the column's click handler.{(event: any, rowId: string | number, dataField: string, cellValue: any, rowData: any, cellElement: any): string}

                                                              Sets or gets the column's click handler.

                                                              Back to root property: columns

                                                              Try a demo showcasing the onCellClick property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const onCellClick = el.columns[0].onCellClick;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              optionsSets or gets the column options for editors such as list, dropdownlist or tags.[]

                                                              Sets or gets the column options for editors such as list, dropdownlist or tags.

                                                              Default value

                                                              []

                                                              Back to root property: columns

                                                              Try a demo showcasing the options property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].options = "High";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const options = el.columns[0].options;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              relationFieldSpecifies the data field within the current data source that participates in the relationship defined by 'relationId'. Both 'relationField' and 'relationId' must be configured to create a valid relation.string

                                                              Specifies the data field within the current data source that participates in the relationship defined by 'relationId'. Both 'relationField' and 'relationId' must be configured to create a valid relation.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the relationField property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].relationField = "lastName";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const relationField = el.columns[0].relationField;
                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                              relationIdDefines the unique identifier of a relation within dataSourceSettings.relations. Must be used together with the 'relationField' property to establish the relationship mapping.string

                                                              Defines the unique identifier of a relation within dataSourceSettings.relations. Must be used together with the 'relationField' property to establish the relationship mapping.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the relationId property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].relationId = "id2";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const relationId = el.columns[0].relationId;

                                                              rowSpanSets or gets the column's rowSpan function. Allows you to dynamically span cells.{(cellValue: any, rowIndex: number, data: any): number}

                                                              Sets or gets the column's rowSpan function. Allows you to dynamically span cells.

                                                              Back to root property: columns

                                                              Try a demo showcasing the rowSpan property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const rowSpan = el.columns[0].rowSpan;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              showActionButtonSets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.boolean

                                                              Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.

                                                              Default value

                                                              true

                                                              Back to root property: columns

                                                              Try a demo showcasing the showActionButton property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].showActionButton = false;

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const showActionButton = el.columns[0].showActionButton;
                                                              Related APIs behavior refresh() change

                                                              showDescriptionButtonSets or gets whether the column's header description button is displayed.boolean

                                                              Sets or gets whether the column's header description button is displayed.

                                                              Default value

                                                              false

                                                              Back to root property: columns

                                                              Try a demo showcasing the showDescriptionButton property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].showDescriptionButton = false;

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const showDescriptionButton = el.columns[0].showDescriptionButton;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              showIconSets or gets whether the column's header icon is displayed.boolean

                                                              Sets or gets whether the column's header icon is displayed.

                                                              Default value

                                                              false

                                                              Back to root property: columns

                                                              Try a demo showcasing the showIcon property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].showIcon = false;

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const showIcon = el.columns[0].showIcon;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              sortComparatorSets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) => { if (value1 === value2) return 0; return value1 <value2; }any

                                                              Sets or gets a custom 'sortComparator' function. It can be used for implementing custom sorting. Ex: sortComparator: (value1, value2) => { if (value1 === value2) return 0; return value1 <value2; }

                                                              Back to root property: columns

                                                              Try a demo showcasing the sortComparator property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].sortComparator = 2;

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const sortComparator = el.columns[0].sortComparator;
                                                              Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                              sortIndexSets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.number

                                                              Sets or gets the sort index of the column. Accepts an integer value. This property can be used to get or set the column's sort index when sorting mode is 'many'.

                                                              Back to root property: columns

                                                              Try a demo showcasing the sortIndex property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].sortIndex = 2;

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const sortIndex = el.columns[0].sortIndex;
                                                              Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                              sortOrderSets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null."asc" | "desc" | "none"

                                                              Sets or gets the sort order of the column. Accepts: 'asc', 'desc', 'none' and null.

                                                              Default value

                                                              none

                                                              Back to root property: columns

                                                              Try a demo showcasing the sortOrder property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].sortOrder = "desc";

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const sortOrder = el.columns[0].sortOrder;
                                                              Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                              summarySets or gets the column summary. The property should be set to an array with the following possible values: 'sum', 'min', 'max', 'avg', 'count', 'median', 'stdev', 'stdevp', 'var', 'varp'. string[]

                                                              Sets or gets the column summary. The property should be set to an array with the following possible values: 'sum', 'min', 'max', 'avg', 'count', 'median', 'stdev', 'stdevp', 'var', 'varp'.

                                                              Back to root property: columns

                                                              Try a demo showcasing the summary property.

                                                              Examples

                                                              Set a nested field on the element:

                                                              const el = document.querySelector('smart-grid');
el.columns[0].summary = ['avg'];

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const summary = el.columns[0].summary;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              templateSets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.string | HTMLTemplateElement | HTMLElement | {(row: GridRow, column: GridColumn, cell: GridCell, oldValue: any, value: any, template: any, data: any): void}

                                                              Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in string values are: 'checkBox', 'switchButton', 'url', 'email', 'dropdownlist', 'list', 'progress', 'tags', 'autoNumber', 'modifiedBy', 'createdBy', 'createdTime', 'modifiedTime', 'images', 'checklist', 'attachments', 'sparklines', 'richText', 'color', 'rating', 'duration', 'startDate', 'dueDates'. For example, when you set the template to 'url', the cells will be render anchor tags. When you set the template property to HTMLTemplateElement you should consider that once a template is rendered, the formatObject.template property stores the rendered template component for further use.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the template property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const template = el.columns[0].template;
                                                              Related APIs appearance layout refresh() change

                                                              templateSettingsSets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.any

                                                              Sets or gets additional settings related to the column's template. For example, when the template is 'sparklines', the templateSettings could be an object which defines has 'type' - 'bar', 'column', 'line' or 'pie'. If you want to apply a custom color, you can add the 'colorFunction: function(value) { } and return a custom color as a 'hex' string or a 'tooltipFormatFunction: function(value) {}' which returns a formatted tooltip string. Additional properties are 'min', 'max', 'gap' and 'strokeWidth'.

                                                              Back to root property: columns

                                                              Try a demo showcasing the templateSettings property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const templateSettings = el.columns[0].templateSettings;
                                                              Related APIs appearance layout refresh() change

                                                              tooltipSets or gets the column's tooltip.string

                                                              Sets or gets the column's tooltip.

                                                              Default value

                                                              ""

                                                              Back to root property: columns

                                                              Try a demo showcasing the tooltip property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const tooltip = el.columns[0].tooltip;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              tooltipRendererSets or gets the column's tooltip renderer which renders tooltips for the column cells. (rowId, dataField, cellValue, formattedValue, data)any

                                                              Sets or gets the column's tooltip renderer which renders tooltips for the column cells. (rowId, dataField, cellValue, formattedValue, data)

                                                              Back to root property: columns

                                                              Try a demo showcasing the tooltipRenderer property.

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const tooltipRenderer = el.columns[0].tooltipRenderer;
                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                              updateFilterPanelUpdates the column's filter panel. The function works in combination with getFilterPanelany

                                                              Updates the column's filter panel. The function works in combination with getFilterPanel

                                                              Back to root property: columns

                                                              Read the nested value:

                                                              const el = document.querySelector('smart-grid');
const updateFilterPanel = el.columns[0].updateFilterPanel;
                                                              Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                              validationRulesSets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message. Click for more details. Property object's options:
                                                                [] | null

                                                                Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.

                                                                Back to root property: columns

                                                                Try a demo showcasing the validationRules property.

                                                                Examples

                                                                Set a nested field on the element:

                                                                const el = document.querySelector('smart-grid');
el.columns[0].validationRules = {type: 'email'};

                                                                Read the nested value:

                                                                const el = document.querySelector('smart-grid');
const validationRules = el.columns[0].validationRules;
                                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                verticalAlignSets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'"top" | "bottom" | "center"

                                                                Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'

                                                                Default value

                                                                "center"

                                                                Back to root property: columns

                                                                Try a demo showcasing the verticalAlign property.

                                                                Examples

                                                                Set a nested field on the element:

                                                                const el = document.querySelector('smart-grid');
el.columns[0].verticalAlign = "bottom";

                                                                Read the nested value:

                                                                const el = document.querySelector('smart-grid');
const verticalAlign = el.columns[0].verticalAlign;
                                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                visibleSets or gets whether the column is visible. Set the property to 'false' to hide the column.boolean

                                                                Sets or gets whether the column is visible. Set the property to 'false' to hide the column.

                                                                Default value

                                                                true

                                                                Back to root property: columns

                                                                Try a demo showcasing the visible property.

                                                                Examples

                                                                Set a nested field on the element:

                                                                const el = document.querySelector('smart-grid');
el.columns[0].visible = false;

                                                                Read the nested value:

                                                                const el = document.querySelector('smart-grid');
const visible = el.columns[0].visible;
                                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                widthSets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.string | number

                                                                Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.

                                                                Default value

                                                                ""

                                                                Back to root property: columns

                                                                Try a demo showcasing the width property.

                                                                Examples

                                                                Set a nested field on the element:

                                                                const el = document.querySelector('smart-grid');
el.columns[0].width = 200;

                                                                Read the nested value:

                                                                const el = document.querySelector('smart-grid');
const width = el.columns[0].width;

                                                                commentsSets cell comments. Example: [{ id: 4, dataField: 'A', comment: 'Hello Smart.Grid' }] []

                                                                Sets cell comments. Example: [{ id: 4, dataField: 'A', comment: 'Hello Smart.Grid' }]

                                                                Try a demo showcasing the comments property.
                                                                Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                conditionalFormattingDefines 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. Click for more details. Property object's options:
                                                                  { column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]

                                                                  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.

                                                                  Properties

                                                                  columnThe data field of a numeric column to format. Set 'all' to format all numeric columns.
                                                                  conditionThe formatting condition.
                                                                  firstValueThe value to compare by. When condition is 'between', this is the start (from) value.
                                                                  fontFamilyThe fontFamily to apply to formatted cells.
                                                                  fontSizeThe fontSize to apply to formatted cells.
                                                                  highlightThe background color to apply to formatted cells.
                                                                  secondValueWhen condition is 'between', this is the end (to) value. Otherwise, this value is not used.
                                                                  textThe text color to apply to formatted cells.
                                                                  Try a demo showcasing the conditionalFormatting property.

                                                                  Examples

                                                                  Markup and runtime examples for conditionalFormatting:

                                                                  HTML:

                                                                  <smart-grid conditional-formatting="{ column: 'quantity', condition: 'greaterThan', firstValue: 8, text: '#6AA84F' }, { column: 'quantity', condition: 'lessThan', firstValue: 3, text: '#CC0000' }"></smart-grid>

                                                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                  const el = document.querySelector('smart-grid');
el.conditionalFormatting = { column: 'price', condition: 'between', firstValue: 3, secondValue: 5, fontFamily: 'Courier New', text: '#0000FF' }, { column: 'total', condition: 'greaterThan', firstValue: 25, fontSize: '14px', text: '#FFFFFF', highlight: '#6AA84F' };

                                                                  Read the current value:

                                                                  const el = document.querySelector('smart-grid');
const conditionalFormatting = el.conditionalFormatting;
                                                                  Related APIs appearance layout refresh() change

                                                                  columnThe data field of a numeric column to format. Set 'all' to format all numeric columns.string

                                                                  The data field of a numeric column to format. Set 'all' to format all numeric columns.

                                                                  Default value

                                                                  "all"

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the column property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const column = el.conditionalFormatting.column;
                                                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                  conditionThe formatting condition."between" | "equal" | "greaterThan" | "lessThan" | "notEqual"

                                                                  The formatting condition.

                                                                  Default value

                                                                  "lessThan"

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the condition property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const condition = el.conditionalFormatting.condition;

                                                                  firstValueThe value to compare by. When condition is 'between', this is the start (from) value.number

                                                                  The value to compare by. When condition is 'between', this is the start (from) value.

                                                                  Default value

                                                                  0

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the firstValue property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const firstValue = el.conditionalFormatting.firstValue;

                                                                  fontFamilyThe fontFamily to apply to formatted cells.string

                                                                  The fontFamily to apply to formatted cells.

                                                                  Default value

                                                                  ""

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the fontFamily property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const fontFamily = el.conditionalFormatting.fontFamily;

                                                                  fontSizeThe fontSize to apply to formatted cells.string

                                                                  The fontSize to apply to formatted cells.

                                                                  Default value

                                                                  "The default fontSize as set in CSS"

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the fontSize property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const fontSize = el.conditionalFormatting.fontSize;

                                                                  highlightThe background color to apply to formatted cells.string

                                                                  The background color to apply to formatted cells.

                                                                  Default value

                                                                  "The default backgroundColor as set in CSS"

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the highlight property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const highlight = el.conditionalFormatting.highlight;
                                                                  Related APIs appearance layout refresh() change

                                                                  secondValueWhen condition is 'between', this is the end (to) value. Otherwise, this value is not used.number

                                                                  When condition is 'between', this is the end (to) value. Otherwise, this value is not used.

                                                                  Default value

                                                                  1

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the secondValue property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const secondValue = el.conditionalFormatting.secondValue;

                                                                  textThe text color to apply to formatted cells.string

                                                                  The text color to apply to formatted cells.

                                                                  Default value

                                                                  "The default color as set in CSS"

                                                                  Back to root property: conditionalFormatting

                                                                  Try a demo showcasing the text property.

                                                                  Read the nested value:

                                                                  const el = document.querySelector('smart-grid');
const text = el.conditionalFormatting.text;
                                                                  Related APIs appearance layout refresh() change

                                                                  contextMenuThe 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. Click for more details. Property object's options:
                                                                     object

                                                                    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.

                                                                    Properties

                                                                    customContextMenuItemsDefines an array of custom context menu items that will appear when the user opens the context menu. Each item in the array specifies the label, action, and additional options for the menu entry, enabling developers to tailor the context menu to their application's specific requirements.
                                                                    dataSourceAssociates a list of data sources with the context menu, enabling dynamic population of menu items based on the specified data. This allows the context menu to display relevant options according to the provided data sources. Click for more details. Property object's options:
                                                                    • contextMenuItemDelete:object - Provides the structure and parameters required to delete an item, including details such as the unique identifier of the item to be removed and any necessary authentication or validation information. Outlines the expected request format and possible responses for a delete operation.
                                                                    • contextMenuItemEdit:object - Provides a detailed schema for the "edit item" operation, outlining the structure and fields required to update an existing item's information. This includes the item's unique identifier and any attributes that can be modified, ensuring accurate and efficient editing of item details within the application.
                                                                    • contextMenuItemCustom:object - Provides detailed information about the custom item, including its properties, attributes, and any associated metadata used for configuration and display within the application.
                                                                    enabledControls the visibility of the context menu within the component. When set to true, the context menu appears upon right-clicking a row, allowing users to access additional actions. If set to false, the context menu is disabled and will not appear when users right-click on a row. This property can be used to enable or restrict context menu interactions as needed.
                                                                    heightSpecifies the vertical size of the context menu in pixels, determining how much space it occupies on the screen. Adjusting this value controls the overall height of the menu, which can affect the visibility and accessibility of its menu items.
                                                                    selectorSpecifies the ID or CSS class selector of a Smart.Menu component that will be used as the context menu for the Grid. This allows you to assign a custom menu that appears when users right-click on the Grid. The value should correspond to the Smart.Menu element’s unique ID (preceded by “#”) or a CSS class (preceded by “.”).
                                                                    widthSpecifies the width of the context menu in pixels. Adjusting this value determines how wide the context menu appears when displayed to users. This property helps ensure the menu fits its content appropriately and aligns with your application's design requirements.
                                                                    Related APIs behavior refresh() change

                                                                    customContextMenuItemsDefines an array of custom context menu items that will appear when the user opens the context menu. Each item in the array specifies the label, action, and additional options for the menu entry, enabling developers to tailor the context menu to their application's specific requirements.[]

                                                                    Defines an array of custom context menu items that will appear when the user opens the context menu. Each item in the array specifies the label, action, and additional options for the menu entry, enabling developers to tailor the context menu to their application's specific requirements.

                                                                    Back to root property: contextMenu

                                                                    Examples

                                                                    Set a nested field on the element:

                                                                    const el = document.querySelector('smart-grid');
el.contextMenu.customContextMenuItems = true;

                                                                    Read the nested value:

                                                                    const el = document.querySelector('smart-grid');
const customContextMenuItems = el.contextMenu.customContextMenuItems;

                                                                    dataSourceAssociates a list of data sources with the context menu, enabling dynamic population of menu items based on the specified data. This allows the context menu to display relevant options according to the provided data sources. Click for more details. Property object's options:
                                                                       object

                                                                      Associates a list of data sources with the context menu, enabling dynamic population of menu items based on the specified data. This allows the context menu to display relevant options according to the provided data sources.

                                                                      Properties

                                                                      contextMenuItemCustomProvides detailed information about the custom item, including its properties, attributes, and any associated metadata used for configuration and display within the application. Click for more details. Property object's options:
                                                                      • command:string - Specifies the command to be executed when the context menu item is selected. This typically references a predefined command identifier or function that defines the action performed upon user interaction with the menu item.
                                                                      • enabled:boolean - Enables the display and functionality of the context menu item, allowing users to access additional options or actions when they right-click or interact with the specified element.
                                                                      • visible:boolean - Controls whether the context menu item is visible to the user. When set to true, the item appears in the context menu; when set to false, the item is hidden and cannot be interacted with.
                                                                      • icon:string - Specifies the icon to display for the context menu item. The provided icon will appear beside the menu item's label, helping users visually identify its function. The icon should be supplied as a valid image URL or resource compatible with the context menu API.
                                                                      • label:string - Specifies the text displayed for the context menu item, allowing you to define how the menu option appears to users.
                                                                      contextMenuItemDeleteProvides the structure and parameters required to delete an item, including details such as the unique identifier of the item to be removed and any necessary authentication or validation information. Outlines the expected request format and possible responses for a delete operation. Click for more details. Property object's options:
                                                                      • command:string - Defines the specific command or action that will be executed when the user selects this item from the context menu. This property links the menu item to a corresponding function or handler in your application logic.
                                                                      • enabled:boolean - Activates and displays the context menu item, making it available for user interaction within the application's right-click or context menu interface.
                                                                      • visible:boolean - Controls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden and not accessible through the menu interface.
                                                                      • icon:string - Specifies the icon image to display next to the context menu item, enhancing its visual appearance and helping users quickly identify the item's function. Accepts a URL or a predefined icon identifier, depending on the implementation.
                                                                      • label:string - Specifies the text that appears as the label for the context menu item, allowing users to identify and select the menu option within the context menu.
                                                                      contextMenuItemEditProvides a detailed schema for the "edit item" operation, outlining the structure and fields required to update an existing item's information. This includes the item's unique identifier and any attributes that can be modified, ensuring accurate and efficient editing of item details within the application. Click for more details. Property object's options:
                                                                      • command:string - Assigns the specific command or action to be executed when the user selects this context menu item. This property determines the function or script that runs in response to the menu item's selection, enabling custom behavior within the context menu.
                                                                      • enabled:boolean - Activates the context menu item, allowing it to be displayed and accessible to users when they right-click or open the context menu within the application interface.
                                                                      • visible:boolean - Controls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden from view. This property allows for dynamic showing or hiding of menu options based on the application's state or user permissions.
                                                                      • icon:string - Specifies the icon image to display next to the context menu item, allowing you to visually distinguish or brand the menu entry. The value should be a valid URL or resource path to an image file (typically PNG or SVG).
                                                                      • label:string - Defines the text displayed for the context menu item, specifying the label that users will see when they open the context menu.

                                                                      Back to root property: contextMenu

                                                                      Try a demo showcasing the dataSource property.

                                                                      Read the nested value:

                                                                      const el = document.querySelector('smart-grid');
const dataSource = el.contextMenu.dataSource;
                                                                      Related APIs refresh() beginUpdate() endUpdate() change

                                                                      contextMenuItemCustomProvides detailed information about the custom item, including its properties, attributes, and any associated metadata used for configuration and display within the application. Click for more details. Property object's options:
                                                                         object

                                                                        Provides detailed information about the custom item, including its properties, attributes, and any associated metadata used for configuration and display within the application.

                                                                        Properties

                                                                        commandSpecifies the command to be executed when the context menu item is selected. This typically references a predefined command identifier or function that defines the action performed upon user interaction with the menu item.
                                                                        enabledEnables the display and functionality of the context menu item, allowing users to access additional options or actions when they right-click or interact with the specified element.
                                                                        iconSpecifies the icon to display for the context menu item. The provided icon will appear beside the menu item's label, helping users visually identify its function. The icon should be supplied as a valid image URL or resource compatible with the context menu API.
                                                                        labelSpecifies the text displayed for the context menu item, allowing you to define how the menu option appears to users.
                                                                        visibleControls whether the context menu item is visible to the user. When set to true, the item appears in the context menu; when set to false, the item is hidden and cannot be interacted with.

                                                                        Back to root property: contextMenu

                                                                        Read the nested value:

                                                                        const el = document.querySelector('smart-grid');
const contextMenuItemCustom = el.contextMenu.dataSource.contextMenuItemCustom;

                                                                        commandSpecifies the command to be executed when the context menu item is selected. This typically references a predefined command identifier or function that defines the action performed upon user interaction with the menu item.string

                                                                        Specifies the command to be executed when the context menu item is selected. This typically references a predefined command identifier or function that defines the action performed upon user interaction with the menu item.

                                                                        Default value

                                                                        "null"

                                                                        Back to root property: contextMenu

                                                                        Try a demo showcasing the command property.

                                                                        Read the nested value:

                                                                        const el = document.querySelector('smart-grid');
const command = el.contextMenu.dataSource.contextMenuItemCustom.command;

                                                                        enabledEnables the display and functionality of the context menu item, allowing users to access additional options or actions when they right-click or interact with the specified element.boolean

                                                                        Enables the display and functionality of the context menu item, allowing users to access additional options or actions when they right-click or interact with the specified element.

                                                                        Default value

                                                                        true

                                                                        Back to root property: contextMenu

                                                                        Examples

                                                                        Set a nested field on the element:

                                                                        const el = document.querySelector('smart-grid');
el.contextMenu.dataSource.contextMenuItemCustom.enabled = true;

                                                                        Read the nested value:

                                                                        const el = document.querySelector('smart-grid');
const enabled = el.contextMenu.dataSource.contextMenuItemCustom.enabled;

                                                                        iconSpecifies the icon to display for the context menu item. The provided icon will appear beside the menu item's label, helping users visually identify its function. The icon should be supplied as a valid image URL or resource compatible with the context menu API.string

                                                                        Specifies the icon to display for the context menu item. The provided icon will appear beside the menu item's label, helping users visually identify its function. The icon should be supplied as a valid image URL or resource compatible with the context menu API.

                                                                        Default value

                                                                        "smart-icon-mode-edit"

                                                                        Back to root property: contextMenu

                                                                        Try a demo showcasing the icon property.

                                                                        Read the nested value:

                                                                        const el = document.querySelector('smart-grid');
const icon = el.contextMenu.dataSource.contextMenuItemCustom.icon;

                                                                        labelSpecifies the text displayed for the context menu item, allowing you to define how the menu option appears to users.string

                                                                        Specifies the text displayed for the context menu item, allowing you to define how the menu option appears to users.

                                                                        Default value

                                                                        "{{messages}}"

                                                                        Back to root property: contextMenu

                                                                        Try a demo showcasing the label property.

                                                                        Read the nested value:

                                                                        const el = document.querySelector('smart-grid');
const label = el.contextMenu.dataSource.contextMenuItemCustom.label;

                                                                        visibleControls whether the context menu item is visible to the user. When set to true, the item appears in the context menu; when set to false, the item is hidden and cannot be interacted with.boolean

                                                                        Controls whether the context menu item is visible to the user. When set to true, the item appears in the context menu; when set to false, the item is hidden and cannot be interacted with.

                                                                        Default value

                                                                        false

                                                                        Back to root property: contextMenu

                                                                        Try a demo showcasing the visible property.

                                                                        Examples

                                                                        Set a nested field on the element:

                                                                        const el = document.querySelector('smart-grid');
el.contextMenu.dataSource.contextMenuItemCustom.visible = true;

                                                                        Read the nested value:

                                                                        const el = document.querySelector('smart-grid');
const visible = el.contextMenu.dataSource.contextMenuItemCustom.visible;

                                                                        contextMenuItemDeleteProvides the structure and parameters required to delete an item, including details such as the unique identifier of the item to be removed and any necessary authentication or validation information. Outlines the expected request format and possible responses for a delete operation. Click for more details. Property object's options:
                                                                           object

                                                                          Provides the structure and parameters required to delete an item, including details such as the unique identifier of the item to be removed and any necessary authentication or validation information. Outlines the expected request format and possible responses for a delete operation.

                                                                          Properties

                                                                          commandDefines the specific command or action that will be executed when the user selects this item from the context menu. This property links the menu item to a corresponding function or handler in your application logic.
                                                                          enabledActivates and displays the context menu item, making it available for user interaction within the application's right-click or context menu interface.
                                                                          iconSpecifies the icon image to display next to the context menu item, enhancing its visual appearance and helping users quickly identify the item's function. Accepts a URL or a predefined icon identifier, depending on the implementation.
                                                                          labelSpecifies the text that appears as the label for the context menu item, allowing users to identify and select the menu option within the context menu.
                                                                          visibleControls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden and not accessible through the menu interface.

                                                                          Back to root property: contextMenu

                                                                          Read the nested value:

                                                                          const el = document.querySelector('smart-grid');
const contextMenuItemDelete = el.contextMenu.dataSource.contextMenuItemDelete;
                                                                          Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                          commandDefines the specific command or action that will be executed when the user selects this item from the context menu. This property links the menu item to a corresponding function or handler in your application logic.string

                                                                          Defines the specific command or action that will be executed when the user selects this item from the context menu. This property links the menu item to a corresponding function or handler in your application logic.

                                                                          Default value

                                                                          "contextMenuItemDeleteCommand"

                                                                          Back to root property: contextMenu

                                                                          Try a demo showcasing the command property.

                                                                          Read the nested value:

                                                                          const el = document.querySelector('smart-grid');
const command = el.contextMenu.dataSource.contextMenuItemDelete.command;

                                                                          enabledActivates and displays the context menu item, making it available for user interaction within the application's right-click or context menu interface.boolean

                                                                          Activates and displays the context menu item, making it available for user interaction within the application's right-click or context menu interface.

                                                                          Default value

                                                                          true

                                                                          Back to root property: contextMenu

                                                                          Examples

                                                                          Set a nested field on the element:

                                                                          const el = document.querySelector('smart-grid');
el.contextMenu.dataSource.contextMenuItemDelete.enabled = true;

                                                                          Read the nested value:

                                                                          const el = document.querySelector('smart-grid');
const enabled = el.contextMenu.dataSource.contextMenuItemDelete.enabled;

                                                                          iconSpecifies the icon image to display next to the context menu item, enhancing its visual appearance and helping users quickly identify the item's function. Accepts a URL or a predefined icon identifier, depending on the implementation.string

                                                                          Specifies the icon image to display next to the context menu item, enhancing its visual appearance and helping users quickly identify the item's function. Accepts a URL or a predefined icon identifier, depending on the implementation.

                                                                          Default value

                                                                          "smart-icon-delete"

                                                                          Back to root property: contextMenu

                                                                          Try a demo showcasing the icon property.

                                                                          Read the nested value:

                                                                          const el = document.querySelector('smart-grid');
const icon = el.contextMenu.dataSource.contextMenuItemDelete.icon;
                                                                          Related APIs appearance layout refresh() change

                                                                          labelSpecifies the text that appears as the label for the context menu item, allowing users to identify and select the menu option within the context menu.string

                                                                          Specifies the text that appears as the label for the context menu item, allowing users to identify and select the menu option within the context menu.

                                                                          Default value

                                                                          "{{messages}}"

                                                                          Back to root property: contextMenu

                                                                          Try a demo showcasing the label property.

                                                                          Read the nested value:

                                                                          const el = document.querySelector('smart-grid');
const label = el.contextMenu.dataSource.contextMenuItemDelete.label;
                                                                          Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                          visibleControls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden and not accessible through the menu interface.boolean

                                                                          Controls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden and not accessible through the menu interface.

                                                                          Default value

                                                                          true

                                                                          Back to root property: contextMenu

                                                                          Try a demo showcasing the visible property.

                                                                          Examples

                                                                          Set a nested field on the element:

                                                                          const el = document.querySelector('smart-grid');
el.contextMenu.dataSource.contextMenuItemDelete.visible = true;

                                                                          Read the nested value:

                                                                          const el = document.querySelector('smart-grid');
const visible = el.contextMenu.dataSource.contextMenuItemDelete.visible;

                                                                          contextMenuItemEditProvides a detailed schema for the "edit item" operation, outlining the structure and fields required to update an existing item's information. This includes the item's unique identifier and any attributes that can be modified, ensuring accurate and efficient editing of item details within the application. Click for more details. Property object's options:
                                                                             object

                                                                            Provides a detailed schema for the "edit item" operation, outlining the structure and fields required to update an existing item's information. This includes the item's unique identifier and any attributes that can be modified, ensuring accurate and efficient editing of item details within the application.

                                                                            Properties

                                                                            commandAssigns the specific command or action to be executed when the user selects this context menu item. This property determines the function or script that runs in response to the menu item's selection, enabling custom behavior within the context menu.
                                                                            enabledActivates the context menu item, allowing it to be displayed and accessible to users when they right-click or open the context menu within the application interface.
                                                                            iconSpecifies the icon image to display next to the context menu item, allowing you to visually distinguish or brand the menu entry. The value should be a valid URL or resource path to an image file (typically PNG or SVG).
                                                                            labelDefines the text displayed for the context menu item, specifying the label that users will see when they open the context menu.
                                                                            visibleControls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden from view. This property allows for dynamic showing or hiding of menu options based on the application's state or user permissions.

                                                                            Back to root property: contextMenu

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const contextMenuItemEdit = el.contextMenu.dataSource.contextMenuItemEdit;
                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                            commandAssigns the specific command or action to be executed when the user selects this context menu item. This property determines the function or script that runs in response to the menu item's selection, enabling custom behavior within the context menu.string

                                                                            Assigns the specific command or action to be executed when the user selects this context menu item. This property determines the function or script that runs in response to the menu item's selection, enabling custom behavior within the context menu.

                                                                            Default value

                                                                            "contextMenuItemEditCommand"

                                                                            Back to root property: contextMenu

                                                                            Try a demo showcasing the command property.

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const command = el.contextMenu.dataSource.contextMenuItemEdit.command;
                                                                            Related APIs behavior refresh() change

                                                                            enabledActivates the context menu item, allowing it to be displayed and accessible to users when they right-click or open the context menu within the application interface.boolean

                                                                            Activates the context menu item, allowing it to be displayed and accessible to users when they right-click or open the context menu within the application interface.

                                                                            Default value

                                                                            true

                                                                            Back to root property: contextMenu

                                                                            Examples

                                                                            Set a nested field on the element:

                                                                            const el = document.querySelector('smart-grid');
el.contextMenu.dataSource.contextMenuItemEdit.enabled = true;

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const enabled = el.contextMenu.dataSource.contextMenuItemEdit.enabled;

                                                                            iconSpecifies the icon image to display next to the context menu item, allowing you to visually distinguish or brand the menu entry. The value should be a valid URL or resource path to an image file (typically PNG or SVG).string

                                                                            Specifies the icon image to display next to the context menu item, allowing you to visually distinguish or brand the menu entry. The value should be a valid URL or resource path to an image file (typically PNG or SVG).

                                                                            Default value

                                                                            "smart-icon-mode-edit"

                                                                            Back to root property: contextMenu

                                                                            Try a demo showcasing the icon property.

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const icon = el.contextMenu.dataSource.contextMenuItemEdit.icon;

                                                                            labelDefines the text displayed for the context menu item, specifying the label that users will see when they open the context menu.string

                                                                            Defines the text displayed for the context menu item, specifying the label that users will see when they open the context menu.

                                                                            Default value

                                                                            "{{messages}}"

                                                                            Back to root property: contextMenu

                                                                            Try a demo showcasing the label property.

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const label = el.contextMenu.dataSource.contextMenuItemEdit.label;

                                                                            visibleControls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden from view. This property allows for dynamic showing or hiding of menu options based on the application's state or user permissions.boolean

                                                                            Controls whether the context menu item is visible to the user. When set to true, the item will appear in the context menu; when set to false, it will be hidden from view. This property allows for dynamic showing or hiding of menu options based on the application's state or user permissions.

                                                                            Default value

                                                                            true

                                                                            Back to root property: contextMenu

                                                                            Try a demo showcasing the visible property.

                                                                            Examples

                                                                            Set a nested field on the element:

                                                                            const el = document.querySelector('smart-grid');
el.contextMenu.dataSource.contextMenuItemEdit.visible = true;

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const visible = el.contextMenu.dataSource.contextMenuItemEdit.visible;

                                                                            enabledControls the visibility of the context menu within the component. When set to true, the context menu appears upon right-clicking a row, allowing users to access additional actions. If set to false, the context menu is disabled and will not appear when users right-click on a row. This property can be used to enable or restrict context menu interactions as needed.boolean

                                                                            Controls the visibility of the context menu within the component. When set to true, the context menu appears upon right-clicking a row, allowing users to access additional actions. If set to false, the context menu is disabled and will not appear when users right-click on a row. This property can be used to enable or restrict context menu interactions as needed.

                                                                            Default value

                                                                            false

                                                                            Back to root property: contextMenu

                                                                            Examples

                                                                            Set a nested field on the element:

                                                                            const el = document.querySelector('smart-grid');
el.contextMenu.enabled = true;

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const enabled = el.contextMenu.enabled;
                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                            heightSpecifies the vertical size of the context menu in pixels, determining how much space it occupies on the screen. Adjusting this value controls the overall height of the menu, which can affect the visibility and accessibility of its menu items.number | null

                                                                            Specifies the vertical size of the context menu in pixels, determining how much space it occupies on the screen. Adjusting this value controls the overall height of the menu, which can affect the visibility and accessibility of its menu items.

                                                                            Back to root property: contextMenu

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const height = el.contextMenu.height;

                                                                            selectorSpecifies the ID or CSS class selector of a Smart.Menu component that will be used as the context menu for the Grid. This allows you to assign a custom menu that appears when users right-click on the Grid. The value should correspond to the Smart.Menu element’s unique ID (preceded by “#”) or a CSS class (preceded by “.”).string

                                                                            Specifies the ID or CSS class selector of a Smart.Menu component that will be used as the context menu for the Grid. This allows you to assign a custom menu that appears when users right-click on the Grid. The value should correspond to the Smart.Menu element’s unique ID (preceded by “#”) or a CSS class (preceded by “.”).

                                                                            Default value

                                                                            ""

                                                                            Back to root property: contextMenu

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const selector = el.contextMenu.selector;
                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                            widthSpecifies the width of the context menu in pixels. Adjusting this value determines how wide the context menu appears when displayed to users. This property helps ensure the menu fits its content appropriately and aligns with your application's design requirements.number

                                                                            Specifies the width of the context menu in pixels. Adjusting this value determines how wide the context menu appears when displayed to users. This property helps ensure the menu fits its content appropriately and aligns with your application's design requirements.

                                                                            Default value

                                                                            250

                                                                            Back to root property: contextMenu

                                                                            Try a demo showcasing the width property.

                                                                            Read the nested value:

                                                                            const el = document.querySelector('smart-grid');
const width = el.contextMenu.width;

                                                                            currentUserSets 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.string | number

                                                                            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.

                                                                            Default value

                                                                            ""
                                                                            Try a demo showcasing the currentUser property.

                                                                            Examples

                                                                            Markup and runtime examples for currentUser:

                                                                            HTML:

                                                                            <smart-grid current-user="1"></smart-grid>

                                                                            Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                            const el = document.querySelector('smart-grid');
el.currentUser = 2;

                                                                            Read the current value:

                                                                            const el = document.querySelector('smart-grid');
const currentUser = el.currentUser;

                                                                            dataExportConfigures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences. Click for more details. Property object's options:
                                                                               object

                                                                              Configures the export settings for grid data, including file format, selected columns, data range, export style, and additional export preferences.

                                                                              Properties

                                                                              addImageToCellThis is a callback function designed for inserting images into individual cells during an "Export to Excel" operation. The function receives the following parameters:- 'index': The current cell index in the export process.- 'dataField': The field name associated with the current cell's data.- 'value': The image data, typically as a base64-encoded string.- 'values': An array containing all values for the entire column being exported.The function should return an object that defines the image to be placed in the Excel cell. The returned object has the following structure:'''javascriptreturn { image: { id: 'myImage' + index, // Unique identifier for the image. base64: value, // Base64-encoded image data. imageType: 'jpeg', // Image format, e.g., 'jpeg' or 'png'. width: 20, // Image width, in Excel units (pixels or points). height: 11, // Image height, in Excel units. position: { offsetX: 10 + (25 * values.indexOf(value)), // Horizontal offset for image positioning in the cell. offsetY: 5.5 // Vertical offset for image positioning in the cell. } }};'''This object specifies:- The image's unique ID and format.- The image's visual size within the cell.- The position offsets to control exactly where the image appears inside the cell.By customizing these properties, you can control how images are embedded and displayed for each Excel cell during export.
                                                                              autoConvertFormulasDetermines if formulas in the exported Excel file will be automatically converted to their corresponding calculated values. When enabled, all formulas are replaced with their results in the export; when disabled, original formulas are preserved in the Excel sheet.
                                                                              cellFormatFunctionA function that enables customization of cell formatting prior to data export. It receives three parameters: index (the row index of the cell), dataField (the key or field name corresponding to the cell), and value (the original value of the cell). The function should return the formatted value, which will be used in the exported output instead of the original value."
                                                                              collapseCharSpecifies the character or symbol used to represent collapsed rows when exporting a Grid that includes row hierarchy features, such as TreeGrid or grouped rows. This character will indicate collapsed states in the exported file.
                                                                              expandCharSpecifies the character or symbol shown for expanded rows in a Grid with row hierarchy (such as a TreeGrid or Grouped Grid) when the data is exported. This character visually indicates expanded nodes in the exported file.
                                                                              exportAsTableSpecifies whether the data should be exported as an Excel Table (with structured formatting and table features) when using the Export to Excel function. If enabled, the exported file will present the data as an Excel Table; if disabled, the data will be exported as plain worksheet content without table formatting.
                                                                              exportStylesA function that enables you to export a data grid—complete with applied styles and formatting—directly to an Excel file, preserving the grid’s visual appearance and structure in the exported document.
                                                                              fileNameSpecifies the name that will be assigned to the exported file when it is saved or downloaded.
                                                                              filterByDetermines if the current export includes only the data that matches the filters applied in the interface. When enabled, only filtered results will be exported; when disabled, the export will contain all available data regardless of active filters.
                                                                              footerContentA customizable array containing additional row objects that will be appended to the end of the default Grid rows. Use this property to insert extra rows with custom content or functionality after the main set of Grid rows.
                                                                              freezeColumnsDetermines whether the pinned columns remains fixed (frozen) at the left of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the pinned column.
                                                                              freezeHeaderDetermines whether the header row remains fixed (frozen) at the top of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the column headers.
                                                                              getSpreadsheetsDefines a function that enables you to include additional data in the Excel export, allowing you to create and export multiple sheets within a single Excel file. This function provides flexibility to specify extra datasets or customize the content of each sheet according to your requirements.
                                                                              groupBySpecifies the grouping criteria applied to the exported data, determining how records are organized into distinct groups in the exported file. This setting allows you to control the categorization or segmentation of data during the export process.
                                                                              headerDetermines whether the column headers are included when exporting the data. If enabled, the exported file will contain the header row with column names; if disabled, only the data rows will be exported without column headers.
                                                                              headerContentAn array containing custom row objects that will be rendered above the main Grid rows, allowing you to insert additional content or elements before the standard grid data appears.
                                                                              onlySelectedDetermines if only the currently selected cells or rows are exported to Excel, instead of exporting the entire data set. When enabled, only the user's selection will be included in the exported Excel file.
                                                                              pageOrientationSpecifies the orientation of the page (portrait or landscape) when exporting the document to PDF format. This setting determines how the content is laid out on each PDF page.
                                                                              protectSheetSpecifies whether the data should be exported as an Excel protected sheet. You can set a password by setting an object like this: { password: 'secret'}
                                                                              rowIdsAn array containing the IDs of the rows that should be included in the export operation. Each element in the array represents the unique identifier of a row to be exported.
                                                                              setRowHeightThis function enables you to customize the height of each row when exporting data to Excel. It receives the row index as a parameter and should return a numeric value representing the desired height for that specific row. By using this function, you can dynamically control the appearance of rows in your exported Excel file, such as setting different heights for header, data, or summary rows.
                                                                              styleSpecifies a custom style object to format the appearance of the dataExport, allowing you to define properties such as fonts, colors, borders, and cell alignment for the exported data.
                                                                              viewExports only the data currently visible in the Grid, excluding any rows or columns that are filtered, hidden, or outside the current viewport.
                                                                              viewEndSpecifies the index of the last row to be included during export or print operations. When using this option, ensure that the 'view' parameter is set to true to apply the index relative to the current view or filtered dataset, rather than the entire data set.
                                                                              viewStartSpecifies the starting row index for data export or printing operations. This determines which row the process will begin from. Ensure that the 'view' parameter is set to true for this setting to take effect.
                                                                              Try a demo showcasing the dataExport property.
                                                                              Related APIs exportData() print()

                                                                              addImageToCellThis is a callback function designed for inserting images into individual cells during an "Export to Excel" operation. The function receives the following parameters:- 'index': The current cell index in the export process.- 'dataField': The field name associated with the current cell's data.- 'value': The image data, typically as a base64-encoded string.- 'values': An array containing all values for the entire column being exported.The function should return an object that defines the image to be placed in the Excel cell. The returned object has the following structure:'''javascriptreturn { image: { id: 'myImage' + index, // Unique identifier for the image. base64: value, // Base64-encoded image data. imageType: 'jpeg', // Image format, e.g., 'jpeg' or 'png'. width: 20, // Image width, in Excel units (pixels or points). height: 11, // Image height, in Excel units. position: { offsetX: 10 + (25 * values.indexOf(value)), // Horizontal offset for image positioning in the cell. offsetY: 5.5 // Vertical offset for image positioning in the cell. } }};'''This object specifies:- The image's unique ID and format.- The image's visual size within the cell.- The position offsets to control exactly where the image appears inside the cell.By customizing these properties, you can control how images are embedded and displayed for each Excel cell during export.any



                                                                              This is a callback function designed for inserting images into individual cells during an "Export to Excel" operation. The function receives the following parameters:

                                                                              - 'index': The current cell index in the export process.
                                                                              - 'dataField': The field name associated with the current cell's data.
                                                                              - 'value': The image data, typically as a base64-encoded string.
                                                                              - 'values': An array containing all values for the entire column being exported.

                                                                              The function should return an object that defines the image to be placed in the Excel cell. The returned object has the following structure:

                                                                              '''javascript
                                                                              return {
                                                                              image: {
                                                                              id: 'myImage' + index, // Unique identifier for the image.
                                                                              base64: value, // Base64-encoded image data.
                                                                              imageType: 'jpeg', // Image format, e.g., 'jpeg' or 'png'.
                                                                              width: 20, // Image width, in Excel units (pixels or points).
                                                                              height: 11, // Image height, in Excel units.
                                                                              position: {
                                                                              offsetX: 10 + (25 * values.indexOf(value)), // Horizontal offset for image positioning in the cell.
                                                                              offsetY: 5.5 // Vertical offset for image positioning in the cell.
                                                                              }
                                                                              }
                                                                              };
                                                                              '''

                                                                              This object specifies:
                                                                              - The image's unique ID and format.
                                                                              - The image's visual size within the cell.
                                                                              - The position offsets to control exactly where the image appears inside the cell.

                                                                              By customizing these properties, you can control how images are embedded and displayed for each Excel cell during export.

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const addImageToCell = el.dataExport.addImageToCell;
                                                                              Related APIs appearance layout refresh() change

                                                                              autoConvertFormulasDetermines if formulas in the exported Excel file will be automatically converted to their corresponding calculated values. When enabled, all formulas are replaced with their results in the export; when disabled, original formulas are preserved in the Excel sheet.boolean

                                                                              Determines if formulas in the exported Excel file will be automatically converted to their corresponding calculated values. When enabled, all formulas are replaced with their results in the export; when disabled, original formulas are preserved in the Excel sheet.

                                                                              Default value

                                                                              true

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const autoConvertFormulas = el.dataExport.autoConvertFormulas;
                                                                              Related APIs dataExport exportData() print()

                                                                              cellFormatFunctionA function that enables customization of cell formatting prior to data export. It receives three parameters: index (the row index of the cell), dataField (the key or field name corresponding to the cell), and value (the original value of the cell). The function should return the formatted value, which will be used in the exported output instead of the original value."any

                                                                              A function that enables customization of cell formatting prior to data export. It receives three parameters: index (the row index of the cell), dataField (the key or field name corresponding to the cell), and value (the original value of the cell). The function should return the formatted value, which will be used in the exported output instead of the original value."

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const cellFormatFunction = el.dataExport.cellFormatFunction;
                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                              collapseCharSpecifies the character or symbol used to represent collapsed rows when exporting a Grid that includes row hierarchy features, such as TreeGrid or grouped rows. This character will indicate collapsed states in the exported file.string

                                                                              Specifies the character or symbol used to represent collapsed rows when exporting a Grid that includes row hierarchy features, such as TreeGrid or grouped rows. This character will indicate collapsed states in the exported file.

                                                                              Default value

                                                                              "-"

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const collapseChar = el.dataExport.collapseChar;
                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                              expandCharSpecifies the character or symbol shown for expanded rows in a Grid with row hierarchy (such as a TreeGrid or Grouped Grid) when the data is exported. This character visually indicates expanded nodes in the exported file.string

                                                                              Specifies the character or symbol shown for expanded rows in a Grid with row hierarchy (such as a TreeGrid or Grouped Grid) when the data is exported. This character visually indicates expanded nodes in the exported file.

                                                                              Default value

                                                                              "+"

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const expandChar = el.dataExport.expandChar;
                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                              exportAsTableSpecifies whether the data should be exported as an Excel Table (with structured formatting and table features) when using the Export to Excel function. If enabled, the exported file will present the data as an Excel Table; if disabled, the data will be exported as plain worksheet content without table formatting.boolean

                                                                              Specifies whether the data should be exported as an Excel Table (with structured formatting and table features) when using the Export to Excel function. If enabled, the exported file will present the data as an Excel Table; if disabled, the data will be exported as plain worksheet content without table formatting.

                                                                              Default value

                                                                              false

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const exportAsTable = el.dataExport.exportAsTable;
                                                                              Related APIs dataExport exportData() print()

                                                                              exportStylesA function that enables you to export a data grid—complete with applied styles and formatting—directly to an Excel file, preserving the grid’s visual appearance and structure in the exported document.boolean

                                                                              A function that enables you to export a data grid—complete with applied styles and formatting—directly to an Excel file, preserving the grid’s visual appearance and structure in the exported document.

                                                                              Default value

                                                                              true

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const exportStyles = el.dataExport.exportStyles;
                                                                              Related APIs dataExport exportData() print()

                                                                              fileNameSpecifies the name that will be assigned to the exported file when it is saved or downloaded.string

                                                                              Specifies the name that will be assigned to the exported file when it is saved or downloaded.

                                                                              Default value

                                                                              "smartGrid"

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const fileName = el.dataExport.fileName;

                                                                              filterByDetermines if the current export includes only the data that matches the filters applied in the interface. When enabled, only filtered results will be exported; when disabled, the export will contain all available data regardless of active filters.object

                                                                              Determines if the current export includes only the data that matches the filters applied in the interface. When enabled, only filtered results will be exported; when disabled, the export will contain all available data regardless of active filters.

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const filterBy = el.dataExport.filterBy;
                                                                              Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                              footerContentA customizable array containing additional row objects that will be appended to the end of the default Grid rows. Use this property to insert extra rows with custom content or functionality after the main set of Grid rows.any

                                                                              A customizable array containing additional row objects that will be appended to the end of the default Grid rows. Use this property to insert extra rows with custom content or functionality after the main set of Grid rows.

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const footerContent = el.dataExport.footerContent;
                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                              freezeColumnsDetermines whether the pinned columns remains fixed (frozen) at the left of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the pinned column.boolean

                                                                              Determines whether the pinned columns remains fixed (frozen) at the left of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the pinned column.

                                                                              Default value

                                                                              false

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the freezeColumns property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const freezeColumns = el.dataExport.freezeColumns;
                                                                              Related APIs behavior refresh() change

                                                                              freezeHeaderDetermines whether the header row remains fixed (frozen) at the top of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the column headers.boolean

                                                                              Determines whether the header row remains fixed (frozen) at the top of the worksheet when the data is exported to Excel. If enabled, users can scroll through the exported data while still viewing the column headers.

                                                                              Default value

                                                                              false

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the freezeHeader property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const freezeHeader = el.dataExport.freezeHeader;
                                                                              Related APIs behavior refresh() change

                                                                              getSpreadsheetsDefines a function that enables you to include additional data in the Excel export, allowing you to create and export multiple sheets within a single Excel file. This function provides flexibility to specify extra datasets or customize the content of each sheet according to your requirements.any

                                                                              Defines a function that enables you to include additional data in the Excel export, allowing you to create and export multiple sheets within a single Excel file. This function provides flexibility to specify extra datasets or customize the content of each sheet according to your requirements.

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const getSpreadsheets = el.dataExport.getSpreadsheets;
                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                              groupBySpecifies the grouping criteria applied to the exported data, determining how records are organized into distinct groups in the exported file. This setting allows you to control the categorization or segmentation of data during the export process.object

                                                                              Specifies the grouping criteria applied to the exported data, determining how records are organized into distinct groups in the exported file. This setting allows you to control the categorization or segmentation of data during the export process.

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the groupBy property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const groupBy = el.dataExport.groupBy;
                                                                              Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                              headerDetermines whether the column headers are included when exporting the data. If enabled, the exported file will contain the header row with column names; if disabled, only the data rows will be exported without column headers.boolean

                                                                              Determines whether the column headers are included when exporting the data. If enabled, the exported file will contain the header row with column names; if disabled, only the data rows will be exported without column headers.

                                                                              Default value

                                                                              true

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the header property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const header = el.dataExport.header;
                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                              headerContentAn array containing custom row objects that will be rendered above the main Grid rows, allowing you to insert additional content or elements before the standard grid data appears.any

                                                                              An array containing custom row objects that will be rendered above the main Grid rows, allowing you to insert additional content or elements before the standard grid data appears.

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const headerContent = el.dataExport.headerContent;
                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                              onlySelectedDetermines if only the currently selected cells or rows are exported to Excel, instead of exporting the entire data set. When enabled, only the user's selection will be included in the exported Excel file.boolean

                                                                              Determines if only the currently selected cells or rows are exported to Excel, instead of exporting the entire data set. When enabled, only the user's selection will be included in the exported Excel file.

                                                                              Default value

                                                                              false

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const onlySelected = el.dataExport.onlySelected;
                                                                              Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                              pageOrientationSpecifies the orientation of the page (portrait or landscape) when exporting the document to PDF format. This setting determines how the content is laid out on each PDF page."landscape" | "portrait"

                                                                              Specifies the orientation of the page (portrait or landscape) when exporting the document to PDF format. This setting determines how the content is laid out on each PDF page.

                                                                              Default value

                                                                              "portrait"

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const pageOrientation = el.dataExport.pageOrientation;
                                                                              Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                              protectSheetSpecifies whether the data should be exported as an Excel protected sheet. You can set a password by setting an object like this: { password: 'secret'} any

                                                                              Specifies whether the data should be exported as an Excel protected sheet. You can set a password by setting an object like this: { password: 'secret'}

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the protectSheet property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const protectSheet = el.dataExport.protectSheet;
                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                              rowIdsAn array containing the IDs of the rows that should be included in the export operation. Each element in the array represents the unique identifier of a row to be exported.(string | number)[] | null

                                                                              An array containing the IDs of the rows that should be included in the export operation. Each element in the array represents the unique identifier of a row to be exported.

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const rowIds = el.dataExport.rowIds;
                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                              setRowHeightThis function enables you to customize the height of each row when exporting data to Excel. It receives the row index as a parameter and should return a numeric value representing the desired height for that specific row. By using this function, you can dynamically control the appearance of rows in your exported Excel file, such as setting different heights for header, data, or summary rows.any

                                                                              This function enables you to customize the height of each row when exporting data to Excel. It receives the row index as a parameter and should return a numeric value representing the desired height for that specific row. By using this function, you can dynamically control the appearance of rows in your exported Excel file, such as setting different heights for header, data, or summary rows.

                                                                              Back to root property: dataExport

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const setRowHeight = el.dataExport.setRowHeight;
                                                                              Related APIs appearance layout refresh() change

                                                                              styleSpecifies a custom style object to format the appearance of the dataExport, allowing you to define properties such as fonts, colors, borders, and cell alignment for the exported data.object

                                                                              Specifies a custom style object to format the appearance of the dataExport, allowing you to define properties such as fonts, colors, borders, and cell alignment for the exported data.

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the style property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const style = el.dataExport.style;
                                                                              Related APIs appearance layout refresh() change

                                                                              viewExports only the data currently visible in the Grid, excluding any rows or columns that are filtered, hidden, or outside the current viewport.boolean

                                                                              Exports only the data currently visible in the Grid, excluding any rows or columns that are filtered, hidden, or outside the current viewport.

                                                                              Default value

                                                                              false

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the view property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const view = el.dataExport.view;
                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                              viewEndSpecifies the index of the last row to be included during export or print operations. When using this option, ensure that the 'view' parameter is set to true to apply the index relative to the current view or filtered dataset, rather than the entire data set.number | null

                                                                              Specifies the index of the last row to be included during export or print operations. When using this option, ensure that the 'view' parameter is set to true to apply the index relative to the current view or filtered dataset, rather than the entire data set.

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the viewEnd property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const viewEnd = el.dataExport.viewEnd;
                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                              viewStartSpecifies the starting row index for data export or printing operations. This determines which row the process will begin from. Ensure that the 'view' parameter is set to true for this setting to take effect.number | null

                                                                              Specifies the starting row index for data export or printing operations. This determines which row the process will begin from. Ensure that the 'view' parameter is set to true for this setting to take effect.

                                                                              Back to root property: dataExport

                                                                              Try a demo showcasing the viewStart property.

                                                                              Read the nested value:

                                                                              const el = document.querySelector('smart-grid');
const viewStart = el.dataExport.viewStart;
                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                              dataSourceSpecifies the source from which the grid retrieves its data. The dataSource property accepts either an instance of Smart.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.any

                                                                              Specifies the source from which the grid retrieves its data. The dataSource property accepts either an instance of Smart.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.

                                                                              Try a demo showcasing the dataSource property. 
                                                                              Example about dataSource
                                                                              
const grid = new Smart.Grid('#grid', {
	dataSource: new Smart.DataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
                                                                              Related APIs refresh() beginUpdate() endUpdate() change

                                                                              dataSourceSettingsConfigures 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. Click for more details. Property object's options:
                                                                                any

                                                                                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.

                                                                                Try a demo showcasing the dataSourceSettings property. 
                                                                                Example about dataSource
                                                                                
const grid = new Smart.Grid('#grid', {
	dataSource: new Smart.DataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
                                                                                Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                dropDownModeEnables or disables the dropdown mode for the component. When true, the component displays as a dropdown instead of a standard input or list.boolean

                                                                                Enables or disables the dropdown mode for the component. When true, the component displays as a dropdown instead of a standard input or list.

                                                                                Default value

                                                                                false
                                                                                Try a demo showcasing the dropDownMode property.

                                                                                HTML attribute:

                                                                                <smart-grid drop-down-mode></smart-grid>

                                                                                dropDownModeDataFieldSpecifies the data field or property to display in dropdown mode. This is the field from the data source that will be shown as the dropdown options.string

                                                                                Specifies the data field or property to display in dropdown mode. This is the field from the data source that will be shown as the dropdown options.

                                                                                Default value

                                                                                ""
                                                                                Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                dropDownModeInputDetermines whether the dropdown mode allows text input. When true, users can type in the dropdown field; otherwise, selection is restricted to the provided list items.boolean

                                                                                Determines whether the dropdown mode allows text input. When true, users can type in the dropdown field; otherwise, selection is restricted to the provided list items.

                                                                                Default value

                                                                                false

                                                                                HTML attribute:

                                                                                <smart-grid drop-down-mode-input></smart-grid>

                                                                                Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                editableEnables in-grid editing. Shorthand: sets editing.enabled to true.boolean

                                                                                Enables in-grid editing. Shorthand: sets editing.enabled to true.

                                                                                Default value

                                                                                false

                                                                                Examples

                                                                                Markup and runtime examples for editable:

                                                                                HTML attribute:

                                                                                <smart-grid editable></smart-grid>

                                                                                Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                const el = document.querySelector('smart-grid');
el.editable = true;

                                                                                Read the current value:

                                                                                const el = document.querySelector('smart-grid');
const editable = el.editable;

                                                                                editingProvides 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. Click for more details. Property object's options:
                                                                                   object

                                                                                  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.

                                                                                  Properties

                                                                                  actionSpecifies the method by which the editing mode is activated, such as through a single click, double click, or keyboard action.
                                                                                  addDialogProvides detailed configuration options for the settings panel displayed in the "Add" dialog, including field definitions, default values, input validation rules, and UI behavior customizations. Click for more details. Property object's options:
                                                                                  • header:string - Specifies the text displayed in the dialog’s header area, typically used as the dialog title to provide context or describe the purpose of the dialog to the user.
                                                                                  • height:string | number - Specifies the vertical size of the dialog component in pixels, percentages, or other CSS-supported units. Determines how tall the dialog will appear when rendered on the screen.
                                                                                  • width:string | number - Specifies the width of the dialog box, determining how wide it appears on the screen. Accepts values in CSS units such as pixels (e.g., "400px"), percentages (e.g., "60%"), or other valid measurements.
                                                                                  • left:string | number - Applies the CSS 'left' property to position the dialog element horizontally relative to its containing element or the viewport, allowing precise control over the dialog's horizontal placement on the page.
                                                                                  • top:string | number - Applies the specified value to the CSS 'top' property of the dialog element, allowing you to control the vertical positioning of the dialog relative to its containing element or the viewport.
                                                                                  • enabled:boolean - Activates the dialog window that allows users to add new items or entries. When enabled, users can open and interact with an "Add" dialog to submit additional information or create new records.
                                                                                  • visible:boolean - Sets the visibility of the dialog.
                                                                                  addNewColumnAllows users to dynamically add new columns directly from the user interface. When this feature is enabled, a '+' icon appears as the last column in the table. Clicking the '+' icon opens a dialog window where users can enter details for the new column, facilitating easy and intuitive column creation without leaving the current view.
                                                                                  addNewRowDefines the configuration options for the 'Add New Row' UI element, which allows users to quickly append new rows to the Grid with a single click. This includes customization of the button’s appearance, position, default values for new rows, and any associated event handlers. Click for more details. Property object's options:
                                                                                  • autoCreate:boolean - Inserts a new row when the Enter key is pressed and the currently focused row is the last row in the table. This allows users to quickly add additional rows by pressing Enter at the end of the table.
                                                                                  • autoEdit:boolean - Specifies whether a newly added row should automatically enter edit mode immediately after it is inserted, allowing the user to edit its contents without requiring an additional action.
                                                                                  • position:string - Specifies the exact placement of the ‘Add New Row’ user interface element within the layout. This determines where the button or control for adding a new row will appear on the page, such as at the top, bottom, or a designated section of the grid or form.
                                                                                  • displayMode:string - Controls whether the new row action is displayed as a full-width row or as a button. Accepts two values: 'row' to show the action as an entire row, or 'button' to render it as a button element. This property can be used to both retrieve the current display mode and set a new one.
                                                                                  • visible:boolean - Displays the 'Add New Row' user interface element, allowing users to see and interact with the control for adding a new row to the data table or form.
                                                                                  • label:string - Defines the text displayed on the 'Add New Row' button or UI element, allowing customization of the label users see when adding a new row to the interface.
                                                                                  allowColumnHeaderEditAllows users to edit the text of column headers directly within the interface, enabling customization of header labels according to their preferences or requirements.
                                                                                  allowDynamicButtonsShows a Calendar or Spin Buttons when you hover an editable Date or Number Cells.
                                                                                  allowListOpenOnContentClickAutomatically opens the drop-down editor both when the arrow button is clicked and when any item within the drop-down list is selected. This ensures the editor remains accessible regardless of whether the user interacts with the arrow or directly with a list item.
                                                                                  allowRowHeaderEditAllows users to edit the content of cells designated as row headers, enabling direct modification of row header values within the table.
                                                                                  autoUpdateFilterAndSortAutomatically reapplies any previously set column filters and sort orders after an edit is made, ensuring that user-defined table views remain consistent and uninterrupted following data modifications.
                                                                                  batchEnables batch editing functionality, allowing users to modify multiple rows within the grid on the client side before saving any changes. All edits can be submitted together in a single server request, improving efficiency and reducing the number of server calls needed for updates.
                                                                                  caretPositionThis feature sets the Input's caret position by the mouse click which activates the Input editor.
                                                                                  commandBarDefines the configuration options for the grid's command bar, a user interface element that appears as a toolbar or status bar above or below the grid. The command bar provides interactive buttons or tools, such as Save and Revert, allowing users to commit or undo changes made within the grid. These settings control the appearance, available actions, and behavior of the command bar to enhance grid editing workflows. Click for more details. Property object's options:
                                                                                  • visible:boolean - Displays the command bar, allowing users to access and execute available commands and features within the application.
                                                                                  • position:string - Specifies the location of the command bar within the user interface, determining where it appears on the screen (e.g., top, bottom, left, or right).
                                                                                  • displayMode:string - Specifies the content, such as text labels, icons, or both, that will appear on the command bar buttons. This determines the visual elements shown to users within each button on the command bar interface.
                                                                                  • dataSource:object - Configures the data source that populates the command bar, determining which commands or actions are displayed to the user. This property specifies where the command bar retrieves its list of available options.
                                                                                  commandColumnDefines the configuration options for the grid’s command column. The command column provides action buttons—such as Edit and Delete—that allow users to interact with individual rows. You can customize the available commands, their display order, button text, icons, and event handlers to control how actions are performed on row data. Click for more details. Property object's options:
                                                                                  • visible:boolean - Displays the command column, allowing users to view and interact with available actions or commands for each row within the table.
                                                                                  • inline:boolean - Displays the command column directly within the main content area (inline), rather than in a separate section. This allows actions like edit or delete to appear alongside each data row for easier, more integrated user interaction.
                                                                                  • position:string - Specifies the position of the command column within the table, determining where the command buttons (such as edit, delete, or custom actions) will appear relative to other columns.
                                                                                  • displayMode:string - Defines the content or label displayed within the buttons of the command column, such as text, icons, or custom HTML elements. This determines what users see and interact with in each command button cell.
                                                                                  • dataSource:object - Defines the data source for the command column, specifying which dataset or field the column should retrieve and display its command-related values from. This determines the contents and available actions within the command column.
                                                                                  • width:number | null - Specifies the width of the command column in the table or grid, determining how much horizontal space is allocated for action buttons or command controls within each row.
                                                                                  commandKeysProvides detailed definitions for command keyboard shortcuts, specifying the key combinations used to trigger various actions within an application or system. Click for more details. Property object's options:
                                                                                  • commandKeyEdit:object - Provides details about the keyboard shortcut or key binding assigned to trigger the edit command within the application. This property specifies which key or key combination the user can press to activate editing functionality.
                                                                                  • commandKeyCancel:object - Provides details about the "cancel" command key, specifying its function as an input to terminate or interrupt an ongoing operation. This key is commonly used to halt processes, dismiss dialogs, or cancel actions within an application or user interface.
                                                                                  • commandKeyUpdate:object - Provides detailed information about the "update" command key, specifying its purpose, usage, and expected behavior when invoked within the system. This includes how the "update" command modifies data, any parameters it accepts, and the outcomes or changes it triggers in the application.
                                                                                  deleteDialogDescribes delete dialog's settings Click for more details. Property object's options:
                                                                                  • header:string - Sets the header text of the dialog
                                                                                  • height:string | number - Sets the height of the dialog.
                                                                                  • width:string | number - Sets the width of the dialog.
                                                                                  • left:string | number - Sets the 'left' css property to the dialog.
                                                                                  • top:string | number - Assigns a value to the CSS 'top' property of the dialog element, controlling its vertical position relative to its nearest positioned ancestor or the viewport. This allows precise placement of the dialog from the top edge of the containing element or the browser window.
                                                                                  • enabled:boolean - Enables the option to display a confirmation dialog when attempting to delete an item, prompting users to confirm or cancel the deletion action.
                                                                                  • visible:boolean - Controls whether the dialog is visible to the user. Setting this property to 'true' displays the dialog, while setting it to 'false' hides it from view.
                                                                                  dialogProvides a detailed configuration for the dialog’s editing settings, specifying available editing modes, permissions, interface options, and user interaction behaviors within the dialog component. Click for more details. Property object's options:
                                                                                  • header:string - Specifies the text to display as the header or title at the top of the dialog. This text typically provides context or a summary of the dialog’s purpose, helping users understand what action or information is being presented.
                                                                                  • height:string | number - Specifies the height, in pixels or CSS units, for the edit dialog window, determining how tall the dialog will appear when displayed to the user.
                                                                                  • width:string | number - Specifies the width, in pixels or as a CSS value, of the edit dialog window. This determines how wide the dialog appears when users open it for editing content. Accepts numerical values (e.g., 400) or valid CSS width expressions (e.g., '50%', '30rem', '400px').
                                                                                  • left:string | number - Assigns a value to the CSS 'left' property of the dialog element, specifying its horizontal position relative to its containing element or the viewport. This determines how far the dialog is offset from the left edge, allowing precise control over its placement.
                                                                                  • top:string | number - Assigns a value to the CSS 'top' property of the dialog element, positioning it a specified distance from the top edge of its containing element or viewport. This property determines the vertical placement of the dialog when its position is set to absolute, fixed, or relative.
                                                                                  • enabled:boolean - Allows users to edit dialog elements within the application, providing options to modify, update, or customize dialog content.
                                                                                  • sidePanel:boolean - Enables the side panel dialog feature. When this option is activated, dialog windows will slide in from the right side of the Grid interface instead of appearing as standard modal dialogs. This allows for a non-intrusive, space-efficient way to display additional information or forms alongside the main content.
                                                                                  • visible:boolean - Controls whether the dialog is visible or hidden on the screen. Set this property to true to display the dialog, or false to hide it.
                                                                                  enabledAllows users to modify or update existing content directly within the interface. This feature typically provides editing controls, such as input fields or rich text editors, enabling seamless changes to data or text as needed.
                                                                                  modeEnables or configures the grid's cell editing functionality by setting its edit mode. This determines how users can interact with and modify the grid’s cell values—such as enabling inline editing, displaying an edit dialog, or disabling editing entirely.
                                                                                  readOnlyEdit"Read Only Edit is a grid mode where editing a cell does not directly change the underlying data in the grid. Instead, when a cell edit is attempted, the grid triggers the 'onCellEditRequest' callback, allowing your application to handle and process the update request as needed. This mode is useful for implementing custom edit workflows or for integrating with external data sources, as it gives you complete control over how changes are applied."
                                                                                  Try a demo showcasing the editing property.

                                                                                  Full working example

                                                                                  Minimal setup for editing with the data and bindings you usually use together on this component.

                                                                                  JavaScript — minimal grid with editing:

                                                                                  // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const editing = { enabled: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	editing
});
                                                                                  Related APIs editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                  actionSpecifies the method by which the editing mode is activated, such as through a single click, double click, or keyboard action."none" | "click" | "doubleClick"

                                                                                  Specifies the method by which the editing mode is activated, such as through a single click, double click, or keyboard action.

                                                                                  Default value

                                                                                  "click"

                                                                                  Back to root property: editing

                                                                                  Try a demo showcasing the action property.

                                                                                  Examples

                                                                                  Set a nested field on the element:

                                                                                  const el = document.querySelector('smart-grid');
el.editing.action = "doubleClick";

                                                                                  Read the nested value:

                                                                                  const el = document.querySelector('smart-grid');
const action = el.editing.action;

                                                                                  addDialogProvides detailed configuration options for the settings panel displayed in the "Add" dialog, including field definitions, default values, input validation rules, and UI behavior customizations. Click for more details. Property object's options:
                                                                                     object

                                                                                    Provides detailed configuration options for the settings panel displayed in the "Add" dialog, including field definitions, default values, input validation rules, and UI behavior customizations.

                                                                                    Properties

                                                                                    enabledActivates the dialog window that allows users to add new items or entries. When enabled, users can open and interact with an "Add" dialog to submit additional information or create new records.
                                                                                    headerSpecifies the text displayed in the dialog’s header area, typically used as the dialog title to provide context or describe the purpose of the dialog to the user.
                                                                                    heightSpecifies the vertical size of the dialog component in pixels, percentages, or other CSS-supported units. Determines how tall the dialog will appear when rendered on the screen.
                                                                                    leftApplies the CSS 'left' property to position the dialog element horizontally relative to its containing element or the viewport, allowing precise control over the dialog's horizontal placement on the page.
                                                                                    topApplies the specified value to the CSS 'top' property of the dialog element, allowing you to control the vertical positioning of the dialog relative to its containing element or the viewport.
                                                                                    visibleSets the visibility of the dialog.
                                                                                    widthSpecifies the width of the dialog box, determining how wide it appears on the screen. Accepts values in CSS units such as pixels (e.g., "400px"), percentages (e.g., "60%"), or other valid measurements.

                                                                                    Back to root property: editing

                                                                                    Try a demo showcasing the addDialog property.

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const addDialog = el.editing.addDialog;
                                                                                    Related APIs behavior refresh() change

                                                                                    enabledActivates the dialog window that allows users to add new items or entries. When enabled, users can open and interact with an "Add" dialog to submit additional information or create new records.boolean

                                                                                    Activates the dialog window that allows users to add new items or entries. When enabled, users can open and interact with an "Add" dialog to submit additional information or create new records.

                                                                                    Default value

                                                                                    false

                                                                                    Back to root property: editing

                                                                                    Examples

                                                                                    Set a nested field on the element:

                                                                                    const el = document.querySelector('smart-grid');
el.editing.addDialog.enabled = true;

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const enabled = el.editing.addDialog.enabled;

                                                                                    headerSpecifies the text displayed in the dialog’s header area, typically used as the dialog title to provide context or describe the purpose of the dialog to the user.string

                                                                                    Specifies the text displayed in the dialog’s header area, typically used as the dialog title to provide context or describe the purpose of the dialog to the user.

                                                                                    Default value

                                                                                    "{{message}}"

                                                                                    Back to root property: editing

                                                                                    Try a demo showcasing the header property.

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const header = el.editing.addDialog.header;
                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                    heightSpecifies the vertical size of the dialog component in pixels, percentages, or other CSS-supported units. Determines how tall the dialog will appear when rendered on the screen.string | number

                                                                                    Specifies the vertical size of the dialog component in pixels, percentages, or other CSS-supported units. Determines how tall the dialog will appear when rendered on the screen.

                                                                                    Default value

                                                                                    auto

                                                                                    Back to root property: editing

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const height = el.editing.addDialog.height;

                                                                                    leftApplies the CSS 'left' property to position the dialog element horizontally relative to its containing element or the viewport, allowing precise control over the dialog's horizontal placement on the page.string | number

                                                                                    Applies the CSS 'left' property to position the dialog element horizontally relative to its containing element or the viewport, allowing precise control over the dialog's horizontal placement on the page.

                                                                                    Default value

                                                                                    center

                                                                                    Back to root property: editing

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const left = el.editing.addDialog.left;
                                                                                    Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                    topApplies the specified value to the CSS 'top' property of the dialog element, allowing you to control the vertical positioning of the dialog relative to its containing element or the viewport.string | number

                                                                                    Applies the specified value to the CSS 'top' property of the dialog element, allowing you to control the vertical positioning of the dialog relative to its containing element or the viewport.

                                                                                    Default value

                                                                                    center

                                                                                    Back to root property: editing

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const top = el.editing.addDialog.top;

                                                                                    visibleSets the visibility of the dialog.boolean

                                                                                    Sets the visibility of the dialog.

                                                                                    Default value

                                                                                    false

                                                                                    Back to root property: editing

                                                                                    Try a demo showcasing the visible property.

                                                                                    Examples

                                                                                    Set a nested field on the element:

                                                                                    const el = document.querySelector('smart-grid');
el.editing.addDialog.visible = true;

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const visible = el.editing.addDialog.visible;

                                                                                    widthSpecifies the width of the dialog box, determining how wide it appears on the screen. Accepts values in CSS units such as pixels (e.g., "400px"), percentages (e.g., "60%"), or other valid measurements.string | number

                                                                                    Specifies the width of the dialog box, determining how wide it appears on the screen. Accepts values in CSS units such as pixels (e.g., "400px"), percentages (e.g., "60%"), or other valid measurements.

                                                                                    Default value

                                                                                    auto

                                                                                    Back to root property: editing

                                                                                    Try a demo showcasing the width property.

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const width = el.editing.addDialog.width;

                                                                                    addNewColumnAllows users to dynamically add new columns directly from the user interface. When this feature is enabled, a '+' icon appears as the last column in the table. Clicking the '+' icon opens a dialog window where users can enter details for the new column, facilitating easy and intuitive column creation without leaving the current view. object

                                                                                    Allows users to dynamically add new columns directly from the user interface. When this feature is enabled, a '+' icon appears as the last column in the table. Clicking the '+' icon opens a dialog window where users can enter details for the new column, facilitating easy and intuitive column creation without leaving the current view.

                                                                                    Properties

                                                                                    visibleDisplays the 'Add New Row' user interface element, allowing users to view and interact with the option to insert a new row into the dataset or table.

                                                                                    Back to root property: editing

                                                                                    Try a demo showcasing the addNewColumn property.

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const addNewColumn = el.editing.addNewColumn;
                                                                                    Related APIs columns columnHeader setColumnProperty() columnClick columnResize columnReorder

                                                                                    visibleDisplays the 'Add New Row' user interface element, allowing users to view and interact with the option to insert a new row into the dataset or table.boolean

                                                                                    Displays the 'Add New Row' user interface element, allowing users to view and interact with the option to insert a new row into the dataset or table.

                                                                                    Default value

                                                                                    false

                                                                                    Back to root property: editing

                                                                                    Try a demo showcasing the visible property.

                                                                                    Read the nested value:

                                                                                    const el = document.querySelector('smart-grid');
const visible = el.editing.addNewColumn.visible;
                                                                                    Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                    addNewRowDefines the configuration options for the 'Add New Row' UI element, which allows users to quickly append new rows to the Grid with a single click. This includes customization of the button’s appearance, position, default values for new rows, and any associated event handlers. Click for more details. Property object's options:
                                                                                       object

                                                                                      Defines the configuration options for the 'Add New Row' UI element, which allows users to quickly append new rows to the Grid with a single click. This includes customization of the button’s appearance, position, default values for new rows, and any associated event handlers.

                                                                                      Properties

                                                                                      autoCreateInserts a new row when the Enter key is pressed and the currently focused row is the last row in the table. This allows users to quickly add additional rows by pressing Enter at the end of the table.
                                                                                      autoEditSpecifies whether a newly added row should automatically enter edit mode immediately after it is inserted, allowing the user to edit its contents without requiring an additional action.
                                                                                      displayModeControls whether the new row action is displayed as a full-width row or as a button. Accepts two values: 'row' to show the action as an entire row, or 'button' to render it as a button element. This property can be used to both retrieve the current display mode and set a new one.
                                                                                      labelDefines the text displayed on the 'Add New Row' button or UI element, allowing customization of the label users see when adding a new row to the interface.
                                                                                      positionSpecifies the exact placement of the ‘Add New Row’ user interface element within the layout. This determines where the button or control for adding a new row will appear on the page, such as at the top, bottom, or a designated section of the grid or form.
                                                                                      visibleDisplays the 'Add New Row' user interface element, allowing users to see and interact with the control for adding a new row to the data table or form.

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the addNewRow property.

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const addNewRow = el.editing.addNewRow;
                                                                                      Related APIs appearance layout refresh() change

                                                                                      autoCreateInserts a new row when the Enter key is pressed and the currently focused row is the last row in the table. This allows users to quickly add additional rows by pressing Enter at the end of the table.boolean

                                                                                      Inserts a new row when the Enter key is pressed and the currently focused row is the last row in the table. This allows users to quickly add additional rows by pressing Enter at the end of the table.

                                                                                      Default value

                                                                                      false

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the autoCreate property.

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const autoCreate = el.editing.addNewRow.autoCreate;
                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                      autoEditSpecifies whether a newly added row should automatically enter edit mode immediately after it is inserted, allowing the user to edit its contents without requiring an additional action.boolean

                                                                                      Specifies whether a newly added row should automatically enter edit mode immediately after it is inserted, allowing the user to edit its contents without requiring an additional action.

                                                                                      Default value

                                                                                      true

                                                                                      Back to root property: editing

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const autoEdit = el.editing.addNewRow.autoEdit;
                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                      displayModeControls whether the new row action is displayed as a full-width row or as a button. Accepts two values: 'row' to show the action as an entire row, or 'button' to render it as a button element. This property can be used to both retrieve the current display mode and set a new one."row" | "button"

                                                                                      Controls whether the new row action is displayed as a full-width row or as a button. Accepts two values: 'row' to show the action as an entire row, or 'button' to render it as a button element. This property can be used to both retrieve the current display mode and set a new one.

                                                                                      Default value

                                                                                      "row"

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the displayMode property.

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const displayMode = el.editing.addNewRow.displayMode;
                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                      labelDefines the text displayed on the 'Add New Row' button or UI element, allowing customization of the label users see when adding a new row to the interface.string

                                                                                      Defines the text displayed on the 'Add New Row' button or UI element, allowing customization of the label users see when adding a new row to the interface.

                                                                                      Default value

                                                                                      "{{message}}"

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the label property.

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const label = el.editing.addNewRow.label;
                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                      positionSpecifies the exact placement of the ‘Add New Row’ user interface element within the layout. This determines where the button or control for adding a new row will appear on the page, such as at the top, bottom, or a designated section of the grid or form."near" | "far" | "both"

                                                                                      Specifies the exact placement of the ‘Add New Row’ user interface element within the layout. This determines where the button or control for adding a new row will appear on the page, such as at the top, bottom, or a designated section of the grid or form.

                                                                                      Default value

                                                                                      "both"

                                                                                      Back to root property: editing

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.addNewRow.position = "near";

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const position = el.editing.addNewRow.position;
                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                      visibleDisplays the 'Add New Row' user interface element, allowing users to see and interact with the control for adding a new row to the data table or form.boolean

                                                                                      Displays the 'Add New Row' user interface element, allowing users to see and interact with the control for adding a new row to the data table or form.

                                                                                      Default value

                                                                                      false

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the visible property.

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const visible = el.editing.addNewRow.visible;
                                                                                      Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                      allowColumnHeaderEditAllows users to edit the text of column headers directly within the interface, enabling customization of header labels according to their preferences or requirements.boolean

                                                                                      Allows users to edit the text of column headers directly within the interface, enabling customization of header labels according to their preferences or requirements.

                                                                                      Default value

                                                                                      false

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the allowColumnHeaderEdit property.

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.allowColumnHeaderEdit = true;

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const allowColumnHeaderEdit = el.editing.allowColumnHeaderEdit;
                                                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                      allowDynamicButtonsShows a Calendar or Spin Buttons when you hover an editable Date or Number Cells.any

                                                                                      Shows a Calendar or Spin Buttons when you hover an editable Date or Number Cells.

                                                                                      Default value

                                                                                      false

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the allowDynamicButtons property.

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.allowDynamicButtons = true;

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const allowDynamicButtons = el.editing.allowDynamicButtons;

                                                                                      allowListOpenOnContentClickAutomatically opens the drop-down editor both when the arrow button is clicked and when any item within the drop-down list is selected. This ensures the editor remains accessible regardless of whether the user interacts with the arrow or directly with a list item.boolean

                                                                                      Automatically opens the drop-down editor both when the arrow button is clicked and when any item within the drop-down list is selected. This ensures the editor remains accessible regardless of whether the user interacts with the arrow or directly with a list item.

                                                                                      Default value

                                                                                      true

                                                                                      Back to root property: editing

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.allowListOpenOnContentClick = false;

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const allowListOpenOnContentClick = el.editing.allowListOpenOnContentClick;
                                                                                      Related APIs behavior refresh() change

                                                                                      allowRowHeaderEditAllows users to edit the content of cells designated as row headers, enabling direct modification of row header values within the table.boolean

                                                                                      Allows users to edit the content of cells designated as row headers, enabling direct modification of row header values within the table.

                                                                                      Default value

                                                                                      false

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the allowRowHeaderEdit property.

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.allowRowHeaderEdit = true;

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const allowRowHeaderEdit = el.editing.allowRowHeaderEdit;
                                                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                      autoUpdateFilterAndSortAutomatically reapplies any previously set column filters and sort orders after an edit is made, ensuring that user-defined table views remain consistent and uninterrupted following data modifications.boolean

                                                                                      Automatically reapplies any previously set column filters and sort orders after an edit is made, ensuring that user-defined table views remain consistent and uninterrupted following data modifications.

                                                                                      Default value

                                                                                      true

                                                                                      Back to root property: editing

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.autoUpdateFilterAndSort = false;

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const autoUpdateFilterAndSort = el.editing.autoUpdateFilterAndSort;
                                                                                      Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                      batchEnables batch editing functionality, allowing users to modify multiple rows within the grid on the client side before saving any changes. All edits can be submitted together in a single server request, improving efficiency and reducing the number of server calls needed for updates.boolean

                                                                                      Enables batch editing functionality, allowing users to modify multiple rows within the grid on the client side before saving any changes. All edits can be submitted together in a single server request, improving efficiency and reducing the number of server calls needed for updates.

                                                                                      Default value

                                                                                      false

                                                                                      Back to root property: editing

                                                                                      Try a demo showcasing the batch property.

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.batch = true;

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const batch = el.editing.batch;

                                                                                      caretPositionThis feature sets the Input's caret position by the mouse click which activates the Input editor.boolean

                                                                                      This feature sets the Input's caret position by the mouse click which activates the Input editor.

                                                                                      Default value

                                                                                      false

                                                                                      Back to root property: editing

                                                                                      Examples

                                                                                      Set a nested field on the element:

                                                                                      const el = document.querySelector('smart-grid');
el.editing.caretPosition = true;

                                                                                      Read the nested value:

                                                                                      const el = document.querySelector('smart-grid');
const caretPosition = el.editing.caretPosition;

                                                                                      commandBarDefines the configuration options for the grid's command bar, a user interface element that appears as a toolbar or status bar above or below the grid. The command bar provides interactive buttons or tools, such as Save and Revert, allowing users to commit or undo changes made within the grid. These settings control the appearance, available actions, and behavior of the command bar to enhance grid editing workflows. Click for more details. Property object's options:
                                                                                         object

                                                                                        Defines the configuration options for the grid's command bar, a user interface element that appears as a toolbar or status bar above or below the grid. The command bar provides interactive buttons or tools, such as Save and Revert, allowing users to commit or undo changes made within the grid. These settings control the appearance, available actions, and behavior of the command bar to enhance grid editing workflows.

                                                                                        Properties

                                                                                        dataSourceConfigures the data source that populates the command bar, determining which commands or actions are displayed to the user. This property specifies where the command bar retrieves its list of available options. Click for more details. Property object's options:
                                                                                        • commandBarAddRow:object - Provides a detailed configuration schema for the "Add Row" button within the command bar, specifying its appearance, behavior, accessibility options, and parameters that control how new rows are added to the underlying data set. This includes properties such as label text, icon, button state (enabled/disabled), event handlers, and any associated tooltips or confirmation dialogs.
                                                                                        • commandBarDeleteRow:object - Provides detailed configuration options for the command bar button specifically used to delete rows, including its label, icon, confirmation prompts, visibility, enabled/disabled state, and any associated callback or event handler functions.
                                                                                        • commandBarBatchSave:object - Provides detailed configuration options for the save button within the command bar, including its label, icon, enabled/disabled state, tooltip text, and associated save action behavior.
                                                                                        • commandBarBatchRevert:object - Provides detailed configuration options for the command bar button that allows users to revert or undo recent changes. This includes settings such as button label, icon, tooltip text, visibility, enabled state, and associated action handlers.
                                                                                        displayModeSpecifies the content, such as text labels, icons, or both, that will appear on the command bar buttons. This determines the visual elements shown to users within each button on the command bar interface.
                                                                                        positionSpecifies the location of the command bar within the user interface, determining where it appears on the screen (e.g., top, bottom, left, or right).
                                                                                        visibleDisplays the command bar, allowing users to access and execute available commands and features within the application.

                                                                                        Back to root property: editing

                                                                                        Try a demo showcasing the commandBar property.

                                                                                        Read the nested value:

                                                                                        const el = document.querySelector('smart-grid');
const commandBar = el.editing.commandBar;
                                                                                        Related APIs appearance layout refresh() change

                                                                                        dataSourceConfigures the data source that populates the command bar, determining which commands or actions are displayed to the user. This property specifies where the command bar retrieves its list of available options. Click for more details. Property object's options:
                                                                                           object

                                                                                          Configures the data source that populates the command bar, determining which commands or actions are displayed to the user. This property specifies where the command bar retrieves its list of available options.

                                                                                          Properties

                                                                                          commandBarAddRowProvides a detailed configuration schema for the "Add Row" button within the command bar, specifying its appearance, behavior, accessibility options, and parameters that control how new rows are added to the underlying data set. This includes properties such as label text, icon, button state (enabled/disabled), event handlers, and any associated tooltips or confirmation dialogs. Click for more details. Property object's options:
                                                                                          • command:{(): void} - Specifies the display name or label for the command that allows users to add a new row, typically in a table or data entry form interface. This name will appear as the button text or command name used to trigger the "add row" action.
                                                                                          • icon:string - Specifies the CSS class name to be assigned to the icon element within the "Add Row" button, allowing for custom styling or use of icon libraries (e.g., FontAwesome, Material Icons).
                                                                                          • label:string - Specifies the text displayed on the "Add Row" button, allowing users to clearly identify its purpose when interacting with the interface.
                                                                                          • visible:boolean - Displays the "Add Row" button, allowing users to add a new row to the table or list.
                                                                                          commandBarBatchRevertProvides detailed configuration options for the command bar button that allows users to revert or undo recent changes. This includes settings such as button label, icon, tooltip text, visibility, enabled state, and associated action handlers. Click for more details. Property object's options:
                                                                                          • command:{(): void} - Specifies the label or identifier used for the revert command. This determines how the revert functionality is referenced or displayed within the user interface or command set.
                                                                                          • icon:string - Specifies the CSS class name(s) to be applied to the icon element within the revert button. This allows for custom styling or the use of icon libraries.
                                                                                          • label:string - Specifies the text displayed on the button that allows users to revert or undo their recent changes.
                                                                                          • visible:boolean - Displays the revert button on the interface, allowing users to undo recent changes or revert to a previous state.
                                                                                          commandBarBatchSaveProvides detailed configuration options for the save button within the command bar, including its label, icon, enabled/disabled state, tooltip text, and associated save action behavior. Click for more details. Property object's options:
                                                                                          • command:{(): void} - Specifies the label or identifier used for the save command, which determines how the save action is referenced or displayed within the application interface.
                                                                                          • icon:string - Specifies the CSS class name(s) that will be applied to the icon element within the save button, allowing for custom styling or use of icon libraries.
                                                                                          • label:string - Specifies the text displayed on the save button, allowing customization of the button’s label to indicate its purpose to users (e.g., "Save", "Submit", or "Update").
                                                                                          • visible:boolean - Displays the save button on the user interface, allowing users to initiate the save action once certain conditions are met.
                                                                                          commandBarDeleteRowProvides detailed configuration options for the command bar button specifically used to delete rows, including its label, icon, confirmation prompts, visibility, enabled/disabled state, and any associated callback or event handler functions. Click for more details. Property object's options:
                                                                                          • command:{(): void} - Specifies the display name or label for the "Delete Row" command, which is used to remove a row from a data table or grid interface. This name will be shown to users in menus, buttons, or tooltips associated with the delete row functionality.
                                                                                          • icon:string - Specifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for customized styling and theming of the icon's appearance.
                                                                                          • label:string - Specifies the text displayed on the button that deletes a row, helping users identify its purpose. This label should clearly indicate that clicking the button will remove a row from the table or list.
                                                                                          • visible:boolean - Displays the delete row button, allowing users to remove a row from the table.

                                                                                          Back to root property: editing

                                                                                          Try a demo showcasing the dataSource property.

                                                                                          Read the nested value:

                                                                                          const el = document.querySelector('smart-grid');
const dataSource = el.editing.commandBar.dataSource;
                                                                                          Related APIs refresh() beginUpdate() endUpdate() change

                                                                                          commandBarAddRowProvides a detailed configuration schema for the "Add Row" button within the command bar, specifying its appearance, behavior, accessibility options, and parameters that control how new rows are added to the underlying data set. This includes properties such as label text, icon, button state (enabled/disabled), event handlers, and any associated tooltips or confirmation dialogs. Click for more details. Property object's options:
                                                                                             object

                                                                                            Provides a detailed configuration schema for the "Add Row" button within the command bar, specifying its appearance, behavior, accessibility options, and parameters that control how new rows are added to the underlying data set. This includes properties such as label text, icon, button state (enabled/disabled), event handlers, and any associated tooltips or confirmation dialogs.

                                                                                            Properties

                                                                                            commandSpecifies the display name or label for the command that allows users to add a new row, typically in a table or data entry form interface. This name will appear as the button text or command name used to trigger the "add row" action.
                                                                                            iconSpecifies the CSS class name to be assigned to the icon element within the "Add Row" button, allowing for custom styling or use of icon libraries (e.g., FontAwesome, Material Icons).
                                                                                            labelSpecifies the text displayed on the "Add Row" button, allowing users to clearly identify its purpose when interacting with the interface.
                                                                                            visibleDisplays the "Add Row" button, allowing users to add a new row to the table or list.

                                                                                            Back to root property: editing

                                                                                            Try a demo showcasing the commandBarAddRow property.

                                                                                            Read the nested value:

                                                                                            const el = document.querySelector('smart-grid');
const commandBarAddRow = el.editing.commandBar.dataSource.commandBarAddRow;
                                                                                            Related APIs appearance layout refresh() change

                                                                                            commandSpecifies the display name or label for the command that allows users to add a new row, typically in a table or data entry form interface. This name will appear as the button text or command name used to trigger the "add row" action.{(): void}

                                                                                            Specifies the display name or label for the command that allows users to add a new row, typically in a table or data entry form interface. This name will appear as the button text or command name used to trigger the "add row" action.

                                                                                            Default value

                                                                                            commandBarAddRowCommand

                                                                                            Back to root property: editing

                                                                                            Try a demo showcasing the command property.

                                                                                            Read the nested value:

                                                                                            const el = document.querySelector('smart-grid');
const command = el.editing.commandBar.dataSource.commandBarAddRow.command;
                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                            iconSpecifies the CSS class name to be assigned to the icon element within the "Add Row" button, allowing for custom styling or use of icon libraries (e.g., FontAwesome, Material Icons).string

                                                                                            Specifies the CSS class name to be assigned to the icon element within the "Add Row" button, allowing for custom styling or use of icon libraries (e.g., FontAwesome, Material Icons).

                                                                                            Default value

                                                                                            "smart-icon-plus"

                                                                                            Back to root property: editing

                                                                                            Try a demo showcasing the icon property.

                                                                                            Read the nested value:

                                                                                            const el = document.querySelector('smart-grid');
const icon = el.editing.commandBar.dataSource.commandBarAddRow.icon;
                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                            labelSpecifies the text displayed on the "Add Row" button, allowing users to clearly identify its purpose when interacting with the interface.string

                                                                                            Specifies the text displayed on the "Add Row" button, allowing users to clearly identify its purpose when interacting with the interface.

                                                                                            Default value

                                                                                            "{{messages}}"

                                                                                            Back to root property: editing

                                                                                            Try a demo showcasing the label property.

                                                                                            Read the nested value:

                                                                                            const el = document.querySelector('smart-grid');
const label = el.editing.commandBar.dataSource.commandBarAddRow.label;
                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                            visibleDisplays the "Add Row" button, allowing users to add a new row to the table or list.boolean

                                                                                            Displays the "Add Row" button, allowing users to add a new row to the table or list.

                                                                                            Default value

                                                                                            false

                                                                                            Back to root property: editing

                                                                                            Try a demo showcasing the visible property.

                                                                                            Read the nested value:

                                                                                            const el = document.querySelector('smart-grid');
const visible = el.editing.commandBar.dataSource.commandBarAddRow.visible;
                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                            commandBarBatchRevertProvides detailed configuration options for the command bar button that allows users to revert or undo recent changes. This includes settings such as button label, icon, tooltip text, visibility, enabled state, and associated action handlers. Click for more details. Property object's options:
                                                                                               object

                                                                                              Provides detailed configuration options for the command bar button that allows users to revert or undo recent changes. This includes settings such as button label, icon, tooltip text, visibility, enabled state, and associated action handlers.

                                                                                              Properties

                                                                                              commandSpecifies the label or identifier used for the revert command. This determines how the revert functionality is referenced or displayed within the user interface or command set.
                                                                                              iconSpecifies the CSS class name(s) to be applied to the icon element within the revert button. This allows for custom styling or the use of icon libraries.
                                                                                              labelSpecifies the text displayed on the button that allows users to revert or undo their recent changes.
                                                                                              visibleDisplays the revert button on the interface, allowing users to undo recent changes or revert to a previous state.

                                                                                              Back to root property: editing

                                                                                              Try a demo showcasing the commandBarBatchRevert property.

                                                                                              Read the nested value:

                                                                                              const el = document.querySelector('smart-grid');
const commandBarBatchRevert = el.editing.commandBar.dataSource.commandBarBatchRevert;

                                                                                              commandSpecifies the label or identifier used for the revert command. This determines how the revert functionality is referenced or displayed within the user interface or command set.{(): void}

                                                                                              Specifies the label or identifier used for the revert command. This determines how the revert functionality is referenced or displayed within the user interface or command set.

                                                                                              Default value

                                                                                              commandBarBatchRevertCommand

                                                                                              Back to root property: editing

                                                                                              Try a demo showcasing the command property.

                                                                                              Read the nested value:

                                                                                              const el = document.querySelector('smart-grid');
const command = el.editing.commandBar.dataSource.commandBarBatchRevert.command;

                                                                                              iconSpecifies the CSS class name(s) to be applied to the icon element within the revert button. This allows for custom styling or the use of icon libraries.string

                                                                                              Specifies the CSS class name(s) to be applied to the icon element within the revert button. This allows for custom styling or the use of icon libraries.

                                                                                              Default value

                                                                                              "smart-icon-revert"

                                                                                              Back to root property: editing

                                                                                              Try a demo showcasing the icon property.

                                                                                              Read the nested value:

                                                                                              const el = document.querySelector('smart-grid');
const icon = el.editing.commandBar.dataSource.commandBarBatchRevert.icon;

                                                                                              labelSpecifies the text displayed on the button that allows users to revert or undo their recent changes.string

                                                                                              Specifies the text displayed on the button that allows users to revert or undo their recent changes.

                                                                                              Default value

                                                                                              "{{messages}}"

                                                                                              Back to root property: editing

                                                                                              Try a demo showcasing the label property.

                                                                                              Read the nested value:

                                                                                              const el = document.querySelector('smart-grid');
const label = el.editing.commandBar.dataSource.commandBarBatchRevert.label;

                                                                                              visibleDisplays the revert button on the interface, allowing users to undo recent changes or revert to a previous state.boolean

                                                                                              Displays the revert button on the interface, allowing users to undo recent changes or revert to a previous state.

                                                                                              Default value

                                                                                              true

                                                                                              Back to root property: editing

                                                                                              Try a demo showcasing the visible property.

                                                                                              Read the nested value:

                                                                                              const el = document.querySelector('smart-grid');
const visible = el.editing.commandBar.dataSource.commandBarBatchRevert.visible;

                                                                                              commandBarBatchSaveProvides detailed configuration options for the save button within the command bar, including its label, icon, enabled/disabled state, tooltip text, and associated save action behavior. Click for more details. Property object's options:
                                                                                                 object

                                                                                                Provides detailed configuration options for the save button within the command bar, including its label, icon, enabled/disabled state, tooltip text, and associated save action behavior.

                                                                                                Properties

                                                                                                commandSpecifies the label or identifier used for the save command, which determines how the save action is referenced or displayed within the application interface.
                                                                                                iconSpecifies the CSS class name(s) that will be applied to the icon element within the save button, allowing for custom styling or use of icon libraries.
                                                                                                labelSpecifies the text displayed on the save button, allowing customization of the button’s label to indicate its purpose to users (e.g., "Save", "Submit", or "Update").
                                                                                                visibleDisplays the save button on the user interface, allowing users to initiate the save action once certain conditions are met.

                                                                                                Back to root property: editing

                                                                                                Try a demo showcasing the commandBarBatchSave property.

                                                                                                Read the nested value:

                                                                                                const el = document.querySelector('smart-grid');
const commandBarBatchSave = el.editing.commandBar.dataSource.commandBarBatchSave;
                                                                                                Related APIs behavior refresh() change

                                                                                                commandSpecifies the label or identifier used for the save command, which determines how the save action is referenced or displayed within the application interface.{(): void}

                                                                                                Specifies the label or identifier used for the save command, which determines how the save action is referenced or displayed within the application interface.

                                                                                                Default value

                                                                                                commandBarBatchSaveCommand

                                                                                                Back to root property: editing

                                                                                                Try a demo showcasing the command property.

                                                                                                Read the nested value:

                                                                                                const el = document.querySelector('smart-grid');
const command = el.editing.commandBar.dataSource.commandBarBatchSave.command;

                                                                                                iconSpecifies the CSS class name(s) that will be applied to the icon element within the save button, allowing for custom styling or use of icon libraries.string

                                                                                                Specifies the CSS class name(s) that will be applied to the icon element within the save button, allowing for custom styling or use of icon libraries.

                                                                                                Default value

                                                                                                "smart-icon-save"

                                                                                                Back to root property: editing

                                                                                                Try a demo showcasing the icon property.

                                                                                                Read the nested value:

                                                                                                const el = document.querySelector('smart-grid');
const icon = el.editing.commandBar.dataSource.commandBarBatchSave.icon;

                                                                                                labelSpecifies the text displayed on the save button, allowing customization of the button’s label to indicate its purpose to users (e.g., "Save", "Submit", or "Update").string

                                                                                                Specifies the text displayed on the save button, allowing customization of the button’s label to indicate its purpose to users (e.g., "Save", "Submit", or "Update").

                                                                                                Default value

                                                                                                "{{messages}}"

                                                                                                Back to root property: editing

                                                                                                Try a demo showcasing the label property.

                                                                                                Read the nested value:

                                                                                                const el = document.querySelector('smart-grid');
const label = el.editing.commandBar.dataSource.commandBarBatchSave.label;
                                                                                                Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                visibleDisplays the save button on the user interface, allowing users to initiate the save action once certain conditions are met.boolean

                                                                                                Displays the save button on the user interface, allowing users to initiate the save action once certain conditions are met.

                                                                                                Default value

                                                                                                true

                                                                                                Back to root property: editing

                                                                                                Try a demo showcasing the visible property.

                                                                                                Read the nested value:

                                                                                                const el = document.querySelector('smart-grid');
const visible = el.editing.commandBar.dataSource.commandBarBatchSave.visible;

                                                                                                commandBarDeleteRowProvides detailed configuration options for the command bar button specifically used to delete rows, including its label, icon, confirmation prompts, visibility, enabled/disabled state, and any associated callback or event handler functions. Click for more details. Property object's options:
                                                                                                   object

                                                                                                  Provides detailed configuration options for the command bar button specifically used to delete rows, including its label, icon, confirmation prompts, visibility, enabled/disabled state, and any associated callback or event handler functions.

                                                                                                  Properties

                                                                                                  commandSpecifies the display name or label for the "Delete Row" command, which is used to remove a row from a data table or grid interface. This name will be shown to users in menus, buttons, or tooltips associated with the delete row functionality.
                                                                                                  iconSpecifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for customized styling and theming of the icon's appearance.
                                                                                                  labelSpecifies the text displayed on the button that deletes a row, helping users identify its purpose. This label should clearly indicate that clicking the button will remove a row from the table or list.
                                                                                                  visibleDisplays the delete row button, allowing users to remove a row from the table.

                                                                                                  Back to root property: editing

                                                                                                  Try a demo showcasing the commandBarDeleteRow property.

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const commandBarDeleteRow = el.editing.commandBar.dataSource.commandBarDeleteRow;
                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                  commandSpecifies the display name or label for the "Delete Row" command, which is used to remove a row from a data table or grid interface. This name will be shown to users in menus, buttons, or tooltips associated with the delete row functionality.{(): void}

                                                                                                  Specifies the display name or label for the "Delete Row" command, which is used to remove a row from a data table or grid interface. This name will be shown to users in menus, buttons, or tooltips associated with the delete row functionality.

                                                                                                  Default value

                                                                                                  commandBarDeleteRowCommand

                                                                                                  Back to root property: editing

                                                                                                  Try a demo showcasing the command property.

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const command = el.editing.commandBar.dataSource.commandBarDeleteRow.command;
                                                                                                  Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                  iconSpecifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for customized styling and theming of the icon's appearance.string

                                                                                                  Specifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for customized styling and theming of the icon's appearance.

                                                                                                  Default value

                                                                                                  "smart-icon-delete"

                                                                                                  Back to root property: editing

                                                                                                  Try a demo showcasing the icon property.

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const icon = el.editing.commandBar.dataSource.commandBarDeleteRow.icon;
                                                                                                  Related APIs appearance layout refresh() change

                                                                                                  labelSpecifies the text displayed on the button that deletes a row, helping users identify its purpose. This label should clearly indicate that clicking the button will remove a row from the table or list.string

                                                                                                  Specifies the text displayed on the button that deletes a row, helping users identify its purpose. This label should clearly indicate that clicking the button will remove a row from the table or list.

                                                                                                  Default value

                                                                                                  "{{messages}}"

                                                                                                  Back to root property: editing

                                                                                                  Try a demo showcasing the label property.

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const label = el.editing.commandBar.dataSource.commandBarDeleteRow.label;
                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                  visibleDisplays the delete row button, allowing users to remove a row from the table.boolean

                                                                                                  Displays the delete row button, allowing users to remove a row from the table.

                                                                                                  Default value

                                                                                                  false

                                                                                                  Back to root property: editing

                                                                                                  Try a demo showcasing the visible property.

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.editing.commandBar.dataSource.commandBarDeleteRow.visible;
                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                  displayModeSpecifies the content, such as text labels, icons, or both, that will appear on the command bar buttons. This determines the visual elements shown to users within each button on the command bar interface."label" | "icon" | "labelAndIcon"

                                                                                                  Specifies the content, such as text labels, icons, or both, that will appear on the command bar buttons. This determines the visual elements shown to users within each button on the command bar interface.

                                                                                                  Default value

                                                                                                  "labelAndIcon"

                                                                                                  Back to root property: editing

                                                                                                  Try a demo showcasing the displayMode property.

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const displayMode = el.editing.commandBar.displayMode;
                                                                                                  Related APIs appearance layout refresh() change

                                                                                                  positionSpecifies the location of the command bar within the user interface, determining where it appears on the screen (e.g., top, bottom, left, or right)."near" | "far" | "both"

                                                                                                  Specifies the location of the command bar within the user interface, determining where it appears on the screen (e.g., top, bottom, left, or right).

                                                                                                  Default value

                                                                                                  "near"

                                                                                                  Back to root property: editing

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const position = el.editing.commandBar.position;

                                                                                                  visibleDisplays the command bar, allowing users to access and execute available commands and features within the application.boolean

                                                                                                  Displays the command bar, allowing users to access and execute available commands and features within the application.

                                                                                                  Default value

                                                                                                  false

                                                                                                  Back to root property: editing

                                                                                                  Try a demo showcasing the visible property.

                                                                                                  Read the nested value:

                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.editing.commandBar.visible;

                                                                                                  commandColumnDefines the configuration options for the grid’s command column. The command column provides action buttons—such as Edit and Delete—that allow users to interact with individual rows. You can customize the available commands, their display order, button text, icons, and event handlers to control how actions are performed on row data. Click for more details. Property object's options:
                                                                                                     object

                                                                                                    Defines the configuration options for the grid’s command column. The command column provides action buttons—such as Edit and Delete—that allow users to interact with individual rows. You can customize the available commands, their display order, button text, icons, and event handlers to control how actions are performed on row data.

                                                                                                    Properties

                                                                                                    dataSourceDefines the data source for the command column, specifying which dataset or field the column should retrieve and display its command-related values from. This determines the contents and available actions within the command column. Click for more details. Property object's options:
                                                                                                    • commandColumnMenu:object - Provides configuration options for the command button displayed in the column header. This button, by default, opens a menu that includes a Column Chooser, allowing users to select which columns are visible in the grid. These settings let you customize the appearance, behavior, and available actions of the command button in the column header.
                                                                                                    • commandColumnEdit:object - Provides detailed configuration options for the command column's edit button, allowing customization of its behavior, appearance, and functionality when editing rows in the data grid.
                                                                                                    • commandColumnDelete:object - Provides the configuration options for the delete button located in the command column, detailing its appearance, behavior, and functionality when removing rows from the data source.
                                                                                                    • commandColumnUpdate:object - Provides configuration options for the update button within the command column, allowing you to customize its appearance, behavior, and actions when updating rows in the data grid.
                                                                                                    • commandColumnCancel:object - Provides configuration options for the "Cancel Edit" button within the command column, allowing you to customize its appearance, behavior, and functionality when a user cancels an editing action.
                                                                                                    • commandColumnRowMenu:object - Provides detailed configuration options for the row menu button located in the command column, allowing customization of its appearance, behavior, and available menu actions within each row.
                                                                                                    • commandColumnCustom:object - Provides configuration options for customizing the appearance and behavior of a custom button within the command column, such as its text, icon, styling, and associated actions.
                                                                                                    displayModeDefines the content or label displayed within the buttons of the command column, such as text, icons, or custom HTML elements. This determines what users see and interact with in each command button cell.
                                                                                                    inlineDisplays the command column directly within the main content area (inline), rather than in a separate section. This allows actions like edit or delete to appear alongside each data row for easier, more integrated user interaction.
                                                                                                    positionSpecifies the position of the command column within the table, determining where the command buttons (such as edit, delete, or custom actions) will appear relative to other columns.
                                                                                                    visibleDisplays the command column, allowing users to view and interact with available actions or commands for each row within the table.
                                                                                                    widthSpecifies the width of the command column in the table or grid, determining how much horizontal space is allocated for action buttons or command controls within each row.

                                                                                                    Back to root property: editing

                                                                                                    Try a demo showcasing the commandColumn property.

                                                                                                    Read the nested value:

                                                                                                    const el = document.querySelector('smart-grid');
const commandColumn = el.editing.commandColumn;
                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                    dataSourceDefines the data source for the command column, specifying which dataset or field the column should retrieve and display its command-related values from. This determines the contents and available actions within the command column. Click for more details. Property object's options:
                                                                                                       object

                                                                                                      Defines the data source for the command column, specifying which dataset or field the column should retrieve and display its command-related values from. This determines the contents and available actions within the command column.

                                                                                                      Properties

                                                                                                      commandColumnCancelProvides configuration options for the "Cancel Edit" button within the command column, allowing you to customize its appearance, behavior, and functionality when a user cancels an editing action. Click for more details. Property object's options:
                                                                                                      • command:{(): void} - Specifies the custom name or label used to identify the cancel command within the application. This determines how the cancel action is referenced or displayed in the user interface and in command handling logic.
                                                                                                      • icon:string - Specifies the CSS class name(s) that will be applied to the icon element within the cancel button, allowing for custom styling and theming of the icon's appearance.
                                                                                                      • label:string - Specifies the text displayed on the cancel button, allowing users to identify and understand the button’s purpose to dismiss or exit the current dialog, form, or action.
                                                                                                      • visible:boolean - Displays the cancel button on the user interface, allowing users the option to abort or exit the current operation.
                                                                                                      commandColumnCustomProvides configuration options for customizing the appearance and behavior of a custom button within the command column, such as its text, icon, styling, and associated actions. Click for more details. Property object's options:
                                                                                                      • command:{(): void} - Specifies the unique identifier for the custom command. This name is used to reference and invoke the command within the application or workflow.
                                                                                                      • icon:string - Specifies the CSS class name that will be assigned to the icon element within the custom button. This allows you to apply custom styles or load specific icon fonts on the button’s icon.
                                                                                                      • label:string - The text displayed on the custom button, used to identify its purpose or action to users.
                                                                                                      • visible:boolean - Displays the custom button on the user interface, making it accessible and interactive for users.
                                                                                                      commandColumnDeleteProvides the configuration options for the delete button located in the command column, detailing its appearance, behavior, and functionality when removing rows from the data source. Click for more details. Property object's options:
                                                                                                      • command:{(): void} - Specifies the display name or label used for the "delete row" command button or menu item in the user interface. This name appears to users when offering the option to delete a row from a data table or list.
                                                                                                      • icon:string - Specifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for custom styling and icon customization of the button's visual appearance.
                                                                                                      • label:string - Specifies the text label displayed on the button used to delete a row from a table or list. This label helps users understand the button's purpose within the interface.
                                                                                                      • visible:boolean - Displays the "Delete Row" button, allowing users to remove a row from the table or dataset.
                                                                                                      commandColumnEditProvides detailed configuration options for the command column's edit button, allowing customization of its behavior, appearance, and functionality when editing rows in the data grid. Click for more details. Property object's options:
                                                                                                      • command:{(): void} - Specifies the label or identifier for the command used to edit a row. This name is typically displayed as the text or tooltip on the edit button or menu item in the user interface, helping users recognize the action for editing a specific row.
                                                                                                      • icon:string - Specifies the CSS class name that will be assigned to the icon element within the edit row button, allowing you to customize its appearance and styling.
                                                                                                      • label:string - A descriptive label displayed on the 'Edit Row' button, indicating its function to users—typically used to signify that clicking the button allows editing of the selected table row.
                                                                                                      • visible:boolean - Displays the "Edit Row" button, allowing users to access and modify the contents of a specific row in the table or form.
                                                                                                      commandColumnMenuProvides configuration options for the command button displayed in the column header. This button, by default, opens a menu that includes a Column Chooser, allowing users to select which columns are visible in the grid. These settings let you customize the appearance, behavior, and available actions of the command button in the column header. Click for more details. Property object's options:
                                                                                                      • command:{(): void}
                                                                                                      • icon:string
                                                                                                      • label:string
                                                                                                      • visible:boolean
                                                                                                      commandColumnRowMenuProvides detailed configuration options for the row menu button located in the command column, allowing customization of its appearance, behavior, and available menu actions within each row. Click for more details. Property object's options:
                                                                                                      • command:{(): void} - Specifies the label text displayed for the row menu command, allowing you to define how the command appears to users within the row context menu.
                                                                                                      • icon:string - Specifies the CSS class name(s) to be assigned to the icon element within the custom button. This property allows you to style or customize the icon’s appearance using external or predefined CSS classes.
                                                                                                      • label:string - Specifies the text label displayed on the menu button located within a table row, providing context or functionality to the user.
                                                                                                      • visible:boolean - Displays the row menu button, allowing users to access additional actions or options related to the specific row.
                                                                                                      commandColumnUpdateProvides configuration options for the update button within the command column, allowing you to customize its appearance, behavior, and actions when updating rows in the data grid. Click for more details. Property object's options:
                                                                                                      • command:{(): void} - Defines the name identifier for the command that performs an update operation on a data row. This property specifies the command name used to trigger or reference the update row action, allowing developers to customize or distinguish it from other commands in the system.
                                                                                                      • icon:string - Specifies the CSS class name(s) that will be applied to the icon element within the update row button, allowing you to customize its appearance and style.
                                                                                                      • label:string - Specifies the text displayed on the button used to update a row, allowing users to identify and initiate the row update action.
                                                                                                      • visible:boolean - Displays the update row button, allowing users to see and interact with it for modifying existing row data.

                                                                                                      Back to root property: editing

                                                                                                      Try a demo showcasing the dataSource property.

                                                                                                      Read the nested value:

                                                                                                      const el = document.querySelector('smart-grid');
const dataSource = el.editing.commandColumn.dataSource;
                                                                                                      Related APIs refresh() beginUpdate() endUpdate() change

                                                                                                      commandColumnCancelProvides configuration options for the "Cancel Edit" button within the command column, allowing you to customize its appearance, behavior, and functionality when a user cancels an editing action. Click for more details. Property object's options:
                                                                                                         object

                                                                                                        Provides configuration options for the "Cancel Edit" button within the command column, allowing you to customize its appearance, behavior, and functionality when a user cancels an editing action.

                                                                                                        Properties

                                                                                                        commandSpecifies the custom name or label used to identify the cancel command within the application. This determines how the cancel action is referenced or displayed in the user interface and in command handling logic.
                                                                                                        iconSpecifies the CSS class name(s) that will be applied to the icon element within the cancel button, allowing for custom styling and theming of the icon's appearance.
                                                                                                        labelSpecifies the text displayed on the cancel button, allowing users to identify and understand the button’s purpose to dismiss or exit the current dialog, form, or action.
                                                                                                        visibleDisplays the cancel button on the user interface, allowing users the option to abort or exit the current operation.

                                                                                                        Back to root property: editing

                                                                                                        Try a demo showcasing the commandColumnCancel property.

                                                                                                        Read the nested value:

                                                                                                        const el = document.querySelector('smart-grid');
const commandColumnCancel = el.editing.commandColumn.dataSource.commandColumnCancel;
                                                                                                        Related APIs appearance layout refresh() change

                                                                                                        commandSpecifies the custom name or label used to identify the cancel command within the application. This determines how the cancel action is referenced or displayed in the user interface and in command handling logic.{(): void}

                                                                                                        Specifies the custom name or label used to identify the cancel command within the application. This determines how the cancel action is referenced or displayed in the user interface and in command handling logic.

                                                                                                        Default value

                                                                                                        commandColumnCancelCommand

                                                                                                        Back to root property: editing

                                                                                                        Try a demo showcasing the command property.

                                                                                                        Read the nested value:

                                                                                                        const el = document.querySelector('smart-grid');
const command = el.editing.commandColumn.dataSource.commandColumnCancel.command;

                                                                                                        iconSpecifies the CSS class name(s) that will be applied to the icon element within the cancel button, allowing for custom styling and theming of the icon's appearance.string

                                                                                                        Specifies the CSS class name(s) that will be applied to the icon element within the cancel button, allowing for custom styling and theming of the icon's appearance.

                                                                                                        Default value

                                                                                                        "smart-icon-cancel-circled"

                                                                                                        Back to root property: editing

                                                                                                        Try a demo showcasing the icon property.

                                                                                                        Read the nested value:

                                                                                                        const el = document.querySelector('smart-grid');
const icon = el.editing.commandColumn.dataSource.commandColumnCancel.icon;
                                                                                                        Related APIs appearance layout refresh() change

                                                                                                        labelSpecifies the text displayed on the cancel button, allowing users to identify and understand the button’s purpose to dismiss or exit the current dialog, form, or action.string

                                                                                                        Specifies the text displayed on the cancel button, allowing users to identify and understand the button’s purpose to dismiss or exit the current dialog, form, or action.

                                                                                                        Default value

                                                                                                        "{{messages}}"

                                                                                                        Back to root property: editing

                                                                                                        Try a demo showcasing the label property.

                                                                                                        Read the nested value:

                                                                                                        const el = document.querySelector('smart-grid');
const label = el.editing.commandColumn.dataSource.commandColumnCancel.label;

                                                                                                        visibleDisplays the cancel button on the user interface, allowing users the option to abort or exit the current operation.boolean

                                                                                                        Displays the cancel button on the user interface, allowing users the option to abort or exit the current operation.

                                                                                                        Default value

                                                                                                        auto

                                                                                                        Back to root property: editing

                                                                                                        Try a demo showcasing the visible property.

                                                                                                        Read the nested value:

                                                                                                        const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.dataSource.commandColumnCancel.visible;

                                                                                                        commandColumnCustomProvides configuration options for customizing the appearance and behavior of a custom button within the command column, such as its text, icon, styling, and associated actions. Click for more details. Property object's options:
                                                                                                           object

                                                                                                          Provides configuration options for customizing the appearance and behavior of a custom button within the command column, such as its text, icon, styling, and associated actions.

                                                                                                          Properties

                                                                                                          commandSpecifies the unique identifier for the custom command. This name is used to reference and invoke the command within the application or workflow.
                                                                                                          iconSpecifies the CSS class name that will be assigned to the icon element within the custom button. This allows you to apply custom styles or load specific icon fonts on the button’s icon.
                                                                                                          labelThe text displayed on the custom button, used to identify its purpose or action to users.
                                                                                                          visibleDisplays the custom button on the user interface, making it accessible and interactive for users.

                                                                                                          Back to root property: editing

                                                                                                          Try a demo showcasing the commandColumnCustom property.

                                                                                                          Read the nested value:

                                                                                                          const el = document.querySelector('smart-grid');
const commandColumnCustom = el.editing.commandColumn.dataSource.commandColumnCustom;
                                                                                                          Related APIs appearance layout refresh() change

                                                                                                          commandSpecifies the unique identifier for the custom command. This name is used to reference and invoke the command within the application or workflow.{(): void}

                                                                                                          Specifies the unique identifier for the custom command. This name is used to reference and invoke the command within the application or workflow.

                                                                                                          Default value

                                                                                                          Back to root property: editing

                                                                                                          Try a demo showcasing the command property.

                                                                                                          Read the nested value:

                                                                                                          const el = document.querySelector('smart-grid');
const command = el.editing.commandColumn.dataSource.commandColumnCustom.command;

                                                                                                          iconSpecifies the CSS class name that will be assigned to the icon element within the custom button. This allows you to apply custom styles or load specific icon fonts on the button’s icon.string

                                                                                                          Specifies the CSS class name that will be assigned to the icon element within the custom button. This allows you to apply custom styles or load specific icon fonts on the button’s icon.

                                                                                                          Default value

                                                                                                          "smart-icon-copy-record"

                                                                                                          Back to root property: editing

                                                                                                          Try a demo showcasing the icon property.

                                                                                                          Read the nested value:

                                                                                                          const el = document.querySelector('smart-grid');
const icon = el.editing.commandColumn.dataSource.commandColumnCustom.icon;

                                                                                                          labelThe text displayed on the custom button, used to identify its purpose or action to users.string

                                                                                                          The text displayed on the custom button, used to identify its purpose or action to users.

                                                                                                          Default value

                                                                                                          ""

                                                                                                          Back to root property: editing

                                                                                                          Try a demo showcasing the label property.

                                                                                                          Read the nested value:

                                                                                                          const el = document.querySelector('smart-grid');
const label = el.editing.commandColumn.dataSource.commandColumnCustom.label;

                                                                                                          visibleDisplays the custom button on the user interface, making it accessible and interactive for users.boolean

                                                                                                          Displays the custom button on the user interface, making it accessible and interactive for users.

                                                                                                          Default value

                                                                                                          false

                                                                                                          Back to root property: editing

                                                                                                          Try a demo showcasing the visible property.

                                                                                                          Read the nested value:

                                                                                                          const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.dataSource.commandColumnCustom.visible;

                                                                                                          commandColumnDeleteProvides the configuration options for the delete button located in the command column, detailing its appearance, behavior, and functionality when removing rows from the data source. Click for more details. Property object's options:
                                                                                                             object

                                                                                                            Provides the configuration options for the delete button located in the command column, detailing its appearance, behavior, and functionality when removing rows from the data source.

                                                                                                            Properties

                                                                                                            commandSpecifies the display name or label used for the "delete row" command button or menu item in the user interface. This name appears to users when offering the option to delete a row from a data table or list.
                                                                                                            iconSpecifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for custom styling and icon customization of the button's visual appearance.
                                                                                                            labelSpecifies the text label displayed on the button used to delete a row from a table or list. This label helps users understand the button's purpose within the interface.
                                                                                                            visibleDisplays the "Delete Row" button, allowing users to remove a row from the table or dataset.

                                                                                                            Back to root property: editing

                                                                                                            Try a demo showcasing the commandColumnDelete property.

                                                                                                            Read the nested value:

                                                                                                            const el = document.querySelector('smart-grid');
const commandColumnDelete = el.editing.commandColumn.dataSource.commandColumnDelete;
                                                                                                            Related APIs appearance layout refresh() change

                                                                                                            commandSpecifies the display name or label used for the "delete row" command button or menu item in the user interface. This name appears to users when offering the option to delete a row from a data table or list.{(): void}

                                                                                                            Specifies the display name or label used for the "delete row" command button or menu item in the user interface. This name appears to users when offering the option to delete a row from a data table or list.

                                                                                                            Default value

                                                                                                            commandColumnDeleteCommand

                                                                                                            Back to root property: editing

                                                                                                            Try a demo showcasing the command property.

                                                                                                            Read the nested value:

                                                                                                            const el = document.querySelector('smart-grid');
const command = el.editing.commandColumn.dataSource.commandColumnDelete.command;
                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                            iconSpecifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for custom styling and icon customization of the button's visual appearance.string

                                                                                                            Specifies the CSS class name(s) that will be assigned to the icon element within the delete row button, allowing for custom styling and icon customization of the button's visual appearance.

                                                                                                            Default value

                                                                                                            "smart-icon-delete"

                                                                                                            Back to root property: editing

                                                                                                            Try a demo showcasing the icon property.

                                                                                                            Read the nested value:

                                                                                                            const el = document.querySelector('smart-grid');
const icon = el.editing.commandColumn.dataSource.commandColumnDelete.icon;
                                                                                                            Related APIs appearance layout refresh() change

                                                                                                            labelSpecifies the text label displayed on the button used to delete a row from a table or list. This label helps users understand the button's purpose within the interface.string

                                                                                                            Specifies the text label displayed on the button used to delete a row from a table or list. This label helps users understand the button's purpose within the interface.

                                                                                                            Default value

                                                                                                            "{{messages}}"

                                                                                                            Back to root property: editing

                                                                                                            Try a demo showcasing the label property.

                                                                                                            Read the nested value:

                                                                                                            const el = document.querySelector('smart-grid');
const label = el.editing.commandColumn.dataSource.commandColumnDelete.label;
                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                            visibleDisplays the "Delete Row" button, allowing users to remove a row from the table or dataset.boolean

                                                                                                            Displays the "Delete Row" button, allowing users to remove a row from the table or dataset.

                                                                                                            Default value

                                                                                                            true

                                                                                                            Back to root property: editing

                                                                                                            Try a demo showcasing the visible property.

                                                                                                            Read the nested value:

                                                                                                            const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.dataSource.commandColumnDelete.visible;
                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                            commandColumnEditProvides detailed configuration options for the command column's edit button, allowing customization of its behavior, appearance, and functionality when editing rows in the data grid. Click for more details. Property object's options:
                                                                                                               object

                                                                                                              Provides detailed configuration options for the command column's edit button, allowing customization of its behavior, appearance, and functionality when editing rows in the data grid.

                                                                                                              Properties

                                                                                                              commandSpecifies the label or identifier for the command used to edit a row. This name is typically displayed as the text or tooltip on the edit button or menu item in the user interface, helping users recognize the action for editing a specific row.
                                                                                                              iconSpecifies the CSS class name that will be assigned to the icon element within the edit row button, allowing you to customize its appearance and styling.
                                                                                                              labelA descriptive label displayed on the 'Edit Row' button, indicating its function to users—typically used to signify that clicking the button allows editing of the selected table row.
                                                                                                              visibleDisplays the "Edit Row" button, allowing users to access and modify the contents of a specific row in the table or form.

                                                                                                              Back to root property: editing

                                                                                                              Try a demo showcasing the commandColumnEdit property.

                                                                                                              Read the nested value:

                                                                                                              const el = document.querySelector('smart-grid');
const commandColumnEdit = el.editing.commandColumn.dataSource.commandColumnEdit;
                                                                                                              Related APIs appearance layout refresh() change

                                                                                                              commandSpecifies the label or identifier for the command used to edit a row. This name is typically displayed as the text or tooltip on the edit button or menu item in the user interface, helping users recognize the action for editing a specific row.{(): void}

                                                                                                              Specifies the label or identifier for the command used to edit a row. This name is typically displayed as the text or tooltip on the edit button or menu item in the user interface, helping users recognize the action for editing a specific row.

                                                                                                              Default value

                                                                                                              commandColumnEditCommand

                                                                                                              Back to root property: editing

                                                                                                              Try a demo showcasing the command property.

                                                                                                              Read the nested value:

                                                                                                              const el = document.querySelector('smart-grid');
const command = el.editing.commandColumn.dataSource.commandColumnEdit.command;
                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                              iconSpecifies the CSS class name that will be assigned to the icon element within the edit row button, allowing you to customize its appearance and styling.string

                                                                                                              Specifies the CSS class name that will be assigned to the icon element within the edit row button, allowing you to customize its appearance and styling.

                                                                                                              Default value

                                                                                                              "smart-icon-rename"

                                                                                                              Back to root property: editing

                                                                                                              Try a demo showcasing the icon property.

                                                                                                              Read the nested value:

                                                                                                              const el = document.querySelector('smart-grid');
const icon = el.editing.commandColumn.dataSource.commandColumnEdit.icon;
                                                                                                              Related APIs appearance layout refresh() change

                                                                                                              labelA descriptive label displayed on the 'Edit Row' button, indicating its function to users—typically used to signify that clicking the button allows editing of the selected table row.string

                                                                                                              A descriptive label displayed on the 'Edit Row' button, indicating its function to users—typically used to signify that clicking the button allows editing of the selected table row.

                                                                                                              Default value

                                                                                                              "{{messages}}"

                                                                                                              Back to root property: editing

                                                                                                              Try a demo showcasing the label property.

                                                                                                              Read the nested value:

                                                                                                              const el = document.querySelector('smart-grid');
const label = el.editing.commandColumn.dataSource.commandColumnEdit.label;
                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                              visibleDisplays the "Edit Row" button, allowing users to access and modify the contents of a specific row in the table or form.boolean

                                                                                                              Displays the "Edit Row" button, allowing users to access and modify the contents of a specific row in the table or form.

                                                                                                              Default value

                                                                                                              auto

                                                                                                              Back to root property: editing

                                                                                                              Try a demo showcasing the visible property.

                                                                                                              Read the nested value:

                                                                                                              const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.dataSource.commandColumnEdit.visible;
                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                              commandColumnMenuProvides configuration options for the command button displayed in the column header. This button, by default, opens a menu that includes a Column Chooser, allowing users to select which columns are visible in the grid. These settings let you customize the appearance, behavior, and available actions of the command button in the column header. Click for more details. Property object's options:
                                                                                                                 object

                                                                                                                Provides configuration options for the command button displayed in the column header. This button, by default, opens a menu that includes a Column Chooser, allowing users to select which columns are visible in the grid. These settings let you customize the appearance, behavior, and available actions of the command button in the column header.

                                                                                                                Properties

                                                                                                                commandcommand
                                                                                                                iconicon
                                                                                                                labellabel
                                                                                                                visiblevisible

                                                                                                                Back to root property: editing

                                                                                                                Try a demo showcasing the commandColumnMenu property.

                                                                                                                Read the nested value:

                                                                                                                const el = document.querySelector('smart-grid');
const commandColumnMenu = el.editing.commandColumn.dataSource.commandColumnMenu;
                                                                                                                Related APIs appearance layout refresh() change

                                                                                                                command{(): void}

                                                                                                                Default value

                                                                                                                commandColumnMenuCommand

                                                                                                                Back to root property: editing

                                                                                                                Try a demo showcasing the command property.

                                                                                                                Read the nested value:

                                                                                                                const el = document.querySelector('smart-grid');
const command = el.editing.commandColumn.dataSource.commandColumnMenu.command;

                                                                                                                iconstring

                                                                                                                Default value

                                                                                                                "smart-icon-menu"

                                                                                                                Back to root property: editing

                                                                                                                Try a demo showcasing the icon property.

                                                                                                                Read the nested value:

                                                                                                                const el = document.querySelector('smart-grid');
const icon = el.editing.commandColumn.dataSource.commandColumnMenu.icon;

                                                                                                                labelstring

                                                                                                                Default value

                                                                                                                "{{messages}}"

                                                                                                                Back to root property: editing

                                                                                                                Try a demo showcasing the label property.

                                                                                                                Read the nested value:

                                                                                                                const el = document.querySelector('smart-grid');
const label = el.editing.commandColumn.dataSource.commandColumnMenu.label;

                                                                                                                visibleboolean

                                                                                                                Default value

                                                                                                                false

                                                                                                                Back to root property: editing

                                                                                                                Try a demo showcasing the visible property.

                                                                                                                Read the nested value:

                                                                                                                const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.dataSource.commandColumnMenu.visible;

                                                                                                                commandColumnRowMenuProvides detailed configuration options for the row menu button located in the command column, allowing customization of its appearance, behavior, and available menu actions within each row. Click for more details. Property object's options:
                                                                                                                   object

                                                                                                                  Provides detailed configuration options for the row menu button located in the command column, allowing customization of its appearance, behavior, and available menu actions within each row.

                                                                                                                  Properties

                                                                                                                  commandSpecifies the label text displayed for the row menu command, allowing you to define how the command appears to users within the row context menu.
                                                                                                                  iconSpecifies the CSS class name(s) to be assigned to the icon element within the custom button. This property allows you to style or customize the icon’s appearance using external or predefined CSS classes.
                                                                                                                  labelSpecifies the text label displayed on the menu button located within a table row, providing context or functionality to the user.
                                                                                                                  visibleDisplays the row menu button, allowing users to access additional actions or options related to the specific row.

                                                                                                                  Back to root property: editing

                                                                                                                  Try a demo showcasing the commandColumnRowMenu property.

                                                                                                                  Read the nested value:

                                                                                                                  const el = document.querySelector('smart-grid');
const commandColumnRowMenu = el.editing.commandColumn.dataSource.commandColumnRowMenu;
                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                  commandSpecifies the label text displayed for the row menu command, allowing you to define how the command appears to users within the row context menu.{(): void}

                                                                                                                  Specifies the label text displayed for the row menu command, allowing you to define how the command appears to users within the row context menu.

                                                                                                                  Default value

                                                                                                                  Back to root property: editing

                                                                                                                  Try a demo showcasing the command property.

                                                                                                                  Read the nested value:

                                                                                                                  const el = document.querySelector('smart-grid');
const command = el.editing.commandColumn.dataSource.commandColumnRowMenu.command;
                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                  iconSpecifies the CSS class name(s) to be assigned to the icon element within the custom button. This property allows you to style or customize the icon’s appearance using external or predefined CSS classes.string

                                                                                                                  Specifies the CSS class name(s) to be assigned to the icon element within the custom button. This property allows you to style or customize the icon’s appearance using external or predefined CSS classes.

                                                                                                                  Default value

                                                                                                                  "smart-icon-ellipsis"

                                                                                                                  Back to root property: editing

                                                                                                                  Try a demo showcasing the icon property.

                                                                                                                  Read the nested value:

                                                                                                                  const el = document.querySelector('smart-grid');
const icon = el.editing.commandColumn.dataSource.commandColumnRowMenu.icon;
                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                  labelSpecifies the text label displayed on the menu button located within a table row, providing context or functionality to the user.string

                                                                                                                  Specifies the text label displayed on the menu button located within a table row, providing context or functionality to the user.

                                                                                                                  Default value

                                                                                                                  ""

                                                                                                                  Back to root property: editing

                                                                                                                  Try a demo showcasing the label property.

                                                                                                                  Read the nested value:

                                                                                                                  const el = document.querySelector('smart-grid');
const label = el.editing.commandColumn.dataSource.commandColumnRowMenu.label;
                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                  visibleDisplays the row menu button, allowing users to access additional actions or options related to the specific row.boolean

                                                                                                                  Displays the row menu button, allowing users to access additional actions or options related to the specific row.

                                                                                                                  Default value

                                                                                                                  false

                                                                                                                  Back to root property: editing

                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                  Read the nested value:

                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.dataSource.commandColumnRowMenu.visible;
                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                  commandColumnUpdateProvides configuration options for the update button within the command column, allowing you to customize its appearance, behavior, and actions when updating rows in the data grid. Click for more details. Property object's options:
                                                                                                                     object

                                                                                                                    Provides configuration options for the update button within the command column, allowing you to customize its appearance, behavior, and actions when updating rows in the data grid.

                                                                                                                    Properties

                                                                                                                    commandDefines the name identifier for the command that performs an update operation on a data row. This property specifies the command name used to trigger or reference the update row action, allowing developers to customize or distinguish it from other commands in the system.
                                                                                                                    iconSpecifies the CSS class name(s) that will be applied to the icon element within the update row button, allowing you to customize its appearance and style.
                                                                                                                    labelSpecifies the text displayed on the button used to update a row, allowing users to identify and initiate the row update action.
                                                                                                                    visibleDisplays the update row button, allowing users to see and interact with it for modifying existing row data.

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the commandColumnUpdate property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const commandColumnUpdate = el.editing.commandColumn.dataSource.commandColumnUpdate;
                                                                                                                    Related APIs appearance layout refresh() change

                                                                                                                    commandDefines the name identifier for the command that performs an update operation on a data row. This property specifies the command name used to trigger or reference the update row action, allowing developers to customize or distinguish it from other commands in the system.{(): void}

                                                                                                                    Defines the name identifier for the command that performs an update operation on a data row. This property specifies the command name used to trigger or reference the update row action, allowing developers to customize or distinguish it from other commands in the system.

                                                                                                                    Default value

                                                                                                                    commandColumnUpdateCommand

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the command property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const command = el.editing.commandColumn.dataSource.commandColumnUpdate.command;
                                                                                                                    Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                    iconSpecifies the CSS class name(s) that will be applied to the icon element within the update row button, allowing you to customize its appearance and style.string

                                                                                                                    Specifies the CSS class name(s) that will be applied to the icon element within the update row button, allowing you to customize its appearance and style.

                                                                                                                    Default value

                                                                                                                    "smart-icon-save"

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the icon property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const icon = el.editing.commandColumn.dataSource.commandColumnUpdate.icon;
                                                                                                                    Related APIs appearance layout refresh() change

                                                                                                                    labelSpecifies the text displayed on the button used to update a row, allowing users to identify and initiate the row update action.string

                                                                                                                    Specifies the text displayed on the button used to update a row, allowing users to identify and initiate the row update action.

                                                                                                                    Default value

                                                                                                                    "{{messages}}"

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the label property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const label = el.editing.commandColumn.dataSource.commandColumnUpdate.label;
                                                                                                                    Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                    visibleDisplays the update row button, allowing users to see and interact with it for modifying existing row data.boolean

                                                                                                                    Displays the update row button, allowing users to see and interact with it for modifying existing row data.

                                                                                                                    Default value

                                                                                                                    auto

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the visible property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.dataSource.commandColumnUpdate.visible;
                                                                                                                    Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                    displayModeDefines the content or label displayed within the buttons of the command column, such as text, icons, or custom HTML elements. This determines what users see and interact with in each command button cell."label" | "icon" | "labelAndIcon"

                                                                                                                    Defines the content or label displayed within the buttons of the command column, such as text, icons, or custom HTML elements. This determines what users see and interact with in each command button cell.

                                                                                                                    Default value

                                                                                                                    "icon"

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the displayMode property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const displayMode = el.editing.commandColumn.displayMode;
                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                    inlineDisplays the command column directly within the main content area (inline), rather than in a separate section. This allows actions like edit or delete to appear alongside each data row for easier, more integrated user interaction.boolean

                                                                                                                    Displays the command column directly within the main content area (inline), rather than in a separate section. This allows actions like edit or delete to appear alongside each data row for easier, more integrated user interaction.

                                                                                                                    Default value

                                                                                                                    false

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the inline property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const inline = el.editing.commandColumn.inline;
                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                    positionSpecifies the position of the command column within the table, determining where the command buttons (such as edit, delete, or custom actions) will appear relative to other columns."near" | "far"

                                                                                                                    Specifies the position of the command column within the table, determining where the command buttons (such as edit, delete, or custom actions) will appear relative to other columns.

                                                                                                                    Default value

                                                                                                                    "far"

                                                                                                                    Back to root property: editing

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const position = el.editing.commandColumn.position;
                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                    visibleDisplays the command column, allowing users to view and interact with available actions or commands for each row within the table.boolean

                                                                                                                    Displays the command column, allowing users to view and interact with available actions or commands for each row within the table.

                                                                                                                    Default value

                                                                                                                    false

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the visible property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const visible = el.editing.commandColumn.visible;
                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                    widthSpecifies the width of the command column in the table or grid, determining how much horizontal space is allocated for action buttons or command controls within each row.number | null

                                                                                                                    Specifies the width of the command column in the table or grid, determining how much horizontal space is allocated for action buttons or command controls within each row.

                                                                                                                    Back to root property: editing

                                                                                                                    Try a demo showcasing the width property.

                                                                                                                    Read the nested value:

                                                                                                                    const el = document.querySelector('smart-grid');
const width = el.editing.commandColumn.width;
                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                    commandKeysProvides detailed definitions for command keyboard shortcuts, specifying the key combinations used to trigger various actions within an application or system. Click for more details. Property object's options:
                                                                                                                       object

                                                                                                                      Provides detailed definitions for command keyboard shortcuts, specifying the key combinations used to trigger various actions within an application or system.

                                                                                                                      Properties

                                                                                                                      commandKeyCancelProvides details about the "cancel" command key, specifying its function as an input to terminate or interrupt an ongoing operation. This key is commonly used to halt processes, dismiss dialogs, or cancel actions within an application or user interface.
                                                                                                                      commandKeyEditProvides details about the keyboard shortcut or key binding assigned to trigger the edit command within the application. This property specifies which key or key combination the user can press to activate editing functionality.
                                                                                                                      commandKeyUpdateProvides detailed information about the "update" command key, specifying its purpose, usage, and expected behavior when invoked within the system. This includes how the "update" command modifies data, any parameters it accepts, and the outcomes or changes it triggers in the application.

                                                                                                                      Back to root property: editing

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const commandKeys = el.editing.commandKeys;

                                                                                                                      commandKeyCancelProvides details about the "cancel" command key, specifying its function as an input to terminate or interrupt an ongoing operation. This key is commonly used to halt processes, dismiss dialogs, or cancel actions within an application or user interface. object

                                                                                                                      Provides details about the "cancel" command key, specifying its function as an input to terminate or interrupt an ongoing operation. This key is commonly used to halt processes, dismiss dialogs, or cancel actions within an application or user interface.

                                                                                                                      Properties

                                                                                                                      commandSpecifies the label or identifier for the "cancel" key command, which is used to trigger a cancel action within the application. This value determines how the command appears to users and how it can be referenced in code.
                                                                                                                      keySpecifies the keyboard key that, when pressed, triggers the cancel command, allowing users to abort or exit the current operation.

                                                                                                                      Back to root property: editing

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const commandKeyCancel = el.editing.commandKeys[0].commandKeyCancel;

                                                                                                                      commandSpecifies the label or identifier for the "cancel" key command, which is used to trigger a cancel action within the application. This value determines how the command appears to users and how it can be referenced in code.string

                                                                                                                      Specifies the label or identifier for the "cancel" key command, which is used to trigger a cancel action within the application. This value determines how the command appears to users and how it can be referenced in code.

                                                                                                                      Default value

                                                                                                                      "commandKeyCancelCommand"

                                                                                                                      Back to root property: editing

                                                                                                                      Try a demo showcasing the command property.

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const command = el.editing.commandKeys[0].commandKeyCancel.command;

                                                                                                                      keySpecifies the keyboard key that, when pressed, triggers the cancel command, allowing users to abort or exit the current operation.string

                                                                                                                      Specifies the keyboard key that, when pressed, triggers the cancel command, allowing users to abort or exit the current operation.

                                                                                                                      Default value

                                                                                                                      "Escape"

                                                                                                                      Back to root property: editing

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const key = el.editing.commandKeys[0].commandKeyCancel.key;

                                                                                                                      commandKeyEditProvides details about the keyboard shortcut or key binding assigned to trigger the edit command within the application. This property specifies which key or key combination the user can press to activate editing functionality. object

                                                                                                                      Provides details about the keyboard shortcut or key binding assigned to trigger the edit command within the application. This property specifies which key or key combination the user can press to activate editing functionality.

                                                                                                                      Properties

                                                                                                                      commandSpecifies the identifier or label used to trigger the edit key command, allowing customization of the keyboard shortcut or command name for editing functionality.
                                                                                                                      keySpecifies the keyboard key or combination of keys that triggers the edit command, allowing users to enter edit mode when the defined key(s) are pressed.

                                                                                                                      Back to root property: editing

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const commandKeyEdit = el.editing.commandKeys[0].commandKeyEdit;
                                                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                      commandSpecifies the identifier or label used to trigger the edit key command, allowing customization of the keyboard shortcut or command name for editing functionality.string

                                                                                                                      Specifies the identifier or label used to trigger the edit key command, allowing customization of the keyboard shortcut or command name for editing functionality.

                                                                                                                      Default value

                                                                                                                      "commandKeyEditCommand"

                                                                                                                      Back to root property: editing

                                                                                                                      Try a demo showcasing the command property.

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const command = el.editing.commandKeys[0].commandKeyEdit.command;
                                                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                      keySpecifies the keyboard key or combination of keys that triggers the edit command, allowing users to enter edit mode when the defined key(s) are pressed.string

                                                                                                                      Specifies the keyboard key or combination of keys that triggers the edit command, allowing users to enter edit mode when the defined key(s) are pressed.

                                                                                                                      Default value

                                                                                                                      "F2"

                                                                                                                      Back to root property: editing

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const key = el.editing.commandKeys[0].commandKeyEdit.key;
                                                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                      commandKeyUpdateProvides detailed information about the "update" command key, specifying its purpose, usage, and expected behavior when invoked within the system. This includes how the "update" command modifies data, any parameters it accepts, and the outcomes or changes it triggers in the application. object

                                                                                                                      Provides detailed information about the "update" command key, specifying its purpose, usage, and expected behavior when invoked within the system. This includes how the "update" command modifies data, any parameters it accepts, and the outcomes or changes it triggers in the application.

                                                                                                                      Properties

                                                                                                                      commandSpecifies the name assigned to the command that triggers the update action for a particular key. This determines how the update command is referenced within the system or application’s functionality.
                                                                                                                      keySpecifies the keyboard key that triggers the execution of the update command when pressed. This key acts as a shortcut, allowing users to quickly initiate the update action within the application.

                                                                                                                      Back to root property: editing

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const commandKeyUpdate = el.editing.commandKeys[0].commandKeyUpdate;
                                                                                                                      Related APIs behavior refresh() change

                                                                                                                      commandSpecifies the name assigned to the command that triggers the update action for a particular key. This determines how the update command is referenced within the system or application’s functionality.string

                                                                                                                      Specifies the name assigned to the command that triggers the update action for a particular key. This determines how the update command is referenced within the system or application’s functionality.

                                                                                                                      Default value

                                                                                                                      "commandKeyUpdateCommand"

                                                                                                                      Back to root property: editing

                                                                                                                      Try a demo showcasing the command property.

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const command = el.editing.commandKeys[0].commandKeyUpdate.command;
                                                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                      keySpecifies the keyboard key that triggers the execution of the update command when pressed. This key acts as a shortcut, allowing users to quickly initiate the update action within the application.string

                                                                                                                      Specifies the keyboard key that triggers the execution of the update command when pressed. This key acts as a shortcut, allowing users to quickly initiate the update action within the application.

                                                                                                                      Default value

                                                                                                                      "Enter"

                                                                                                                      Back to root property: editing

                                                                                                                      Read the nested value:

                                                                                                                      const el = document.querySelector('smart-grid');
const key = el.editing.commandKeys[0].commandKeyUpdate.key;
                                                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                      deleteDialogDescribes delete dialog's settings Click for more details. Property object's options:
                                                                                                                         object

                                                                                                                        Describes delete dialog's settings

                                                                                                                        Properties

                                                                                                                        enabledEnables the option to display a confirmation dialog when attempting to delete an item, prompting users to confirm or cancel the deletion action.
                                                                                                                        headerSets the header text of the dialog
                                                                                                                        heightSets the height of the dialog.
                                                                                                                        leftSets the 'left' css property to the dialog.
                                                                                                                        topAssigns a value to the CSS 'top' property of the dialog element, controlling its vertical position relative to its nearest positioned ancestor or the viewport. This allows precise placement of the dialog from the top edge of the containing element or the browser window.
                                                                                                                        visibleControls whether the dialog is visible to the user. Setting this property to 'true' displays the dialog, while setting it to 'false' hides it from view.
                                                                                                                        widthSets the width of the dialog.

                                                                                                                        Back to root property: editing

                                                                                                                        Try a demo showcasing the deleteDialog property.

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const deleteDialog = el.editing.deleteDialog;
                                                                                                                        Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                        enabledEnables the option to display a confirmation dialog when attempting to delete an item, prompting users to confirm or cancel the deletion action.boolean

                                                                                                                        Enables the option to display a confirmation dialog when attempting to delete an item, prompting users to confirm or cancel the deletion action.

                                                                                                                        Default value

                                                                                                                        false

                                                                                                                        Back to root property: editing

                                                                                                                        Examples

                                                                                                                        Set a nested field on the element:

                                                                                                                        const el = document.querySelector('smart-grid');
el.editing.deleteDialog.enabled = true;

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const enabled = el.editing.deleteDialog.enabled;
                                                                                                                        Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                        headerSets the header text of the dialogstring

                                                                                                                        Sets the header text of the dialog

                                                                                                                        Default value

                                                                                                                        "{{message}}"

                                                                                                                        Back to root property: editing

                                                                                                                        Try a demo showcasing the header property.

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const header = el.editing.deleteDialog.header;
                                                                                                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                        heightSets the height of the dialog.string | number

                                                                                                                        Sets the height of the dialog.

                                                                                                                        Default value

                                                                                                                        auto

                                                                                                                        Back to root property: editing

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const height = el.editing.deleteDialog.height;

                                                                                                                        leftSets the 'left' css property to the dialog.string | number

                                                                                                                        Sets the 'left' css property to the dialog.

                                                                                                                        Default value

                                                                                                                        center

                                                                                                                        Back to root property: editing

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const left = el.editing.deleteDialog.left;

                                                                                                                        topAssigns a value to the CSS 'top' property of the dialog element, controlling its vertical position relative to its nearest positioned ancestor or the viewport. This allows precise placement of the dialog from the top edge of the containing element or the browser window.string | number

                                                                                                                        Assigns a value to the CSS 'top' property of the dialog element, controlling its vertical position relative to its nearest positioned ancestor or the viewport. This allows precise placement of the dialog from the top edge of the containing element or the browser window.

                                                                                                                        Default value

                                                                                                                        center

                                                                                                                        Back to root property: editing

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const top = el.editing.deleteDialog.top;

                                                                                                                        visibleControls whether the dialog is visible to the user. Setting this property to 'true' displays the dialog, while setting it to 'false' hides it from view.boolean

                                                                                                                        Controls whether the dialog is visible to the user. Setting this property to 'true' displays the dialog, while setting it to 'false' hides it from view.

                                                                                                                        Default value

                                                                                                                        false

                                                                                                                        Back to root property: editing

                                                                                                                        Try a demo showcasing the visible property.

                                                                                                                        Examples

                                                                                                                        Set a nested field on the element:

                                                                                                                        const el = document.querySelector('smart-grid');
el.editing.deleteDialog.visible = true;

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const visible = el.editing.deleteDialog.visible;

                                                                                                                        widthSets the width of the dialog.string | number

                                                                                                                        Sets the width of the dialog.

                                                                                                                        Default value

                                                                                                                        auto

                                                                                                                        Back to root property: editing

                                                                                                                        Try a demo showcasing the width property.

                                                                                                                        Read the nested value:

                                                                                                                        const el = document.querySelector('smart-grid');
const width = el.editing.deleteDialog.width;

                                                                                                                        dialogProvides a detailed configuration for the dialog’s editing settings, specifying available editing modes, permissions, interface options, and user interaction behaviors within the dialog component. Click for more details. Property object's options:
                                                                                                                           object

                                                                                                                          Provides a detailed configuration for the dialog’s editing settings, specifying available editing modes, permissions, interface options, and user interaction behaviors within the dialog component.

                                                                                                                          Properties

                                                                                                                          enabledAllows users to edit dialog elements within the application, providing options to modify, update, or customize dialog content.
                                                                                                                          headerSpecifies the text to display as the header or title at the top of the dialog. This text typically provides context or a summary of the dialog’s purpose, helping users understand what action or information is being presented.
                                                                                                                          heightSpecifies the height, in pixels or CSS units, for the edit dialog window, determining how tall the dialog will appear when displayed to the user.
                                                                                                                          leftAssigns a value to the CSS 'left' property of the dialog element, specifying its horizontal position relative to its containing element or the viewport. This determines how far the dialog is offset from the left edge, allowing precise control over its placement.
                                                                                                                          sidePanelEnables the side panel dialog feature. When this option is activated, dialog windows will slide in from the right side of the Grid interface instead of appearing as standard modal dialogs. This allows for a non-intrusive, space-efficient way to display additional information or forms alongside the main content.
                                                                                                                          topAssigns a value to the CSS 'top' property of the dialog element, positioning it a specified distance from the top edge of its containing element or viewport. This property determines the vertical placement of the dialog when its position is set to absolute, fixed, or relative.
                                                                                                                          visibleControls whether the dialog is visible or hidden on the screen. Set this property to true to display the dialog, or false to hide it.
                                                                                                                          widthSpecifies the width, in pixels or as a CSS value, of the edit dialog window. This determines how wide the dialog appears when users open it for editing content. Accepts numerical values (e.g., 400) or valid CSS width expressions (e.g., '50%', '30rem', '400px').

                                                                                                                          Back to root property: editing

                                                                                                                          Try a demo showcasing the dialog property.

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const dialog = el.editing.dialog;

                                                                                                                          enabledAllows users to edit dialog elements within the application, providing options to modify, update, or customize dialog content.boolean

                                                                                                                          Allows users to edit dialog elements within the application, providing options to modify, update, or customize dialog content.

                                                                                                                          Default value

                                                                                                                          false

                                                                                                                          Back to root property: editing

                                                                                                                          Examples

                                                                                                                          Set a nested field on the element:

                                                                                                                          const el = document.querySelector('smart-grid');
el.editing.dialog.enabled = true;

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const enabled = el.editing.dialog.enabled;
                                                                                                                          Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                          headerSpecifies the text to display as the header or title at the top of the dialog. This text typically provides context or a summary of the dialog’s purpose, helping users understand what action or information is being presented.string

                                                                                                                          Specifies the text to display as the header or title at the top of the dialog. This text typically provides context or a summary of the dialog’s purpose, helping users understand what action or information is being presented.

                                                                                                                          Default value

                                                                                                                          "{{message}}"

                                                                                                                          Back to root property: editing

                                                                                                                          Try a demo showcasing the header property.

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const header = el.editing.dialog.header;
                                                                                                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                          heightSpecifies the height, in pixels or CSS units, for the edit dialog window, determining how tall the dialog will appear when displayed to the user.string | number

                                                                                                                          Specifies the height, in pixels or CSS units, for the edit dialog window, determining how tall the dialog will appear when displayed to the user.

                                                                                                                          Default value

                                                                                                                          auto

                                                                                                                          Back to root property: editing

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const height = el.editing.dialog.height;
                                                                                                                          Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                          leftAssigns a value to the CSS 'left' property of the dialog element, specifying its horizontal position relative to its containing element or the viewport. This determines how far the dialog is offset from the left edge, allowing precise control over its placement.string | number

                                                                                                                          Assigns a value to the CSS 'left' property of the dialog element, specifying its horizontal position relative to its containing element or the viewport. This determines how far the dialog is offset from the left edge, allowing precise control over its placement.

                                                                                                                          Default value

                                                                                                                          center

                                                                                                                          Back to root property: editing

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const left = el.editing.dialog.left;

                                                                                                                          sidePanelEnables the side panel dialog feature. When this option is activated, dialog windows will slide in from the right side of the Grid interface instead of appearing as standard modal dialogs. This allows for a non-intrusive, space-efficient way to display additional information or forms alongside the main content.boolean

                                                                                                                          Enables the side panel dialog feature. When this option is activated, dialog windows will slide in from the right side of the Grid interface instead of appearing as standard modal dialogs. This allows for a non-intrusive, space-efficient way to display additional information or forms alongside the main content.

                                                                                                                          Default value

                                                                                                                          false

                                                                                                                          Back to root property: editing

                                                                                                                          Try a demo showcasing the sidePanel property.

                                                                                                                          Examples

                                                                                                                          Set a nested field on the element:

                                                                                                                          const el = document.querySelector('smart-grid');
el.editing.dialog.sidePanel = true;

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const sidePanel = el.editing.dialog.sidePanel;

                                                                                                                          topAssigns a value to the CSS 'top' property of the dialog element, positioning it a specified distance from the top edge of its containing element or viewport. This property determines the vertical placement of the dialog when its position is set to absolute, fixed, or relative.string | number

                                                                                                                          Assigns a value to the CSS 'top' property of the dialog element, positioning it a specified distance from the top edge of its containing element or viewport. This property determines the vertical placement of the dialog when its position is set to absolute, fixed, or relative.

                                                                                                                          Default value

                                                                                                                          center

                                                                                                                          Back to root property: editing

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const top = el.editing.dialog.top;

                                                                                                                          visibleControls whether the dialog is visible or hidden on the screen. Set this property to true to display the dialog, or false to hide it.boolean

                                                                                                                          Controls whether the dialog is visible or hidden on the screen. Set this property to true to display the dialog, or false to hide it.

                                                                                                                          Default value

                                                                                                                          false

                                                                                                                          Back to root property: editing

                                                                                                                          Try a demo showcasing the visible property.

                                                                                                                          Examples

                                                                                                                          Set a nested field on the element:

                                                                                                                          const el = document.querySelector('smart-grid');
el.editing.dialog.visible = true;

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const visible = el.editing.dialog.visible;

                                                                                                                          widthSpecifies the width, in pixels or as a CSS value, of the edit dialog window. This determines how wide the dialog appears when users open it for editing content. Accepts numerical values (e.g., 400) or valid CSS width expressions (e.g., '50%', '30rem', '400px').string | number

                                                                                                                          Specifies the width, in pixels or as a CSS value, of the edit dialog window. This determines how wide the dialog appears when users open it for editing content. Accepts numerical values (e.g., 400) or valid CSS width expressions (e.g., '50%', '30rem', '400px').

                                                                                                                          Default value

                                                                                                                          auto

                                                                                                                          Back to root property: editing

                                                                                                                          Try a demo showcasing the width property.

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const width = el.editing.dialog.width;
                                                                                                                          Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                          enabledAllows users to modify or update existing content directly within the interface. This feature typically provides editing controls, such as input fields or rich text editors, enabling seamless changes to data or text as needed.boolean

                                                                                                                          Allows users to modify or update existing content directly within the interface. This feature typically provides editing controls, such as input fields or rich text editors, enabling seamless changes to data or text as needed.

                                                                                                                          Default value

                                                                                                                          false

                                                                                                                          Back to root property: editing

                                                                                                                          Examples

                                                                                                                          Set a nested field on the element:

                                                                                                                          const el = document.querySelector('smart-grid');
el.editing.enabled = true;

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const enabled = el.editing.enabled;
                                                                                                                          Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                          modeEnables or configures the grid's cell editing functionality by setting its edit mode. This determines how users can interact with and modify the grid’s cell values—such as enabling inline editing, displaying an edit dialog, or disabling editing entirely."cell" | "row"

                                                                                                                          Enables or configures the grid's cell editing functionality by setting its edit mode. This determines how users can interact with and modify the grid’s cell values—such as enabling inline editing, displaying an edit dialog, or disabling editing entirely.

                                                                                                                          Default value

                                                                                                                          "cell"

                                                                                                                          Back to root property: editing

                                                                                                                          Try a demo showcasing the mode property.

                                                                                                                          Examples

                                                                                                                          Set a nested field on the element:

                                                                                                                          const el = document.querySelector('smart-grid');
el.editing.mode = "row";

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const mode = el.editing.mode;
                                                                                                                          Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                          readOnlyEdit"Read Only Edit is a grid mode where editing a cell does not directly change the underlying data in the grid. Instead, when a cell edit is attempted, the grid triggers the 'onCellEditRequest' callback, allowing your application to handle and process the update request as needed. This mode is useful for implementing custom edit workflows or for integrating with external data sources, as it gives you complete control over how changes are applied."boolean

                                                                                                                          "Read Only Edit is a grid mode where editing a cell does not directly change the underlying data in the grid. Instead, when a cell edit is attempted, the grid triggers the 'onCellEditRequest' callback, allowing your application to handle and process the update request as needed. This mode is useful for implementing custom edit workflows or for integrating with external data sources, as it gives you complete control over how changes are applied."

                                                                                                                          Default value

                                                                                                                          false

                                                                                                                          Back to root property: editing

                                                                                                                          Try a demo showcasing the readOnlyEdit property.

                                                                                                                          Examples

                                                                                                                          Set a nested field on the element:

                                                                                                                          const el = document.querySelector('smart-grid');
el.editing.readOnlyEdit = true;

                                                                                                                          Read the nested value:

                                                                                                                          const el = document.querySelector('smart-grid');
const readOnlyEdit = el.editing.readOnlyEdit;
                                                                                                                          Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                          filterableEnables column filtering. Shorthand: sets filtering.enabled to true.boolean

                                                                                                                          Enables column filtering. Shorthand: sets filtering.enabled to true.

                                                                                                                          Default value

                                                                                                                          false
                                                                                                                          Try a demo showcasing the filterable property.

                                                                                                                          Examples

                                                                                                                          Markup and runtime examples for filterable:

                                                                                                                          HTML attribute:

                                                                                                                          <smart-grid filterable></smart-grid>

                                                                                                                          Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                          const el = document.querySelector('smart-grid');
el.filterable = true;

                                                                                                                          Read the current value:

                                                                                                                          const el = document.querySelector('smart-grid');
const filterable = el.filterable;
                                                                                                                          Related APIs filtering header addFilter() removeFilter() clearFilter() filter

                                                                                                                          filteringProvides 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. Click for more details. Property object's options:
                                                                                                                             object

                                                                                                                            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.

                                                                                                                            Properties

                                                                                                                            enabledAllows users to filter data based on specific criteria, enabling the display of only relevant information according to selected filters.
                                                                                                                            filterAn array specifying the filtering conditions to be applied to the DataGrid. Each element in the 'filter' array represents a single filter and is itself an array with two elements:1. 'Column dataField:' The name of the column to which the filter will be applied.2. 'Filter condition(s):' A string or expression that defines the criteria to filter the column’s data. This can include a condition or multiple conditions combined using logical operators such as 'or' and 'and'.'Example 1:' To search for rows where the "firstName" column contains 'Andrew' or 'Nancy', and the "quantity" column is either less than or equal to 3 or greater than or equal to 8:'''js[ ['firstName', 'contains Andrew or contains Nancy'], ['quantity', '<= 3 and >= 8']]''''Example 2:' For columns configured with 'filterMenuMode: "excel"', you can express multiple "equals" conditions:'''js[ ['firstName', 'EQUAL Andrew or EQUAL Antoni or EQUAL Beate']]''''Example 3:' To filter a string column for values containing either 'burke' or 'peterson':'''js[ ['lastName', 'CONTAINS burke or CONTAINS peterson']]''''Supported filter operators:' You may use a variety of filter operators and keywords within filter expressions. Common operators include:- Equality: '=', 'EQUAL'- Inequality: '!=', '<>', 'NOT_EQUAL'- Comparison: '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL'- String matching: 'CONTAINS', 'DOES_NOT_CONTAIN', 'STARTS_WITH', 'ENDS_WITH'- Special: 'EMPTY', 'NULL', 'NOT_NULL'Multiple conditions can be combined in a single expression with logical operators ('and', 'or'). This flexible structure enables complex filtering based on your DataGrid’s current columns and data types.
                                                                                                                            filterBuilder(In Development) Provides a comprehensive configuration schema for the filter builder component, detailing available settings and customization options to control its behavior, appearance, and functional parameters during implementation.
                                                                                                                            filterMenuProvides detailed configuration options for the filter menu, including available filter types, display preferences, default selections, and customizable behaviors to control how users interact with and apply filters within the menu interface. Click for more details. Property object's options:
                                                                                                                            • visible:boolean - Controls whether the filter menu is displayed to the user. Set this option to show or hide the filter menu based on your application's requirements.
                                                                                                                            • buttons:string[] - Specifies the text label displayed on the filter menu button, allowing you to customize the button’s caption to better describe its function or improve user experience.
                                                                                                                            • mode:string - Specifies the display mode for the filter menu, determining how filtering options are presented to the user (e.g., dropdown, modal, or inline).
                                                                                                                            • dataSource:any - Configures the data source for the filter menu, specifying the list of available options that users can select when applying filters. This determines which values appear in the filter dropdown and can be set to a static array or a dynamic data source such as an API endpoint or database query.
                                                                                                                            • width:number - Specifies the width, in pixels or a valid CSS unit, of the filter menu component. This determines how wide the filter menu appears in the user interface.
                                                                                                                            • height:number - Specifies the vertical dimension (in pixels, ems, or other supported units) of the filter menu, determining how much space the menu occupies on the screen. Adjusting this value changes the overall height of the filter menu component.
                                                                                                                            filterRowProvides detailed configuration options for the filter row, including its appearance, behavior, available filter types, and display settings. This allows developers to customize how the filter row is shown and how users interact with filtering features in the component. Click for more details. Property object's options:
                                                                                                                            • visible:boolean - Displays the filter row, allowing users to enter criteria and filter the displayed data directly within the grid or table interface.
                                                                                                                            • menuVisible:boolean - Displays the filter row’s menu, allowing users to view and interact with filter options for data columns.
                                                                                                                            • applyMode:string - Determines how filters entered in the filter row are applied to the data, specifying whether filtering occurs automatically as the user types or only after a specific action, such as pressing Enter or clicking a filter button.
                                                                                                                            • autoApplyModeDelay:number - Specifies the delay, in milliseconds, before the filtering action is triggered after the user modifies a filter input. This setting is only applicable when filtering.filterRow.applyMode is set to 'auto', allowing you to control how quickly the filtering is applied as the user types.
                                                                                                                            operatorSpecifies the logical operator ('and' or 'or') used to combine multiple column filters in the Grid. By default, filters are combined using the 'and' operator, meaning that a row must satisfy all filter conditions (e.g., columnA 'and' columnB) to be included in the results. Alternatively, you can set the operator to 'or' to return rows that match 'any' of the filter conditions (e.g., columnA 'or' columnB).'Example:' '''jsgrid.filtering.operator = 'or';grid.addFilter('lastName', 'contains "davolio"');grid.addFilter('firstName', 'contains "Antoni"');'''This configuration applies two filters to the Grid and will display all rows where 'either' 'firstName' contains "Antoni" 'or' 'lastName' contains "Davolio".Use this property to control how multiple filters are combined when filtering data in the Grid.
                                                                                                                            Try a demo showcasing the filtering property.

                                                                                                                            Full working example

                                                                                                                            Minimal setup for filtering with the data and bindings you usually use together on this component.

                                                                                                                            JavaScript — minimal grid with filtering:

                                                                                                                            // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const filtering = { enabled: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	filtering
});
                                                                                                                            Related APIs filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                            enabledAllows users to filter data based on specific criteria, enabling the display of only relevant information according to selected filters.boolean

                                                                                                                            Allows users to filter data based on specific criteria, enabling the display of only relevant information according to selected filters.

                                                                                                                            Default value

                                                                                                                            false

                                                                                                                            Back to root property: filtering

                                                                                                                            Examples

                                                                                                                            Set a nested field on the element:

                                                                                                                            const el = document.querySelector('smart-grid');
el.filtering.enabled = true;

                                                                                                                            Read the nested value:

                                                                                                                            const el = document.querySelector('smart-grid');
const enabled = el.filtering.enabled;
                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                            filterAn array specifying the filtering conditions to be applied to the DataGrid. Each element in the 'filter' array represents a single filter and is itself an array with two elements:1. 'Column dataField:' The name of the column to which the filter will be applied.2. 'Filter condition(s):' A string or expression that defines the criteria to filter the column’s data. This can include a condition or multiple conditions combined using logical operators such as 'or' and 'and'.'Example 1:' To search for rows where the "firstName" column contains 'Andrew' or 'Nancy', and the "quantity" column is either less than or equal to 3 or greater than or equal to 8:'''js[ ['firstName', 'contains Andrew or contains Nancy'], ['quantity', '<= 3 and >= 8']]''''Example 2:' For columns configured with 'filterMenuMode: "excel"', you can express multiple "equals" conditions:'''js[ ['firstName', 'EQUAL Andrew or EQUAL Antoni or EQUAL Beate']]''''Example 3:' To filter a string column for values containing either 'burke' or 'peterson':'''js[ ['lastName', 'CONTAINS burke or CONTAINS peterson']]''''Supported filter operators:' You may use a variety of filter operators and keywords within filter expressions. Common operators include:- Equality: '=', 'EQUAL'- Inequality: '!=', '<>', 'NOT_EQUAL'- Comparison: '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL'- String matching: 'CONTAINS', 'DOES_NOT_CONTAIN', 'STARTS_WITH', 'ENDS_WITH'- Special: 'EMPTY', 'NULL', 'NOT_NULL'Multiple conditions can be combined in a single expression with logical operators ('and', 'or'). This flexible structure enables complex filtering based on your DataGrid’s current columns and data types. any

                                                                                                                            An array specifying the filtering conditions to be applied to the DataGrid. Each element in the 'filter' array represents a single filter and is itself an array with two elements:

                                                                                                                            1. 'Column dataField:' The name of the column to which the filter will be applied.
                                                                                                                            2. 'Filter condition(s):' A string or expression that defines the criteria to filter the column’s data. This can include a condition or multiple conditions combined using logical operators such as 'or' and 'and'.

                                                                                                                            'Example 1:'
                                                                                                                            To search for rows where the "firstName" column contains 'Andrew' or 'Nancy', and the "quantity" column is either less than or equal to 3 or greater than or equal to 8:
                                                                                                                            '''js
                                                                                                                            [
                                                                                                                            ['firstName', 'contains Andrew or contains Nancy'],
                                                                                                                            ['quantity', '<= 3 and >= 8']
                                                                                                                            ]
                                                                                                                            '''

                                                                                                                            'Example 2:'
                                                                                                                            For columns configured with 'filterMenuMode: "excel"', you can express multiple "equals" conditions:
                                                                                                                            '''js
                                                                                                                            [
                                                                                                                            ['firstName', 'EQUAL Andrew or EQUAL Antoni or EQUAL Beate']
                                                                                                                            ]
                                                                                                                            '''

                                                                                                                            'Example 3:'
                                                                                                                            To filter a string column for values containing either 'burke' or 'peterson':
                                                                                                                            '''js
                                                                                                                            [
                                                                                                                            ['lastName', 'CONTAINS burke or CONTAINS peterson']
                                                                                                                            ]
                                                                                                                            '''

                                                                                                                            'Supported filter operators:'
                                                                                                                            You may use a variety of filter operators and keywords within filter expressions. Common operators include:
                                                                                                                            - Equality: '=', 'EQUAL'
                                                                                                                            - Inequality: '!=', '<>', 'NOT_EQUAL'
                                                                                                                            - Comparison: '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL'
                                                                                                                            - String matching: 'CONTAINS', 'DOES_NOT_CONTAIN', 'STARTS_WITH', 'ENDS_WITH'
                                                                                                                            - Special: 'EMPTY', 'NULL', 'NOT_NULL'

                                                                                                                            Multiple conditions can be combined in a single expression with logical operators ('and', 'or').
                                                                                                                            This flexible structure enables complex filtering based on your DataGrid’s current columns and data types.

                                                                                                                            Back to root property: filtering

                                                                                                                            Try a demo showcasing the filter property.

                                                                                                                            Read the nested value:

                                                                                                                            const el = document.querySelector('smart-grid');
const filter = el.filtering.filter;
                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter()

                                                                                                                            filterBuilder(In Development) Provides a comprehensive configuration schema for the filter builder component, detailing available settings and customization options to control its behavior, appearance, and functional parameters during implementation. object

                                                                                                                            (In Development) Provides a comprehensive configuration schema for the filter builder component, detailing available settings and customization options to control its behavior, appearance, and functional parameters during implementation.

                                                                                                                            Properties

                                                                                                                            heightDefines the vertical size, in pixels or other supported units, of the filter builder component. This property determines how tall the filter builder appears in the user interface, allowing you to control its visual layout and accommodate the desired amount of content.
                                                                                                                            visibleControls whether the filter builder component is displayed or hidden in the user interface. When enabled, users can access and use the filter builder to create or modify filters; when disabled, the filter builder is not visible or accessible.

                                                                                                                            Back to root property: filtering

                                                                                                                            Read the nested value:

                                                                                                                            const el = document.querySelector('smart-grid');
const filterBuilder = el.filtering.filterBuilder;
                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                            heightDefines the vertical size, in pixels or other supported units, of the filter builder component. This property determines how tall the filter builder appears in the user interface, allowing you to control its visual layout and accommodate the desired amount of content.number | null

                                                                                                                            Defines the vertical size, in pixels or other supported units, of the filter builder component. This property determines how tall the filter builder appears in the user interface, allowing you to control its visual layout and accommodate the desired amount of content.

                                                                                                                            Back to root property: filtering

                                                                                                                            Read the nested value:

                                                                                                                            const el = document.querySelector('smart-grid');
const height = el.filtering.filterBuilder.height;
                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                            visibleControls whether the filter builder component is displayed or hidden in the user interface. When enabled, users can access and use the filter builder to create or modify filters; when disabled, the filter builder is not visible or accessible.boolean

                                                                                                                            Controls whether the filter builder component is displayed or hidden in the user interface. When enabled, users can access and use the filter builder to create or modify filters; when disabled, the filter builder is not visible or accessible.

                                                                                                                            Default value

                                                                                                                            false

                                                                                                                            Back to root property: filtering

                                                                                                                            Try a demo showcasing the visible property.

                                                                                                                            Read the nested value:

                                                                                                                            const el = document.querySelector('smart-grid');
const visible = el.filtering.filterBuilder.visible;
                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                            filterMenuProvides detailed configuration options for the filter menu, including available filter types, display preferences, default selections, and customizable behaviors to control how users interact with and apply filters within the menu interface. Click for more details. Property object's options:
                                                                                                                               object

                                                                                                                              Provides detailed configuration options for the filter menu, including available filter types, display preferences, default selections, and customizable behaviors to control how users interact with and apply filters within the menu interface.

                                                                                                                              Properties

                                                                                                                              buttonsSpecifies the text label displayed on the filter menu button, allowing you to customize the button’s caption to better describe its function or improve user experience. Click for more details. Property object's options:
                                                                                                                                dataSourceConfigures the data source for the filter menu, specifying the list of available options that users can select when applying filters. This determines which values appear in the filter dropdown and can be set to a static array or a dynamic data source such as an API endpoint or database query.
                                                                                                                                heightSpecifies the vertical dimension (in pixels, ems, or other supported units) of the filter menu, determining how much space the menu occupies on the screen. Adjusting this value changes the overall height of the filter menu component.
                                                                                                                                modeSpecifies the display mode for the filter menu, determining how filtering options are presented to the user (e.g., dropdown, modal, or inline).
                                                                                                                                visibleControls whether the filter menu is displayed to the user. Set this option to show or hide the filter menu based on your application's requirements.
                                                                                                                                widthSpecifies the width, in pixels or a valid CSS unit, of the filter menu component. This determines how wide the filter menu appears in the user interface.

                                                                                                                                Back to root property: filtering

                                                                                                                                Try a demo showcasing the filterMenu property.

                                                                                                                                Read the nested value:

                                                                                                                                const el = document.querySelector('smart-grid');
const filterMenu = el.filtering.filterMenu;
                                                                                                                                Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                buttonsSpecifies the text label displayed on the filter menu button, allowing you to customize the button’s caption to better describe its function or improve user experience. Click for more details. Property object's options:
                                                                                                                                  string[]

                                                                                                                                  Specifies the text label displayed on the filter menu button, allowing you to customize the button’s caption to better describe its function or improve user experience.

                                                                                                                                  Back to root property: filtering

                                                                                                                                  Try a demo showcasing the buttons property.

                                                                                                                                  Read the nested value:

                                                                                                                                  const el = document.querySelector('smart-grid');
const buttons = el.filtering.filterMenu.buttons;
                                                                                                                                  Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                  dataSourceConfigures the data source for the filter menu, specifying the list of available options that users can select when applying filters. This determines which values appear in the filter dropdown and can be set to a static array or a dynamic data source such as an API endpoint or database query.any

                                                                                                                                  Configures the data source for the filter menu, specifying the list of available options that users can select when applying filters. This determines which values appear in the filter dropdown and can be set to a static array or a dynamic data source such as an API endpoint or database query.

                                                                                                                                  Back to root property: filtering

                                                                                                                                  Try a demo showcasing the dataSource property.

                                                                                                                                  Read the nested value:

                                                                                                                                  const el = document.querySelector('smart-grid');
const dataSource = el.filtering.filterMenu.dataSource;
                                                                                                                                  Related APIs refresh() beginUpdate() endUpdate() change

                                                                                                                                  heightSpecifies the vertical dimension (in pixels, ems, or other supported units) of the filter menu, determining how much space the menu occupies on the screen. Adjusting this value changes the overall height of the filter menu component.number

                                                                                                                                  Specifies the vertical dimension (in pixels, ems, or other supported units) of the filter menu, determining how much space the menu occupies on the screen. Adjusting this value changes the overall height of the filter menu component.

                                                                                                                                  Default value

                                                                                                                                  200

                                                                                                                                  Back to root property: filtering

                                                                                                                                  Read the nested value:

                                                                                                                                  const el = document.querySelector('smart-grid');
const height = el.filtering.filterMenu.height;
                                                                                                                                  Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                  modeSpecifies the display mode for the filter menu, determining how filtering options are presented to the user (e.g., dropdown, modal, or inline). "default" | "excel"

                                                                                                                                  Specifies the display mode for the filter menu, determining how filtering options are presented to the user (e.g., dropdown, modal, or inline).

                                                                                                                                  Default value

                                                                                                                                  "default"

                                                                                                                                  Back to root property: filtering

                                                                                                                                  Read the nested value:

                                                                                                                                  const el = document.querySelector('smart-grid');
const mode = el.filtering.filterMenu.mode;
                                                                                                                                  Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                  visibleControls whether the filter menu is displayed to the user. Set this option to show or hide the filter menu based on your application's requirements.boolean

                                                                                                                                  Controls whether the filter menu is displayed to the user. Set this option to show or hide the filter menu based on your application's requirements.

                                                                                                                                  Default value

                                                                                                                                  true

                                                                                                                                  Back to root property: filtering

                                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                                  Examples

                                                                                                                                  Set a nested field on the element:

                                                                                                                                  const el = document.querySelector('smart-grid');
el.filtering.filterMenu.visible = true;

                                                                                                                                  Read the nested value:

                                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.filtering.filterMenu.visible;
                                                                                                                                  Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                  widthSpecifies the width, in pixels or a valid CSS unit, of the filter menu component. This determines how wide the filter menu appears in the user interface.number

                                                                                                                                  Specifies the width, in pixels or a valid CSS unit, of the filter menu component. This determines how wide the filter menu appears in the user interface.

                                                                                                                                  Default value

                                                                                                                                  250

                                                                                                                                  Back to root property: filtering

                                                                                                                                  Try a demo showcasing the width property.

                                                                                                                                  Read the nested value:

                                                                                                                                  const el = document.querySelector('smart-grid');
const width = el.filtering.filterMenu.width;
                                                                                                                                  Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                  filterRowProvides detailed configuration options for the filter row, including its appearance, behavior, available filter types, and display settings. This allows developers to customize how the filter row is shown and how users interact with filtering features in the component. Click for more details. Property object's options:
                                                                                                                                     object

                                                                                                                                    Provides detailed configuration options for the filter row, including its appearance, behavior, available filter types, and display settings. This allows developers to customize how the filter row is shown and how users interact with filtering features in the component.

                                                                                                                                    Properties

                                                                                                                                    applyModeDetermines how filters entered in the filter row are applied to the data, specifying whether filtering occurs automatically as the user types or only after a specific action, such as pressing Enter or clicking a filter button.
                                                                                                                                    autoApplyModeDelaySpecifies the delay, in milliseconds, before the filtering action is triggered after the user modifies a filter input. This setting is only applicable when filtering.filterRow.applyMode is set to 'auto', allowing you to control how quickly the filtering is applied as the user types.
                                                                                                                                    menuVisibleDisplays the filter row’s menu, allowing users to view and interact with filter options for data columns.
                                                                                                                                    visibleDisplays the filter row, allowing users to enter criteria and filter the displayed data directly within the grid or table interface.

                                                                                                                                    Back to root property: filtering

                                                                                                                                    Try a demo showcasing the filterRow property.

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const filterRow = el.filtering.filterRow;
                                                                                                                                    Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                    applyModeDetermines how filters entered in the filter row are applied to the data, specifying whether filtering occurs automatically as the user types or only after a specific action, such as pressing Enter or clicking a filter button."auto" | "click"

                                                                                                                                    Determines how filters entered in the filter row are applied to the data, specifying whether filtering occurs automatically as the user types or only after a specific action, such as pressing Enter or clicking a filter button.

                                                                                                                                    Default value

                                                                                                                                    "auto"

                                                                                                                                    Back to root property: filtering

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const applyMode = el.filtering.filterRow.applyMode;
                                                                                                                                    Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                    autoApplyModeDelaySpecifies the delay, in milliseconds, before the filtering action is triggered after the user modifies a filter input. This setting is only applicable when filtering.filterRow.applyMode is set to 'auto', allowing you to control how quickly the filtering is applied as the user types.number

                                                                                                                                    Specifies the delay, in milliseconds, before the filtering action is triggered after the user modifies a filter input. This setting is only applicable when filtering.filterRow.applyMode is set to 'auto', allowing you to control how quickly the filtering is applied as the user types.

                                                                                                                                    Default value

                                                                                                                                    300

                                                                                                                                    Back to root property: filtering

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const autoApplyModeDelay = el.filtering.filterRow.autoApplyModeDelay;
                                                                                                                                    Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                    menuVisibleDisplays the filter row’s menu, allowing users to view and interact with filter options for data columns.boolean

                                                                                                                                    Displays the filter row’s menu, allowing users to view and interact with filter options for data columns.

                                                                                                                                    Default value

                                                                                                                                    false

                                                                                                                                    Back to root property: filtering

                                                                                                                                    Examples

                                                                                                                                    Set a nested field on the element:

                                                                                                                                    const el = document.querySelector('smart-grid');
el.filtering.filterRow.menuVisible = true;

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const menuVisible = el.filtering.filterRow.menuVisible;
                                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                    visibleDisplays the filter row, allowing users to enter criteria and filter the displayed data directly within the grid or table interface.boolean

                                                                                                                                    Displays the filter row, allowing users to enter criteria and filter the displayed data directly within the grid or table interface.

                                                                                                                                    Default value

                                                                                                                                    false

                                                                                                                                    Back to root property: filtering

                                                                                                                                    Try a demo showcasing the visible property.

                                                                                                                                    Examples

                                                                                                                                    Set a nested field on the element:

                                                                                                                                    const el = document.querySelector('smart-grid');
el.filtering.filterRow.visible = true;

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const visible = el.filtering.filterRow.visible;
                                                                                                                                    Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                    operatorSpecifies the logical operator ('and' or 'or') used to combine multiple column filters in the Grid. By default, filters are combined using the 'and' operator, meaning that a row must satisfy all filter conditions (e.g., columnA 'and' columnB) to be included in the results. Alternatively, you can set the operator to 'or' to return rows that match 'any' of the filter conditions (e.g., columnA 'or' columnB).'Example:' '''jsgrid.filtering.operator = 'or';grid.addFilter('lastName', 'contains "davolio"');grid.addFilter('firstName', 'contains "Antoni"');'''This configuration applies two filters to the Grid and will display all rows where 'either' 'firstName' contains "Antoni" 'or' 'lastName' contains "Davolio".Use this property to control how multiple filters are combined when filtering data in the Grid.string

                                                                                                                                    Specifies the logical operator ('and' or 'or') used to combine multiple column filters in the Grid. By default, filters are combined using the 'and' operator, meaning that a row must satisfy all filter conditions (e.g., columnA 'and' columnB) to be included in the results. Alternatively, you can set the operator to 'or' to return rows that match 'any' of the filter conditions (e.g., columnA 'or' columnB).

                                                                                                                                    'Example:'
                                                                                                                                    '''js
                                                                                                                                    grid.filtering.operator = 'or';
                                                                                                                                    grid.addFilter('lastName', 'contains "davolio"');
                                                                                                                                    grid.addFilter('firstName', 'contains "Antoni"');
                                                                                                                                    '''
                                                                                                                                    This configuration applies two filters to the Grid and will display all rows where 'either' 'firstName' contains "Antoni" 'or' 'lastName' contains "Davolio".

                                                                                                                                    Use this property to control how multiple filters are combined when filtering data in the Grid.

                                                                                                                                    Default value

                                                                                                                                    "and"

                                                                                                                                    Back to root property: filtering

                                                                                                                                    Examples

                                                                                                                                    Set a nested field on the element:

                                                                                                                                    const el = document.querySelector('smart-grid');
el.filtering.operator = "or";

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const operator = el.filtering.operator;
                                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                    Provides configuration options for customizing the appearance and behavior of the grid's footer, including visibility, content, styling, and layout settings.

                                                                                                                                    Properties

                                                                                                                                    templateDefines the layout and content structure for the website footer by specifying a customizable template that determines how footer elements are displayed.
                                                                                                                                    visibleControls whether the footer section is displayed or hidden on the webpage.
                                                                                                                                    Related APIs appearance layout refresh() change

                                                                                                                                    templateDefines the layout and content structure for the website footer by specifying a customizable template that determines how footer elements are displayed.string | HTMLTemplateElement | {(element: HTMLElement): void}

                                                                                                                                    Defines the layout and content structure for the website footer by specifying a customizable template that determines how footer elements are displayed.

                                                                                                                                    Default value

                                                                                                                                    ""

                                                                                                                                    Back to root property: footer

                                                                                                                                    Try a demo showcasing the template property.

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const template = el.footer.template;

                                                                                                                                    Controls whether the footer section is displayed or hidden on the webpage.

                                                                                                                                    Default value

                                                                                                                                    false

                                                                                                                                    Back to root property: footer

                                                                                                                                    Try a demo showcasing the visible property.

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const visible = el.footer.visible;

                                                                                                                                    formulasEnables 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.boolean

                                                                                                                                    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.

                                                                                                                                    Default value

                                                                                                                                    false
                                                                                                                                    Try a demo showcasing the formulas property.

                                                                                                                                    Examples

                                                                                                                                    Markup and runtime examples for formulas:

                                                                                                                                    HTML attribute:

                                                                                                                                    <smart-grid formulas></smart-grid>

                                                                                                                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                    const el = document.querySelector('smart-grid');
el.formulas = false;

                                                                                                                                    Read the current value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const formulas = el.formulas;
                                                                                                                                    Related APIs appearance layout refresh() change

                                                                                                                                    groupableEnables data grouping. Shorthand: sets grouping.enabled to true.boolean

                                                                                                                                    Enables data grouping. Shorthand: sets grouping.enabled to true.

                                                                                                                                    Default value

                                                                                                                                    false

                                                                                                                                    Examples

                                                                                                                                    Markup and runtime examples for groupable:

                                                                                                                                    HTML attribute:

                                                                                                                                    <smart-grid groupable></smart-grid>

                                                                                                                                    Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                    const el = document.querySelector('smart-grid');
el.groupable = true;

                                                                                                                                    Read the current value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const groupable = el.groupable;
                                                                                                                                    Related APIs grouping addGroup() removeGroup() clearGroups() group

                                                                                                                                    groupHeaderProvides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings. object

                                                                                                                                    Provides configuration options that define the appearance and behavior of the group header, including properties such as text, style, alignment, and visibility settings.

                                                                                                                                    Properties

                                                                                                                                    templateDefines the template used to render the header section for a group of items, allowing customization of the group header's layout and content.
                                                                                                                                    visibleControls whether the group header is displayed or hidden, determining its visibility within the user interface.
                                                                                                                                    Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                    templateDefines the template used to render the header section for a group of items, allowing customization of the group header's layout and content.string | HTMLTemplateElement

                                                                                                                                    Defines the template used to render the header section for a group of items, allowing customization of the group header's layout and content.

                                                                                                                                    Default value

                                                                                                                                    ""

                                                                                                                                    Back to root property: groupHeader

                                                                                                                                    Try a demo showcasing the template property.

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const template = el.groupHeader.template;
                                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                    visibleControls whether the group header is displayed or hidden, determining its visibility within the user interface.boolean

                                                                                                                                    Controls whether the group header is displayed or hidden, determining its visibility within the user interface.

                                                                                                                                    Default value

                                                                                                                                    false

                                                                                                                                    Back to root property: groupHeader

                                                                                                                                    Try a demo showcasing the visible property.

                                                                                                                                    Read the nested value:

                                                                                                                                    const el = document.querySelector('smart-grid');
const visible = el.groupHeader.visible;
                                                                                                                                    Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                    groupingProvides 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. Click for more details. Property object's options:
                                                                                                                                       object

                                                                                                                                      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.

                                                                                                                                      Properties

                                                                                                                                      allowCollapseAllows users to expand or collapse grouped sections, enabling them to hide or reveal grouped content within the interface as needed.
                                                                                                                                      autoExpandAllAutomatically expands all grouped sections within the interface, making all nested content visible to the user without requiring manual interaction.
                                                                                                                                      autoExpandToLevelAutomatically expands all collapsible groups within the interface up to the specified hierarchical level, ensuring that all nested groups at or above this level are visible by default.
                                                                                                                                      autoHideGroupColumnAutomatically hides all columns that are part of a group, streamlining the display by collapsing grouped columns from view. This feature improves user interface clarity by reducing on-screen clutter and allowing users to focus on ungrouped or expanded columns.
                                                                                                                                      enabledAllows items or data to be organized into groups based on specified criteria, making it easier to manage, categorize, or display related elements together within the application.
                                                                                                                                      expandModeSpecifies how groups are expanded or collapsed within the component. Determines whether groups are expanded by default, collapsed, or if a custom behavior is applied.
                                                                                                                                      formatFunctionDefines or retrieves the function responsible for formatting the data displayed in the column. This function determines how raw cell values are converted to their final, user-visible representation (e.g., formatting dates, numbers, or custom display logic).
                                                                                                                                      groupBarProvides detailed configuration options for the group bar component, including settings for appearance, behavior, and functionality. Click for more details. Property object's options:
                                                                                                                                      • visible:boolean - Displays the group bar, allowing users to view and interact with grouped items or categories within the interface.
                                                                                                                                      • allowColumnDragDrop:boolean - Allows users to rearrange table columns by dragging and dropping them to new positions, providing a more interactive and customizable table layout.
                                                                                                                                      • allowColumnCloseButtons:boolean - Displays close (X) buttons on each column header, allowing users to easily remove or hide individual columns from the view.
                                                                                                                                      groupBySpecifies the data fields used for grouping, or retrieves the current fields that are set for grouping data.
                                                                                                                                      groupIndentSpecifies the indentation level for the group, determining the amount of space applied to visually offset the group’s content from the left margin.
                                                                                                                                      groupRowHeightSpecifies the height, in pixels, for rows that represent grouping headers within a data grid or table. This determines how much vertical space each group row occupies, ensuring consistent formatting and appearance for grouped data sections.
                                                                                                                                      onGroupDefaultExpandedOn first render, return true to expand a group, false to leave it collapsed. Example: (dataItem) => dataItem.label === "Peppermint Mocha Twist". Receives each group’s dataItem before headers are built.
                                                                                                                                      renderModeSpecifies how group headers are displayed within the component. The available options are:- 'basic': Renders group headers without applying any indentation, custom group row heights, or column labels. This provides a simple, minimal display.- 'compact': Similar to 'basic', but additionally includes the column labels in the group headers for improved clarity.- 'advanced' (default): Indents by nesting level, shows column labels, optional custom group row height.- 'multipleColumns': One group header cell per column for multi-field grouping.Pick a mode to match how dense the grouped layout should be.
                                                                                                                                      summaryRowProvides configuration options for the group summary row, allowing you to customize its appearance, content, and behavior within grouped data displays.
                                                                                                                                      toggleButtonIndentSpecifies the amount of indentation applied to the group toggle button, controlling its horizontal offset or padding relative to its container or content. This affects the visual alignment and spacing of the toggle button within the group interface.
                                                                                                                                      Try a demo showcasing the grouping property.

                                                                                                                                      Full working example

                                                                                                                                      Minimal setup for grouping with the data and bindings you usually use together on this component.

                                                                                                                                      JavaScript — minimal grid with grouping:

                                                                                                                                      // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const grouping = { enabled: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	grouping
});
                                                                                                                                      Related APIs groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                      allowCollapseAllows users to expand or collapse grouped sections, enabling them to hide or reveal grouped content within the interface as needed.boolean

                                                                                                                                      Allows users to expand or collapse grouped sections, enabling them to hide or reveal grouped content within the interface as needed.

                                                                                                                                      Default value

                                                                                                                                      false

                                                                                                                                      Back to root property: grouping

                                                                                                                                      Examples

                                                                                                                                      Set a nested field on the element:

                                                                                                                                      const el = document.querySelector('smart-grid');
el.grouping.allowCollapse = true;

                                                                                                                                      Read the nested value:

                                                                                                                                      const el = document.querySelector('smart-grid');
const allowCollapse = el.grouping.allowCollapse;

                                                                                                                                      autoExpandAllAutomatically expands all grouped sections within the interface, making all nested content visible to the user without requiring manual interaction.boolean

                                                                                                                                      Automatically expands all grouped sections within the interface, making all nested content visible to the user without requiring manual interaction.

                                                                                                                                      Default value

                                                                                                                                      false

                                                                                                                                      Back to root property: grouping

                                                                                                                                      Try a demo showcasing the autoExpandAll property.

                                                                                                                                      Examples

                                                                                                                                      Set a nested field on the element:

                                                                                                                                      const el = document.querySelector('smart-grid');
el.grouping.autoExpandAll = true;

                                                                                                                                      Read the nested value:

                                                                                                                                      const el = document.querySelector('smart-grid');
const autoExpandAll = el.grouping.autoExpandAll;

                                                                                                                                      autoExpandToLevelAutomatically expands all collapsible groups within the interface up to the specified hierarchical level, ensuring that all nested groups at or above this level are visible by default.number

                                                                                                                                      Automatically expands all collapsible groups within the interface up to the specified hierarchical level, ensuring that all nested groups at or above this level are visible by default.

                                                                                                                                      Default value

                                                                                                                                      0

                                                                                                                                      Back to root property: grouping

                                                                                                                                      Examples

                                                                                                                                      Set a nested field on the element:

                                                                                                                                      const el = document.querySelector('smart-grid');
el.grouping.autoExpandToLevel = 2;

                                                                                                                                      Read the nested value:

                                                                                                                                      const el = document.querySelector('smart-grid');
const autoExpandToLevel = el.grouping.autoExpandToLevel;

                                                                                                                                      autoHideGroupColumnAutomatically hides all columns that are part of a group, streamlining the display by collapsing grouped columns from view. This feature improves user interface clarity by reducing on-screen clutter and allowing users to focus on ungrouped or expanded columns.boolean

                                                                                                                                      Automatically hides all columns that are part of a group, streamlining the display by collapsing grouped columns from view. This feature improves user interface clarity by reducing on-screen clutter and allowing users to focus on ungrouped or expanded columns.

                                                                                                                                      Default value

                                                                                                                                      false

                                                                                                                                      Back to root property: grouping

                                                                                                                                      Examples

                                                                                                                                      Set a nested field on the element:

                                                                                                                                      const el = document.querySelector('smart-grid');
el.grouping.autoHideGroupColumn = true;

                                                                                                                                      Read the nested value:

                                                                                                                                      const el = document.querySelector('smart-grid');
const autoHideGroupColumn = el.grouping.autoHideGroupColumn;
                                                                                                                                      Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                      enabledAllows items or data to be organized into groups based on specified criteria, making it easier to manage, categorize, or display related elements together within the application.boolean

                                                                                                                                      Allows items or data to be organized into groups based on specified criteria, making it easier to manage, categorize, or display related elements together within the application.

                                                                                                                                      Default value

                                                                                                                                      false

                                                                                                                                      Back to root property: grouping

                                                                                                                                      Examples

                                                                                                                                      Set a nested field on the element:

                                                                                                                                      const el = document.querySelector('smart-grid');
el.grouping.enabled = true;

                                                                                                                                      Read the nested value:

                                                                                                                                      const el = document.querySelector('smart-grid');
const enabled = el.grouping.enabled;
                                                                                                                                      Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                      expandModeSpecifies how groups are expanded or collapsed within the component. Determines whether groups are expanded by default, collapsed, or if a custom behavior is applied."buttonClick" | "rowClick"

                                                                                                                                      Specifies how groups are expanded or collapsed within the component. Determines whether groups are expanded by default, collapsed, or if a custom behavior is applied.

                                                                                                                                      Default value

                                                                                                                                      "buttonClick"

                                                                                                                                      Back to root property: grouping

                                                                                                                                      Read the nested value:

                                                                                                                                      const el = document.querySelector('smart-grid');
const expandMode = el.grouping.expandMode;
                                                                                                                                      Related APIs behavior refresh() change

                                                                                                                                      formatFunctionDefines or retrieves the function responsible for formatting the data displayed in the column. This function determines how raw cell values are converted to their final, user-visible representation (e.g., formatting dates, numbers, or custom display logic).{(formatObject: {row?: GridRow, column?: GridColumn, cell?: GridCell, value?: any, template?: any, data?: any}): void}

                                                                                                                                      Defines or retrieves the function responsible for formatting the data displayed in the column. This function determines how raw cell values are converted to their final, user-visible representation (e.g., formatting dates, numbers, or custom display logic).

                                                                                                                                      Back to root property: grouping

                                                                                                                                      Try a demo showcasing the formatFunction property.

                                                                                                                                      Read the nested value:

                                                                                                                                      const el = document.querySelector('smart-grid');
const formatFunction = el.grouping.formatFunction;
                                                                                                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                      groupBarProvides detailed configuration options for the group bar component, including settings for appearance, behavior, and functionality. Click for more details. Property object's options:
                                                                                                                                         object

                                                                                                                                        Provides detailed configuration options for the group bar component, including settings for appearance, behavior, and functionality.

                                                                                                                                        Properties

                                                                                                                                        allowColumnCloseButtonsDisplays close (X) buttons on each column header, allowing users to easily remove or hide individual columns from the view.
                                                                                                                                        allowColumnDragDropAllows users to rearrange table columns by dragging and dropping them to new positions, providing a more interactive and customizable table layout.
                                                                                                                                        visibleDisplays the group bar, allowing users to view and interact with grouped items or categories within the interface.

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the groupBar property.

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const groupBar = el.grouping.groupBar;
                                                                                                                                        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                        allowColumnCloseButtonsDisplays close (X) buttons on each column header, allowing users to easily remove or hide individual columns from the view.boolean

                                                                                                                                        Displays close (X) buttons on each column header, allowing users to easily remove or hide individual columns from the view.

                                                                                                                                        Default value

                                                                                                                                        true

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const allowColumnCloseButtons = el.grouping.groupBar.allowColumnCloseButtons;
                                                                                                                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                        allowColumnDragDropAllows users to rearrange table columns by dragging and dropping them to new positions, providing a more interactive and customizable table layout.boolean

                                                                                                                                        Allows users to rearrange table columns by dragging and dropping them to new positions, providing a more interactive and customizable table layout.

                                                                                                                                        Default value

                                                                                                                                        false

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const allowColumnDragDrop = el.grouping.groupBar.allowColumnDragDrop;
                                                                                                                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                        visibleDisplays the group bar, allowing users to view and interact with grouped items or categories within the interface.boolean

                                                                                                                                        Displays the group bar, allowing users to view and interact with grouped items or categories within the interface.

                                                                                                                                        Default value

                                                                                                                                        false

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the visible property.

                                                                                                                                        Examples

                                                                                                                                        Set a nested field on the element:

                                                                                                                                        const el = document.querySelector('smart-grid');
el.grouping.groupBar.visible = true;

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const visible = el.grouping.groupBar.visible;
                                                                                                                                        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                        groupBySpecifies the data fields used for grouping, or retrieves the current fields that are set for grouping data.string[]

                                                                                                                                        Specifies the data fields used for grouping, or retrieves the current fields that are set for grouping data.

                                                                                                                                        Default value

                                                                                                                                        []

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the groupBy property.

                                                                                                                                        Examples

                                                                                                                                        Set a nested field on the element:

                                                                                                                                        const el = document.querySelector('smart-grid');
el.grouping.groupBy = true;

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const groupBy = el.grouping.groupBy;
                                                                                                                                        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                        groupIndentSpecifies the indentation level for the group, determining the amount of space applied to visually offset the group’s content from the left margin.number

                                                                                                                                        Specifies the indentation level for the group, determining the amount of space applied to visually offset the group’s content from the left margin.

                                                                                                                                        Default value

                                                                                                                                        16

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the groupIndent property.

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const groupIndent = el.grouping.groupIndent;
                                                                                                                                        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                        groupRowHeightSpecifies the height, in pixels, for rows that represent grouping headers within a data grid or table. This determines how much vertical space each group row occupies, ensuring consistent formatting and appearance for grouped data sections.string | number

                                                                                                                                        Specifies the height, in pixels, for rows that represent grouping headers within a data grid or table. This determines how much vertical space each group row occupies, ensuring consistent formatting and appearance for grouped data sections.

                                                                                                                                        Default value

                                                                                                                                        50

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const groupRowHeight = el.grouping.groupRowHeight;
                                                                                                                                        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                        onGroupDefaultExpandedOn first render, return true to expand a group, false to leave it collapsed. Example: (dataItem) => dataItem.label === "Peppermint Mocha Twist". Receives each group’s dataItem before headers are built.any

                                                                                                                                        On first render, return true to expand a group, false to leave it collapsed.
                                                                                                                                        Example: (dataItem) => dataItem.label === "Peppermint Mocha Twist". Receives each group’s dataItem before headers are built.

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const onGroupDefaultExpanded = el.grouping.onGroupDefaultExpanded;
                                                                                                                                        Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                        renderModeSpecifies how group headers are displayed within the component. The available options are:- 'basic': Renders group headers without applying any indentation, custom group row heights, or column labels. This provides a simple, minimal display.- 'compact': Similar to 'basic', but additionally includes the column labels in the group headers for improved clarity.- 'advanced' (default): Indents by nesting level, shows column labels, optional custom group row height.- 'multipleColumns': One group header cell per column for multi-field grouping.Pick a mode to match how dense the grouped layout should be."basic" | "compact" | "advanced" | "multipleColumns"

                                                                                                                                        Specifies how group headers are displayed within the component. The available options are:

                                                                                                                                        - 'basic': Renders group headers without applying any indentation, custom group row heights, or column labels. This provides a simple, minimal display.
                                                                                                                                        - 'compact': Similar to 'basic', but additionally includes the column labels in the group headers for improved clarity.
                                                                                                                                        - 'advanced' (default): Indents by nesting level, shows column labels, optional custom group row height.
                                                                                                                                        - 'multipleColumns': One group header cell per column for multi-field grouping.

                                                                                                                                        Pick a mode to match how dense the grouped layout should be.

                                                                                                                                        Default value

                                                                                                                                        "advanced"

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the renderMode property.

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const renderMode = el.grouping.renderMode;
                                                                                                                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                        summaryRowProvides configuration options for the group summary row, allowing you to customize its appearance, content, and behavior within grouped data displays. object

                                                                                                                                        Provides configuration options for the group summary row, allowing you to customize its appearance, content, and behavior within grouped data displays.

                                                                                                                                        Properties

                                                                                                                                        inlineDisplays the group summary row directly within the main content area, positioning it inline with other rows instead of in a separate section. This setting allows users to view summary information (such as totals or averages) immediately beneath or alongside related grouped data for improved readability and context.
                                                                                                                                        visibleDisplays the group summary row, providing an overview of aggregated data—such as totals, averages, or counts—for each group within the dataset.

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the summaryRow property.

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const summaryRow = el.grouping.summaryRow;
                                                                                                                                        Related APIs appearance layout refresh() change

                                                                                                                                        inlineDisplays the group summary row directly within the main content area, positioning it inline with other rows instead of in a separate section. This setting allows users to view summary information (such as totals or averages) immediately beneath or alongside related grouped data for improved readability and context.boolean

                                                                                                                                        Displays the group summary row directly within the main content area, positioning it inline with other rows instead of in a separate section. This setting allows users to view summary information (such as totals or averages) immediately beneath or alongside related grouped data for improved readability and context.

                                                                                                                                        Default value

                                                                                                                                        true

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the inline property.

                                                                                                                                        Examples

                                                                                                                                        Set a nested field on the element:

                                                                                                                                        const el = document.querySelector('smart-grid');
el.grouping.summaryRow.inline = true;

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const inline = el.grouping.summaryRow.inline;
                                                                                                                                        Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                        visibleDisplays the group summary row, providing an overview of aggregated data—such as totals, averages, or counts—for each group within the dataset.boolean

                                                                                                                                        Displays the group summary row, providing an overview of aggregated data—such as totals, averages, or counts—for each group within the dataset.

                                                                                                                                        Default value

                                                                                                                                        true

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Try a demo showcasing the visible property.

                                                                                                                                        Examples

                                                                                                                                        Set a nested field on the element:

                                                                                                                                        const el = document.querySelector('smart-grid');
el.grouping.summaryRow.visible = true;

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const visible = el.grouping.summaryRow.visible;
                                                                                                                                        Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                        toggleButtonIndentSpecifies the amount of indentation applied to the group toggle button, controlling its horizontal offset or padding relative to its container or content. This affects the visual alignment and spacing of the toggle button within the group interface.number

                                                                                                                                        Specifies the amount of indentation applied to the group toggle button, controlling its horizontal offset or padding relative to its container or content. This affects the visual alignment and spacing of the toggle button within the group interface.

                                                                                                                                        Default value

                                                                                                                                        16

                                                                                                                                        Back to root property: grouping

                                                                                                                                        Read the nested value:

                                                                                                                                        const el = document.querySelector('smart-grid');
const toggleButtonIndent = el.grouping.toggleButtonIndent;
                                                                                                                                        Related APIs appearance layout refresh() change

                                                                                                                                        headerProvides detailed configuration options for the grid's header, including display settings, styling, visibility, and customization of header rows and columns. Click for more details. Property object's options:
                                                                                                                                           object

                                                                                                                                          Provides detailed configuration options for the grid's header, including display settings, styling, visibility, and customization of header rows and columns.

                                                                                                                                          Properties

                                                                                                                                          buttonsSpecifies which action buttons are shown in the Grid header. The available options are:- ''columns'': Displays a button that opens the columns chooser panel, allowing users to show or hide grid columns.- ''filter'': Displays a button that opens the filtering panel, enabling users to apply filters to grid data.- ''group'': Displays a button that opens the grouping panel, allowing users to group data by specific columns.- ''sort'': Displays a button that opens the sorting panel, letting users sort grid data by one or more columns.- ''format'': Displays a button that opens the conditional formatting panel, providing options to format cells based on specific conditions.- ''search'': Displays a button that opens the search panel, enabling users to search within the grid data.- ''colors'': Displays a button that opens a color options panel, allowing users to customize color formatting for the grid.Include one or more of these options in an array to control the set of action buttons visible in the Grid header.
                                                                                                                                          customButtonCustom Toolbar Button: Enables you to add a user-defined button to the application's toolbar. This feature allows you to specify the button's label, icon, and action, providing easy access to custom functionality directly within the toolbar interface. Click for more details. Property object's options:
                                                                                                                                          • command:string - Specifies the name of the function to be executed when the custom button is clicked. This function will be triggered each time the button is activated by the user, allowing you to define the custom behavior that should occur in response to the click event.
                                                                                                                                          • visible:boolean - Controls whether the custom button is visible or hidden on the user interface. Set to true to display the button, or false to hide it.
                                                                                                                                          • icon:string - Specifies the icon to be displayed on the custom button. This determines the visual symbol or graphic that appears on the button, allowing for enhanced user recognition and interface customization. Provide a valid icon name, path, or component reference, depending on the implementation.
                                                                                                                                          • label:string - Specifies the text that appears on the custom button, allowing you to define or update the button’s label as displayed to users.
                                                                                                                                          onInitThis callback function allows you to customize the Header toolbar by providing direct access to its HTML element. The function receives the Toolbar's HTML Element as an argument, enabling you to modify its structure, add custom buttons, update styles, or bind event listeners according to your application's requirements.
                                                                                                                                          searchCommandSpecifies the type of search command to be executed, determining how the search operation is performed (e.g., basic, advanced, or filtered search). This setting influences the logic and options available during the search process.
                                                                                                                                          templateDefines a customizable template for rendering the header section, allowing you to specify the structure, content, and styling of the header according to your application's requirements.
                                                                                                                                          visibleControls whether the header is displayed or hidden in the user interface. Adjusting this setting allows you to show or hide the header as needed.
                                                                                                                                          Try a demo showcasing the header property.
                                                                                                                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                          buttonsSpecifies which action buttons are shown in the Grid header. The available options are:- ''columns'': Displays a button that opens the columns chooser panel, allowing users to show or hide grid columns.- ''filter'': Displays a button that opens the filtering panel, enabling users to apply filters to grid data.- ''group'': Displays a button that opens the grouping panel, allowing users to group data by specific columns.- ''sort'': Displays a button that opens the sorting panel, letting users sort grid data by one or more columns.- ''format'': Displays a button that opens the conditional formatting panel, providing options to format cells based on specific conditions.- ''search'': Displays a button that opens the search panel, enabling users to search within the grid data.- ''colors'': Displays a button that opens a color options panel, allowing users to customize color formatting for the grid.Include one or more of these options in an array to control the set of action buttons visible in the Grid header.any[]

                                                                                                                                          Specifies which action buttons are shown in the Grid header. The available options are:

                                                                                                                                          - ''columns'': Displays a button that opens the columns chooser panel, allowing users to show or hide grid columns.
                                                                                                                                          - ''filter'': Displays a button that opens the filtering panel, enabling users to apply filters to grid data.
                                                                                                                                          - ''group'': Displays a button that opens the grouping panel, allowing users to group data by specific columns.
                                                                                                                                          - ''sort'': Displays a button that opens the sorting panel, letting users sort grid data by one or more columns.
                                                                                                                                          - ''format'': Displays a button that opens the conditional formatting panel, providing options to format cells based on specific conditions.
                                                                                                                                          - ''search'': Displays a button that opens the search panel, enabling users to search within the grid data.
                                                                                                                                          - ''colors'': Displays a button that opens a color options panel, allowing users to customize color formatting for the grid.

                                                                                                                                          Include one or more of these options in an array to control the set of action buttons visible in the Grid header.

                                                                                                                                          Default value

                                                                                                                                          [ "columns", "filter", "group", "sort", "format", "search" ]

                                                                                                                                          Back to root property: header

                                                                                                                                          Try a demo showcasing the buttons property.

                                                                                                                                          Read the nested value:

                                                                                                                                          const el = document.querySelector('smart-grid');
const buttons = el.header.buttons;
                                                                                                                                          Related APIs appearance layout refresh() change

                                                                                                                                          customButtonCustom Toolbar Button: Enables you to add a user-defined button to the application's toolbar. This feature allows you to specify the button's label, icon, and action, providing easy access to custom functionality directly within the toolbar interface. Click for more details. Property object's options:
                                                                                                                                             object

                                                                                                                                            Custom Toolbar Button: Enables you to add a user-defined button to the application's toolbar. This feature allows you to specify the button's label, icon, and action, providing easy access to custom functionality directly within the toolbar interface.

                                                                                                                                            Properties

                                                                                                                                            commandSpecifies the name of the function to be executed when the custom button is clicked. This function will be triggered each time the button is activated by the user, allowing you to define the custom behavior that should occur in response to the click event.
                                                                                                                                            iconSpecifies the icon to be displayed on the custom button. This determines the visual symbol or graphic that appears on the button, allowing for enhanced user recognition and interface customization. Provide a valid icon name, path, or component reference, depending on the implementation.
                                                                                                                                            labelSpecifies the text that appears on the custom button, allowing you to define or update the button’s label as displayed to users.
                                                                                                                                            visibleControls whether the custom button is visible or hidden on the user interface. Set to true to display the button, or false to hide it.

                                                                                                                                            Back to root property: header

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const customButton = el.header.customButton;

                                                                                                                                            commandSpecifies the name of the function to be executed when the custom button is clicked. This function will be triggered each time the button is activated by the user, allowing you to define the custom behavior that should occur in response to the click event.string

                                                                                                                                            Specifies the name of the function to be executed when the custom button is clicked. This function will be triggered each time the button is activated by the user, allowing you to define the custom behavior that should occur in response to the click event.

                                                                                                                                            Default value

                                                                                                                                            ""

                                                                                                                                            Back to root property: header

                                                                                                                                            Try a demo showcasing the command property.

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const command = el.header.customButton.command;
                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                            iconSpecifies the icon to be displayed on the custom button. This determines the visual symbol or graphic that appears on the button, allowing for enhanced user recognition and interface customization. Provide a valid icon name, path, or component reference, depending on the implementation.string

                                                                                                                                            Specifies the icon to be displayed on the custom button. This determines the visual symbol or graphic that appears on the button, allowing for enhanced user recognition and interface customization. Provide a valid icon name, path, or component reference, depending on the implementation.

                                                                                                                                            Default value

                                                                                                                                            "smart-icon-settings"

                                                                                                                                            Back to root property: header

                                                                                                                                            Try a demo showcasing the icon property.

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const icon = el.header.customButton.icon;
                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                            labelSpecifies the text that appears on the custom button, allowing you to define or update the button’s label as displayed to users.string

                                                                                                                                            Specifies the text that appears on the custom button, allowing you to define or update the button’s label as displayed to users.

                                                                                                                                            Default value

                                                                                                                                            "{{messages}}"

                                                                                                                                            Back to root property: header

                                                                                                                                            Try a demo showcasing the label property.

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const label = el.header.customButton.label;
                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                            visibleControls whether the custom button is visible or hidden on the user interface. Set to true to display the button, or false to hide it.boolean

                                                                                                                                            Controls whether the custom button is visible or hidden on the user interface. Set to true to display the button, or false to hide it.

                                                                                                                                            Default value

                                                                                                                                            false

                                                                                                                                            Back to root property: header

                                                                                                                                            Try a demo showcasing the visible property.

                                                                                                                                            Examples

                                                                                                                                            Set a nested field on the element:

                                                                                                                                            const el = document.querySelector('smart-grid');
el.header.customButton.visible = true;

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const visible = el.header.customButton.visible;

                                                                                                                                            onInitThis callback function allows you to customize the Header toolbar by providing direct access to its HTML element. The function receives the Toolbar's HTML Element as an argument, enabling you to modify its structure, add custom buttons, update styles, or bind event listeners according to your application's requirements.{(element: HTMLElement): void}

                                                                                                                                            This callback function allows you to customize the Header toolbar by providing direct access to its HTML element. The function receives the Toolbar's HTML Element as an argument, enabling you to modify its structure, add custom buttons, update styles, or bind event listeners according to your application's requirements.

                                                                                                                                            Back to root property: header

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const onInit = el.header.onInit;
                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                            searchCommandSpecifies the type of search command to be executed, determining how the search operation is performed (e.g., basic, advanced, or filtered search). This setting influences the logic and options available during the search process."search" | "filter"

                                                                                                                                            Specifies the type of search command to be executed, determining how the search operation is performed (e.g., basic, advanced, or filtered search). This setting influences the logic and options available during the search process.

                                                                                                                                            Default value

                                                                                                                                            "search"

                                                                                                                                            Back to root property: header

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const searchCommand = el.header.searchCommand;
                                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                            templateDefines a customizable template for rendering the header section, allowing you to specify the structure, content, and styling of the header according to your application's requirements.string | HTMLTemplateElement | {(element: HTMLElement): void}

                                                                                                                                            Defines a customizable template for rendering the header section, allowing you to specify the structure, content, and styling of the header according to your application's requirements.

                                                                                                                                            Default value

                                                                                                                                            ""

                                                                                                                                            Back to root property: header

                                                                                                                                            Try a demo showcasing the template property.

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const template = el.header.template;
                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                            visibleControls whether the header is displayed or hidden in the user interface. Adjusting this setting allows you to show or hide the header as needed.boolean

                                                                                                                                            Controls whether the header is displayed or hidden in the user interface. Adjusting this setting allows you to show or hide the header as needed.

                                                                                                                                            Default value

                                                                                                                                            false

                                                                                                                                            Back to root property: header

                                                                                                                                            Try a demo showcasing the visible property.

                                                                                                                                            Read the nested value:

                                                                                                                                            const el = document.querySelector('smart-grid');
const visible = el.header.visible;
                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                            keys'Key Handling:' You can customize how key presses are handled by defining key map 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.object



                                                                                                                                            'Key Handling:'
                                                                                                                                            You can customize how key presses are handled by defining key map 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.

                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                            layoutAn 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. Click for more details. Property object's options:
                                                                                                                                               object

                                                                                                                                              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.

                                                                                                                                              Properties

                                                                                                                                              allowCellsWrapControls whether cell values automatically wrap onto multiple lines. When set to true, text within a cell will wrap to fit the cell's width, displaying content across multiple lines as needed. When set to false, text will remain on a single line, and any overflow may be truncated or hidden based on cell styling.
                                                                                                                                              autoGenerateColumnWidthDefines the width of columns that are automatically generated within the Grid component. This setting determines how wide each auto-created column will appear, ensuring consistent column sizing for dynamically generated data fields.
                                                                                                                                              autoHeightDynamically adjusts the height of the Grid component based on its content or container, ensuring optimal layout without manual height specification.
                                                                                                                                              autoSizeNewColumnAutomatically assigns a default width to any new Column component that does not have its 'width' property explicitly defined. This ensures consistent sizing for all columns, even if a specific width is not provided during the component’s creation.
                                                                                                                                              autoSizeNewColumnMinWidthSpecifies the minimum width, in pixels, for the newly created column. This ensures that the column will not shrink below this defined width, maintaining layout consistency and readability.
                                                                                                                                              autoWidthAutomatically adjusts the overall width of the Grid based on the combined widths of its columns. To enable this feature, ensure that each column has a numerical value assigned to its ‘width’ property. This allows the Grid to size itself precisely according to the specified widths of all columns.
                                                                                                                                              cardMinWidthDefines the lowest allowable width, in pixels or specified units, that a card can be displayed at in card view. This ensures that cards will not shrink below this minimum width, maintaining readability and consistent layout even when the container is resized or when multiple cards are shown side by side.
                                                                                                                                              cardsPerRowSpecifies the number of cards displayed in each row, allowing you to control the column layout and adjust how many cards appear side by side within a container.
                                                                                                                                              cardVerticalWhen true, each card stacks column label above value; when false, label and value sit side by side. Prefer true on narrow layouts.
                                                                                                                                              columnHeightSpecifies the vertical height for each column within the Grid layout. This property determines how tall each column appears, allowing for consistent or customized column heights depending on the value provided.
                                                                                                                                              columnMinHeightSpecifies the minimum height that each column within the Grid can occupy, ensuring that all columns maintain at least this height regardless of their content. This helps maintain a consistent and readable layout by preventing columns from becoming too short.
                                                                                                                                              columnWidthSpecifies the width of each column in the grid layout. This property allows you to define fixed, relative, or auto-sizing widths for grid columns, enabling precise control over the grid's overall structure and appearance.
                                                                                                                                              dropDownHeightSpecifies the vertical height of the Grid component when it is presented within a drop-down interface. This setting determines how many items or how much content is visible within the drop-down Grid before scrolling is required.
                                                                                                                                              dropDownWidthSpecifies the width of the Grid component when it is rendered within a drop-down interface. This setting determines how wide the Grid appears in the drop-down, allowing you to control its visual layout and ensure proper alignment with surrounding UI elements.
                                                                                                                                              filterRowHeightSpecifies the height of the filter row.
                                                                                                                                              rowHeightSpecifies the height of the grid rows. Accepts the following values:- null: The row height is determined automatically based on the content.- auto: The row height adjusts automatically to fit the content of each row.- A number: Sets a fixed row height in pixels.Use this property to control the vertical sizing behavior of rows within the Grid component.
                                                                                                                                              rowMinHeightSpecifies the minimum height, in pixels or other valid CSS units, that each row in the Grid layout can be resized to. This ensures that no row will be rendered shorter than the defined minimum value, regardless of the content or available space.
                                                                                                                                              viewBarWidthSpecifies the width of the view bar component, determining how much horizontal space it occupies within the user interface. Adjusting this value will increase or decrease the view bar's width accordingly.
                                                                                                                                              Try a demo showcasing the layout property.

                                                                                                                                              Full working example

                                                                                                                                              Minimal setup for layout with the data and bindings you usually use together on this component.

                                                                                                                                              JavaScript — minimal grid with layout:

                                                                                                                                              // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const layout = { rowHeight: 42 };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	layout
});
                                                                                                                                              Related APIs appearance refresh() change

                                                                                                                                              allowCellsWrapControls whether cell values automatically wrap onto multiple lines. When set to true, text within a cell will wrap to fit the cell's width, displaying content across multiple lines as needed. When set to false, text will remain on a single line, and any overflow may be truncated or hidden based on cell styling.boolean

                                                                                                                                              Controls whether cell values automatically wrap onto multiple lines. When set to true, text within a cell will wrap to fit the cell's width, displaying content across multiple lines as needed. When set to false, text will remain on a single line, and any overflow may be truncated or hidden based on cell styling.

                                                                                                                                              Default value

                                                                                                                                              false

                                                                                                                                              Back to root property: layout

                                                                                                                                              Try a demo showcasing the allowCellsWrap property.

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.allowCellsWrap = true;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const allowCellsWrap = el.layout.allowCellsWrap;
                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              autoGenerateColumnWidthDefines the width of columns that are automatically generated within the Grid component. This setting determines how wide each auto-created column will appear, ensuring consistent column sizing for dynamically generated data fields.string | number | null

                                                                                                                                              Defines the width of columns that are automatically generated within the Grid component. This setting determines how wide each auto-created column will appear, ensuring consistent column sizing for dynamically generated data fields.

                                                                                                                                              Back to root property: layout

                                                                                                                                              Try a demo showcasing the autoGenerateColumnWidth property.

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.autoGenerateColumnWidth = 200;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const autoGenerateColumnWidth = el.layout.autoGenerateColumnWidth;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              autoHeightDynamically adjusts the height of the Grid component based on its content or container, ensuring optimal layout without manual height specification.boolean

                                                                                                                                              Dynamically adjusts the height of the Grid component based on its content or container, ensuring optimal layout without manual height specification.

                                                                                                                                              Default value

                                                                                                                                              false

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.autoHeight = true;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const autoHeight = el.layout.autoHeight;

                                                                                                                                              autoSizeNewColumnAutomatically assigns a default width to any new Column component that does not have its 'width' property explicitly defined. This ensures consistent sizing for all columns, even if a specific width is not provided during the component’s creation.boolean

                                                                                                                                              Automatically assigns a default width to any new Column component that does not have its 'width' property explicitly defined. This ensures consistent sizing for all columns, even if a specific width is not provided during the component’s creation.

                                                                                                                                              Default value

                                                                                                                                              false

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.autoSizeNewColumn = true;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const autoSizeNewColumn = el.layout.autoSizeNewColumn;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              autoSizeNewColumnMinWidthSpecifies the minimum width, in pixels, for the newly created column. This ensures that the column will not shrink below this defined width, maintaining layout consistency and readability.number

                                                                                                                                              Specifies the minimum width, in pixels, for the newly created column. This ensures that the column will not shrink below this defined width, maintaining layout consistency and readability.

                                                                                                                                              Default value

                                                                                                                                              250

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.autoSizeNewColumnMinWidth = 300;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const autoSizeNewColumnMinWidth = el.layout.autoSizeNewColumnMinWidth;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              autoWidthAutomatically adjusts the overall width of the Grid based on the combined widths of its columns. To enable this feature, ensure that each column has a numerical value assigned to its ‘width’ property. This allows the Grid to size itself precisely according to the specified widths of all columns.boolean

                                                                                                                                              Automatically adjusts the overall width of the Grid based on the combined widths of its columns. To enable this feature, ensure that each column has a numerical value assigned to its ‘width’ property. This allows the Grid to size itself precisely according to the specified widths of all columns.

                                                                                                                                              Default value

                                                                                                                                              false

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.autoWidth = true;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const autoWidth = el.layout.autoWidth;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              cardMinWidthDefines the lowest allowable width, in pixels or specified units, that a card can be displayed at in card view. This ensures that cards will not shrink below this minimum width, maintaining readability and consistent layout even when the container is resized or when multiple cards are shown side by side.number

                                                                                                                                              Defines the lowest allowable width, in pixels or specified units, that a card can be displayed at in card view. This ensures that cards will not shrink below this minimum width, maintaining readability and consistent layout even when the container is resized or when multiple cards are shown side by side.

                                                                                                                                              Default value

                                                                                                                                              250

                                                                                                                                              Back to root property: layout

                                                                                                                                              Try a demo showcasing the cardMinWidth property.

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.cardMinWidth = 200;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const cardMinWidth = el.layout.cardMinWidth;

                                                                                                                                              cardsPerRowSpecifies the number of cards displayed in each row, allowing you to control the column layout and adjust how many cards appear side by side within a container.number

                                                                                                                                              Specifies the number of cards displayed in each row, allowing you to control the column layout and adjust how many cards appear side by side within a container.

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.cardsPerRow = 3;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const cardsPerRow = el.layout.cardsPerRow;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              cardVerticalWhen true, each card stacks column label above value; when false, label and value sit side by side. Prefer true on narrow layouts.boolean

                                                                                                                                              When true, each card stacks column label above value; when false, label and value sit side by side. Prefer true on narrow layouts.

                                                                                                                                              Default value

                                                                                                                                              false

                                                                                                                                              Back to root property: layout

                                                                                                                                              Try a demo showcasing the cardVertical property.

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.cardVertical = true;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const cardVertical = el.layout.cardVertical;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              columnHeightSpecifies the vertical height for each column within the Grid layout. This property determines how tall each column appears, allowing for consistent or customized column heights depending on the value provided.string | number | null

                                                                                                                                              Specifies the vertical height for each column within the Grid layout. This property determines how tall each column appears, allowing for consistent or customized column heights depending on the value provided.

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.columnHeight = 60;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const columnHeight = el.layout.columnHeight;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              columnMinHeightSpecifies the minimum height that each column within the Grid can occupy, ensuring that all columns maintain at least this height regardless of their content. This helps maintain a consistent and readable layout by preventing columns from becoming too short.number

                                                                                                                                              Specifies the minimum height that each column within the Grid can occupy, ensuring that all columns maintain at least this height regardless of their content. This helps maintain a consistent and readable layout by preventing columns from becoming too short.

                                                                                                                                              Default value

                                                                                                                                              30

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.columnMinHeight = 60;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const columnMinHeight = el.layout.columnMinHeight;
                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              columnWidthSpecifies the width of each column in the grid layout. This property allows you to define fixed, relative, or auto-sizing widths for grid columns, enabling precise control over the grid's overall structure and appearance.string | number | null

                                                                                                                                              Specifies the width of each column in the grid layout. This property allows you to define fixed, relative, or auto-sizing widths for grid columns, enabling precise control over the grid's overall structure and appearance.

                                                                                                                                              Back to root property: layout

                                                                                                                                              Try a demo showcasing the columnWidth property.

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.columnWidth = 200;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const columnWidth = el.layout.columnWidth;
                                                                                                                                              Related APIs appearance layout refresh() change

                                                                                                                                              dropDownHeightSpecifies the vertical height of the Grid component when it is presented within a drop-down interface. This setting determines how many items or how much content is visible within the drop-down Grid before scrolling is required.number

                                                                                                                                              Specifies the vertical height of the Grid component when it is presented within a drop-down interface. This setting determines how many items or how much content is visible within the drop-down Grid before scrolling is required.

                                                                                                                                              Default value

                                                                                                                                              500

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.dropDownHeight = 200;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const dropDownHeight = el.layout.dropDownHeight;
                                                                                                                                              Related APIs behavior refresh() change

                                                                                                                                              dropDownWidthSpecifies the width of the Grid component when it is rendered within a drop-down interface. This setting determines how wide the Grid appears in the drop-down, allowing you to control its visual layout and ensure proper alignment with surrounding UI elements.number

                                                                                                                                              Specifies the width of the Grid component when it is rendered within a drop-down interface. This setting determines how wide the Grid appears in the drop-down, allowing you to control its visual layout and ensure proper alignment with surrounding UI elements.

                                                                                                                                              Default value

                                                                                                                                              700

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.dropDownWidth = 200;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const dropDownWidth = el.layout.dropDownWidth;
                                                                                                                                              Related APIs appearance layout refresh() change

                                                                                                                                              filterRowHeightSpecifies the height of the filter row.number

                                                                                                                                              Specifies the height of the filter row.

                                                                                                                                              Default value

                                                                                                                                              30

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.filterRowHeight = 60;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const filterRowHeight = el.layout.filterRowHeight;
                                                                                                                                              Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                              rowHeightSpecifies the height of the grid rows. Accepts the following values:- null: The row height is determined automatically based on the content.- auto: The row height adjusts automatically to fit the content of each row.- A number: Sets a fixed row height in pixels.Use this property to control the vertical sizing behavior of rows within the Grid component.string | number | null

                                                                                                                                              Specifies the height of the grid rows. Accepts the following values:

                                                                                                                                              - null: The row height is determined automatically based on the content.
                                                                                                                                              - auto: The row height adjusts automatically to fit the content of each row.
                                                                                                                                              - A number: Sets a fixed row height in pixels.

                                                                                                                                              Use this property to control the vertical sizing behavior of rows within the Grid component.

                                                                                                                                              Back to root property: layout

                                                                                                                                              Try a demo showcasing the rowHeight property.

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.rowHeight = 60;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const rowHeight = el.layout.rowHeight;
                                                                                                                                              Related APIs behavior refresh() change

                                                                                                                                              rowMinHeightSpecifies the minimum height, in pixels or other valid CSS units, that each row in the Grid layout can be resized to. This ensures that no row will be rendered shorter than the defined minimum value, regardless of the content or available space.number

                                                                                                                                              Specifies the minimum height, in pixels or other valid CSS units, that each row in the Grid layout can be resized to. This ensures that no row will be rendered shorter than the defined minimum value, regardless of the content or available space.

                                                                                                                                              Default value

                                                                                                                                              30

                                                                                                                                              Back to root property: layout

                                                                                                                                              Try a demo showcasing the rowMinHeight property.

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.rowMinHeight = 60;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const rowMinHeight = el.layout.rowMinHeight;
                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              viewBarWidthSpecifies the width of the view bar component, determining how much horizontal space it occupies within the user interface. Adjusting this value will increase or decrease the view bar's width accordingly.number

                                                                                                                                              Specifies the width of the view bar component, determining how much horizontal space it occupies within the user interface. Adjusting this value will increase or decrease the view bar's width accordingly.

                                                                                                                                              Default value

                                                                                                                                              250

                                                                                                                                              Back to root property: layout

                                                                                                                                              Examples

                                                                                                                                              Set a nested field on the element:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.layout.viewBarWidth = 200;

                                                                                                                                              Read the nested value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const viewBarWidth = el.layout.viewBarWidth;

                                                                                                                                              localeSpecifies 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.string

                                                                                                                                              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.

                                                                                                                                              Default value

                                                                                                                                              "en"
                                                                                                                                              Try a demo showcasing the locale property.

                                                                                                                                              Examples

                                                                                                                                              Markup and runtime examples for locale:

                                                                                                                                              HTML:

                                                                                                                                              <smart-grid locale="de"></smart-grid>

                                                                                                                                              Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.locale = "fr";

                                                                                                                                              Read the current value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const locale = el.locale;
                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              messagesAssigns 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. object

                                                                                                                                              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.

                                                                                                                                              Default value



                                                                                                                                              {
  "en": {
    "invalidColumnProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Column: \"{{type}}\"",
    "invalidRowProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Row\"",
    "invalidCellValue": "Invalid cell value \"{{value}}\", Validation rule: \"{{validationRule}}\"",
    "frozenColumns": "{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.",
    "frozenRows": "{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.",
    "columnGroups": "{{elementType}}: Please, check the initialization of the smartGrid's columns array. The columns in a column group are expected to be siblings in the columns array.",
    "min": "Min: {{value}}",
    "max": "Max: {{value}} ",
    "sum": "Sum: {{value}} ",
    "avg": "Avg: {{value}} ",
    "count": "Count: {{value}} ",
    "pagerFirstButton": "First",
    "pagerLastButton": "Last",
    "pagerPreviousButton": "Previous",
    "pagerNextButton": "Next",
    "pagerNavigateToLabel": "Go to:",
    "pagerPageSizeLabel": "Show:",
    "pagerNavigateToInputPlaceholder": "",
    "pagerEllipsis": "...",
    "pagerSummaryString": "of",
    "pagerSummaryPrefix": "of",
    "pagerSummarySuffix": "",
    "columnMenuCustomizeType": "Customize type",
    "columnMenuItemRename": "Rename",
    "columnMenuItemEditDescription": "Edit description",
    "columnMenuItemDuplicate": "Duplicate",
    "columnMenuItemInsertLeft": "Insert left",
    "columnMenuItemInsertRight": "Insert right",
    "columnMenuItemSortAsc": "Sort {{mode}}",
    "columnMenuItemSortDesc": "Sort {{mode}}",
    "columnMenuItemRemoveSort": "Remove Sort",
    "columnMenuItemFilter": "Filter",
    "columnMenuItemRemoveFilter": "Remove Filter",
    "columnMenuItemGroupBy": "Group by this column",
    "columnMenuItemRemoveGroupBy": "Remove Group",
    "columnMenuItemHide": "Hide",
    "columnMenuItemDelete": "Delete",
    "columnResizeTooltip": "width: {{value}}px",
    "rowResizeTooltip": "height: {{value}}px",
    "commandBarAddRow": "Add",
    "commandBarDeleteRow": "Delete",
    "commandBarBatchRevert": "Revert",
    "commandBarBatchSave": "Save",
    "commandBarFilter": "Filter",
    "commandBarSort": "Sort",
    "commandBarSearch": "Search",
    "commandBarCustomize": "Customize",
    "commandBarGroup": "Group",
    "commandColumnEdit": "Edit",
    "commandColumnDelete": "Delete",
    "commandColumnCancel": "Cancel",
    "commandColumnUpdate": "Update",
    "commandColumnMenu": "",
    "expandRow": "Expand row",
    "collapseRow": "Collapse row",
    "addNewRow": "Click here to add a new row",
    "addNewColumn": "Click here to add a new column",
    "dialogChartHeader": "{{value}} Chart",
    "dialogRowDetailHeader": "Row Id: {{value}}",
    "dialogDescriptionHeader": "Column: {{value}}",
    "dialogRowDetailButtonConfirm": "OK",
    "dialogRowDetailButtonCancel": "CANCEL",
    "dialogEditHeader": "Edit {{value}}",
    "dialogAddButtonConfirm": "ADD",
    "dialogAddButtonCancel": "CANCEL",
    "dialogEditButtonConfirm": "OK",
    "dialogEditButtonCancel": "CANCEL",
    "dialogFilterButtonConfirm": "FILTER",
    "dialogFilterButtonCancel": "CLEAR",
    "dialogDeleteButtonConfirm": "DELETE",
    "dialogDeleteButtonCancel": "CANCEL",
    "dialogEditColumn": "Column: {{value}}",
    "dialogAddColumn": "Add Column",
    "dialogAddHeader": "Add Row",
    "dialogDeleteHeader": "Delete Row",
    "dialogFilterHeader": "Filter by",
    "dialogFilterMinLabel": "Min",
    "dialogFilterMaxLabel": "Max",
    "conditionalFormatting": "Conditional Formatting",
    "groupBarLabel": "Drag a column header here to group by that column",
    "dialogDeleteContent": "Are you sure you want to delete this row?",
    "calendar": {
      "/": "/",
      ":": ":",
      "firstDay": 0,
      "days": {
        "names": [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday"
        ],
        "namesAbbr": [
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat"
        ],
        "namesShort": [
          "Su",
          "Mo",
          "Tu",
          "We",
          "Th",
          "Fr",
          "Sa"
        ]
      },
      "months": {
        "names": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December",
          ""
        ],
        "namesAbbr": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
          ""
        ]
      },
      "AM": [
        "AM",
        "am",
        "AM"
      ],
      "PM": [
        "PM",
        "pm",
        "PM"
      ],
      "eras": [
        {
          "name": "A.D.",
          "start": null,
          "offset": 0
        }
      ],
      "currencySymbol": "$",
      "currency": "USD",
      "currencySymbolPosition": "before",
      "decimalSeparator": ".",
      "thousandsSeparator": ","
    },
    "CONTAINS": "Contains",
    "DOES_NOT_CONTAIN": "Does not contain",
    "ENDS_WITH": "Ends with",
    "EQUAL": "Equal",
    "GREATER_THAN": "Greater than",
    "GREATER_THAN_OR_EQUAL": "Greater than or equal",
    "LESS_THAN": "Less than",
    "LESS_THAN_OR_EQUAL": "Less than or equal",
    "NOT_EQUAL": "Not equal",
    "RANGE": "Range",
    "CLEAR_FILTER": "Clear Filter",
    "STARTS_WITH": "Starts with",
    "addFilter": "+ Add filter",
    "and": "And",
    "apply": "Apply",
    "booleanFirst": "☐",
    "booleanLast": "☑",
    "cancel": "Cancel",
    "CONTAINS_CASE_SENSITIVE": "Contains (case sensitive)",
    "dateFirst": "1",
    "dateLast": "9",
    "DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)",
    "EMPTY": "empty",
    "ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)",
    "EQUAL_CASE_SENSITIVE": "equal (case sensitive)",
    "filter": "Filter",
    "customize": "Customize Columns",
    "filteredByMultiple": "{{n}} filters",
    "filteredByOne": "1 filter",
    "filterValuePlaceholder": "Value",
    "find": "Find a field",
    "findInView": "Find in view",
    "firstBy": "Sort by",
    "found": "{{nth}} of {{n}}",
    "from": "from",
    "noFilters": "No filters applied",
    "noResults": "No results",
    "noSorting": "No sorting applied",
    "NOT_EMPTY": "not empty",
    "NOT_NULL": "not null",
    "NULL": "null",
    "numberFirst": "1",
    "numberLast": "9",
    "ok": "OK",
    "or": "Or",
    "pickAnother": "Pick another field to sort by",
    "sort": "Sort",
    "group": "Group",
    "sortedByMultiple": "Sorted by {{n}} fields",
    "sortedByOne": "Sorted by 1 field",
    "STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)",
    "stringFirst": "A",
    "stringLast": "Z",
    "thenBy": "then by",
    "where": "Where",
    "collapseAll": "Collapse all",
    "expandAll": "Expand all",
    "noGrouping": "No grouping",
    "groupedByMultiple": "{{n}} groups",
    "groupedByOne": "1 group",
    "firstByGroup": "Group by",
    "pickAnotherGroupBy": "Pick another field to group by",
    "add": "Add condition",
    "all": "All columns",
    "between": "Between",
    "close": "Close",
    "column": "Column:",
    "condition": "Condition:",
    "equal": "Equal To",
    "fontFamily": "Font family:",
    "fontSize": "Font size:",
    "format": "Format:",
    "greaterThan": "Greater Than",
    "highlight": "Highlight",
    "lessThan": "Less Than",
    "notEqual": "Not Equal To",
    "remove": "Remove condition",
    "secondValue": "Second value:",
    "text": "Text",
    "value": "Value:",
    "addCondition": "Add Condition",
    "addGroup": "Add Group",
    "blanks": "(Blanks)",
    "clear": "Clear",
    "contains": "contains",
    "containsCaseSensitive": "contains (case sensitive)",
    "dateTabLabel": "DATE",
    "doesNotContain": "does not contain",
    "doesNotContainCaseSensitive": "does not contain (case sensitive)",
    "empty": "empty",
    "endsWith": "ends with",
    "endsWithCaseSensitive": "ends with (case sensitive)",
    "equalCaseSensitive": "equal (case sensitive)",
    "greaterThanOrEqual": "greater than or equal",
    "lessThanOrEqual": "less than or equal",
    "mismatchedProperties": "smartFilterPanel: The 'filterType' and the data type of the selected 'dataField' are mismatched.",
    "missingProperty": "smartFilterPanel: When mode is \"excel\", either \"data\" and \"dataField\" or \"dataSource\" of type Array have to be set.",
    "notEmpty": "not empty",
    "notNull": "not null",
    "null": "null ",
    "placeholderBoolean": "Select value",
    "placeholderDate": "Enter date",
    "placeholderNumber": "Enter number",
    "placeholderTime": "Enter time",
    "placeholderValue": "Enter value",
    "selectAll": "(Select All)",
    "showRows": "Show rows where:",
    "startsWith": "starts with",
    "startsWithCaseSensitive": "starts with (case sensitive)",
    "matchCase": "Match Case",
    "timeTabLabel": "TIME",
    "today": "Today",
    "formatColumn": "Format Column",
    "formating": "Conditional Formatting",
    "reset": "Reset",
    "filteredRecords": "All rows are filtered",
    "duplicateCells": "Clone column cells and settings",
    "duplicateSettings": "Clone column settings",
    "views": "Views",
    "noView": "No view",
    "myView": "My view",
    "saveView": "New view",
    "kanbanView": "View your records as cards on a Kanban board",
    "gridView": "View your records in a Table",
    "cardView": "View your records in a Card view",
    "days": "{{value}}d",
    "daysOverdue": "{{value}} days overdue",
    "daysLeft": "{{value}} days left",
    "true": "true",
    "false": "false",
    "TOMORROW": "Tomorrow",
    "TODAY": "Today",
    "YESTERDAY": "Yesterday",
    "NEXT_WEEK": "Next week",
    "THIS_WEEK": "This week",
    "LAST_WEEK": "Last week",
    "NEXT_MONTH": "Next month",
    "THIS_MONTH": "This month",
    "LAST_MONTH": "Last month",
    "hideHiddenColumns": "Hide {{value}} hidden columns",
    "showHiddenColumns": "Show {{value}} hidden columns",
    "less": "Less",
    "more": "More",
    "conditions": "Conditions",
    "colorsSingleSelect": "Which single select field should the row be colored by?",
    "colorRows": "Color rows when they match the conditions",
    "colorSelect": "Color rows the same as a single select value",
    "colorLeftBorderLabel": "Left border",
    "colorRowLabel": "Row",
    "colorCellLabel": "Cell",
    "colorLeftBorder": "Color the left border of a row",
    "colorRow": "Color the background of a row",
    "colorCell": "Color the background of a cell",
    "loadingIndicatorPlaceholder": "Loading...",
    "dropDownPlaceholder": "Please select...",
    "placeholder": "No Rows"
  }
}

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onAfterInitCallback function that is executed after the grid has completed initialization and its Virtual DOM has been fully constructed. This allows you to perform any additional setup or actions that require the grid and its DOM elements to be ready.{(): void}

                                                                                                                                              Callback function that is executed after the grid has completed initialization and its Virtual DOM has been fully constructed. This allows you to perform any additional setup or actions that require the grid and its DOM elements to be ready.

                                                                                                                                              onBeforeInitCallback function that is executed before the grid initialization process begins. At this stage, the Grid's Virtual DOM has not yet been created, so any DOM manipulations or operations on grid elements should be avoided within this callback. Use this function to perform setup tasks or configure options that need to occur prior to the creation of the grid's internal structure.{(): void}

                                                                                                                                              Callback function that is executed before the grid initialization process begins. At this stage, the Grid's Virtual DOM has not yet been created, so any DOM manipulations or operations on grid elements should be avoided within this callback. Use this function to perform setup tasks or configure options that need to occur prior to the creation of the grid's internal structure.

                                                                                                                                              onCellBeginEditA callback function that is triggered when a cell enters edit mode. This function allows you to implement custom logic before editing begins. If the function returns false, the cell edit operation will be canceled and the cell will remain in its previous state. Use this to validate whether editing should be permitted based on your criteria.{(id: string, dataField: string, value: any): boolean}

                                                                                                                                              A callback function that is triggered when a cell enters edit mode. This function allows you to implement custom logic before editing begins. If the function returns false, the cell edit operation will be canceled and the cell will remain in its previous state. Use this to validate whether editing should be permitted based on your criteria.

                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              onCellClass "This callback function, when provided to the Grid, is invoked for each cell to determine the CSS class(es) that should be applied. Use this function to dynamically assign one or more CSS classes to individual cells based on their data, state, or other custom logic."{(index: number, string, cellValue: any, data: any, row: Smart.Grid.Row[]): void}


                                                                                                                                              "This callback function, when provided to the Grid, is invoked for each cell to determine the CSS class(es) that should be applied. Use this function to dynamically assign one or more CSS classes to individual cells based on their data, state, or other custom logic."

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onCellEditRequestA callback function that is triggered when a cell editing operation finishes in the Grid. This function is typically used together with the 'editing.readOnlyEdit' property set to true, which allows cells to appear read-only but still be editable through custom logic. The primary purpose of this callback is to handle post-editing actions, such as validating the input, processing changes, or updating the cell value in the Grid after the editing session ends. Use this function to programmatically update the data source or UI based on the user’s edits.{(id: string, dataField: string, value: any, oldValue: any, data: any): void}



                                                                                                                                              A callback function that is triggered when a cell editing operation finishes in the Grid. This function is typically used together with the 'editing.readOnlyEdit' property set to true, which allows cells to appear read-only but still be editable through custom logic. The primary purpose of this callback is to handle post-editing actions, such as validating the input, processing changes, or updating the cell value in the Grid after the editing session ends. Use this function to programmatically update the data source or UI based on the user’s edits.

                                                                                                                                              Try a demo showcasing the onCellEditRequest property.
                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onCellRenderA callback function that is invoked each time a cell is rendered in the grid. Use this function to modify or customize the properties of the GridCell before it is displayed to the user. This allows you to dynamically apply styles, set attributes, or inject content based on the cell's data or state.{(cell: Smart.Grid.Cell): void}

                                                                                                                                              A callback function that is invoked each time a cell is rendered in the grid. Use this function to modify or customize the properties of the GridCell before it is displayed to the user. This allows you to dynamically apply styles, set attributes, or inject content based on the cell's data or state.

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onCellUpdateCallback function that is triggered whenever a cell's value is about to be updated. You can use this function, for example, to perform an Ajax call to your server in order to validate or process the proposed cell changes before they are applied. If the server response indicates that the changes are valid, call the confirm function provided in the callback to finalize and apply the update. This allows for asynchronous validation and external control over cell modification in your data grid.{(cells: Smart.Grid.Cell[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}

                                                                                                                                              Callback function that is triggered whenever a cell's value is about to be updated. You can use this function, for example, to perform an Ajax call to your server in order to validate or process the proposed cell changes before they are applied. If the server response indicates that the changes are valid, call the confirm function provided in the callback to finalize and apply the update. This allows for asynchronous validation and external control over cell modification in your data grid.

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onCellValueCallback function invoked each time the Grid component requires a cell value for rendering. By implementing this function, you can customize or override the default logic used to retrieve and display cell values, enabling support for computed values, formatted data, or specialized rendering based on row or column context.{(cell: Smart.Grid.Cell): void}

                                                                                                                                              Callback function invoked each time the Grid component requires a cell value for rendering. By implementing this function, you can customize or override the default logic used to retrieve and display cell values, enabling support for computed values, formatted data, or specialized rendering based on row or column context.

                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              onCellValueChangedInvoked whenever a cell's value is updated, this callback function receives relevant information about the change—such as the new value, the previous value, and cell metadata—allowing you to handle updates, trigger side effects, or implement custom logic in response to user edits.{(id: string, dataField: string, value: any): boolean}

                                                                                                                                              Invoked whenever a cell's value is updated, this callback function receives relevant information about the change—such as the new value, the previous value, and cell metadata—allowing you to handle updates, trigger side effects, or implement custom logic in response to user edits.

                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              onChartInitCallback function (chart: Smart.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.Smart.Chart

                                                                                                                                              Callback function (chart: Smart.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.

                                                                                                                                              Related APIs appearance layout refresh() change

                                                                                                                                              onColumnCloneCallback function that is invoked immediately after a column has been successfully cloned. This function receives relevant context or event data as its arguments, allowing you to perform custom logic or side effects in response to the cloning action.{(dataField: string, cloneColumnDataField: string, index: number, duplicateCells: boolean): void}

                                                                                                                                              Callback function that is invoked immediately after a column has been successfully cloned. This function receives relevant context or event data as its arguments, allowing you to perform custom logic or side effects in response to the cloning action.

                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              onColumnInitCallback function that is invoked after a column has been initialized. This function receives the column instance as a parameter and can be used to modify column properties, apply custom settings, or perform additional setup specific to that column. Use this callback to tailor column behavior or appearance during the initialization process.{(index: number, column: Smart.Grid.Column): void}

                                                                                                                                              Callback function that is invoked after a column has been initialized. This function receives the column instance as a parameter and can be used to modify column properties, apply custom settings, or perform additional setup specific to that column. Use this callback to tailor column behavior or appearance during the initialization process.

                                                                                                                                              Related APIs appearance layout refresh() change

                                                                                                                                              onColumnInsertedCallback function that is invoked whenever a new column is successfully inserted into the structure or component. This function receives relevant information about the inserted column, allowing you to perform custom logic or updates in response to the insertion event.{(index: number, column: Smart.Grid.Column): void}

                                                                                                                                              Callback function that is invoked whenever a new column is successfully inserted into the structure or component. This function receives relevant information about the inserted column, allowing you to perform custom logic or updates in response to the insertion event.

                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              onColumnRemovedCallback function that is triggered after a column has been successfully removed. This function receives relevant information about the removed column as its arguments, allowing you to perform additional actions or updates in response to the removal event.{(index: number, column: Smart.Grid.Column): void}

                                                                                                                                              Callback function that is triggered after a column has been successfully removed. This function receives relevant information about the removed column as its arguments, allowing you to perform additional actions or updates in response to the removal event.

                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                              onColumnUpdatedCallback function that is invoked whenever the data in a column is updated. Receives relevant information about the updated column, such as the column identifier and the new value, allowing you to implement custom behavior in response to column changes.{(index: number, column: Smart.Grid.Column): void}

                                                                                                                                              Callback function that is invoked whenever the data in a column is updated. Receives relevant information about the updated column, such as the column identifier and the new value, allowing you to implement custom behavior in response to column changes.

                                                                                                                                              Related APIs behavior refresh() change

                                                                                                                                              onCommandCallback function that is triggered when a command is executed. - The name parameter specifies the name of the command. - The command parameter refers to the function that implements the command’s logic. - The details parameter contains the arguments for the command, as provided by the Grid. - The handled parameter is a flag you can set to true within the callback to prevent the Grid from executing the command’s default behavior, allowing you to fully override or customize the command’s handling.{(name: string, command: any, details: Smart.Grid.Cell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void}

                                                                                                                                              Callback function that is triggered when a command is executed.
                                                                                                                                              - The name parameter specifies the name of the command.
                                                                                                                                              - The command parameter refers to the function that implements the command’s logic.
                                                                                                                                              - The details parameter contains the arguments for the command, as provided by the Grid.
                                                                                                                                              - The handled parameter is a flag you can set to true within the callback to prevent the Grid from executing the command’s default behavior, allowing you to fully override or customize the command’s handling.

                                                                                                                                              Try a demo showcasing the onCommand property.
                                                                                                                                              Related APIs behavior refresh() change

                                                                                                                                              onInitCallback function invoked during the grid initialization process, specifically after the Grid's Virtual DOM has been created. This allows you to perform custom actions or setup logic once the grid structure is ready in the DOM, but before it is rendered to the user.{(): void}

                                                                                                                                              Callback function invoked during the grid initialization process, specifically after the Grid's Virtual DOM has been created. This allows you to perform custom actions or setup logic once the grid structure is ready in the DOM, but before it is rendered to the user.

                                                                                                                                              onKeyCallback function (event: KeyboardEvent) that is invoked whenever the grid component has focus and the user presses any keyboard key. This function allows you to handle and respond to keyboard interactions within the grid, accessing the pressed key and related event properties via the KeyboardEvent object.{(event: KeyboardEvent): void}

                                                                                                                                              Callback function (event: KeyboardEvent) that is invoked whenever the grid component has focus and the user presses any keyboard key. This function allows you to handle and respond to keyboard interactions within the grid, accessing the pressed key and related event properties via the KeyboardEvent object.

                                                                                                                                              Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                              onLoadCallback 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.any

                                                                                                                                              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.

                                                                                                                                              Try a demo showcasing the onLoad property.
                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onRenderA 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.any

                                                                                                                                              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.

                                                                                                                                              Try a demo showcasing the onRender property.

                                                                                                                                              onRowClassThis callback function is invoked by the Grid component, if provided, for each row. It is used to determine and return the CSS class name(s) that should be applied to the specific row, allowing for dynamic or conditional styling based on the row data or index.{(index: number, data: any, row: Smart.Grid.Row[]): void}

                                                                                                                                              This callback function is invoked by the Grid component, if provided, for each row. It is used to determine and return the CSS class name(s) that should be applied to the specific row, allowing for dynamic or conditional styling based on the row data or index.

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onRowDetailInitCallback function invoked during the initialization of a row’s detail section. This function is triggered before the row detail is rendered, allowing you to customize or modify the detail content. Row details can be displayed either directly beneath the associated row in the main data table, or within a separate dialog window, depending on the configuration.{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}

                                                                                                                                              Callback function invoked during the initialization of a row’s detail section. This function is triggered before the row detail is rendered, allowing you to customize or modify the detail content. Row details can be displayed either directly beneath the associated row in the main data table, or within a separate dialog window, depending on the configuration.

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onRowDetailUpdatedCallback function that is invoked when the details of a table row are being updated. This function allows you to implement custom logic or handle events during the row detail update process.{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}

                                                                                                                                              Callback function that is invoked when the details of a table row are being updated. This function allows you to implement custom logic or handle events during the row detail update process.

                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              onRowHistoryA callback function that is triggered whenever a row’s edit history is updated. This function is invoked only if the 'storeHistory' property is enabled, ensuring that all changes made to a row are recorded. Use this callback to handle actions such as syncing changes, auditing edits, or updating related UI components whenever a row’s edit history changes.{(index: number, row: Smart.Grid.Row, history: any[]): void}

                                                                                                                                              A callback function that is triggered whenever a row’s edit history is updated. This function is invoked only if the 'storeHistory' property is enabled, ensuring that all changes made to a row are recorded. Use this callback to handle actions such as syncing changes, auditing edits, or updating related UI components whenever a row’s edit history changes.

                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              onRowInitCallback function invoked during the initialization of a row. Use this function to customize row properties, apply conditional logic, or modify row data before it is rendered. The function receives the row's data and context as parameters, allowing for dynamic adjustments based on specific requirements.{(index: number, row: Smart.Grid.Row): void}

                                                                                                                                              Callback function invoked during the initialization of a row. Use this function to customize row properties, apply conditional logic, or modify row data before it is rendered. The function receives the row's data and context as parameters, allowing for dynamic adjustments based on specific requirements.

                                                                                                                                              Try a demo showcasing the onRowInit property.
                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onRowInsertedCallback function that is executed immediately after a new row has been successfully inserted. It receives relevant information about the newly inserted row as arguments, allowing you to perform custom actions or post-processing in response to the insertion event.{(index: number[], row: Smart.Grid.Row[]): void}

                                                                                                                                              Callback function that is executed immediately after a new row has been successfully inserted. It receives relevant information about the newly inserted row as arguments, allowing you to perform custom actions or post-processing in response to the insertion event.

                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              onRowMouseEnterCallback function invoked when the mouse enters a row.{(row: Smart.Grid.Row, event: any): void}

                                                                                                                                              Callback function invoked when the mouse enters a row.

                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              onRowMouseLeaveCallback function invoked when the mouse leaves a row.{(row: Smart.Grid.Row, event: any): void}

                                                                                                                                              Callback function invoked when the mouse leaves a row.

                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                              onRowRemovedA callback function that is executed immediately after a row has been successfully removed from the data set or table. This function receives relevant information about the removed row, allowing you to perform custom actions such as updating the UI, triggering notifications, or handling related cleanup tasks.{(indexes: number[], rows: Smart.Grid.Row[]): void}

                                                                                                                                              A callback function that is executed immediately after a row has been successfully removed from the data set or table. This function receives relevant information about the removed row, allowing you to perform custom actions such as updating the UI, triggering notifications, or handling related cleanup tasks.

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onRowStyleCallback function triggered when the style of a row is updated. This event occurs whenever a row's styling changes, either through the row dialog interface or programmatically via the setRowStyle method. The callback receives relevant information about the updated row and its new style, enabling custom handling or additional processing in response to the style change.{(index: number, row: Smart.Grid.Row, history: any[]): void}

                                                                                                                                              Callback function triggered when the style of a row is updated. This event occurs whenever a row's styling changes, either through the row dialog interface or programmatically via the setRowStyle method. The callback receives relevant information about the updated row and its new style, enabling custom handling or additional processing in response to the style change.

                                                                                                                                              Related APIs appearance layout refresh() change

                                                                                                                                              onRowUpdateCallback function triggered when a row's cell values are updated. Use this function to perform custom actions—such as making an AJAX request to the server to validate the edited data. After receiving validation results, if the changes are approved, call the confirm function to finalize the update.{(index: number[], row: Smart.Grid.Row[], oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}

                                                                                                                                              Callback function triggered when a row's cell values are updated. Use this function to perform custom actions—such as making an AJAX request to the server to validate the edited data. After receiving validation results, if the changes are approved, call the confirm function to finalize the update.

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              onRowUpdatedCallback function that is invoked immediately after a row has been updated. Receives the updated row data and additional context as parameters, enabling custom logic or side effects in response to row changes.{(index: number[], row: Smart.Grid.Row[]): void}

                                                                                                                                              Callback function that is invoked immediately after a row has been updated. Receives the updated row data and additional context as parameters, enabling custom logic or side effects in response to row changes.

                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                              pageableEnables paging. Shorthand: sets pager.visible and paging.enabled to true.boolean

                                                                                                                                              Enables paging. Shorthand: sets pager.visible and paging.enabled to true.

                                                                                                                                              Default value

                                                                                                                                              false

                                                                                                                                              Examples

                                                                                                                                              Markup and runtime examples for pageable:

                                                                                                                                              HTML attribute:

                                                                                                                                              <smart-grid pageable></smart-grid>

                                                                                                                                              Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                              const el = document.querySelector('smart-grid');
el.pageable = true;

                                                                                                                                              Read the current value:

                                                                                                                                              const el = document.querySelector('smart-grid');
const pageable = el.pageable;
                                                                                                                                              Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                              pagerProvides 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. Click for more details. Property object's options:
                                                                                                                                                 object

                                                                                                                                                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.

                                                                                                                                                Properties

                                                                                                                                                autoEllipsisSpecifies how ellipsis ("...") should be displayed when text overflows its container. This option determines the placement or behavior of the ellipsis, such as at the start, middle, or end of the truncated text.
                                                                                                                                                navigationButtonsProvides configuration options for the navigation buttons, including their appearance, labels, order, and behavior within the user interface. Click for more details. Property object's options:
                                                                                                                                                • position:string - Specifies the placement of the navigation buttons within the user interface, allowing you to control where the buttons appear (e.g., top, bottom, left, right, or custom positions) relative to the navigational content.
                                                                                                                                                • prevNextButtons:object - Defines the configuration options for the "Previous Page" and "Next Page" buttons, including their appearance, labels, behavior, and navigation functionality within paginated interfaces.
                                                                                                                                                • firstLastButtons:object - Provides configuration options for the "First Page" and "Last Page" navigation buttons, specifying their appearance, behavior, and accessibility settings within the user interface.
                                                                                                                                                • labels:object - Provides detailed configuration options for customizing the text labels displayed on navigation buttons, allowing you to specify and modify the button captions used in the navigation interface.
                                                                                                                                                navigationInputProvides detailed configuration options for navigation input methods, specifying how users can interact with and navigate through the interface. This includes settings such as input devices supported (keyboard, mouse, touch, etc.), navigation modes, and any customization options for user interaction.
                                                                                                                                                pageIndexSelectorsProvides configuration options for the appearance and behavior of the numeric pagination buttons, including properties such as the number of buttons displayed, styling, and event handlers for user interaction.
                                                                                                                                                pageSizeSelectorSpecifies the configuration options for determining the number of data rows displayed per page in a paginated view. This setting allows users to control how many items are visible at once, enhancing readability and navigation within data tables or lists. Click for more details. Property object's options:
                                                                                                                                                • visible:boolean - Controls whether the 'Rows Per Page' dropdown is displayed, allowing users to specify how many rows are shown per page in a paginated table or list.
                                                                                                                                                • dataSource:object - Specifies the number of rows displayed on each page when using the 'rows per page' pagination option. This determines how many items are visible to the user before navigation controls (such as next/previous page) are required.
                                                                                                                                                • position:string - Specifies the placement of the 'Rows per page' selection control within the pagination component, determining where users can adjust how many items are displayed on each page.
                                                                                                                                                positionSpecifies the location where the pager (pagination controls) will be displayed within the user interface, such as at the top, bottom, or both positions of the component.
                                                                                                                                                summaryProvides a detailed configuration for summary settings, specifying options such as display format, data aggregation methods, visibility controls, and customization preferences for how summaries are generated and presented within the application.
                                                                                                                                                templateDefines the structure and layout template used to render the pager component, specifying how its elements (such as navigation buttons, page numbers, and labels) are displayed in the user interface.
                                                                                                                                                visibleControls whether the pager component is visible to users. Set to true to display the pager, or false to hide it.
                                                                                                                                                Try a demo showcasing the pager property.

                                                                                                                                                Full working example

                                                                                                                                                Minimal setup for paging & pager with the data and bindings you usually use together on this component.

                                                                                                                                                JavaScript — minimal grid with paging & pager:

                                                                                                                                                // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const paging = { enabled: true };
const pager = { visible: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	paging,
	pager
});
                                                                                                                                                Related APIs paging goToPage() nextPage() prevPage() page

                                                                                                                                                autoEllipsisSpecifies how ellipsis ("...") should be displayed when text overflows its container. This option determines the placement or behavior of the ellipsis, such as at the start, middle, or end of the truncated text."none" | "before" | "after" | "both"

                                                                                                                                                Specifies how ellipsis ("...") should be displayed when text overflows its container. This option determines the placement or behavior of the ellipsis, such as at the start, middle, or end of the truncated text.

                                                                                                                                                Default value

                                                                                                                                                "both"

                                                                                                                                                Back to root property: pager

                                                                                                                                                Try a demo showcasing the autoEllipsis property.

                                                                                                                                                Read the nested value:

                                                                                                                                                const el = document.querySelector('smart-grid');
const autoEllipsis = el.pager.autoEllipsis;
                                                                                                                                                Related APIs behavior refresh() change

                                                                                                                                                navigationButtonsProvides configuration options for the navigation buttons, including their appearance, labels, order, and behavior within the user interface. Click for more details. Property object's options:
                                                                                                                                                   object

                                                                                                                                                  Provides configuration options for the navigation buttons, including their appearance, labels, order, and behavior within the user interface.

                                                                                                                                                  Properties

                                                                                                                                                  firstLastButtonsProvides configuration options for the "First Page" and "Last Page" navigation buttons, specifying their appearance, behavior, and accessibility settings within the user interface.
                                                                                                                                                  labelsProvides detailed configuration options for customizing the text labels displayed on navigation buttons, allowing you to specify and modify the button captions used in the navigation interface.
                                                                                                                                                  positionSpecifies the placement of the navigation buttons within the user interface, allowing you to control where the buttons appear (e.g., top, bottom, left, right, or custom positions) relative to the navigational content.
                                                                                                                                                  prevNextButtonsDefines the configuration options for the "Previous Page" and "Next Page" buttons, including their appearance, labels, behavior, and navigation functionality within paginated interfaces.

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const navigationButtons = el.pager.navigationButtons;
                                                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                                                  firstLastButtonsProvides configuration options for the "First Page" and "Last Page" navigation buttons, specifying their appearance, behavior, and accessibility settings within the user interface. object

                                                                                                                                                  Provides configuration options for the "First Page" and "Last Page" navigation buttons, specifying their appearance, behavior, and accessibility settings within the user interface.

                                                                                                                                                  Properties

                                                                                                                                                  visibleControls whether the 'First Page' and 'Last Page' navigation buttons are displayed, allowing users to quickly jump to the beginning or end of a paginated list. Set this option to determine if these navigation buttons should be visible in the pagination controls.

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const firstLastButtons = el.pager.navigationButtons[0].firstLastButtons;
                                                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                                                  visibleControls whether the 'First Page' and 'Last Page' navigation buttons are displayed, allowing users to quickly jump to the beginning or end of a paginated list. Set this option to determine if these navigation buttons should be visible in the pagination controls.boolean

                                                                                                                                                  Controls whether the 'First Page' and 'Last Page' navigation buttons are displayed, allowing users to quickly jump to the beginning or end of a paginated list. Set this option to determine if these navigation buttons should be visible in the pagination controls.

                                                                                                                                                  Default value

                                                                                                                                                  true

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.pager.navigationButtons[0].firstLastButtons[0].visible;
                                                                                                                                                  Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                  labelsProvides detailed configuration options for customizing the text labels displayed on navigation buttons, allowing you to specify and modify the button captions used in the navigation interface. object

                                                                                                                                                  Provides detailed configuration options for customizing the text labels displayed on navigation buttons, allowing you to specify and modify the button captions used in the navigation interface.

                                                                                                                                                  Properties

                                                                                                                                                  visibleDetermines whether the labels for navigation buttons are visible to users. When enabled, text labels appear alongside the navigation buttons, providing additional context or descriptions; when disabled, only the button icons are displayed.

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the labels property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const labels = el.pager.navigationButtons[0].labels;

                                                                                                                                                  visibleDetermines whether the labels for navigation buttons are visible to users. When enabled, text labels appear alongside the navigation buttons, providing additional context or descriptions; when disabled, only the button icons are displayed.boolean

                                                                                                                                                  Determines whether the labels for navigation buttons are visible to users. When enabled, text labels appear alongside the navigation buttons, providing additional context or descriptions; when disabled, only the button icons are displayed.

                                                                                                                                                  Default value

                                                                                                                                                  false

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.pager.navigationButtons[0].labels[0].visible;

                                                                                                                                                  positionSpecifies the placement of the navigation buttons within the user interface, allowing you to control where the buttons appear (e.g., top, bottom, left, right, or custom positions) relative to the navigational content."near" | "far" | "both"

                                                                                                                                                  Specifies the placement of the navigation buttons within the user interface, allowing you to control where the buttons appear (e.g., top, bottom, left, right, or custom positions) relative to the navigational content.

                                                                                                                                                  Default value

                                                                                                                                                  "both"

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const position = el.pager.navigationButtons[0].position;

                                                                                                                                                  prevNextButtonsDefines the configuration options for the "Previous Page" and "Next Page" buttons, including their appearance, labels, behavior, and navigation functionality within paginated interfaces. object

                                                                                                                                                  Defines the configuration options for the "Previous Page" and "Next Page" buttons, including their appearance, labels, behavior, and navigation functionality within paginated interfaces.

                                                                                                                                                  Properties

                                                                                                                                                  visibleControls whether the 'Previous Page' and 'Next Page' navigation buttons are visible to the user. Set to 'true' to display the buttons, or 'false' to hide them. This option allows you to customize the pagination controls in the interface.

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const prevNextButtons = el.pager.navigationButtons[0].prevNextButtons;
                                                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                                                  visibleControls whether the 'Previous Page' and 'Next Page' navigation buttons are visible to the user. Set to 'true' to display the buttons, or 'false' to hide them. This option allows you to customize the pagination controls in the interface.boolean

                                                                                                                                                  Controls whether the 'Previous Page' and 'Next Page' navigation buttons are visible to the user. Set to 'true' to display the buttons, or 'false' to hide them. This option allows you to customize the pagination controls in the interface.

                                                                                                                                                  Default value

                                                                                                                                                  true

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.pager.navigationButtons[0].prevNextButtons[0].visible;
                                                                                                                                                  Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                  navigationInputProvides detailed configuration options for navigation input methods, specifying how users can interact with and navigate through the interface. This includes settings such as input devices supported (keyboard, mouse, touch, etc.), navigation modes, and any customization options for user interaction. object

                                                                                                                                                  Provides detailed configuration options for navigation input methods, specifying how users can interact with and navigate through the interface. This includes settings such as input devices supported (keyboard, mouse, touch, etc.), navigation modes, and any customization options for user interaction.

                                                                                                                                                  Properties

                                                                                                                                                  positionSpecifies the placement of the navigation input element within the user interface, determining where the navigation control appears on the screen (e.g., top, bottom, left, or right). This setting allows developers to customize the navigation experience according to the application's layout requirements.
                                                                                                                                                  visibleControls whether the navigation input option is visible to users. When enabled, the navigation input will be displayed in the user interface; when disabled, it will be hidden. This property allows developers to dynamically show or hide navigation options based on application state or user permissions.

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const navigationInput = el.pager.navigationInput;

                                                                                                                                                  positionSpecifies the placement of the navigation input element within the user interface, determining where the navigation control appears on the screen (e.g., top, bottom, left, or right). This setting allows developers to customize the navigation experience according to the application's layout requirements."near" | "far"

                                                                                                                                                  Specifies the placement of the navigation input element within the user interface, determining where the navigation control appears on the screen (e.g., top, bottom, left, or right). This setting allows developers to customize the navigation experience according to the application's layout requirements.

                                                                                                                                                  Default value

                                                                                                                                                  "far"

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const position = el.pager.navigationInput.position;

                                                                                                                                                  visibleControls whether the navigation input option is visible to users. When enabled, the navigation input will be displayed in the user interface; when disabled, it will be hidden. This property allows developers to dynamically show or hide navigation options based on application state or user permissions.boolean

                                                                                                                                                  Controls whether the navigation input option is visible to users. When enabled, the navigation input will be displayed in the user interface; when disabled, it will be hidden. This property allows developers to dynamically show or hide navigation options based on application state or user permissions.

                                                                                                                                                  Default value

                                                                                                                                                  false

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.pager.navigationInput.visible;

                                                                                                                                                  pageIndexSelectorsProvides configuration options for the appearance and behavior of the numeric pagination buttons, including properties such as the number of buttons displayed, styling, and event handlers for user interaction. object

                                                                                                                                                  Provides configuration options for the appearance and behavior of the numeric pagination buttons, including properties such as the number of buttons displayed, styling, and event handlers for user interaction.

                                                                                                                                                  Properties

                                                                                                                                                  dataSourceSpecifies the maximum number of page navigation buttons displayed at once in the pagination control. This determines how many page links are visible to the user before additional pages are hidden or collapsed (e.g., with ellipsis).
                                                                                                                                                  visibleControls whether numeric page buttons (representing individual page numbers in pagination controls) are displayed to the user. When enabled, numbered buttons appear, allowing direct navigation to specific pages. When disabled, these numeric buttons are hidden, and users may need to rely on other navigation methods such as "Next" or "Previous" buttons.

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the pageIndexSelectors property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const pageIndexSelectors = el.pager.pageIndexSelectors;
                                                                                                                                                  Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                  dataSourceSpecifies the maximum number of page navigation buttons displayed at once in the pagination control. This determines how many page links are visible to the user before additional pages are hidden or collapsed (e.g., with ellipsis).any

                                                                                                                                                  Specifies the maximum number of page navigation buttons displayed at once in the pagination control. This determines how many page links are visible to the user before additional pages are hidden or collapsed (e.g., with ellipsis).

                                                                                                                                                  Default value

                                                                                                                                                  10

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the dataSource property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const dataSource = el.pager.pageIndexSelectors[0].dataSource;
                                                                                                                                                  Related APIs refresh() beginUpdate() endUpdate() change

                                                                                                                                                  visibleControls whether numeric page buttons (representing individual page numbers in pagination controls) are displayed to the user. When enabled, numbered buttons appear, allowing direct navigation to specific pages. When disabled, these numeric buttons are hidden, and users may need to rely on other navigation methods such as "Next" or "Previous" buttons.boolean

                                                                                                                                                  Controls whether numeric page buttons (representing individual page numbers in pagination controls) are displayed to the user. When enabled, numbered buttons appear, allowing direct navigation to specific pages. When disabled, these numeric buttons are hidden, and users may need to rely on other navigation methods such as "Next" or "Previous" buttons.

                                                                                                                                                  Default value

                                                                                                                                                  true

                                                                                                                                                  Back to root property: pager

                                                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                                                  Read the nested value:

                                                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.pager.pageIndexSelectors[0].visible;
                                                                                                                                                  Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                  pageSizeSelectorSpecifies the configuration options for determining the number of data rows displayed per page in a paginated view. This setting allows users to control how many items are visible at once, enhancing readability and navigation within data tables or lists. Click for more details. Property object's options:
                                                                                                                                                     object

                                                                                                                                                    Specifies the configuration options for determining the number of data rows displayed per page in a paginated view. This setting allows users to control how many items are visible at once, enhancing readability and navigation within data tables or lists.

                                                                                                                                                    Properties

                                                                                                                                                    dataSourceSpecifies the number of rows displayed on each page when using the 'rows per page' pagination option. This determines how many items are visible to the user before navigation controls (such as next/previous page) are required. Click for more details. Property object's options:
                                                                                                                                                      positionSpecifies the placement of the 'Rows per page' selection control within the pagination component, determining where users can adjust how many items are displayed on each page.
                                                                                                                                                      visibleControls whether the 'Rows Per Page' dropdown is displayed, allowing users to specify how many rows are shown per page in a paginated table or list.

                                                                                                                                                      Back to root property: pager

                                                                                                                                                      Try a demo showcasing the pageSizeSelector property.

                                                                                                                                                      Read the nested value:

                                                                                                                                                      const el = document.querySelector('smart-grid');
const pageSizeSelector = el.pager.pageSizeSelector;
                                                                                                                                                      Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                      dataSourceSpecifies the number of rows displayed on each page when using the 'rows per page' pagination option. This determines how many items are visible to the user before navigation controls (such as next/previous page) are required. Click for more details. Property object's options:
                                                                                                                                                        object

                                                                                                                                                        Specifies the number of rows displayed on each page when using the 'rows per page' pagination option. This determines how many items are visible to the user before navigation controls (such as next/previous page) are required.

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Try a demo showcasing the dataSource property.

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const dataSource = el.pager.pageSizeSelector.dataSource;
                                                                                                                                                        Related APIs refresh() beginUpdate() endUpdate() change

                                                                                                                                                        positionSpecifies the placement of the 'Rows per page' selection control within the pagination component, determining where users can adjust how many items are displayed on each page."near" | "far"

                                                                                                                                                        Specifies the placement of the 'Rows per page' selection control within the pagination component, determining where users can adjust how many items are displayed on each page.

                                                                                                                                                        Default value

                                                                                                                                                        "far"

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const position = el.pager.pageSizeSelector.position;
                                                                                                                                                        Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                        visibleControls whether the 'Rows Per Page' dropdown is displayed, allowing users to specify how many rows are shown per page in a paginated table or list.boolean

                                                                                                                                                        Controls whether the 'Rows Per Page' dropdown is displayed, allowing users to specify how many rows are shown per page in a paginated table or list.

                                                                                                                                                        Default value

                                                                                                                                                        false

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Try a demo showcasing the visible property.

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const visible = el.pager.pageSizeSelector.visible;
                                                                                                                                                        Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                        positionSpecifies the location where the pager (pagination controls) will be displayed within the user interface, such as at the top, bottom, or both positions of the component."near" | "far" | "both"

                                                                                                                                                        Specifies the location where the pager (pagination controls) will be displayed within the user interface, such as at the top, bottom, or both positions of the component.

                                                                                                                                                        Default value

                                                                                                                                                        "far"

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const position = el.pager.position;
                                                                                                                                                        Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                        summaryProvides a detailed configuration for summary settings, specifying options such as display format, data aggregation methods, visibility controls, and customization preferences for how summaries are generated and presented within the application. object

                                                                                                                                                        Provides a detailed configuration for summary settings, specifying options such as display format, data aggregation methods, visibility controls, and customization preferences for how summaries are generated and presented within the application.

                                                                                                                                                        Properties

                                                                                                                                                        positionSpecifies the location where the summary will be displayed within the component or layout (e.g., top, bottom, left, or right). This property determines the alignment or placement of the summary content relative to other elements.
                                                                                                                                                        visibleControls whether the summary is visible or hidden in the user interface. Determines if the summary section is displayed to the user.

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Try a demo showcasing the summary property.

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const summary = el.pager.summary;
                                                                                                                                                        Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                        positionSpecifies the location where the summary will be displayed within the component or layout (e.g., top, bottom, left, or right). This property determines the alignment or placement of the summary content relative to other elements."near" | "far"

                                                                                                                                                        Specifies the location where the summary will be displayed within the component or layout (e.g., top, bottom, left, or right). This property determines the alignment or placement of the summary content relative to other elements.

                                                                                                                                                        Default value

                                                                                                                                                        "far"

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const position = el.pager.summary.position;

                                                                                                                                                        visibleControls whether the summary is visible or hidden in the user interface. Determines if the summary section is displayed to the user.boolean

                                                                                                                                                        Controls whether the summary is visible or hidden in the user interface. Determines if the summary section is displayed to the user.

                                                                                                                                                        Default value

                                                                                                                                                        false

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Try a demo showcasing the visible property.

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const visible = el.pager.summary.visible;

                                                                                                                                                        templateDefines the structure and layout template used to render the pager component, specifying how its elements (such as navigation buttons, page numbers, and labels) are displayed in the user interface.string | HTMLTemplateElement

                                                                                                                                                        Defines the structure and layout template used to render the pager component, specifying how its elements (such as navigation buttons, page numbers, and labels) are displayed in the user interface.

                                                                                                                                                        Default value

                                                                                                                                                        ""

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Try a demo showcasing the template property.

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const template = el.pager.template;
                                                                                                                                                        Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                        visibleControls whether the pager component is visible to users. Set to true to display the pager, or false to hide it.boolean

                                                                                                                                                        Controls whether the pager component is visible to users. Set to true to display the pager, or false to hide it.

                                                                                                                                                        Default value

                                                                                                                                                        false

                                                                                                                                                        Back to root property: pager

                                                                                                                                                        Try a demo showcasing the visible property.

                                                                                                                                                        Examples

                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                        const el = document.querySelector('smart-grid');
el.pager.visible = true;

                                                                                                                                                        Read the nested value:

                                                                                                                                                        const el = document.querySelector('smart-grid');
const visible = el.pager.visible;
                                                                                                                                                        Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                        pagingProvides 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. Click for more details. Property object's options:
                                                                                                                                                           object

                                                                                                                                                          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.

                                                                                                                                                          Properties

                                                                                                                                                          enabledTurns paging on; page size, index, and controls come from the pager and related paging options.
                                                                                                                                                          pageHierarchySizeSpecifies the maximum number of top-level (root) hierarchical groups to display per page when grouping is enabled. For example, setting this value to 2 will show 2 root groups on each page, with pagination controls provided if there are more groups than the specified limit. This setting applies only when hierarchical grouping is active in the data grid.
                                                                                                                                                          pageIndexSpecifies the initial page or URL that users will see when they first access the application.
                                                                                                                                                          pageSizeSpecifies the maximum number of rows to display on each page of data, enabling pagination and controlling how much content is visible at one time.
                                                                                                                                                          spinnerProvides detailed configuration options for controlling the appearance and behavior of spinner-based pagination elements, including parameters for speed, size, color, and navigation functionality.
                                                                                                                                                          Try a demo showcasing the paging property.

                                                                                                                                                          Full working example

                                                                                                                                                          Minimal setup for paging & pager with the data and bindings you usually use together on this component.

                                                                                                                                                          JavaScript — minimal grid with paging & pager:

                                                                                                                                                          // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const paging = { enabled: true };
const pager = { visible: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	paging,
	pager
});
                                                                                                                                                          Related APIs pager goToPage() nextPage() prevPage() page

                                                                                                                                                          enabledTurns paging on; page size, index, and controls come from the pager and related paging options.boolean

                                                                                                                                                          Turns paging on; page size, index, and controls come from the pager and related paging options.

                                                                                                                                                          Default value

                                                                                                                                                          false

                                                                                                                                                          Back to root property: paging

                                                                                                                                                          Examples

                                                                                                                                                          Set a nested field on the element:

                                                                                                                                                          const el = document.querySelector('smart-grid');
el.paging.enabled = true;

                                                                                                                                                          Read the nested value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const enabled = el.paging.enabled;
                                                                                                                                                          Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                          pageHierarchySizeSpecifies the maximum number of top-level (root) hierarchical groups to display per page when grouping is enabled. For example, setting this value to 2 will show 2 root groups on each page, with pagination controls provided if there are more groups than the specified limit. This setting applies only when hierarchical grouping is active in the data grid.number

                                                                                                                                                          Specifies the maximum number of top-level (root) hierarchical groups to display per page when grouping is enabled. For example, setting this value to 2 will show 2 root groups on each page, with pagination controls provided if there are more groups than the specified limit. This setting applies only when hierarchical grouping is active in the data grid.

                                                                                                                                                          Default value

                                                                                                                                                          2

                                                                                                                                                          Back to root property: paging

                                                                                                                                                          Read the nested value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const pageHierarchySize = el.paging.pageHierarchySize;
                                                                                                                                                          Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                          pageIndexSpecifies the initial page or URL that users will see when they first access the application.number

                                                                                                                                                          Specifies the initial page or URL that users will see when they first access the application.

                                                                                                                                                          Default value

                                                                                                                                                          0

                                                                                                                                                          Back to root property: paging

                                                                                                                                                          Try a demo showcasing the pageIndex property.

                                                                                                                                                          Read the nested value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const pageIndex = el.paging.pageIndex;
                                                                                                                                                          Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                          pageSizeSpecifies the maximum number of rows to display on each page of data, enabling pagination and controlling how much content is visible at one time.number

                                                                                                                                                          Specifies the maximum number of rows to display on each page of data, enabling pagination and controlling how much content is visible at one time.

                                                                                                                                                          Default value

                                                                                                                                                          10

                                                                                                                                                          Back to root property: paging

                                                                                                                                                          Try a demo showcasing the pageSize property.

                                                                                                                                                          Read the nested value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const pageSize = el.paging.pageSize;
                                                                                                                                                          Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                          spinnerProvides detailed configuration options for controlling the appearance and behavior of spinner-based pagination elements, including parameters for speed, size, color, and navigation functionality. object

                                                                                                                                                          Provides detailed configuration options for controlling the appearance and behavior of spinner-based pagination elements, including parameters for speed, size, color, and navigation functionality.

                                                                                                                                                          Properties

                                                                                                                                                          enabledWhen true, shows a loading spinner on the pager while the next or previous page is being fetched (server or async paging).
                                                                                                                                                          stepDefines the increment or decrement value when navigating between pages, determining how many pages to move forward or backward with each navigation action.

                                                                                                                                                          Back to root property: paging

                                                                                                                                                          Try a demo showcasing the spinner property.

                                                                                                                                                          Read the nested value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const spinner = el.paging.spinner;
                                                                                                                                                          Related APIs appearance layout refresh() change

                                                                                                                                                          enabledWhen true, shows a loading spinner on the pager while the next or previous page is being fetched (server or async paging).boolean

                                                                                                                                                          When true, shows a loading spinner on the pager while the next or previous page is being fetched (server or async paging).

                                                                                                                                                          Default value

                                                                                                                                                          false

                                                                                                                                                          Back to root property: paging

                                                                                                                                                          Read the nested value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const enabled = el.paging.spinner.enabled;
                                                                                                                                                          Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                          stepDefines the increment or decrement value when navigating between pages, determining how many pages to move forward or backward with each navigation action.number

                                                                                                                                                          Defines the increment or decrement value when navigating between pages, determining how many pages to move forward or backward with each navigation action.

                                                                                                                                                          Default value

                                                                                                                                                          1

                                                                                                                                                          Back to root property: paging

                                                                                                                                                          Read the nested value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const step = el.paging.spinner.step;

                                                                                                                                                          rightToLeftGets 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.boolean

                                                                                                                                                          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.

                                                                                                                                                          Default value

                                                                                                                                                          false

                                                                                                                                                          Examples

                                                                                                                                                          Markup and runtime examples for rightToLeft:

                                                                                                                                                          HTML attribute:

                                                                                                                                                          <smart-grid right-to-left></smart-grid>

                                                                                                                                                          Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                                          const el = document.querySelector('smart-grid');
el.rightToLeft = false;

                                                                                                                                                          Read the current value:

                                                                                                                                                          const el = document.querySelector('smart-grid');
const rightToLeft = el.rightToLeft;

                                                                                                                                                          rowCSSRulesSets 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 < 5, '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.any

                                                                                                                                                          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:'
                                                                                                                                                          '''js
                                                                                                                                                          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
                                                                                                                                                          }
                                                                                                                                                          '''
                                                                                                                                                          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.

                                                                                                                                                          Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                          rowDetailConfigures or updates the detailed information or content associated with a specific row, often used to display additional data or expanded views for that row. Click for more details. Property object's options:
                                                                                                                                                             object

                                                                                                                                                            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.

                                                                                                                                                            Properties

                                                                                                                                                            dialogConfigures the display of row details using a dialog window. When enabled, selecting a row will open a modal dialog showing detailed information for that row. This provides a focused view of row details without navigating away from the main content. Click for more details. Property object's options:
                                                                                                                                                            • header:string - Specifies the title text displayed at the top of the dialog window. This text serves as the header, providing context or describing the purpose of the dialog to the user.
                                                                                                                                                            • height:string | number - Specifies the height of the dialog component in pixels, percentage, or other valid CSS units. This property determines how tall the dialog will appear on the screen.
                                                                                                                                                            • width:string | number - Specifies the width of the dialog box. Accepts values in units such as pixels (e.g., "500px"), percentages (e.g., "50%"), or other valid CSS width formats to determine how wide the dialog appears on the screen.
                                                                                                                                                            • left:string | number - Specifies the horizontal position (in pixels or percentage) from the left edge of the viewport where the dialog will be displayed. Adjusting this value moves the dialog left or right on the screen.
                                                                                                                                                            • top:string | number - Specifies the distance, in pixels or percentage, from the top edge of the viewport to the top edge of the dialog, effectively controlling the vertical placement of the dialog on the screen.
                                                                                                                                                            • enabled:boolean - Controls the activation of the row details dialog feature. When enabled, selecting a row will display its detailed information within a modal dialog, allowing users to view additional data without navigating away from the current page.
                                                                                                                                                            enabledDisplays additional information for each row by enabling expandable row details functionality.
                                                                                                                                                            heightSpecifies the vertical height, in pixels, for the expanded row details section. This determines how much space is allocated to display additional information beneath a table row when its details are shown.
                                                                                                                                                            positionSpecifies the position of the column used to control the dynamic expansion or collapse of row details. This determines where the expand/collapse toggle will appear within the table, allowing users to show or hide additional information for each row.
                                                                                                                                                            templateDefines the template used to display the detailed content for each row. This property specifies the HTML or component structure that will be rendered when a row is expanded to show additional information.
                                                                                                                                                            visibleControls the visibility of the column that enables users to dynamically expand or collapse the details of a row. When enabled, this column provides an interactive toggle for showing or hiding additional information associated with each row.
                                                                                                                                                            Try a demo showcasing the rowDetail property.

                                                                                                                                                            Full working example

                                                                                                                                                            Minimal setup for rowDetail with the data and bindings you usually use together on this component.

                                                                                                                                                            JavaScript — minimal grid with rowDetail:

                                                                                                                                                            // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const rowdetail = { enabled: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	rowdetail
});
                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                            dialogConfigures the display of row details using a dialog window. When enabled, selecting a row will open a modal dialog showing detailed information for that row. This provides a focused view of row details without navigating away from the main content. Click for more details. Property object's options:
                                                                                                                                                               object

                                                                                                                                                              Configures the display of row details using a dialog window. When enabled, selecting a row will open a modal dialog showing detailed information for that row. This provides a focused view of row details without navigating away from the main content.

                                                                                                                                                              Properties

                                                                                                                                                              enabledControls the activation of the row details dialog feature. When enabled, selecting a row will display its detailed information within a modal dialog, allowing users to view additional data without navigating away from the current page.
                                                                                                                                                              headerSpecifies the title text displayed at the top of the dialog window. This text serves as the header, providing context or describing the purpose of the dialog to the user.
                                                                                                                                                              heightSpecifies the height of the dialog component in pixels, percentage, or other valid CSS units. This property determines how tall the dialog will appear on the screen.
                                                                                                                                                              leftSpecifies the horizontal position (in pixels or percentage) from the left edge of the viewport where the dialog will be displayed. Adjusting this value moves the dialog left or right on the screen.
                                                                                                                                                              topSpecifies the distance, in pixels or percentage, from the top edge of the viewport to the top edge of the dialog, effectively controlling the vertical placement of the dialog on the screen.
                                                                                                                                                              widthSpecifies the width of the dialog box. Accepts values in units such as pixels (e.g., "500px"), percentages (e.g., "50%"), or other valid CSS width formats to determine how wide the dialog appears on the screen.

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Try a demo showcasing the dialog property.

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const dialog = el.rowDetail.dialog;
                                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                              enabledControls the activation of the row details dialog feature. When enabled, selecting a row will display its detailed information within a modal dialog, allowing users to view additional data without navigating away from the current page.boolean

                                                                                                                                                              Controls the activation of the row details dialog feature. When enabled, selecting a row will display its detailed information within a modal dialog, allowing users to view additional data without navigating away from the current page.

                                                                                                                                                              Default value

                                                                                                                                                              false

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const enabled = el.rowDetail.dialog.enabled;
                                                                                                                                                              Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                              headerSpecifies the title text displayed at the top of the dialog window. This text serves as the header, providing context or describing the purpose of the dialog to the user.string

                                                                                                                                                              Specifies the title text displayed at the top of the dialog window. This text serves as the header, providing context or describing the purpose of the dialog to the user.

                                                                                                                                                              Default value

                                                                                                                                                              "{{message}}"

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Try a demo showcasing the header property.

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const header = el.rowDetail.dialog.header;
                                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                              heightSpecifies the height of the dialog component in pixels, percentage, or other valid CSS units. This property determines how tall the dialog will appear on the screen.string | number

                                                                                                                                                              Specifies the height of the dialog component in pixels, percentage, or other valid CSS units. This property determines how tall the dialog will appear on the screen.

                                                                                                                                                              Default value

                                                                                                                                                              300

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const height = el.rowDetail.dialog.height;

                                                                                                                                                              leftSpecifies the horizontal position (in pixels or percentage) from the left edge of the viewport where the dialog will be displayed. Adjusting this value moves the dialog left or right on the screen.string | number

                                                                                                                                                              Specifies the horizontal position (in pixels or percentage) from the left edge of the viewport where the dialog will be displayed. Adjusting this value moves the dialog left or right on the screen.

                                                                                                                                                              Default value

                                                                                                                                                              center

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const left = el.rowDetail.dialog.left;

                                                                                                                                                              topSpecifies the distance, in pixels or percentage, from the top edge of the viewport to the top edge of the dialog, effectively controlling the vertical placement of the dialog on the screen.string | number

                                                                                                                                                              Specifies the distance, in pixels or percentage, from the top edge of the viewport to the top edge of the dialog, effectively controlling the vertical placement of the dialog on the screen.

                                                                                                                                                              Default value

                                                                                                                                                              center

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const top = el.rowDetail.dialog.top;

                                                                                                                                                              widthSpecifies the width of the dialog box. Accepts values in units such as pixels (e.g., "500px"), percentages (e.g., "50%"), or other valid CSS width formats to determine how wide the dialog appears on the screen.string | number

                                                                                                                                                              Specifies the width of the dialog box. Accepts values in units such as pixels (e.g., "500px"), percentages (e.g., "50%"), or other valid CSS width formats to determine how wide the dialog appears on the screen.

                                                                                                                                                              Default value

                                                                                                                                                              360

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Try a demo showcasing the width property.

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const width = el.rowDetail.dialog.width;

                                                                                                                                                              enabledDisplays additional information for each row by enabling expandable row details functionality.boolean

                                                                                                                                                              Displays additional information for each row by enabling expandable row details functionality.

                                                                                                                                                              Default value

                                                                                                                                                              false

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Examples

                                                                                                                                                              Set a nested field on the element:

                                                                                                                                                              const el = document.querySelector('smart-grid');
el.rowDetail.enabled = true;

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const enabled = el.rowDetail.enabled;
                                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                              heightSpecifies the vertical height, in pixels, for the expanded row details section. This determines how much space is allocated to display additional information beneath a table row when its details are shown.number

                                                                                                                                                              Specifies the vertical height, in pixels, for the expanded row details section. This determines how much space is allocated to display additional information beneath a table row when its details are shown.

                                                                                                                                                              Default value

                                                                                                                                                              200

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const height = el.rowDetail.height;
                                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                              positionSpecifies the position of the column used to control the dynamic expansion or collapse of row details. This determines where the expand/collapse toggle will appear within the table, allowing users to show or hide additional information for each row."near" | "far"

                                                                                                                                                              Specifies the position of the column used to control the dynamic expansion or collapse of row details. This determines where the expand/collapse toggle will appear within the table, allowing users to show or hide additional information for each row.

                                                                                                                                                              Default value

                                                                                                                                                              "near"

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const position = el.rowDetail.position;
                                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                              templateDefines the template used to display the detailed content for each row. This property specifies the HTML or component structure that will be rendered when a row is expanded to show additional information.string | HTMLTemplateElement

                                                                                                                                                              Defines the template used to display the detailed content for each row. This property specifies the HTML or component structure that will be rendered when a row is expanded to show additional information.

                                                                                                                                                              Default value

                                                                                                                                                              ""

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Try a demo showcasing the template property.

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const template = el.rowDetail.template;
                                                                                                                                                              Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                              visibleControls the visibility of the column that enables users to dynamically expand or collapse the details of a row. When enabled, this column provides an interactive toggle for showing or hiding additional information associated with each row.boolean

                                                                                                                                                              Controls the visibility of the column that enables users to dynamically expand or collapse the details of a row. When enabled, this column provides an interactive toggle for showing or hiding additional information associated with each row.

                                                                                                                                                              Default value

                                                                                                                                                              true

                                                                                                                                                              Back to root property: rowDetail

                                                                                                                                                              Try a demo showcasing the visible property.

                                                                                                                                                              Examples

                                                                                                                                                              Set a nested field on the element:

                                                                                                                                                              const el = document.querySelector('smart-grid');
el.rowDetail.visible = true;

                                                                                                                                                              Read the nested value:

                                                                                                                                                              const el = document.querySelector('smart-grid');
const visible = el.rowDetail.visible;
                                                                                                                                                              Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                              rowsThe 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. Click for more details. Property object's options:
                                                                                                                                                                Smart.Grid.Row[]

                                                                                                                                                                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.

                                                                                                                                                                Properties

                                                                                                                                                                allowCheckSets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
                                                                                                                                                                allowResizeSets or gets the row can be resized.
                                                                                                                                                                allowSelectSets or gets the row can be selected.
                                                                                                                                                                allowToggleSets or gets the row can be expanded or collapsed.
                                                                                                                                                                cellsGets the Row's Cells array. Click for more details. Property object's options:
                                                                                                                                                                • align:string - "Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".
                                                                                                                                                                • column:Smart.Grid.Column - Gets the column associated to the cell.
                                                                                                                                                                • color:string - Sets or gets the cell's text color.
                                                                                                                                                                • background:string - Sets or gets the cell's background.
                                                                                                                                                                • borderColor:string - Sets or gets the cell's borderColor.
                                                                                                                                                                • colSpan:number - Sets or gets the cell's colSpan.
                                                                                                                                                                • editor:"Object{template: string, setValue: {(value: object): void}, getValue: {(): object}, blur: {(): void}, focus: {(): void}, attach: {(): void}, detach: {(): void}, selector: HTMLTemplateElement". Template values: 'checkBox', 'input', 'numberInput', 'autoComplete', 'dateTimePicker', 'custom' - Sets or gets the cell's editor.
                                                                                                                                                                • element:HTMLElement - Gets the HTMLElement associated to the cell.
                                                                                                                                                                • getFormattedValue:{(value: any, type: string): void} - Gets a formatted number or Date.
                                                                                                                                                                • isEditing:boolean - Gets whether the cell is in edit mode.
                                                                                                                                                                • oldValue:any - Gets the old value of the cell
                                                                                                                                                                • fontSize:string - Sets or gets the cell's fontSize
                                                                                                                                                                • fontWeight:string - Sets or gets the cell's fontWeight
                                                                                                                                                                • fontFamily:string - Sets or gets the cell's fontFamily
                                                                                                                                                                • fontStyle:string - Sets or gets the cell's fontStyle
                                                                                                                                                                • readonly:boolean - "Sets or gets whether the cell can be edited.".
                                                                                                                                                                • row:Smart.Grid.Row - Gets the row object associated to the cell.
                                                                                                                                                                • rowSpan:number - Sets or gets the row span.
                                                                                                                                                                • selected:boolean - Sets or gets whether the cell is selected.
                                                                                                                                                                • setProperties:{(properties: {name: string, value: string}[]): void} - "Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.".
                                                                                                                                                                • tooltip:string - "Allowed values are: 'top', 'middle' or 'bottom'".
                                                                                                                                                                • value:any - The cell's value
                                                                                                                                                                • verticalAlign:string - "Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'".
                                                                                                                                                                • setStyle:{(value: any): void} - "Method which applies a cell style object. Expects a JSON object with the following possible values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
                                                                                                                                                                checkedSets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
                                                                                                                                                                childrenGets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
                                                                                                                                                                dataGets the row's bound data.
                                                                                                                                                                detailHeightSets or gets the row's detail height.
                                                                                                                                                                detailTemplateSets or gets the row's detail template.
                                                                                                                                                                elementGets the HTML Element. The property returns null when the Row is not in the View.
                                                                                                                                                                expandedSets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.
                                                                                                                                                                freezeSets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far).
                                                                                                                                                                getCellMethods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.
                                                                                                                                                                headerGets the row's header element.
                                                                                                                                                                heightSets or gets the row's height.
                                                                                                                                                                idGets the row's bound id.
                                                                                                                                                                indexGets the row's bound index.
                                                                                                                                                                leafGets whether the row is leaf row in TreeGrid or Grouping mode.
                                                                                                                                                                maxHeightSets or gets the row's maximum height.
                                                                                                                                                                minHeightSets or gets the row's minimum height.
                                                                                                                                                                selectedSets or gets whether the row is selected.
                                                                                                                                                                setStyle"Method which applies a style object to all cells. Expects a JSON object with the following allowed values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
                                                                                                                                                                showDetailSets or gets whether the row detail is displayed.
                                                                                                                                                                visibleSets or gets whether the row is visible. Set the property to 'false' to hide the row.
                                                                                                                                                                visibleIndexGets the visible index of the row.
                                                                                                                                                                Try a demo showcasing the rows property.
                                                                                                                                                                Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                allowCheckSets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.boolean

                                                                                                                                                                Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.

                                                                                                                                                                Default value

                                                                                                                                                                true

                                                                                                                                                                Back to root property: rows

                                                                                                                                                                Try a demo showcasing the allowCheck property.

                                                                                                                                                                Examples

                                                                                                                                                                Set a nested field on the element:

                                                                                                                                                                const el = document.querySelector('smart-grid');
el.rows[0].allowCheck = false;

                                                                                                                                                                Read the nested value:

                                                                                                                                                                const el = document.querySelector('smart-grid');
const allowCheck = el.rows[0].allowCheck;
                                                                                                                                                                Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                allowResizeSets or gets the row can be resized.boolean

                                                                                                                                                                Sets or gets the row can be resized.

                                                                                                                                                                Default value

                                                                                                                                                                true

                                                                                                                                                                Back to root property: rows

                                                                                                                                                                Try a demo showcasing the allowResize property.

                                                                                                                                                                Examples

                                                                                                                                                                Set a nested field on the element:

                                                                                                                                                                const el = document.querySelector('smart-grid');
el.rows[0].allowResize = true;

                                                                                                                                                                Read the nested value:

                                                                                                                                                                const el = document.querySelector('smart-grid');
const allowResize = el.rows[0].allowResize;
                                                                                                                                                                Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                allowSelectSets or gets the row can be selected.boolean | null

                                                                                                                                                                Sets or gets the row can be selected.

                                                                                                                                                                Default value

                                                                                                                                                                true

                                                                                                                                                                Back to root property: rows

                                                                                                                                                                Try a demo showcasing the allowSelect property.

                                                                                                                                                                Examples

                                                                                                                                                                Set a nested field on the element:

                                                                                                                                                                const el = document.querySelector('smart-grid');
el.rows[0].allowSelect = false;

                                                                                                                                                                Read the nested value:

                                                                                                                                                                const el = document.querySelector('smart-grid');
const allowSelect = el.rows[0].allowSelect;
                                                                                                                                                                Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                allowToggleSets or gets the row can be expanded or collapsed.boolean

                                                                                                                                                                Sets or gets the row can be expanded or collapsed.

                                                                                                                                                                Default value

                                                                                                                                                                true

                                                                                                                                                                Back to root property: rows

                                                                                                                                                                Examples

                                                                                                                                                                Set a nested field on the element:

                                                                                                                                                                const el = document.querySelector('smart-grid');
el.rows[0].allowToggle = true;

                                                                                                                                                                Read the nested value:

                                                                                                                                                                const el = document.querySelector('smart-grid');
const allowToggle = el.rows[0].allowToggle;
                                                                                                                                                                Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                cellsGets the Row's Cells array. Click for more details. Property object's options:
                                                                                                                                                                  Smart.Grid.Cell[]

                                                                                                                                                                  Gets the Row's Cells array.

                                                                                                                                                                  Default value

                                                                                                                                                                  null

                                                                                                                                                                  Properties

                                                                                                                                                                  align"Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".
                                                                                                                                                                  backgroundSets or gets the cell's background.
                                                                                                                                                                  borderColorSets or gets the cell's borderColor.
                                                                                                                                                                  colorSets or gets the cell's text color.
                                                                                                                                                                  colSpanSets or gets the cell's colSpan.
                                                                                                                                                                  columnGets the column associated to the cell.
                                                                                                                                                                  editorSets or gets the cell's editor.
                                                                                                                                                                  elementGets the HTMLElement associated to the cell.
                                                                                                                                                                  fontFamilySets or gets the cell's fontFamily
                                                                                                                                                                  fontSizeSets or gets the cell's fontSize
                                                                                                                                                                  fontStyleSets or gets the cell's fontStyle
                                                                                                                                                                  fontWeightSets or gets the cell's fontWeight
                                                                                                                                                                  getFormattedValueGets a formatted number or Date.
                                                                                                                                                                  isEditingGets whether the cell is in edit mode.
                                                                                                                                                                  oldValueGets the old value of the cell
                                                                                                                                                                  readonly"Sets or gets whether the cell can be edited.".
                                                                                                                                                                  rowGets the row object associated to the cell.
                                                                                                                                                                  rowSpanSets or gets the row span.
                                                                                                                                                                  selectedSets or gets whether the cell is selected.
                                                                                                                                                                  setProperties"Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.".
                                                                                                                                                                  setStyle"Method which applies a cell style object. Expects a JSON object with the following possible values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'
                                                                                                                                                                  tooltip"Allowed values are: 'top', 'middle' or 'bottom'".
                                                                                                                                                                  valueThe cell's value
                                                                                                                                                                  verticalAlign"Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'".

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the cells property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const cells = el.rows[0].cells;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  align"Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".string

                                                                                                                                                                  "Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".

                                                                                                                                                                  Default value

                                                                                                                                                                  "'left'"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the align property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].align = "right";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const align = el.rows[0].cells[0].align;

                                                                                                                                                                  backgroundSets or gets the cell's background.string

                                                                                                                                                                  Sets or gets the cell's background.

                                                                                                                                                                  Default value

                                                                                                                                                                  "''"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the background property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].background = "#93c5fd";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const background = el.rows[0].cells[0].background;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  borderColorSets or gets the cell's borderColor.string

                                                                                                                                                                  Sets or gets the cell's borderColor.

                                                                                                                                                                  Default value

                                                                                                                                                                  "''"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].borderColor = "#15803d";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const borderColor = el.rows[0].cells[0].borderColor;
                                                                                                                                                                  Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                  colorSets or gets the cell's text color.string

                                                                                                                                                                  Sets or gets the cell's text color.

                                                                                                                                                                  Default value

                                                                                                                                                                  "''"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the color property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].color = "#1d4ed8";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const color = el.rows[0].cells[0].color;
                                                                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                                                                  colSpanSets or gets the cell's colSpan.number

                                                                                                                                                                  Sets or gets the cell's colSpan.

                                                                                                                                                                  Default value

                                                                                                                                                                  1

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the colSpan property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].colSpan = 2;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const colSpan = el.rows[0].cells[0].colSpan;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  columnGets the column associated to the cell.Smart.Grid.Column

                                                                                                                                                                  Gets the column associated to the cell.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the column property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const column = el.rows[0].cells[0].column;
                                                                                                                                                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                  editorSets or gets the cell's editor."Object{template: string, setValue: {(value: object): void}, getValue: {(): object}, blur: {(): void}, focus: {(): void}, attach: {(): void}, detach: {(): void}, selector: HTMLTemplateElement". Template values: 'checkBox', 'input', 'numberInput', 'autoComplete', 'dateTimePicker', 'custom'

                                                                                                                                                                  Sets or gets the cell's editor.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the editor property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const editor = el.rows[0].cells[0].editor;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  elementGets the HTMLElement associated to the cell.HTMLElement

                                                                                                                                                                  Gets the HTMLElement associated to the cell.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const element = el.rows[0].cells[0].element;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  fontFamilySets or gets the cell's fontFamilystring

                                                                                                                                                                  Sets or gets the cell's fontFamily

                                                                                                                                                                  Default value

                                                                                                                                                                  "''"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the fontFamily property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].fontFamily = "Arial";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const fontFamily = el.rows[0].cells[0].fontFamily;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  fontSizeSets or gets the cell's fontSizestring

                                                                                                                                                                  Sets or gets the cell's fontSize

                                                                                                                                                                  Default value

                                                                                                                                                                  "''"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the fontSize property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].fontSize = "24px";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const fontSize = el.rows[0].cells[0].fontSize;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  fontStyleSets or gets the cell's fontStylestring

                                                                                                                                                                  Sets or gets the cell's fontStyle

                                                                                                                                                                  Default value

                                                                                                                                                                  "''"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the fontStyle property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].fontStyle = "normal";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const fontStyle = el.rows[0].cells[0].fontStyle;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  fontWeightSets or gets the cell's fontWeightstring

                                                                                                                                                                  Sets or gets the cell's fontWeight

                                                                                                                                                                  Default value

                                                                                                                                                                  "''"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].fontWeight = 700;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const fontWeight = el.rows[0].cells[0].fontWeight;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  getFormattedValueGets a formatted number or Date.{(value: any, type: string): void}

                                                                                                                                                                  Gets a formatted number or Date.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const getFormattedValue = el.rows[0].cells[0].getFormattedValue;

                                                                                                                                                                  isEditingGets whether the cell is in edit mode.boolean

                                                                                                                                                                  Gets whether the cell is in edit mode.

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const isEditing = el.rows[0].cells[0].isEditing;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  oldValueGets the old value of the cellany

                                                                                                                                                                  Gets the old value of the cell

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the oldValue property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const oldValue = el.rows[0].cells[0].oldValue;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  readonly"Sets or gets whether the cell can be edited.".boolean

                                                                                                                                                                  "Sets or gets whether the cell can be edited.".

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the readonly property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].readonly = false;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const readonly = el.rows[0].cells[0].readonly;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  rowGets the row object associated to the cell.Smart.Grid.Row

                                                                                                                                                                  Gets the row object associated to the cell.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the row property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const row = el.rows[0].cells[0].row;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  rowSpanSets or gets the row span.number

                                                                                                                                                                  Sets or gets the row span.

                                                                                                                                                                  Default value

                                                                                                                                                                  1

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the rowSpan property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const rowSpan = el.rows[0].cells[0].rowSpan;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  selectedSets or gets whether the cell is selected.boolean

                                                                                                                                                                  Sets or gets whether the cell is selected.

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the selected property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].selected = false;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const selected = el.rows[0].cells[0].selected;
                                                                                                                                                                  Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                  setProperties"Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.".{(properties: {name: string, value: string}[]): void}

                                                                                                                                                                  "Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.".

                                                                                                                                                                  Default value

                                                                                                                                                                  ""

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const setProperties = el.rows[0].cells[0].setProperties;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  setStyle"Method which applies a cell style object. Expects a JSON object with the following possible values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'{(value: any): void}

                                                                                                                                                                  "Method which applies a cell style object. Expects a JSON object with the following possible values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'

                                                                                                                                                                  Default value

                                                                                                                                                                  null

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const setStyle = el.rows[0].cells[0].setStyle;
                                                                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                                                                  tooltip"Allowed values are: 'top', 'middle' or 'bottom'".string

                                                                                                                                                                  "Allowed values are: 'top', 'middle' or 'bottom'".

                                                                                                                                                                  Default value

                                                                                                                                                                  ""

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the tooltip property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].tooltip = "my awesome tooltip";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const tooltip = el.rows[0].cells[0].tooltip;

                                                                                                                                                                  valueThe cell's valueany

                                                                                                                                                                  The cell's value

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the value property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].value = 400;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const value = el.rows[0].cells[0].value;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  verticalAlign"Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'".string

                                                                                                                                                                  "Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'".

                                                                                                                                                                  Default value

                                                                                                                                                                  "'center'"

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the verticalAlign property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].cells[0].verticalAlign = "bottom";

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const verticalAlign = el.rows[0].cells[0].verticalAlign;

                                                                                                                                                                  checkedSets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.boolean

                                                                                                                                                                  Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.

                                                                                                                                                                  Default value

                                                                                                                                                                  true

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].checked = false;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const checked = el.rows[0].checked;
                                                                                                                                                                  Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                  childrenGets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.Smart.Grid.Row[]

                                                                                                                                                                  Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the children property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const children = el.rows[0].children;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  dataGets the row's bound data.any

                                                                                                                                                                  Gets the row's bound data.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const data = el.rows[0].data;
                                                                                                                                                                  Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                  detailHeightSets or gets the row's detail height.number

                                                                                                                                                                  Sets or gets the row's detail height.

                                                                                                                                                                  Default value

                                                                                                                                                                  200

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const detailHeight = el.rows[0].detailHeight;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  detailTemplateSets or gets the row's detail template.string | HTMLTemplateElement | null

                                                                                                                                                                  Sets or gets the row's detail template.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const detailTemplate = el.rows[0].detailTemplate;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  elementGets the HTML Element. The property returns null when the Row is not in the View.object | null

                                                                                                                                                                  Gets the HTML Element. The property returns null when the Row is not in the View.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const element = el.rows[0].element;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  expandedSets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.boolean

                                                                                                                                                                  Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the expanded property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const expanded = el.rows[0].expanded;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  freezeSets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far)."near" | "far" | "true" | "false"

                                                                                                                                                                  Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far).

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the freeze property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const freeze = el.rows[0].freeze;
                                                                                                                                                                  Related APIs behavior refresh() change

                                                                                                                                                                  getCellMethods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.any

                                                                                                                                                                  Methods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.

                                                                                                                                                                  Default value

                                                                                                                                                                  -1

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const getCell = el.rows[0].getCell;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  headerGets the row's header element.HTMLElement

                                                                                                                                                                  Gets the row's header element.

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the header property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const header = el.rows[0].header;
                                                                                                                                                                  Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                  heightSets or gets the row's height.number

                                                                                                                                                                  Sets or gets the row's height.

                                                                                                                                                                  Default value

                                                                                                                                                                  30

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const height = el.rows[0].height;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  idGets the row's bound id.string | number

                                                                                                                                                                  Gets the row's bound id.

                                                                                                                                                                  Default value

                                                                                                                                                                  ""

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the id property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const id = el.rows[0].id;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  indexGets the row's bound index.number

                                                                                                                                                                  Gets the row's bound index.

                                                                                                                                                                  Default value

                                                                                                                                                                  -1

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the index property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const index = el.rows[0].index;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  leafGets whether the row is leaf row in TreeGrid or Grouping mode.boolean

                                                                                                                                                                  Gets whether the row is leaf row in TreeGrid or Grouping mode.

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the leaf property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const leaf = el.rows[0].leaf;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  maxHeightSets or gets the row's maximum height.number

                                                                                                                                                                  Sets or gets the row's maximum height.

                                                                                                                                                                  Default value

                                                                                                                                                                  100

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const maxHeight = el.rows[0].maxHeight;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  minHeightSets or gets the row's minimum height.number

                                                                                                                                                                  Sets or gets the row's minimum height.

                                                                                                                                                                  Default value

                                                                                                                                                                  30

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the minHeight property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const minHeight = el.rows[0].minHeight;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  selectedSets or gets whether the row is selected.boolean

                                                                                                                                                                  Sets or gets whether the row is selected.

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the selected property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].selected = false;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const selected = el.rows[0].selected;
                                                                                                                                                                  Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                  setStyle"Method which applies a style object to all cells. Expects a JSON object with the following allowed values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'{(value: any): void}

                                                                                                                                                                  "Method which applies a style object to all cells. Expects a JSON object with the following allowed values: 'background', 'color', 'fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textDecoration'

                                                                                                                                                                  Default value

                                                                                                                                                                  null

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const setStyle = el.rows[0].setStyle;
                                                                                                                                                                  Related APIs appearance layout refresh() change

                                                                                                                                                                  showDetailSets or gets whether the row detail is displayed.boolean

                                                                                                                                                                  Sets or gets whether the row detail is displayed.

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the showDetail property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const showDetail = el.rows[0].showDetail;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  visibleSets or gets whether the row is visible. Set the property to 'false' to hide the row.boolean

                                                                                                                                                                  Sets or gets whether the row is visible. Set the property to 'false' to hide the row.

                                                                                                                                                                  Default value

                                                                                                                                                                  true

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the visible property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Set a nested field on the element:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.rows[0].visible = false;

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const visible = el.rows[0].visible;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  visibleIndexGets the visible index of the row.number

                                                                                                                                                                  Gets the visible index of the row.

                                                                                                                                                                  Default value

                                                                                                                                                                  -1

                                                                                                                                                                  Back to root property: rows

                                                                                                                                                                  Try a demo showcasing the visibleIndex property.

                                                                                                                                                                  Read the nested value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const visibleIndex = el.rows[0].visibleIndex;
                                                                                                                                                                  Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                  scrollingConfigures 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."physical" | "virtual" | "infinite" | "deferred"

                                                                                                                                                                  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.

                                                                                                                                                                  Default value

                                                                                                                                                                  "physical"
                                                                                                                                                                  Try a demo showcasing the scrolling property.

                                                                                                                                                                  Examples

                                                                                                                                                                  Markup and runtime examples for scrolling:

                                                                                                                                                                  HTML:

                                                                                                                                                                  <smart-grid scrolling="physical"></smart-grid>

                                                                                                                                                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.scrolling = "deferred";

                                                                                                                                                                  Read the current value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const scrolling = el.scrolling;
                                                                                                                                                                  Related APIs behavior refresh() change

                                                                                                                                                                  selectableEnables selection. Shorthand: sets selection.enabled to true. Cell vs row selection is controlled by selection.mode and related options.boolean

                                                                                                                                                                  Enables selection. Shorthand: sets selection.enabled to true. Cell vs row selection is controlled by selection.mode and related options.

                                                                                                                                                                  Default value

                                                                                                                                                                  false

                                                                                                                                                                  Examples

                                                                                                                                                                  Markup and runtime examples for selectable:

                                                                                                                                                                  HTML attribute:

                                                                                                                                                                  <smart-grid selectable></smart-grid>

                                                                                                                                                                  Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
el.selectable = true;

                                                                                                                                                                  Read the current value:

                                                                                                                                                                  const el = document.querySelector('smart-grid');
const selectable = el.selectable;
                                                                                                                                                                  Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                  selectionProvides 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. Click for more details. Property object's options:
                                                                                                                                                                     object

                                                                                                                                                                    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.

                                                                                                                                                                    Properties

                                                                                                                                                                    actionControls how selection is triggered: accepts 'click' or 'doubleClick' to specify if selection occurs on a single or double mouse click, respectively. When set to 'none', user interaction does not trigger selection—selection can only be managed programmatically via the API.
                                                                                                                                                                    allowCellDragDropSelectionHandleControls whether cells in the selection can be dragged and dropped. When enabled, dragging is initiated by moving the cursor to the bottom edge of the selected cells, causing the cursor to change to a "drag" icon. Clicking and holding the mouse button while moving the selection will initiate the drag operation. By default, dropping the selection copies the values of the dragged cells to the new location. This property can be used to enable or disable drag-and-drop functionality for cell selections.
                                                                                                                                                                    allowCellDragSelectionAutoFillControls whether cell selection is automatically populated with values when dragging and releasing the 'Drag Handle'. When enabled, dragging the handle will auto-fill the selected cells with the corresponding values. This property can be set to enable or disable the auto-fill behavior, and can also be used to check the current auto-fill status.
                                                                                                                                                                    allowCellDragSelectionHandleControls the visibility of the selection "Drag Handle" (the small square located at the bottom-right corner of a selected cell range, similar to Excel). When enabled, this handle allows users to extend or resize their current selection horizontally or vertically by dragging the handle. This property can be set to show or hide the drag handle, as well as queried to determine its current state.
                                                                                                                                                                    allowCellSelectionDetermines whether users are permitted to select a cell by clicking on it. When enabled, clicking on a cell will select it; when disabled, clicking will have no effect on the cell’s selection state. This property can be set to enable or disable cell selection via mouse interaction.
                                                                                                                                                                    allowColumnHeaderSelectionDetermines whether users can select a column by clicking on its header. When enabled, clicking a column header will select the entire column. This property can be set to allow or prevent selection via column header clicks, and its current state can be retrieved programmatically.
                                                                                                                                                                    allowDragSelectionControls whether users can select multiple cells by dragging the mouse across them, similar to how selection works in Excel. When enabled, users can click and drag to highlight a range of cells; when disabled, selection by dragging is not permitted. This property can be set or retrieved programmatically.
                                                                                                                                                                    allowDragSelectionAutoScrollDetermines whether the Grid view will automatically scroll when a user selects items by dragging the mouse beyond the current visible area. This property can be set to enable or disable auto-scrolling during drag selection, or retrieved to check the current behavior.
                                                                                                                                                                    allowRowHeaderSelectionDetermines whether users can select rows by clicking on the row header. When enabled, clicking a row header will select the entire row. This property can be used to either allow or prevent selection through row headers.
                                                                                                                                                                    allowRowSelectionDetermines whether selecting a row by clicking on it is enabled. When set to true, users can select rows with a mouse click; when false, clicking a row will not change its selection state. Use this property to control row selection behavior in the interface.
                                                                                                                                                                    checkBoxescheckBoxes Click for more details. Property object's options:
                                                                                                                                                                    • autoShow:boolean - Controls the visibility of checkboxes within the Grid. When set to true, checkboxes are only displayed when the mouse hovers over the Grid. When set to false, checkboxes remain visible at all times, regardless of mouse position. This property can be used to create a cleaner interface by showing checkboxes only on hover.
                                                                                                                                                                    • enabled:boolean - Enables or disables the checkbox selection feature. When enabled, an additional column containing checkboxes is displayed, allowing users to select multiple rows. You can use this property to programmatically determine or change whether checkbox selection is active.
                                                                                                                                                                    • action:string - Determines how selection is triggered within the component. Accepts the following values:

                                                                                                                                                                      - ''click'': Selection occurs when the user clicks on the item.
                                                                                                                                                                      - ''doubleClick'': Selection occurs when the user double-clicks on the item.
                                                                                                                                                                      - ''none'': Selection cannot be triggered by user interaction; it can only be set or changed programmatically via the API.

                                                                                                                                                                      This property can be used to both retrieve the current selection mode or set a new one.
                                                                                                                                                                    • selectAllMode:string - Specifies whether the checkbox selection in the table header will select all rows on the current page, all rows across all pages, or none. When set to 'page', the header checkbox selects only the rows visible on the current page. When set to 'all', it selects every row in the dataset, regardless of pagination. Setting this option to 'none' disables the header checkbox, preventing users from selecting all rows at once.
                                                                                                                                                                    • position:string - Sets or retrieves the position of the checkbox selection column within a table or grid, allowing you to specify whether the checkbox column appears at the start (left) or end (right) of the columns.
                                                                                                                                                                    defaultSelectionDetermines whether the default browser behavior for text selection is enabled or disabled. When enabled, users can highlight and select text within the element using their mouse or keyboard. When disabled, text selection is prevented, and users cannot highlight the element’s text. This can be useful for UI components where text selection should be restricted, such as buttons or draggable elements.
                                                                                                                                                                    enabledWhen true, the grid allows user selection of rows and/or cells according to selection.mode, allowRowHeaderSelection, and related properties.
                                                                                                                                                                    modeGets or sets the selection mode, determining how users can select items in the control. The available values are:- ''one'': Only a single cell or row can be selected at any given time.- ''many'': Multiple cells or rows can be selected, typically by individually clicking on them.- ''extended'': Multiple cells or rows can be selected using a combination of mouse clicks and keyboard modifiers (such as Shift or Ctrl), allowing for range or non-contiguous selections.Use this property to control whether users can select only one item, several items, or use advanced selection behaviors.
                                                                                                                                                                    selectedselected
                                                                                                                                                                    Try a demo showcasing the selection property.

                                                                                                                                                                    Full working example

                                                                                                                                                                    Minimal setup for selection with the data and bindings you usually use together on this component.

                                                                                                                                                                    JavaScript — minimal grid with selection:

                                                                                                                                                                    // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const selection = { enabled: true, mode: 'extended' };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	selection
});
                                                                                                                                                                    Related APIs select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    actionControls how selection is triggered: accepts 'click' or 'doubleClick' to specify if selection occurs on a single or double mouse click, respectively. When set to 'none', user interaction does not trigger selection—selection can only be managed programmatically via the API."none" | "click" | "doubleClick"

                                                                                                                                                                    Controls how selection is triggered: accepts 'click' or 'doubleClick' to specify if selection occurs on a single or double mouse click, respectively. When set to 'none', user interaction does not trigger selection—selection can only be managed programmatically via the API.

                                                                                                                                                                    Default value

                                                                                                                                                                    "click"

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Try a demo showcasing the action property.

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const action = el.selection.action;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowCellDragDropSelectionHandleControls whether cells in the selection can be dragged and dropped. When enabled, dragging is initiated by moving the cursor to the bottom edge of the selected cells, causing the cursor to change to a "drag" icon. Clicking and holding the mouse button while moving the selection will initiate the drag operation. By default, dropping the selection copies the values of the dragged cells to the new location. This property can be used to enable or disable drag-and-drop functionality for cell selections.boolean

                                                                                                                                                                    Controls whether cells in the selection can be dragged and dropped. When enabled, dragging is initiated by moving the cursor to the bottom edge of the selected cells, causing the cursor to change to a "drag" icon. Clicking and holding the mouse button while moving the selection will initiate the drag operation. By default, dropping the selection copies the values of the dragged cells to the new location. This property can be used to enable or disable drag-and-drop functionality for cell selections.

                                                                                                                                                                    Default value

                                                                                                                                                                    true

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowCellDragDropSelectionHandle = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowCellDragDropSelectionHandle = el.selection.allowCellDragDropSelectionHandle;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowCellDragSelectionAutoFillControls whether cell selection is automatically populated with values when dragging and releasing the 'Drag Handle'. When enabled, dragging the handle will auto-fill the selected cells with the corresponding values. This property can be set to enable or disable the auto-fill behavior, and can also be used to check the current auto-fill status.boolean

                                                                                                                                                                    Controls whether cell selection is automatically populated with values when dragging and releasing the 'Drag Handle'. When enabled, dragging the handle will auto-fill the selected cells with the corresponding values. This property can be set to enable or disable the auto-fill behavior, and can also be used to check the current auto-fill status.

                                                                                                                                                                    Default value

                                                                                                                                                                    true

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowCellDragSelectionAutoFill = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowCellDragSelectionAutoFill = el.selection.allowCellDragSelectionAutoFill;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowCellDragSelectionHandleControls the visibility of the selection "Drag Handle" (the small square located at the bottom-right corner of a selected cell range, similar to Excel). When enabled, this handle allows users to extend or resize their current selection horizontally or vertically by dragging the handle. This property can be set to show or hide the drag handle, as well as queried to determine its current state.boolean

                                                                                                                                                                    Controls the visibility of the selection "Drag Handle" (the small square located at the bottom-right corner of a selected cell range, similar to Excel). When enabled, this handle allows users to extend or resize their current selection horizontally or vertically by dragging the handle. This property can be set to show or hide the drag handle, as well as queried to determine its current state.

                                                                                                                                                                    Default value

                                                                                                                                                                    true

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowCellDragSelectionHandle = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowCellDragSelectionHandle = el.selection.allowCellDragSelectionHandle;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowCellSelectionDetermines whether users are permitted to select a cell by clicking on it. When enabled, clicking on a cell will select it; when disabled, clicking will have no effect on the cell’s selection state. This property can be set to enable or disable cell selection via mouse interaction.boolean

                                                                                                                                                                    Determines whether users are permitted to select a cell by clicking on it. When enabled, clicking on a cell will select it; when disabled, clicking will have no effect on the cell’s selection state. This property can be set to enable or disable cell selection via mouse interaction.

                                                                                                                                                                    Default value

                                                                                                                                                                    false

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Try a demo showcasing the allowCellSelection property.

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowCellSelection = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowCellSelection = el.selection.allowCellSelection;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowColumnHeaderSelectionDetermines whether users can select a column by clicking on its header. When enabled, clicking a column header will select the entire column. This property can be set to allow or prevent selection via column header clicks, and its current state can be retrieved programmatically.boolean

                                                                                                                                                                    Determines whether users can select a column by clicking on its header. When enabled, clicking a column header will select the entire column. This property can be set to allow or prevent selection via column header clicks, and its current state can be retrieved programmatically.

                                                                                                                                                                    Default value

                                                                                                                                                                    false

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Try a demo showcasing the allowColumnHeaderSelection property.

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowColumnHeaderSelection = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowColumnHeaderSelection = el.selection.allowColumnHeaderSelection;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowDragSelectionControls whether users can select multiple cells by dragging the mouse across them, similar to how selection works in Excel. When enabled, users can click and drag to highlight a range of cells; when disabled, selection by dragging is not permitted. This property can be set or retrieved programmatically.boolean

                                                                                                                                                                    Controls whether users can select multiple cells by dragging the mouse across them, similar to how selection works in Excel. When enabled, users can click and drag to highlight a range of cells; when disabled, selection by dragging is not permitted. This property can be set or retrieved programmatically.

                                                                                                                                                                    Default value

                                                                                                                                                                    true

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowDragSelection = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowDragSelection = el.selection.allowDragSelection;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowDragSelectionAutoScrollDetermines whether the Grid view will automatically scroll when a user selects items by dragging the mouse beyond the current visible area. This property can be set to enable or disable auto-scrolling during drag selection, or retrieved to check the current behavior.boolean

                                                                                                                                                                    Determines whether the Grid view will automatically scroll when a user selects items by dragging the mouse beyond the current visible area. This property can be set to enable or disable auto-scrolling during drag selection, or retrieved to check the current behavior.

                                                                                                                                                                    Default value

                                                                                                                                                                    true

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowDragSelectionAutoScroll = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowDragSelectionAutoScroll = el.selection.allowDragSelectionAutoScroll;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowRowHeaderSelectionDetermines whether users can select rows by clicking on the row header. When enabled, clicking a row header will select the entire row. This property can be used to either allow or prevent selection through row headers.boolean

                                                                                                                                                                    Determines whether users can select rows by clicking on the row header. When enabled, clicking a row header will select the entire row. This property can be used to either allow or prevent selection through row headers.

                                                                                                                                                                    Default value

                                                                                                                                                                    false

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Try a demo showcasing the allowRowHeaderSelection property.

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowRowHeaderSelection = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowRowHeaderSelection = el.selection.allowRowHeaderSelection;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    allowRowSelectionDetermines whether selecting a row by clicking on it is enabled. When set to true, users can select rows with a mouse click; when false, clicking a row will not change its selection state. Use this property to control row selection behavior in the interface.boolean

                                                                                                                                                                    Determines whether selecting a row by clicking on it is enabled. When set to true, users can select rows with a mouse click; when false, clicking a row will not change its selection state. Use this property to control row selection behavior in the interface.

                                                                                                                                                                    Default value

                                                                                                                                                                    true

                                                                                                                                                                    Back to root property: selection

                                                                                                                                                                    Try a demo showcasing the allowRowSelection property.

                                                                                                                                                                    Examples

                                                                                                                                                                    Set a nested field on the element:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
el.selection.allowRowSelection = true;

                                                                                                                                                                    Read the nested value:

                                                                                                                                                                    const el = document.querySelector('smart-grid');
const allowRowSelection = el.selection.allowRowSelection;
                                                                                                                                                                    Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                    checkBoxes Click for more details. Property object's options:
                                                                                                                                                                       object

                                                                                                                                                                      Properties

                                                                                                                                                                      actionDetermines how selection is triggered within the component. Accepts the following values:- ''click'': Selection occurs when the user clicks on the item.- ''doubleClick'': Selection occurs when the user double-clicks on the item.- ''none'': Selection cannot be triggered by user interaction; it can only be set or changed programmatically via the API.This property can be used to both retrieve the current selection mode or set a new one.
                                                                                                                                                                      autoShowControls the visibility of checkboxes within the Grid. When set to true, checkboxes are only displayed when the mouse hovers over the Grid. When set to false, checkboxes remain visible at all times, regardless of mouse position. This property can be used to create a cleaner interface by showing checkboxes only on hover.
                                                                                                                                                                      enabledEnables or disables the checkbox selection feature. When enabled, an additional column containing checkboxes is displayed, allowing users to select multiple rows. You can use this property to programmatically determine or change whether checkbox selection is active.
                                                                                                                                                                      positionSets or retrieves the position of the checkbox selection column within a table or grid, allowing you to specify whether the checkbox column appears at the start (left) or end (right) of the columns.
                                                                                                                                                                      selectAllModeSpecifies whether the checkbox selection in the table header will select all rows on the current page, all rows across all pages, or none. When set to 'page', the header checkbox selects only the rows visible on the current page. When set to 'all', it selects every row in the dataset, regardless of pagination. Setting this option to 'none' disables the header checkbox, preventing users from selecting all rows at once.

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Try a demo showcasing the checkBoxes property.

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const checkBoxes = el.selection.checkBoxes;

                                                                                                                                                                      actionDetermines how selection is triggered within the component. Accepts the following values:- ''click'': Selection occurs when the user clicks on the item.- ''doubleClick'': Selection occurs when the user double-clicks on the item.- ''none'': Selection cannot be triggered by user interaction; it can only be set or changed programmatically via the API.This property can be used to both retrieve the current selection mode or set a new one."none" | "click" | "doubleClick"

                                                                                                                                                                      Determines how selection is triggered within the component. Accepts the following values:

                                                                                                                                                                      - ''click'': Selection occurs when the user clicks on the item.
                                                                                                                                                                      - ''doubleClick'': Selection occurs when the user double-clicks on the item.
                                                                                                                                                                      - ''none'': Selection cannot be triggered by user interaction; it can only be set or changed programmatically via the API.

                                                                                                                                                                      This property can be used to both retrieve the current selection mode or set a new one.

                                                                                                                                                                      Default value

                                                                                                                                                                      "click"

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Try a demo showcasing the action property.

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const action = el.selection.checkBoxes[0].action;
                                                                                                                                                                      Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                      autoShowControls the visibility of checkboxes within the Grid. When set to true, checkboxes are only displayed when the mouse hovers over the Grid. When set to false, checkboxes remain visible at all times, regardless of mouse position. This property can be used to create a cleaner interface by showing checkboxes only on hover.boolean

                                                                                                                                                                      Controls the visibility of checkboxes within the Grid. When set to true, checkboxes are only displayed when the mouse hovers over the Grid. When set to false, checkboxes remain visible at all times, regardless of mouse position. This property can be used to create a cleaner interface by showing checkboxes only on hover.

                                                                                                                                                                      Default value

                                                                                                                                                                      false

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Try a demo showcasing the autoShow property.

                                                                                                                                                                      Examples

                                                                                                                                                                      Set a nested field on the element:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
el.selection.checkBoxes[0].autoShow = true;

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const autoShow = el.selection.checkBoxes[0].autoShow;

                                                                                                                                                                      enabledEnables or disables the checkbox selection feature. When enabled, an additional column containing checkboxes is displayed, allowing users to select multiple rows. You can use this property to programmatically determine or change whether checkbox selection is active.boolean

                                                                                                                                                                      Enables or disables the checkbox selection feature. When enabled, an additional column containing checkboxes is displayed, allowing users to select multiple rows. You can use this property to programmatically determine or change whether checkbox selection is active.

                                                                                                                                                                      Default value

                                                                                                                                                                      false

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Examples

                                                                                                                                                                      Set a nested field on the element:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
el.selection.checkBoxes[0].enabled = true;

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const enabled = el.selection.checkBoxes[0].enabled;
                                                                                                                                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                      positionSets or retrieves the position of the checkbox selection column within a table or grid, allowing you to specify whether the checkbox column appears at the start (left) or end (right) of the columns."near" | "far"

                                                                                                                                                                      Sets or retrieves the position of the checkbox selection column within a table or grid, allowing you to specify whether the checkbox column appears at the start (left) or end (right) of the columns.

                                                                                                                                                                      Default value

                                                                                                                                                                      "near"

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const position = el.selection.checkBoxes[0].position;
                                                                                                                                                                      Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                      selectAllModeSpecifies whether the checkbox selection in the table header will select all rows on the current page, all rows across all pages, or none. When set to 'page', the header checkbox selects only the rows visible on the current page. When set to 'all', it selects every row in the dataset, regardless of pagination. Setting this option to 'none' disables the header checkbox, preventing users from selecting all rows at once."none" | "page" | "all"

                                                                                                                                                                      Specifies whether the checkbox selection in the table header will select all rows on the current page, all rows across all pages, or none. When set to 'page', the header checkbox selects only the rows visible on the current page. When set to 'all', it selects every row in the dataset, regardless of pagination. Setting this option to 'none' disables the header checkbox, preventing users from selecting all rows at once.

                                                                                                                                                                      Default value

                                                                                                                                                                      "page"

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Try a demo showcasing the selectAllMode property.

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const selectAllMode = el.selection.checkBoxes[0].selectAllMode;
                                                                                                                                                                      Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                      defaultSelectionDetermines whether the default browser behavior for text selection is enabled or disabled. When enabled, users can highlight and select text within the element using their mouse or keyboard. When disabled, text selection is prevented, and users cannot highlight the element’s text. This can be useful for UI components where text selection should be restricted, such as buttons or draggable elements.boolean

                                                                                                                                                                      Determines whether the default browser behavior for text selection is enabled or disabled. When enabled, users can highlight and select text within the element using their mouse or keyboard. When disabled, text selection is prevented, and users cannot highlight the element’s text. This can be useful for UI components where text selection should be restricted, such as buttons or draggable elements.

                                                                                                                                                                      Default value

                                                                                                                                                                      false

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Examples

                                                                                                                                                                      Set a nested field on the element:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
el.selection.defaultSelection = true;

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const defaultSelection = el.selection.defaultSelection;
                                                                                                                                                                      Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                      enabledWhen true, the grid allows user selection of rows and/or cells according to selection.mode, allowRowHeaderSelection, and related properties.boolean

                                                                                                                                                                      When true, the grid allows user selection of rows and/or cells according to selection.mode, allowRowHeaderSelection, and related properties.

                                                                                                                                                                      Default value

                                                                                                                                                                      false

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Examples

                                                                                                                                                                      Set a nested field on the element:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
el.selection.enabled = true;

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const enabled = el.selection.enabled;
                                                                                                                                                                      Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                      modeGets or sets the selection mode, determining how users can select items in the control. The available values are:- ''one'': Only a single cell or row can be selected at any given time.- ''many'': Multiple cells or rows can be selected, typically by individually clicking on them.- ''extended'': Multiple cells or rows can be selected using a combination of mouse clicks and keyboard modifiers (such as Shift or Ctrl), allowing for range or non-contiguous selections.Use this property to control whether users can select only one item, several items, or use advanced selection behaviors."one" | "many" | "extended"

                                                                                                                                                                      Gets or sets the selection mode, determining how users can select items in the control. The available values are:

                                                                                                                                                                      - ''one'': Only a single cell or row can be selected at any given time.
                                                                                                                                                                      - ''many'': Multiple cells or rows can be selected, typically by individually clicking on them.
                                                                                                                                                                      - ''extended'': Multiple cells or rows can be selected using a combination of mouse clicks and keyboard modifiers (such as Shift or Ctrl), allowing for range or non-contiguous selections.

                                                                                                                                                                      Use this property to control whether users can select only one item, several items, or use advanced selection behaviors.

                                                                                                                                                                      Default value

                                                                                                                                                                      "many"

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Examples

                                                                                                                                                                      Set a nested field on the element:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
el.selection.mode = "extended";

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const mode = el.selection.mode;
                                                                                                                                                                      Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                      selectedstring

                                                                                                                                                                      Default value

                                                                                                                                                                      ""

                                                                                                                                                                      Back to root property: selection

                                                                                                                                                                      Try a demo showcasing the selected property.

                                                                                                                                                                      Read the nested value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const selected = el.selection.selected;
                                                                                                                                                                      Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                      sortableEnables column sorting. Shorthand: sets sorting.enabled to true.boolean

                                                                                                                                                                      Enables column sorting. Shorthand: sets sorting.enabled to true.

                                                                                                                                                                      Default value

                                                                                                                                                                      false

                                                                                                                                                                      Examples

                                                                                                                                                                      Markup and runtime examples for sortable:

                                                                                                                                                                      HTML attribute:

                                                                                                                                                                      <smart-grid sortable></smart-grid>

                                                                                                                                                                      Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
el.sortable = true;

                                                                                                                                                                      Read the current value:

                                                                                                                                                                      const el = document.querySelector('smart-grid');
const sortable = el.sortable;
                                                                                                                                                                      Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                      sortingProvides 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. Click for more details. Property object's options:
                                                                                                                                                                         object

                                                                                                                                                                        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.

                                                                                                                                                                        Properties

                                                                                                                                                                        commandKeySpecifies which keyboard key activates multi-column sorting. This property determines the key that users must hold down to enable sorting by multiple columns simultaneously. For example, if commandKey is set to 'Control', users can select and sort multiple columns by holding the 'Control' key while clicking on column headers. Adjust this property to match the desired key for multi-column sorting functionality (e.g., 'Alt', 'Shift', or 'Meta').
                                                                                                                                                                        enabledEnables sorting functionality, allowing users to organize data in ascending or descending order based on specified fields or columns.
                                                                                                                                                                        maintainSortEnsures that the sorting order is preserved when the user edits data within the currently sorted column. If you want the sorting to be applied only once—so that edited data does not automatically re-sort the column—you can disable this feature by setting the property to false. This allows the column's order to remain unchanged after data edits, rather than reapplying the sort.
                                                                                                                                                                        modeSpecifies the maximum number of columns by which users can sort the data. When this property is set to 'many', users are allowed to apply sorting to multiple columns simultaneously, enabling multi-level sorting functionality.
                                                                                                                                                                        sortConfigures which columns will be used for sorting the data and determines their sort order (e.g., ascending or descending) during the sorting operation.
                                                                                                                                                                        sortToggleOnClickAllows users to change the sorting state (e.g., ascending, descending, or none) of a column by clicking its header. This feature is enabled by default, enabling interactive sorting functionality within the table.
                                                                                                                                                                        sortToggleOnClickAndCommandKeyAllows users to toggle through different column sort states (such as ascending, descending, and unsorted) by clicking on a column header. Holding down the Command key while clicking enables multi-column sorting, letting users modify the sort order of multiple columns at once.
                                                                                                                                                                        sortToggleThreeStatesAllows users to toggle between three sorting options: ascending order, descending order, and no sorting applied. This functionality enables dynamic changes to the sorting state of a data set or list, providing greater flexibility and control over how information is presented.
                                                                                                                                                                        Try a demo showcasing the sorting property.

                                                                                                                                                                        Full working example

                                                                                                                                                                        Minimal setup for sorting with the data and bindings you usually use together on this component.

                                                                                                                                                                        JavaScript — minimal grid with sorting:

                                                                                                                                                                        // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const sorting = { enabled: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	sorting
});
                                                                                                                                                                        Related APIs addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                        commandKeySpecifies which keyboard key activates multi-column sorting. This property determines the key that users must hold down to enable sorting by multiple columns simultaneously. For example, if commandKey is set to 'Control', users can select and sort multiple columns by holding the 'Control' key while clicking on column headers. Adjust this property to match the desired key for multi-column sorting functionality (e.g., 'Alt', 'Shift', or 'Meta')."Default" | "Alt" | "Control" | "Shift"

                                                                                                                                                                        Specifies which keyboard key activates multi-column sorting. This property determines the key that users must hold down to enable sorting by multiple columns simultaneously. For example, if commandKey is set to 'Control', users can select and sort multiple columns by holding the 'Control' key while clicking on column headers. Adjust this property to match the desired key for multi-column sorting functionality (e.g., 'Alt', 'Shift', or 'Meta').

                                                                                                                                                                        Default value

                                                                                                                                                                        "Default"

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Examples

                                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
el.sorting.commandKey = "Shift";

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const commandKey = el.sorting.commandKey;
                                                                                                                                                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                        enabledEnables sorting functionality, allowing users to organize data in ascending or descending order based on specified fields or columns.boolean

                                                                                                                                                                        Enables sorting functionality, allowing users to organize data in ascending or descending order based on specified fields or columns.

                                                                                                                                                                        Default value

                                                                                                                                                                        false

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Examples

                                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
el.sorting.enabled = true;

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const enabled = el.sorting.enabled;
                                                                                                                                                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                        maintainSortEnsures that the sorting order is preserved when the user edits data within the currently sorted column. If you want the sorting to be applied only once—so that edited data does not automatically re-sort the column—you can disable this feature by setting the property to false. This allows the column's order to remain unchanged after data edits, rather than reapplying the sort.boolean

                                                                                                                                                                        Ensures that the sorting order is preserved when the user edits data within the currently sorted column. If you want the sorting to be applied only once—so that edited data does not automatically re-sort the column—you can disable this feature by setting the property to false. This allows the column's order to remain unchanged after data edits, rather than reapplying the sort.

                                                                                                                                                                        Default value

                                                                                                                                                                        true

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Examples

                                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
el.sorting.maintainSort = false;

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const maintainSort = el.sorting.maintainSort;
                                                                                                                                                                        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                        modeSpecifies the maximum number of columns by which users can sort the data. When this property is set to 'many', users are allowed to apply sorting to multiple columns simultaneously, enabling multi-level sorting functionality."one" | "many"

                                                                                                                                                                        Specifies the maximum number of columns by which users can sort the data. When this property is set to 'many', users are allowed to apply sorting to multiple columns simultaneously, enabling multi-level sorting functionality.

                                                                                                                                                                        Default value

                                                                                                                                                                        "one"

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Examples

                                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
el.sorting.mode = "many";

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const mode = el.sorting.mode;
                                                                                                                                                                        Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                        sortConfigures which columns will be used for sorting the data and determines their sort order (e.g., ascending or descending) during the sorting operation. string[]

                                                                                                                                                                        Configures which columns will be used for sorting the data and determines their sort order (e.g., ascending or descending) during the sorting operation.

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Try a demo showcasing the sort property.

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const sort = el.sorting.sort;
                                                                                                                                                                        Related APIs sorting addSort() removeSort() clearSort() sortBy()

                                                                                                                                                                        sortToggleOnClickAllows users to change the sorting state (e.g., ascending, descending, or none) of a column by clicking its header. This feature is enabled by default, enabling interactive sorting functionality within the table.boolean

                                                                                                                                                                        Allows users to change the sorting state (e.g., ascending, descending, or none) of a column by clicking its header. This feature is enabled by default, enabling interactive sorting functionality within the table.

                                                                                                                                                                        Default value

                                                                                                                                                                        true

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Examples

                                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
el.sorting.sortToggleOnClick = true;

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const sortToggleOnClick = el.sorting.sortToggleOnClick;
                                                                                                                                                                        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                        sortToggleOnClickAndCommandKeyAllows users to toggle through different column sort states (such as ascending, descending, and unsorted) by clicking on a column header. Holding down the Command key while clicking enables multi-column sorting, letting users modify the sort order of multiple columns at once.boolean

                                                                                                                                                                        Allows users to toggle through different column sort states (such as ascending, descending, and unsorted) by clicking on a column header. Holding down the Command key while clicking enables multi-column sorting, letting users modify the sort order of multiple columns at once.

                                                                                                                                                                        Default value

                                                                                                                                                                        false

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Examples

                                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
el.sorting.sortToggleOnClickAndCommandKey = true;

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const sortToggleOnClickAndCommandKey = el.sorting.sortToggleOnClickAndCommandKey;
                                                                                                                                                                        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                        sortToggleThreeStatesAllows users to toggle between three sorting options: ascending order, descending order, and no sorting applied. This functionality enables dynamic changes to the sorting state of a data set or list, providing greater flexibility and control over how information is presented.boolean

                                                                                                                                                                        Allows users to toggle between three sorting options: ascending order, descending order, and no sorting applied. This functionality enables dynamic changes to the sorting state of a data set or list, providing greater flexibility and control over how information is presented.

                                                                                                                                                                        Default value

                                                                                                                                                                        true

                                                                                                                                                                        Back to root property: sorting

                                                                                                                                                                        Examples

                                                                                                                                                                        Set a nested field on the element:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
el.sorting.sortToggleThreeStates = true;

                                                                                                                                                                        Read the nested value:

                                                                                                                                                                        const el = document.querySelector('smart-grid');
const sortToggleThreeStates = el.sorting.sortToggleThreeStates;
                                                                                                                                                                        Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                        stateSettingsConfigures 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. Click for more details. Property object's options:
                                                                                                                                                                           object

                                                                                                                                                                          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.

                                                                                                                                                                          Properties

                                                                                                                                                                          autoLoadControls whether the Grid automatically restores its previous state (such as filters, sorting, and column arrangements) when the page is reloaded. When enabled, the Grid will load the saved state on page refresh; when disabled, the Grid will reset to its default configuration.
                                                                                                                                                                          autoSaveControls whether the Grid's current state (such as column order, filter settings, and sorting) is automatically saved or not. When enabled, any changes to the Grid's configuration are stored automatically for later retrieval.
                                                                                                                                                                          currentSets a new state value or retrieves the current state value. When a value is provided, the state is updated to the new value. If no value is provided, the current state is returned. This is typically used to manage and track changes in application state.
                                                                                                                                                                          enabledControls whether the grid's current state—such as column order, sorting, filtering, and visibility—is automatically saved and restored when loading or reloading the grid. When enabled, changes made by the user are preserved, providing a consistent experience across sessions. Disabling this option prevents the grid from saving or restoring any state information.
                                                                                                                                                                          onStateChangeFunction invoked whenever the component’s state changes, allowing you to respond to or handle updates accordingly.
                                                                                                                                                                          optionsAn array specifying which table state options—such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', and 'columns'—should be persisted. Each value in the array represents a different aspect of the table’s state that can be saved or restored (e.g., saving the current sorting order, applied filters, selected rows, or column configuration). This property allows you to control exactly which parts of the table state are stored and later reloaded, enabling customized persistence and retrieval of user interactions.
                                                                                                                                                                          storageA container that automatically stores state objects whenever the saveState method is called or when autoSave is enabled. Each entry in the container uses the state's name as the key and the corresponding value is a JSON object containing that state's properties and data. This structure allows for easy retrieval and management of multiple application states by name.
                                                                                                                                                                          Try a demo showcasing the stateSettings property. 
                                                                                                                                                                          Example about dataSource
                                                                                                                                                                          
const grid = new Smart.Grid('#grid', {
	dataSource: new Smart.DataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
                                                                                                                                                                          Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                                          autoLoadControls whether the Grid automatically restores its previous state (such as filters, sorting, and column arrangements) when the page is reloaded. When enabled, the Grid will load the saved state on page refresh; when disabled, the Grid will reset to its default configuration.boolean

                                                                                                                                                                          Controls whether the Grid automatically restores its previous state (such as filters, sorting, and column arrangements) when the page is reloaded. When enabled, the Grid will load the saved state on page refresh; when disabled, the Grid will reset to its default configuration.

                                                                                                                                                                          Default value

                                                                                                                                                                          false

                                                                                                                                                                          Back to root property: stateSettings

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const autoLoad = el.stateSettings[0].autoLoad;
                                                                                                                                                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                          autoSaveControls whether the Grid's current state (such as column order, filter settings, and sorting) is automatically saved or not. When enabled, any changes to the Grid's configuration are stored automatically for later retrieval.boolean

                                                                                                                                                                          Controls whether the Grid's current state (such as column order, filter settings, and sorting) is automatically saved or not. When enabled, any changes to the Grid's configuration are stored automatically for later retrieval.

                                                                                                                                                                          Default value

                                                                                                                                                                          false

                                                                                                                                                                          Back to root property: stateSettings

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const autoSave = el.stateSettings[0].autoSave;
                                                                                                                                                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                          currentSets a new state value or retrieves the current state value. When a value is provided, the state is updated to the new value. If no value is provided, the current state is returned. This is typically used to manage and track changes in application state.string

                                                                                                                                                                          Sets a new state value or retrieves the current state value. When a value is provided, the state is updated to the new value. If no value is provided, the current state is returned. This is typically used to manage and track changes in application state.

                                                                                                                                                                          Default value

                                                                                                                                                                          ""

                                                                                                                                                                          Back to root property: stateSettings

                                                                                                                                                                          Examples

                                                                                                                                                                          Set a nested field on the element:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
el.stateSettings[0].current = "state2";

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const current = el.stateSettings[0].current;

                                                                                                                                                                          enabledControls whether the grid's current state—such as column order, sorting, filtering, and visibility—is automatically saved and restored when loading or reloading the grid. When enabled, changes made by the user are preserved, providing a consistent experience across sessions. Disabling this option prevents the grid from saving or restoring any state information.boolean

                                                                                                                                                                          Controls whether the grid's current state—such as column order, sorting, filtering, and visibility—is automatically saved and restored when loading or reloading the grid. When enabled, changes made by the user are preserved, providing a consistent experience across sessions. Disabling this option prevents the grid from saving or restoring any state information.

                                                                                                                                                                          Default value

                                                                                                                                                                          true

                                                                                                                                                                          Back to root property: stateSettings

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const enabled = el.stateSettings[0].enabled;
                                                                                                                                                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                          onStateChangeFunction invoked whenever the component’s state changes, allowing you to respond to or handle updates accordingly.any

                                                                                                                                                                          Function invoked whenever the component’s state changes, allowing you to respond to or handle updates accordingly.

                                                                                                                                                                          Default value

                                                                                                                                                                          ""

                                                                                                                                                                          Back to root property: stateSettings

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const onStateChange = el.stateSettings[0].onStateChange;

                                                                                                                                                                          optionsAn array specifying which table state options—such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', and 'columns'—should be persisted. Each value in the array represents a different aspect of the table’s state that can be saved or restored (e.g., saving the current sorting order, applied filters, selected rows, or column configuration). This property allows you to control exactly which parts of the table state are stored and later reloaded, enabling customized persistence and retrieval of user interactions. string[]

                                                                                                                                                                          An array specifying which table state options—such as 'sort', 'filter', 'expandedRows', 'paging', 'selectedCells', 'selectedRows', 'group', and 'columns'—should be persisted. Each value in the array represents a different aspect of the table’s state that can be saved or restored (e.g., saving the current sorting order, applied filters, selected rows, or column configuration). This property allows you to control exactly which parts of the table state are stored and later reloaded, enabling customized persistence and retrieval of user interactions.

                                                                                                                                                                          Back to root property: stateSettings

                                                                                                                                                                          Try a demo showcasing the options property.

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const options = el.stateSettings[0].options;
                                                                                                                                                                          Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                          storageA container that automatically stores state objects whenever the saveState method is called or when autoSave is enabled. Each entry in the container uses the state's name as the key and the corresponding value is a JSON object containing that state's properties and data. This structure allows for easy retrieval and management of multiple application states by name.any

                                                                                                                                                                          A container that automatically stores state objects whenever the saveState method is called or when autoSave is enabled. Each entry in the container uses the state's name as the key and the corresponding value is a JSON object containing that state's properties and data. This structure allows for easy retrieval and management of multiple application states by name.

                                                                                                                                                                          Back to root property: stateSettings

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const storage = el.stateSettings[0].storage;
                                                                                                                                                                          Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                          summaryRowProvides detailed configuration options for displaying and customizing the summary row, including its appearance, position, aggregation methods, and which columns are summarized. object

                                                                                                                                                                          Provides detailed configuration options for displaying and customizing the summary row, including its appearance, position, aggregation methods, and which columns are summarized.

                                                                                                                                                                          Properties

                                                                                                                                                                          editingEnables the summary row editor, allowing users to interactively edit summary row cells. When you hover over a cell in the summary row, an inline editor appears, so you can dynamically change the summary type (e.g., sum, average, count) directly within the table. This feature improves data analysis by making it easy to adjust summary calculations on the fly.
                                                                                                                                                                          visibleControls whether the summary row is displayed or hidden in the table.
                                                                                                                                                                          Try a demo showcasing the summaryRow property.

                                                                                                                                                                          Full working example

                                                                                                                                                                          Minimal setup for summaryRow with the data and bindings you usually use together on this component.

                                                                                                                                                                          JavaScript — minimal grid with summaryRow:

                                                                                                                                                                          // Data: plain array or Smart.DataAdapter
const dataSource = [
	{ firstName: 'Nancy', lastName: 'Davolio', productName: 'Chai', quantity: 2, total: 38.4 },
	{ firstName: 'Andrew', lastName: 'Fuller', productName: 'Chang', quantity: 5, total: 117.5 }
];

const columns = [
	{ label: 'First name', dataField: 'firstName', width: 130 },
	{ label: 'Last name', dataField: 'lastName', width: 130 },
	{ label: 'Product', dataField: 'productName', minWidth: 120 },
	{ label: 'Qty', dataField: 'quantity', cellsFormat: 'n0', width: 72 },
	{ label: 'Total', dataField: 'total', cellsFormat: 'c2', width: 90 }
];

const summaryrow = { visible: true };

const grid = new Smart.Grid('#myGrid', {
	dataSource,
	columns,
	summaryrow
});
                                                                                                                                                                          Related APIs appearance layout refresh() change

                                                                                                                                                                          editingEnables the summary row editor, allowing users to interactively edit summary row cells. When you hover over a cell in the summary row, an inline editor appears, so you can dynamically change the summary type (e.g., sum, average, count) directly within the table. This feature improves data analysis by making it easy to adjust summary calculations on the fly.boolean

                                                                                                                                                                          Enables the summary row editor, allowing users to interactively edit summary row cells. When you hover over a cell in the summary row, an inline editor appears, so you can dynamically change the summary type (e.g., sum, average, count) directly within the table. This feature improves data analysis by making it easy to adjust summary calculations on the fly.

                                                                                                                                                                          Default value

                                                                                                                                                                          false

                                                                                                                                                                          Back to root property: summaryRow

                                                                                                                                                                          Try a demo showcasing the editing property.

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const editing = el.summaryRow.editing;
                                                                                                                                                                          Related APIs editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                          visibleControls whether the summary row is displayed or hidden in the table.boolean

                                                                                                                                                                          Controls whether the summary row is displayed or hidden in the table.

                                                                                                                                                                          Default value

                                                                                                                                                                          false

                                                                                                                                                                          Back to root property: summaryRow

                                                                                                                                                                          Try a demo showcasing the visible property.

                                                                                                                                                                          Read the nested value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const visible = el.summaryRow.visible;
                                                                                                                                                                          Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                          unlockKeySets 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.string

                                                                                                                                                                          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.

                                                                                                                                                                          Default value

                                                                                                                                                                          ""

                                                                                                                                                                          Examples

                                                                                                                                                                          Markup and runtime examples for unlockKey:

                                                                                                                                                                          HTML:

                                                                                                                                                                          <smart-grid unlock-key=""></smart-grid>

                                                                                                                                                                          Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
el.unlockKey = "1111-2222-3333-4444-5555";

                                                                                                                                                                          Read the current value:

                                                                                                                                                                          const el = document.querySelector('smart-grid');
const unlockKey = el.unlockKey;

                                                                                                                                                                          uploadSettingsConfigures 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. Click for more details. Property object's options:
                                                                                                                                                                             object

                                                                                                                                                                            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.

                                                                                                                                                                            Properties

                                                                                                                                                                            dataSupplementary information to be sent to the server. This data must be provided as a JSON-formatted string (i.e., a serialized JSON object or array). Ensure all values are properly encoded and the string adheres to valid JSON syntax before submission.
                                                                                                                                                                            nameSets or retrieves the name of the file input field used for uploads. This field name is crucial for accessing uploaded image data on the backend. For example, in an Express.js application handling file uploads (e.g., using multer or a similar middleware), you would use this field name to reference the uploaded files from the request object. If the upload field name is set to "userfile[]", you can access the array of uploaded images in your route handler like so: '''javascriptconst images = req.files['userfile[]'];'''Make sure the field name specified here matches the name attribute of your file input element in the frontend form, enabling seamless retrieval of uploaded files on the server side.
                                                                                                                                                                            onUploadCompleted"This function is triggered after the upload process completes. When invoked by the Grid, it receives a JSON object as a parameter. The JSON object contains the following properties:- 'files': An array listing the uploaded file(s).- 'status': A string indicating the result of the upload (e.g., 'success', 'error').- 'fileURL': The URL(s) where the uploaded file(s) can be accessed.- 'serverResponse': The response data returned by the server upon upload completion.Use this function to handle post-upload actions such as updating the UI, processing the server response, or handling errors."
                                                                                                                                                                            onUploadErrorThis function is triggered when a file upload fails. It receives a JSON object as a parameter, which contains the following properties:- 'files': An array of file objects that failed to upload.- 'status': The HTTP status code or error status associated with the failure.- 'serverResponse': The full response returned by the server, which may include error messages or additional details about the upload failure.This function is automatically invoked by the Grid component whenever an upload error occurs, allowing you to handle the failure appropriately in your code.
                                                                                                                                                                            removeUrlSpecifies the URL endpoint to handle file or image removal requests. This URL will be used when a file or image needs to be deleted from the server.
                                                                                                                                                                            urlSpecifies the URL endpoint used for uploading files or images. This URL is where the files or images will be submitted during the upload process.
                                                                                                                                                                            Try a demo showcasing the uploadSettings property. 
                                                                                                                                                                            Example about dataSource
                                                                                                                                                                            
const grid = new Smart.Grid('#grid', {
	dataSource: new Smart.DataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            dataSupplementary information to be sent to the server. This data must be provided as a JSON-formatted string (i.e., a serialized JSON object or array). Ensure all values are properly encoded and the string adheres to valid JSON syntax before submission.string

                                                                                                                                                                            Supplementary information to be sent to the server. This data must be provided as a JSON-formatted string (i.e., a serialized JSON object or array). Ensure all values are properly encoded and the string adheres to valid JSON syntax before submission.

                                                                                                                                                                            Default value

                                                                                                                                                                            ""

                                                                                                                                                                            Back to root property: uploadSettings

                                                                                                                                                                            Examples

                                                                                                                                                                            Set a nested field on the element:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
el.uploadSettings[0].data = "files";

                                                                                                                                                                            Read the nested value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const data = el.uploadSettings[0].data;
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            nameSets or retrieves the name of the file input field used for uploads. This field name is crucial for accessing uploaded image data on the backend. For example, in an Express.js application handling file uploads (e.g., using multer or a similar middleware), you would use this field name to reference the uploaded files from the request object. If the upload field name is set to "userfile[]", you can access the array of uploaded images in your route handler like so: '''javascriptconst images = req.files['userfile[]'];'''Make sure the field name specified here matches the name attribute of your file input element in the frontend form, enabling seamless retrieval of uploaded files on the server side.string

                                                                                                                                                                            Sets or retrieves the name of the file input field used for uploads. This field name is crucial for accessing uploaded image data on the backend. For example, in an Express.js application handling file uploads (e.g., using multer or a similar middleware), you would use this field name to reference the uploaded files from the request object. If the upload field name is set to "userfile[]", you can access the array of uploaded images in your route handler like so:

                                                                                                                                                                            '''javascript
                                                                                                                                                                            const images = req.files['userfile[]'];
                                                                                                                                                                            '''

                                                                                                                                                                            Make sure the field name specified here matches the name attribute of your file input element in the frontend form, enabling seamless retrieval of uploaded files on the server side.

                                                                                                                                                                            Default value

                                                                                                                                                                            "userfile[]"

                                                                                                                                                                            Back to root property: uploadSettings

                                                                                                                                                                            Try a demo showcasing the name property.

                                                                                                                                                                            Examples

                                                                                                                                                                            Set a nested field on the element:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
el.uploadSettings[0].name = "files";

                                                                                                                                                                            Read the nested value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const name = el.uploadSettings[0].name;
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            onUploadCompleted"This function is triggered after the upload process completes. When invoked by the Grid, it receives a JSON object as a parameter. The JSON object contains the following properties:- 'files': An array listing the uploaded file(s).- 'status': A string indicating the result of the upload (e.g., 'success', 'error').- 'fileURL': The URL(s) where the uploaded file(s) can be accessed.- 'serverResponse': The response data returned by the server upon upload completion.Use this function to handle post-upload actions such as updating the UI, processing the server response, or handling errors."any


                                                                                                                                                                            "This function is triggered after the upload process completes. When invoked by the Grid, it receives a JSON object as a parameter. The JSON object contains the following properties:

                                                                                                                                                                            - 'files': An array listing the uploaded file(s).
                                                                                                                                                                            - 'status': A string indicating the result of the upload (e.g., 'success', 'error').
                                                                                                                                                                            - 'fileURL': The URL(s) where the uploaded file(s) can be accessed.
                                                                                                                                                                            - 'serverResponse': The response data returned by the server upon upload completion.

                                                                                                                                                                            Use this function to handle post-upload actions such as updating the UI, processing the server response, or handling errors."

                                                                                                                                                                            Default value

                                                                                                                                                                            ""

                                                                                                                                                                            Back to root property: uploadSettings

                                                                                                                                                                            Read the nested value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const onUploadCompleted = el.uploadSettings[0].onUploadCompleted;
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            onUploadErrorThis function is triggered when a file upload fails. It receives a JSON object as a parameter, which contains the following properties:- 'files': An array of file objects that failed to upload.- 'status': The HTTP status code or error status associated with the failure.- 'serverResponse': The full response returned by the server, which may include error messages or additional details about the upload failure.This function is automatically invoked by the Grid component whenever an upload error occurs, allowing you to handle the failure appropriately in your code.any

                                                                                                                                                                            This function is triggered when a file upload fails. It receives a JSON object as a parameter, which contains the following properties:

                                                                                                                                                                            - 'files': An array of file objects that failed to upload.
                                                                                                                                                                            - 'status': The HTTP status code or error status associated with the failure.
                                                                                                                                                                            - 'serverResponse': The full response returned by the server, which may include error messages or additional details about the upload failure.

                                                                                                                                                                            This function is automatically invoked by the Grid component whenever an upload error occurs, allowing you to handle the failure appropriately in your code.

                                                                                                                                                                            Default value

                                                                                                                                                                            ""

                                                                                                                                                                            Back to root property: uploadSettings

                                                                                                                                                                            Read the nested value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const onUploadError = el.uploadSettings[0].onUploadError;

                                                                                                                                                                            removeUrlSpecifies the URL endpoint to handle file or image removal requests. This URL will be used when a file or image needs to be deleted from the server.string

                                                                                                                                                                            Specifies the URL endpoint to handle file or image removal requests. This URL will be used when a file or image needs to be deleted from the server.

                                                                                                                                                                            Default value

                                                                                                                                                                            ""

                                                                                                                                                                            Back to root property: uploadSettings

                                                                                                                                                                            Examples

                                                                                                                                                                            Set a nested field on the element:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
el.uploadSettings[0].removeUrl = "https://myuploadurl.com";

                                                                                                                                                                            Read the nested value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const removeUrl = el.uploadSettings[0].removeUrl;

                                                                                                                                                                            urlSpecifies the URL endpoint used for uploading files or images. This URL is where the files or images will be submitted during the upload process.string

                                                                                                                                                                            Specifies the URL endpoint used for uploading files or images. This URL is where the files or images will be submitted during the upload process.

                                                                                                                                                                            Default value

                                                                                                                                                                            ""

                                                                                                                                                                            Back to root property: uploadSettings

                                                                                                                                                                            Examples

                                                                                                                                                                            Set a nested field on the element:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
el.uploadSettings[0].url = "https://myuploadurl.com";

                                                                                                                                                                            Read the nested value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const url = el.uploadSettings[0].url;

                                                                                                                                                                            usersDefines 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).[]

                                                                                                                                                                            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).

                                                                                                                                                                            Default value

                                                                                                                                                                            []
                                                                                                                                                                            Try a demo showcasing the users property.

                                                                                                                                                                            Examples

                                                                                                                                                                            Markup and runtime examples for users:

                                                                                                                                                                            HTML:

                                                                                                                                                                            <smart-grid users="[]"></smart-grid>

                                                                                                                                                                            Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
el.users = [{"id":1,"name":"User A"}];

                                                                                                                                                                            Read the current value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const users = el.users;
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            viewSpecifies 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.string

                                                                                                                                                                            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.

                                                                                                                                                                            Default value

                                                                                                                                                                            "grid"
                                                                                                                                                                            Try a demo showcasing the view property.

                                                                                                                                                                            Examples

                                                                                                                                                                            Markup and runtime examples for view:

                                                                                                                                                                            HTML:

                                                                                                                                                                            <smart-grid view="grid"></smart-grid>

                                                                                                                                                                            Vanilla JS — prefer #id if multiple widgets exist on the page:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
el.view = "card";

                                                                                                                                                                            Read the current value:

                                                                                                                                                                            const el = document.querySelector('smart-grid');
const view = el.view;
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            Events

                                                                                                                                                                            batchCancelTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onBatchCancel

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.type string - The type of dropdown where the cancellation occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for batchCancel using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('batchCancel', (event) => {
    const detail = event.detail,
        type = detail.type;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            batchChangeTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onBatchChange

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.type string - The type of dropdown where the batch change occurred. Possible values: 'filter', 'sort', 'search', 'group', 'format', 'customize'.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for batchChange using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('batchChange', (event) => {
    const detail = event.detail,
        type = detail.type;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            beginEditThis 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onBeginEdit

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the edited row.
                                                                                                                                                                            ev.detail.dataField string - The data field (column) associated with the edited cell.
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The edited row's full configuration object.
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The column configuration of the edited cell.
                                                                                                                                                                            ev.detail.cell Smart.Grid.Cell - The edited cell object.
                                                                                                                                                                            ev.detail.data object - The complete data record of the edited row.
                                                                                                                                                                            ev.detail.value object - The current value of the edited cell.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the beginEdit event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for beginEdit using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('beginEdit', (event) => {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        column = detail.column,
        cell = detail.cell,
        data = detail.data,
        value = detail.value;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            cellClickFires 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onCellClick

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.cell Smart.Grid.Cell - The clicked cell object.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event for the click.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the row containing the clicked cell.
                                                                                                                                                                            ev.detail.dataField string - The data field (column identifier) of the clicked cell.
                                                                                                                                                                            ev.detail.value object - The value of the clicked cell.
                                                                                                                                                                            ev.detail.isRightClick boolean - Indicates whether the right mouse button was used for the click.
                                                                                                                                                                            ev.detail.pageX number - The X-coordinate of the click relative to the page.
                                                                                                                                                                            ev.detail.pageY number - The Y-coordinate of the click relative to the page.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the cellClick event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for cellClick using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('cellClick', (event) => {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent,
        id = detail.id,
        dataField = detail.dataField,
        value = detail.value,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            cellDoubleClickFires 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onCellDoubleClick

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.cell Smart.Grid.Cell - The double-clicked cell object.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event for the double-click.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the row containing the double-clicked cell.
                                                                                                                                                                            ev.detail.dataField string - The data field (column identifier) of the double-clicked cell.
                                                                                                                                                                            ev.detail.value object - The value of the double-clicked cell.
                                                                                                                                                                            ev.detail.isRightClick boolean - Indicates whether the right mouse button was used for the double-click.
                                                                                                                                                                            ev.detail.pageX number - The X-coordinate of the double-click relative to the page.
                                                                                                                                                                            ev.detail.pageY number - The Y-coordinate of the double-click relative to the page.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for cellDoubleClick using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('cellDoubleClick', (event) => {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent,
        id = detail.id,
        dataField = detail.dataField,
        value = detail.value,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            cellTapTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onCellTap

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.cell Smart.Grid.Cell - The cell object that was tapped and held.
                                                                                                                                                                            ev.detail.originalEvent Event - The original input event object ('pointer', 'touch', or 'mouse') providing context about the interaction.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for cellTap using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('cellTap', (event) => {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            changeFires 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onChange

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.started boolean - Set to true when selection begins; false otherwise.
                                                                                                                                                                            ev.detail.finished boolean - Set to true when selection ends; false otherwise.
                                                                                                                                                                            ev.detail.originalEvent Event - The native DOM event (pointer, touch, or mouse) that triggered the selection change.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the change event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for change using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('change', (event) => {
    const detail = event.detail,
        started = detail.started,
        finished = detail.finished,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs behavior refresh()

                                                                                                                                                                            closeColumnDialogFires 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onCloseColumnDialog

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.dataField string - The data field of the column involved in the dialog that was just closed.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for closeColumnDialog using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('closeColumnDialog', (event) => {
    const detail = event.detail,
        dataField = detail.dataField;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            columnChangeTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnChange

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The column whose property was changed.
                                                                                                                                                                            ev.detail.propertyName string - The name of the property that was changed.
                                                                                                                                                                            ev.detail.oldValue string | number | string[] - The previous value(s) of the changed property.
                                                                                                                                                                            ev.detail.value string | number | string[] - The new value(s) of the changed property.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnChange using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnChange', (event) => {
    const detail = event.detail,
        column = detail.column,
        propertyName = detail.propertyName,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            columnClickTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnClick

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The column configuration object of the clicked header.
                                                                                                                                                                            ev.detail.dataField string - The data field associated with the clicked column.
                                                                                                                                                                            ev.detail.originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the click.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the columnClick event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnClick using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnClick', (event) => {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnResize columnReorder

                                                                                                                                                                            columnDoubleClickFires 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnDoubleClick

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The column configuration object of the double-clicked header.
                                                                                                                                                                            ev.detail.dataField string - The data field associated with the double-clicked column.
                                                                                                                                                                            ev.detail.originalEvent - The native DOM event (pointer, touch, or mouse) that triggered the double-click.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnDoubleClick using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnDoubleClick', (event) => {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            columnDragEndTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnDragEnd

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The column that was dragged.
                                                                                                                                                                            ev.detail.dataField string - The data field of the dragged column.
                                                                                                                                                                            ev.detail.index number - The original index of the column before dragging.
                                                                                                                                                                            ev.detail.newIndex number - The new index of the column after dragging.
                                                                                                                                                                            ev.detail.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.
                                                                                                                                                                            ev.detail.originalEvent - The original browser event that finalized the dragging.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the columnDragEnd event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnDragEnd using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnDragEnd', (event) => {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            columnDraggingThis 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable Yes
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnDragging

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The column being dragged.
                                                                                                                                                                            ev.detail.dataField string - The data field of the dragged column.
                                                                                                                                                                            ev.detail.index number - The current index of the dragged column.
                                                                                                                                                                            ev.detail.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.
                                                                                                                                                                            ev.detail.originalEvent - The original browser event that triggered the dragging.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the columnDragging event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnDragging using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnDragging', (event) => {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            columnDragStartFires 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnDragStart

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The configuration object of the column being dragged.
                                                                                                                                                                            ev.detail.dataField string - The data field associated with the column being dragged.
                                                                                                                                                                            ev.detail.index number - The index of the column within the grid.
                                                                                                                                                                            ev.detail.originalEvent - The native DOM event that initiated the column drag.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the columnDragStart event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnDragStart using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnDragStart', (event) => {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            columnReorderFires 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnReorder

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The reordered column.
                                                                                                                                                                            ev.detail.dataField string - The data field of the reordered column.
                                                                                                                                                                            ev.detail.index number - The column's previous index before reorder.
                                                                                                                                                                            ev.detail.newIndex number - The column's new index after reorder.
                                                                                                                                                                            ev.detail.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.
                                                                                                                                                                            ev.detail.originalEvent - The original browser event associated with the reorder.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnReorder using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnReorder', (event) => {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                            columnResizeTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onColumnResize

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The resized column's configuration object.
                                                                                                                                                                            ev.detail.dataField string - The data field associated with the resized column.
                                                                                                                                                                            ev.detail.oldWidth string | number - The previous width of the column.
                                                                                                                                                                            ev.detail.width string | number - The new width of the column after resizing.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for columnResize using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('columnResize', (event) => {
    const detail = event.detail,
        column = detail.column,
        dataField = detail.dataField,
        oldWidth = detail.oldWidth,
        width = detail.width;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnReorder

                                                                                                                                                                            commentAddTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onCommentAdd

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.id string | number - The unique ID of the row where the comment was added.
                                                                                                                                                                            ev.detail.comment object - 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.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for commentAdd using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('commentAdd', (event) => {
    const detail = event.detail,
        id = detail.id,
        comment = detail.comment;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            commentRemoveTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onCommentRemove

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.id string | number - The unique ID of the row from which the comment was removed.
                                                                                                                                                                            ev.detail.comment object - 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.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for commentRemove using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('commentRemove', (event) => {
    const detail = event.detail,
        id = detail.id,
        comment = detail.comment;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            contextMenuItemClickOccurs 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onContextMenuItemClick

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.id string - The unique ID of the row associated with the context menu item.
                                                                                                                                                                            ev.detail.dataField string - The data field of the clicked context menu item.
                                                                                                                                                                            ev.detail.command - The command object representing the action associated with the clicked menu item.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for contextMenuItemClick using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('contextMenuItemClick', (event) => {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        command = detail.command;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            endEditTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onEndEdit

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the row that was edited. This helps to locate the specific row within the grid.
                                                                                                                                                                            ev.detail.dataField string - The data field key (column identifier) of the cell that was edited.
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The full row object that contains the edited cell, representing the row's current state after editing.
                                                                                                                                                                            ev.detail.column Smart.Grid.Column - The column object corresponding to the edited cell, including its metadata and configuration.
                                                                                                                                                                            ev.detail.cell Smart.Grid.Cell - The specific cell object that was edited, providing granular access to the edited cell's properties.
                                                                                                                                                                            ev.detail.data object - An object representing the entire data record of the edited row, reflecting all current values post-edit.
                                                                                                                                                                            ev.detail.value object - The new value entered by the user in the edited cell.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the endEdit event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for endEdit using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('endEdit', (event) => {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        column = detail.column,
        cell = detail.cell,
        data = detail.data,
        value = detail.value;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs editing editable beginEdit() addRow() updateRow() deleteRow() beginEdit

                                                                                                                                                                            filterThis 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onFilter

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.columns Smart.Grid.Column[] - An array of column objects currently involved in filtering, providing access to each filtered column’s properties.
                                                                                                                                                                            ev.detail.data Array<{dataField: string, filter: object}> - 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 }.
                                                                                                                                                                            ev.detail.expressions Array<{dataField: string, filter: string}> - 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'.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the filter event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for filter using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('filter', (event) => {
    const detail = event.detail,
        columns = detail.columns,
        data = detail.data,
        expressions = detail.expressions;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter()

                                                                                                                                                                            groupTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onGroup

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.groups string[] - 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.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the group event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for group using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('group', (event) => {
    const detail = event.detail,
        groups = detail.groups;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs grouping groupable addGroup() removeGroup() clearGroups()

                                                                                                                                                                            openColumnDialogEmitted 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onOpenColumnDialog

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.dataField string - The data field of the column currently being added or edited via the dialog.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for openColumnDialog using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('openColumnDialog', (event) => {
    const detail = event.detail,
        dataField = detail.dataField;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            pageTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onPage

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the page event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for page using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('page', (event) => {
	// event handling code goes here.
})
                                                                                                                                                                            Related APIs paging pager goToPage() nextPage() prevPage()

                                                                                                                                                                            resizeTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onResize

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for resize using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('resize', (event) => {
	// event handling code goes here.
})

                                                                                                                                                                            rowClickTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowClick

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The clicked row object.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event for the click.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the clicked row.
                                                                                                                                                                            ev.detail.data object - The data object associated with the clicked row.
                                                                                                                                                                            ev.detail.isRightClick boolean - Indicates whether the right mouse button was used for the click.
                                                                                                                                                                            ev.detail.pageX number - The X-coordinate of the click relative to the page.
                                                                                                                                                                            ev.detail.pageY number - The Y-coordinate of the click relative to the page.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the rowClick event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowClick using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowClick', (event) => {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent,
        id = detail.id,
        data = detail.data,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            rowCollapseTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowCollapse

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The collapsed row object.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the collapsed row.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event that caused the collapse.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the rowCollapse event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowCollapse using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowCollapse', (event) => {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            rowDoubleClickThis 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowDoubleClick

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The double-clicked row object.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event for the double-click.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the double-clicked row.
                                                                                                                                                                            ev.detail.data object - The data object associated with the double-clicked row.
                                                                                                                                                                            ev.detail.isRightClick boolean - Indicates whether the right mouse button was used for the double-click.
                                                                                                                                                                            ev.detail.pageX number - The X-coordinate of the double-click relative to the page.
                                                                                                                                                                            ev.detail.pageY number - The Y-coordinate of the double-click relative to the page.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowDoubleClick using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowDoubleClick', (event) => {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent,
        id = detail.id,
        data = detail.data,
        isRightClick = detail.isRightClick,
        pageX = detail.pageX,
        pageY = detail.pageY;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            rowDragEndThis 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowDragEnd

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The dragged row object.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the dragged row.
                                                                                                                                                                            ev.detail.index number - The original index of the row before dragging.
                                                                                                                                                                            ev.detail.newIndex number - The new index of the row after dragging.
                                                                                                                                                                            ev.detail.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.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event that triggered the drag.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the rowDragEnd event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowDragEnd using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowDragEnd', (event) => {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            rowDraggingThis event is triggered repeatedly in real-time as the user drags a row, firing continuously throughout the entire duration of the dragging action.CustomEvent

                                                                                                                                                                            This event is triggered repeatedly in real-time as the user drags a row, firing continuously throughout the entire duration of the dragging action.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable Yes
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowDragging

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The row currently being dragged.
                                                                                                                                                                            ev.detail.id string | number - The unique ID of the dragged row.
                                                                                                                                                                            ev.detail.index number - The index of the row being dragged.
                                                                                                                                                                            ev.detail.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.
                                                                                                                                                                            ev.detail.originalEvent - The original browser event that triggered the dragging.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the rowDragging event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowDragging using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowDragging', (event) => {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            rowDragStartTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowDragStart

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The row being dragged.
                                                                                                                                                                            ev.detail.id string | number - The unique ID of the row being dragged.
                                                                                                                                                                            ev.detail.index number - The index of the row within the grid.
                                                                                                                                                                            ev.detail.originalEvent - The original browser event that initiated the row drag.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowDragStart using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowDragStart', (event) => {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            rowExpandThis 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowExpand

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The expanded row object.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the expanded row.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event that caused the expansion.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowExpand using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowExpand', (event) => {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            rowReorderTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowReorder

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The reordered row object.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the reordered row.
                                                                                                                                                                            ev.detail.index number - The original index of the row before reordering.
                                                                                                                                                                            ev.detail.newIndex number - The new index of the row after reordering.
                                                                                                                                                                            ev.detail.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.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event that triggered the reorder.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowReorder using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowReorder', (event) => {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                            rowResizeTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowResize

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The resized row object.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the resized row.
                                                                                                                                                                            ev.detail.oldHeight string | number - The height of the row before resizing.
                                                                                                                                                                            ev.detail.height string | number - The new height of the row after resizing.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowResize using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowResize', (event) => {
    const detail = event.detail,
        row = detail.row,
        id = detail.id,
        oldHeight = detail.oldHeight,
        height = detail.height;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            rowStarredTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowStarred

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The row associated with the star toggle.
                                                                                                                                                                            ev.detail.originalEvent - The original pointer, touch, or mouse event for the star click.
                                                                                                                                                                            ev.detail.id string | number - The unique identifier of the starred row.
                                                                                                                                                                            ev.detail.value boolean - Boolean indicating whether the row is now starred (`true`) or unstarred (`false`).

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowStarred using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowStarred', (event) => {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent,
        id = detail.id,
        value = detail.value;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            rowTapTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onRowTap

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.row Smart.Grid.Row - The row object that was tapped and held.
                                                                                                                                                                            ev.detail.originalEvent Event - The original input event object ('pointer', 'touch', or 'mouse'), which provides device-specific details.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for rowTap using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('rowTap', (event) => {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            scrollBottomReachedTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onScrollBottomReached

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for scrollBottomReached using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('scrollBottomReached', (event) => {
	// event handling code goes here.
})
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            scrollTopReachedTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onScrollTopReached

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for scrollTopReached using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('scrollTopReached', (event) => {
	// event handling code goes here.
})
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            sortTriggered 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.CustomEvent

                                                                                                                                                                            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.

                                                                                                                                                                            • Bubbles Yes
                                                                                                                                                                            • Cancelable No
                                                                                                                                                                            • Interface CustomEvent
                                                                                                                                                                            • Event handler property onSort

                                                                                                                                                                            Arguments

                                                                                                                                                                            evCustomEvent
                                                                                                                                                                            ev.detailObject
                                                                                                                                                                            ev.detail.columns Smart.Grid.Column[] - An array of column objects currently sorted, including their configurations and properties.
                                                                                                                                                                            ev.detail.data Array<{dataField: string, sortOrder: string, sortIndex: number}> - 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.
                                                                                                                                                                            ev.detail.sortDataFields string[] - An array of the data fields of all currently sorted columns.
                                                                                                                                                                            ev.detail.sortDataTypes string[] - An array of data types ('string', 'date', 'boolean', or 'number') corresponding to the sorted columns.
                                                                                                                                                                            ev.detail.sortOrders string[] - An array of sorting directions ('asc' or 'desc') applied to the sorted columns.
                                                                                                                                                                            ev.detail.sortIndexes number[] - An array of integers representing the sorting priority for each column in cases of multi-column sorting, where lower index means higher priority.

                                                                                                                                                                            Methods

                                                                                                                                                                            isDefaultPrevented

                                                                                                                                                                            Returns true if the event was prevented by any of its subscribers.

                                                                                                                                                                            Returns

                                                                                                                                                                            boolean true if the default action was prevented. Otherwise, returns false.

                                                                                                                                                                            preventDefault

                                                                                                                                                                            The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

                                                                                                                                                                            stopPropagation

                                                                                                                                                                            The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

                                                                                                                                                                            Try a demo showcasing the sort event.

                                                                                                                                                                            Examples

                                                                                                                                                                            Listen for sort using the pattern that matches your stack.

                                                                                                                                                                            DOM — listen on the custom element (use a specific selector if the page has more than one):

                                                                                                                                                                            document.querySelector('smart-grid')?.addEventListener('sort', (event) => {
    const detail = event.detail,
        columns = detail.columns,
        data = detail.data,
        sortDataFields = detail.sortDataFields,
        sortDataTypes = detail.sortDataTypes,
        sortOrders = detail.sortOrders,
        sortIndexes = detail.sortIndexes;

	// event handling code goes here.
})
                                                                                                                                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy()

                                                                                                                                                                            Methods

                                                                                                                                                                            addFilter( dataField: string, filter: string, refreshFilters?: boolean): voidApplies a filter to one column. Pass a string or an array of expressions; combine conditions with "and" / "or". Example: `grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. Supports numeric and string operators (EQUALS, GREATER_THAN, STARTS_WITH, etc.). Set refreshFilters to false when adding several filters in one batch to avoid extra redraws (see addFilter third argument).

                                                                                                                                                                            Applies a filter to one column. Pass a string or an array of expressions; combine conditions with "and" / "or". Example: `grid.addFilter('lastName', ['CONTAINS "burke"', 'or', 'CONTAINS "peterson"'])`. Supports numeric and string operators (EQUALS, GREATER_THAN, STARTS_WITH, etc.). Set refreshFilters to false when adding several filters in one batch to avoid extra redraws (see addFilter third argument).

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column to filter, e.g., 'firstName'.

                                                                                                                                                                            filterstring

                                                                                                                                                                            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'.

                                                                                                                                                                            refreshFilters?boolean

                                                                                                                                                                            If set to false, allows multiple filters to be added without triggering unnecessary renders. Useful when applying multiple filters sequentially.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.addFilter("firstName","startsWith B");

                                                                                                                                                                            Try a demo showcasing the addFilter method.
                                                                                                                                                                            Related APIs filtering filterable header removeFilter() clearFilter() filter

                                                                                                                                                                            addGroup( dataField: string): voidOrganizes 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.

                                                                                                                                                                            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.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the column to group by, e.g., 'firstName'.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.addGroup("firstName");

                                                                                                                                                                            Try a demo showcasing the addGroup method.
                                                                                                                                                                            Related APIs grouping groupable removeGroup() clearGroups() group

                                                                                                                                                                            addNewColumn( column: any): booleanDynamically 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.

                                                                                                                                                                            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.

                                                                                                                                                                            Arguments

                                                                                                                                                                            columnany

                                                                                                                                                                            A column definition or array of columns to add. Refer to the grid's 'columns' property for the expected structure.

                                                                                                                                                                            Returnsboolean

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.addNewColumn({"label":"First Name","dataField":"firstName"});

                                                                                                                                                                            Try a demo showcasing the addNewColumn method.
                                                                                                                                                                            Related APIs columns columnHeader setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            addNewRow( position?: string): booleanInserts 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.

                                                                                                                                                                            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.

                                                                                                                                                                            Arguments

                                                                                                                                                                            position?string

                                                                                                                                                                            Specifies the position where the new row will be added. Acceptable values are 'near' (top) or 'far' (bottom).

                                                                                                                                                                            Returnsboolean

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.addNewRow();

                                                                                                                                                                            Try a demo showcasing the addNewRow method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            addRow( data: any, insertAtBottom?: boolean, callback?: {(row: GridRow): void}): anyInserts 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.

                                                                                                                                                                            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.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataany

                                                                                                                                                                            An object representing the row data, matching the structure of the grid's data source.

                                                                                                                                                                            insertAtBottom?boolean

                                                                                                                                                                            Determines whether the new row is added at the bottom (true) or top (false) of the grid. Defaults to true.

                                                                                                                                                                            callback?{(row: GridRow): void}

                                                                                                                                                                            A callback function invoked after the row is successfully added. Receives the newly added row as an argument.

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.addRow({"firstName":"Nancy","lastName":"Jones","age":32});

                                                                                                                                                                            Try a demo showcasing the addRow method.
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            addSort( dataField: string, sortOrder: string): voidAdds a sort for the given column and direction (e.g. 'asc', 'desc'). Requires sorting to be enabled; has no effect if sorting is off.

                                                                                                                                                                            Adds a sort for the given column and direction (e.g. 'asc', 'desc'). Requires sorting to be enabled; has no effect if sorting is off.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the column to sort, e.g., 'firstName'.

                                                                                                                                                                            sortOrderstring

                                                                                                                                                                            The sort direction to apply. Use 'asc' for ascending or 'desc' for descending.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.addSort("firstName","desc");
                                                                                                                                                                            Related APIs sorting removeSort() clearSort() sortBy() sort

                                                                                                                                                                            addUnboundRow( count: number, position?: string): booleanAdds 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.

                                                                                                                                                                            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.

                                                                                                                                                                            Arguments

                                                                                                                                                                            countnumber

                                                                                                                                                                            The number of unbound rows to add.

                                                                                                                                                                            position?string

                                                                                                                                                                            The position to insert the unbound rows. Accepts 'near' for top or 'far' for bottom.

                                                                                                                                                                            Returnsboolean

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.addUnboundRow(5);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            areAllRowsSelected(): booleanReturns 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 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.

                                                                                                                                                                            Returnsboolean

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.areAllRowsSelected();
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            autoSizeColumn( dataField?: string): voidAutomatically 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.

                                                                                                                                                                            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.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataField?string

                                                                                                                                                                            The data field name of the column to auto-size, e.g., 'firstName'. Optional; if omitted, no action is taken.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.autoSizeColumn("firstName");
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            autoSizeColumns(): voidDynamically 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.

                                                                                                                                                                            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.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.autoSizeColumns();
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            autoSizeRows(): voidResizes each row’s height to fit its cell content so text and controls are not clipped.

                                                                                                                                                                            Resizes each row’s height to fit its cell content so text and controls are not clipped.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.autoSizeRows();
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            batch( fn: any): voidThis function allows you to execute multiple method calls wrapped with the Grid's beginUpdate() and endUpdate(). Example: grid.batch(() => { grid.setCellValue(2, 'firstName', 'Peter'); grid.setCellValue(3, 'firstName', 'Nancy'); });

                                                                                                                                                                            This function allows you to execute multiple method calls wrapped with the Grid's beginUpdate() and endUpdate(). Example: grid.batch(() => { grid.setCellValue(2, 'firstName', 'Peter'); grid.setCellValue(3, 'firstName', 'Nancy'); });

                                                                                                                                                                            Arguments

                                                                                                                                                                            fnany

                                                                                                                                                                            The function where you can make your method calls. grid.batch(() => { grid.setCellValue(2, 'firstName', 'Peter'); grid.setCellValue(3, 'firstName', 'Nancy'); });

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.batch();

                                                                                                                                                                            beginEdit( rowId: string | number, dataField?: string): voidInitiates edit mode on a specified row, cell, or column within the grid programmatically. Triggers the appropriate editor component to appear in the Grid UI, allowing users to modify the data directly within the selected grid area.

                                                                                                                                                                            Initiates edit mode on a specified row, cell, or column within the grid programmatically. Triggers the appropriate editor component to appear in the Grid UI, allowing users to modify the data directly within the selected grid area.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to edit.

                                                                                                                                                                            dataField?string

                                                                                                                                                                            The column's data field to edit. Optional for full row editing.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.beginEdit(1,"firstName");

                                                                                                                                                                            Try a demo showcasing the beginEdit method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            beginUpdate(): voidPauses 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 all necessary changes, call 'endUpdate()' to resume rendering and apply all updates to the UI.

                                                                                                                                                                            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 all necessary changes, call 'endUpdate()' to resume rendering and apply all updates to the UI.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.beginUpdate();

                                                                                                                                                                            Try a demo showcasing the beginUpdate method.

                                                                                                                                                                            cancelEdit(): voidCancels the ongoing edit operation by closing any active editor interface and reverting all unsaved changes made during the current session. This action ensures that no modifications are saved and the data returns to its original state prior to editing.

                                                                                                                                                                            Cancels the ongoing edit operation by closing any active editor interface and reverting all unsaved changes made during the current session. This action ensures that no modifications are saved and the data returns to its original state prior to editing.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.cancelEdit();
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            checkAllRows(): voidSelects and checks all checkboxes associated with rows in a TreeGrid or grouped data structure, ensuring that every row, including nested and grouped items, is marked as selected. This process guarantees comprehensive selection across all hierarchical levels and groupings within the dataset.

                                                                                                                                                                            Selects and checks all checkboxes associated with rows in a TreeGrid or grouped data structure, ensuring that every row, including nested and grouped items, is marked as selected. This process guarantees comprehensive selection across all hierarchical levels and groupings within the dataset.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.checkAllRows();

                                                                                                                                                                            Try a demo showcasing the checkAllRows method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            checkRow( rowId: string | number): voidSelects and checks the checkbox for a specified TreeGrid row, visually indicating that the row is active or selected. This action updates the row's state to reflect user selection and may trigger related event handlers or selection-dependent functionality within the TreeGrid.

                                                                                                                                                                            Selects and checks the checkbox for a specified TreeGrid row, visually indicating that the row is active or selected. This action updates the row's state to reflect user selection and may trigger related event handlers or selection-dependent functionality within the TreeGrid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to check.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.checkRow(1);
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            clearFilter(): voidRemoves all active filters from the Grid, restoring the original unfiltered data view. After clearing the filters, the Grid data is automatically refreshed to display all records, and any filter input fields are reset to their default, empty state.

                                                                                                                                                                            Removes all active filters from the Grid, restoring the original unfiltered data view. After clearing the filters, the Grid data is automatically refreshed to display all records, and any filter input fields are reset to their default, empty state.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.clearFilter();

                                                                                                                                                                            Try a demo showcasing the clearFilter method.
                                                                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() filter

                                                                                                                                                                            clearGroups(): voidRestores the grid to its original, ungrouped state by removing all active row groupings. All grouped rows are expanded and displayed as individual rows, and the Grid view automatically refreshes to reflect these changes.

                                                                                                                                                                            Restores the grid to its original, ungrouped state by removing all active row groupings. All grouped rows are expanded and displayed as individual rows, and the Grid view automatically refreshes to reflect these changes.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.clearGroups();
                                                                                                                                                                            Related APIs grouping groupable addGroup() removeGroup() group

                                                                                                                                                                            clearRows(): voidRemoves all rows and associated data from the Grid, and clears any current user selections. After performing this action, the Grid will display a 'No Rows' message to indicate that it is empty.

                                                                                                                                                                            Removes all rows and associated data from the Grid, and clears any current user selections. After performing this action, the Grid will display a 'No Rows' message to indicate that it is empty.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.clearRows();

                                                                                                                                                                            Try a demo showcasing the clearRows method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            clearSelection(): voidClears all current selections within the grid, including rows, cells, and columns. This action removes any visual highlights or selection indicators, ensuring that no items remain selected in the interface.

                                                                                                                                                                            Clears all current selections within the grid, including rows, cells, and columns. This action removes any visual highlights or selection indicators, ensuring that no items remain selected in the interface.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.clearSelection();

                                                                                                                                                                            Try a demo showcasing the clearSelection method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() change

                                                                                                                                                                            clearSort(): voidRemoves all active sorting from the Grid columns, resetting them to their unsorted state and restoring the data to its original order as initially loaded or received.

                                                                                                                                                                            Removes all active sorting from the Grid columns, resetting them to their unsorted state and restoring the data to its original order as initially loaded or received.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.clearSort();

                                                                                                                                                                            Try a demo showcasing the clearSort method.
                                                                                                                                                                            Related APIs sorting addSort() removeSort() sortBy() sort

                                                                                                                                                                            closeDropDown(): voidCloses the grid's drop-down user interface when the 'dropDownMode' property is set to true, ensuring that any open drop-down menus within the grid are dismissed automatically. This helps maintain a streamlined user experience by hiding drop-down elements when they are no longer needed or when specific actions are triggered.

                                                                                                                                                                            Closes the grid's drop-down user interface when the 'dropDownMode' property is set to true, ensuring that any open drop-down menus within the grid are dismissed automatically. This helps maintain a streamlined user experience by hiding drop-down elements when they are no longer needed or when specific actions are triggered.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.closeDropDown();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            closeMenu(): voidCloses the currently open column menu in a data grid or table interface. This action is typically triggered by user interactions such as right-clicking on a column header or clicking a column menu button, allowing users to dismiss the column-specific options or actions menu.

                                                                                                                                                                            Closes the currently open column menu in a data grid or table interface. This action is typically triggered by user interactions such as right-clicking on a column header or clicking a column menu button, allowing users to dismiss the column-specific options or actions menu.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.closeMenu();
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            closeSidePanel(): voidCloses the side panel component of the Grid interface, hiding any currently displayed content or options and returning the Grid to its default view.

                                                                                                                                                                            Closes the side panel component of the Grid interface, hiding any currently displayed content or options and returning the Grid to its default view.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.closeSidePanel();

                                                                                                                                                                            Try a demo showcasing the closeSidePanel method.

                                                                                                                                                                            collapseAllRows(): voidCollapses all currently expanded rows within the TreeGrid or Grouping components, reducing the dataset display to only show parent rows or top-level groups. This action hides all child rows and nested data, providing a simplified, minimized overview of the dataset structure.

                                                                                                                                                                            Collapses all currently expanded rows within the TreeGrid or Grouping components, reducing the dataset display to only show parent rows or top-level groups. This action hides all child rows and nested data, providing a simplified, minimized overview of the dataset structure.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.collapseAllRows();
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            collapseRow( rowId: string | number): voidCollapses a designated TreeGrid or grouping row, effectively hiding all of its nested child rows from view. This action allows users to condense hierarchical data structures, making it easier to navigate and focus on higher-level information within the grid.

                                                                                                                                                                            Collapses a designated TreeGrid or grouping row, effectively hiding all of its nested child rows from view. This action allows users to condense hierarchical data structures, making it easier to navigate and focus on higher-level information within the grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to collapse.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.collapseRow(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            createChart( type: string, dataSource?: any): voidGenerates a visual chart representation based on the current data within the Grid. Chart generation requires that the charting feature is enabled in the system configuration. This function allows users to visualize the Grid's dataset in supported chart formats.

                                                                                                                                                                            Generates a visual chart representation based on the current data within the Grid. Chart generation requires that the charting feature is enabled in the system configuration. This function allows users to visualize the Grid's dataset in supported chart formats.

                                                                                                                                                                            Arguments

                                                                                                                                                                            typestring

                                                                                                                                                                            Type of chart to create (e.g., 'pie', 'bar', 'line').

                                                                                                                                                                            dataSource?any

                                                                                                                                                                            The data source for the chart. If omitted, the Grid's current dataset is used.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.createChart("pie");

                                                                                                                                                                            Try a demo showcasing the createChart method.
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            deleteRow( rowId: string | number, callback?: {(row: GridRow): void}): voidRemoves a specific row from the Grid component. If batch editing is enabled, the row will be marked for deletion but the change will not be permanently applied until the batch is saved. This means the deletion is pending and can be reverted before saving.

                                                                                                                                                                            Removes a specific row from the Grid component. If batch editing is enabled, the row will be marked for deletion but the change will not be permanently applied until the batch is saved. This means the deletion is pending and can be reverted before saving.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to delete.

                                                                                                                                                                            callback?{(row: GridRow): void}

                                                                                                                                                                            Function executed after row deletion. Receives the deleted row as a parameter.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.deleteRow(1);

                                                                                                                                                                            Try a demo showcasing the deleteRow method.
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() beginEdit endEdit

                                                                                                                                                                            endEdit(): voidCompletes the editing process by applying all pending changes, saving the updated content, and closing any open editor instances. This action ensures that all modifications are confirmed and no unsaved edits remain.

                                                                                                                                                                            Completes the editing process by applying all pending changes, saving the updated content, and closing any open editor instances. This action ensures that all modifications are confirmed and no unsaved edits remain.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.endEdit();

                                                                                                                                                                            endUpdate( refresh?: boolean): voidRestores the Grid's normal rendering process and updates the user interface following a call to beginUpdate(). Use endUpdate() to apply any changes made during the update suspension and ensure the Grid displays the latest data and layout.

                                                                                                                                                                            Restores the Grid's normal rendering process and updates the user interface following a call to beginUpdate(). Use endUpdate() to apply any changes made during the update suspension and ensure the Grid displays the latest data and layout.

                                                                                                                                                                            Arguments

                                                                                                                                                                            refresh?boolean

                                                                                                                                                                            If true, forces a full Grid refresh after updates.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.endUpdate();

                                                                                                                                                                            Try a demo showcasing the endUpdate method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() change

                                                                                                                                                                            ensureVisible( rowId: string | number, dataField?: string): booleanScrolls the Grid to ensure that a specific row or cell is visible to the user. If the target row or cell is located on a different page, the Grid will automatically navigate to the appropriate page and then scroll to the desired position. This ensures that the requested row or cell is brought into view, regardless of its current visibility or page location.

                                                                                                                                                                            Scrolls the Grid to ensure that a specific row or cell is visible to the user. If the target row or cell is located on a different page, the Grid will automatically navigate to the appropriate page and then scroll to the desired position. This ensures that the requested row or cell is brought into view, regardless of its current visibility or page location.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row.

                                                                                                                                                                            dataField?string

                                                                                                                                                                            The column's data field to focus on. If omitted, scrolls to the row only.

                                                                                                                                                                            Returnsboolean

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.ensureVisible(1,"firstName");

                                                                                                                                                                            Try a demo showcasing the ensureVisible method.
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            expandAllRows(): voidExpands all rows within the grid that utilize TreeGrid or grouping functionality, automatically revealing every nested child row at all levels of hierarchy and making the complete data structure fully visible. This ensures that all parent and descendant rows are displayed, allowing users to view the entire nested dataset without manual expansion.

                                                                                                                                                                            Expands all rows within the grid that utilize TreeGrid or grouping functionality, automatically revealing every nested child row at all levels of hierarchy and making the complete data structure fully visible. This ensures that all parent and descendant rows are displayed, allowing users to view the entire nested dataset without manual expansion.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.expandAllRows();

                                                                                                                                                                            Try a demo showcasing the expandAllRows method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            expandRow( rowId: string | number): voidExpands a specific row in a TreeGrid or grouped table to reveal its associated child rows. You can expand nested groups or hierarchical levels by specifying the row key using dot notation (e.g., "0.2.1" for the child of a nested group). This allows for precise targeting and interactive exploration of hierarchical data structures within the grid.

                                                                                                                                                                            Expands a specific row in a TreeGrid or grouped table to reveal its associated child rows. You can expand nested groups or hierarchical levels by specifying the row key using dot notation (e.g., "0.2.1" for the child of a nested group). This allows for precise targeting and interactive exploration of hierarchical data structures within the grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to expand.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.expandRow(1);

                                                                                                                                                                            Try a demo showcasing the expandRow method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            expandRowsToGroupLevel( level: number): voidExpands all grouped rows in the grid up to the specified group level. For instance, executing `grid.expandRowsToGroupLevel(1);` will expand all groups at the root (level 1), making their immediate child rows visible. Groups nested within these child rows remain collapsed unless the group level parameter is increased. This function is useful for programmatically controlling the grid's row expansion state based on grouping hierarchy.

                                                                                                                                                                            Expands all grouped rows in the grid up to the specified group level. For instance, executing `grid.expandRowsToGroupLevel(1);` will expand all groups at the root (level 1), making their immediate child rows visible. Groups nested within these child rows remain collapsed unless the group level parameter is increased. This function is useful for programmatically controlling the grid's row expansion state based on grouping hierarchy.

                                                                                                                                                                            Arguments

                                                                                                                                                                            levelnumber

                                                                                                                                                                            The group level up to which the rows should be expanded. Level 0 is the root, level 1 is the first nested group, and so forth.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.expandRowsToGroupLevel(1);
                                                                                                                                                                            Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                                                            exportData( Dataformat: string, callback?: any, dataCallback?: any): voidThis function allows you to export the grid's data into various supported file formats, including .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG, and .PNG. The way the data is exported—such as file formatting, included columns or rows, applied filters, and export settings—is determined by the options set in the grid’s dataExport property. This ensures that the exported file matches your specified requirements and preferences.

                                                                                                                                                                            This function allows you to export the grid's data into various supported file formats, including .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG, and .PNG. The way the data is exported—such as file formatting, included columns or rows, applied filters, and export settings—is determined by the options set in the grid’s dataExport property. This ensures that the exported file matches your specified requirements and preferences.

                                                                                                                                                                            Arguments

                                                                                                                                                                            Dataformatstring

                                                                                                                                                                            Specifies the export format. Supported formats: 'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.

                                                                                                                                                                            callback?any

                                                                                                                                                                            Optional. A function that formats the exported values conditionally. See Smart Export Documentation for details.

                                                                                                                                                                            dataCallback?any

                                                                                                                                                                            Optional. A function to modify the entire exported data object prior to export.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.exportData("pdf");

                                                                                                                                                                            Try a demo showcasing the exportData method.
                                                                                                                                                                            Related APIs dataExport print()

                                                                                                                                                                            filterBy( query: string, dataType?: string): voidApplies a global filter that searches for the provided query across all columns in the grid, returning rows that contain a match in any column. Optionally, you can limit the filtering to specific data types—such as 'string', 'boolean', 'date', or 'number'—so that only columns of the selected type(s) are considered when matching the query. This allows for more precise and targeted filtering behavior.

                                                                                                                                                                            Applies a global filter that searches for the provided query across all columns in the grid, returning rows that contain a match in any column. Optionally, you can limit the filtering to specific data types—such as 'string', 'boolean', 'date', or 'number'—so that only columns of the selected type(s) are considered when matching the query. This allows for more precise and targeted filtering behavior.

                                                                                                                                                                            Arguments

                                                                                                                                                                            querystring

                                                                                                                                                                            The filter expression to apply to all columns.

                                                                                                                                                                            dataType?string

                                                                                                                                                                            Optional. Filter rows only by columns matching this data type: 'string', 'boolean', 'date', 'number'.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.filterBy("firstName","startsWith B");
                                                                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                                                            find( query: string, dataField?: string, condition?: string): []Searches the grid for rows that match the specified query criteria and returns an array containing the IDs of all matching rows. Supports multiple search modes, including:- Searching for values in any column (global search)- Searching specific columns by name- Applying comparison operators (e.g., equals, contains, less than, greater than) for advanced filteringThis functionality allows for flexible and precise row selection based on user-defined search parameters.

                                                                                                                                                                            Searches the grid for rows that match the specified query criteria and returns an array containing the IDs of all matching rows. Supports multiple search modes, including:

                                                                                                                                                                            - Searching for values in any column (global search)
                                                                                                                                                                            - Searching specific columns by name
                                                                                                                                                                            - Applying comparison operators (e.g., equals, contains, less than, greater than) for advanced filtering

                                                                                                                                                                            This functionality allows for flexible and precise row selection based on user-defined search parameters.

                                                                                                                                                                            Arguments

                                                                                                                                                                            querystring

                                                                                                                                                                            The search string or value to find within the grid rows.

                                                                                                                                                                            dataField?string

                                                                                                                                                                            Optional. Specifies the column data field to restrict the search to.

                                                                                                                                                                            condition?string

                                                                                                                                                                            Optional. Condition to apply for the search. Supported conditions: '=', 'EQUAL', '<>', 'NOT_EQUAL', '!=', '<', 'LESS_THAN', '>', 'GREATER_THAN', '<=', 'LESS_THAN_OR_EQUAL', '>=', 'GREATER_THAN_OR_EQUAL', 'starts with', 'STARTS_WITH', 'ends with', 'ENDS_WITH', '', 'EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'NULL', 'NOT_NULL'.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.find("nancy","davolio");
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            findCells( query: string): []Scans the grid to identify all cells that match the specified query. Returns an array of arrays, where each inner array represents a matching cell and contains the following information: the row ID, the data field (column name), and the cell's value. The query supports searching for multiple values by separating them with commas; each value will be matched independently against the cells.

                                                                                                                                                                            Scans the grid to identify all cells that match the specified query. Returns an array of arrays, where each inner array represents a matching cell and contains the following information: the row ID, the data field (column name), and the cell's value. The query supports searching for multiple values by separating them with commas; each value will be matched independently against the cells.

                                                                                                                                                                            Arguments

                                                                                                                                                                            querystring

                                                                                                                                                                            The search string or multiple comma-separated strings to find in grid cells.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.findCells("nancy","davolio");
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            firstPage(): voidNavigates to the first page of the data grid when paging functionality is enabled. This action resets the current page index to the first page, displaying the initial set of records in the grid.

                                                                                                                                                                            Navigates to the first page of the data grid when paging functionality is enabled. This action resets the current page index to the first page, displaying the initial set of records in the grid.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.firstPage();
                                                                                                                                                                            Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                                            flashCell( rowId: string | number, dataField: string): voidEmphasizes a specific cell within the grid, identified by its row ID and column data field.

                                                                                                                                                                            Emphasizes a specific cell within the grid, identified by its row ID and column data field.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row containing the cell.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.flashCell(1,"firstName");

                                                                                                                                                                            Try a demo showcasing the flashCell method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            flashRow( rowId: string | number): voidBriefly flashes the row for the given rowId (transient visual emphasis).

                                                                                                                                                                            Briefly flashes the row for the given rowId (transient visual emphasis).

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to highlight.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.flashRow(1);

                                                                                                                                                                            Try a demo showcasing the flashRow method.
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            focusAndSelect( rowId: string | number, dataField?: string): voidSets focus on and selects a specified cell or an entire row within the grid, clearing any previous selections. This action also updates the keyboard navigation's starting point to the newly focused cell or row, ensuring that subsequent navigation actions will originate from this location.

                                                                                                                                                                            Sets focus on and selects a specified cell or an entire row within the grid, clearing any previous selections. This action also updates the keyboard navigation's starting point to the newly focused cell or row, ensuring that subsequent navigation actions will originate from this location.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to focus and select.

                                                                                                                                                                            dataField?string

                                                                                                                                                                            Optional. The data field (column key) of the cell to focus within the specified row. If omitted, the entire row is selected.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.focusAndSelect(1,"firstName");

                                                                                                                                                                            Try a demo showcasing the focusAndSelect method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            forEachRow( rowCallback: any): voidExecutes a callback function for each individual row in the grid's underlying dataset, regardless of any grouping, filtering, or sorting currently applied to the grid view. This method iterates over all raw data rows, ensuring that the callback is called on every entry as it exists in the original data source, not just the rows that are visible or active in the grid's current state.

                                                                                                                                                                            Executes a callback function for each individual row in the grid's underlying dataset, regardless of any grouping, filtering, or sorting currently applied to the grid view. This method iterates over all raw data rows, ensuring that the callback is called on every entry as it exists in the original data source, not just the rows that are visible or active in the grid's current state.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowCallbackany

                                                                                                                                                                            A callback function that receives a row object as its parameter. Example: grid.forEachRow(row => console.log(row.id));

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.forEachRow((row) => { console.log(row.id) );

                                                                                                                                                                            Try a demo showcasing the forEachRow method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            forEachRowAfterFilterAndSort( rowCallback: any): voidExecutes a callback function for each row that is currently visible in the grid after all active filters and sorting have been applied. This method operates strictly on the rows as they appear in the current grid view, ensuring that hidden, filtered out, or unsorted rows are excluded. The iteration respects the latest grid state, guaranteeing that only rows displayed to the user are processed by the callback function.

                                                                                                                                                                            Executes a callback function for each row that is currently visible in the grid after all active filters and sorting have been applied. This method operates strictly on the rows as they appear in the current grid view, ensuring that hidden, filtered out, or unsorted rows are excluded. The iteration respects the latest grid state, guaranteeing that only rows displayed to the user are processed by the callback function.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowCallbackany

                                                                                                                                                                            A callback function that receives a row object as its parameter. Example: grid.forEachRowAfterFilterAndSort(row => console.log(row.id));

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.forEachRowAfterFilterAndSort((row) => { console.log(row.id) );

                                                                                                                                                                            Try a demo showcasing the forEachRowAfterFilterAndSort method.
                                                                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                                                            getAt( rowIndex: number, dataField: string): anyRetrieves the value stored in a specific cell of a data grid or table by specifying the row index and the corresponding column data field. This function allows precise access to individual cell data, enabling targeted data retrieval based on both row and column identifiers.

                                                                                                                                                                            Retrieves the value stored in a specific cell of a data grid or table by specifying the row index and the corresponding column data field. This function allows precise access to individual cell data, enabling targeted data retrieval based on both row and column identifiers.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIndexnumber

                                                                                                                                                                            The index of the row containing the cell.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column (e.g., 'firstName').

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getAt(1,"firstName");

                                                                                                                                                                            Try a demo showcasing the getAt method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            getBatchEditChanges(): { updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }Retrieves a comprehensive summary of all changes performed during a batch edit operation. Returns an object with separate arrays for added, updated, and deleted rows. Each array contains detailed objects that include the row ID and pertinent data fields, such as the previous and new values for updates, full data for additions, and identifying information for deletions. This structure allows you to easily track and process all modifications made in the batch.

                                                                                                                                                                            Retrieves a comprehensive summary of all changes performed during a batch edit operation. Returns an object with separate arrays for added, updated, and deleted rows. Each array contains detailed objects that include the row ID and pertinent data fields, such as the previous and new values for updates, full data for additions, and identifying information for deletions. This structure allows you to easily track and process all modifications made in the batch.

                                                                                                                                                                            Returns{ updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getBatchEditChanges();
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            getCellValue( rowId: string | number, dataField: string): anyRetrieves the value stored in a specific cell of a data grid or table by specifying the unique row ID and the corresponding column data field. This function allows precise access to individual cell data, enabling targeted data retrieval based on both row and column identifiers.

                                                                                                                                                                            Retrieves the value stored in a specific cell of a data grid or table by specifying the unique row ID and the corresponding column data field. This function allows precise access to individual cell data, enabling targeted data retrieval based on both row and column identifiers.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row containing the cell.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column (e.g., 'firstName').

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getCellValue(1,"firstName");

                                                                                                                                                                            Try a demo showcasing the getCellValue method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            getColumn( dataField: string): GridColumnRetrieves the column object corresponding to the specified data field. This returned object includes all relevant properties and configuration settings for that column, such as its header label, data type, formatting options, sorting behavior, visibility, and any custom properties defined in the column schema.

                                                                                                                                                                            Retrieves the column object corresponding to the specified data field. This returned object includes all relevant properties and configuration settings for that column, such as its header label, data type, formatting options, sorting behavior, visibility, and any custom properties defined in the column schema.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column to retrieve.

                                                                                                                                                                            ReturnsGridColumn

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getColumn("firstName");

                                                                                                                                                                            Try a demo showcasing the getColumn method.
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            getColumnProperty( dataField: string, propertyName: string): anyFetches the value of a specified property from a particular column, where the column is identified by its data field name. This function allows you to access detailed configuration or metadata associated with a column in a data structure, such as a table or grid, by referencing the column’s data field.

                                                                                                                                                                            Fetches the value of a specified property from a particular column, where the column is identified by its data field name. This function allows you to access detailed configuration or metadata associated with a column in a data structure, such as a table or grid, by referencing the column’s data field.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column.

                                                                                                                                                                            propertyNamestring

                                                                                                                                                                            The name of the column property to retrieve (e.g., 'freeze', 'visible', 'width').

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getColumnProperty(1,"freeze");
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            getColumns(): Smart.Grid.Column[]Retrieves an array of column objects representing every column currently configured in the grid. Each column object contains key properties, including:- `label`: The display name of the column as shown in the grid header.- `dataField`: The underlying data field or key this column is bound to in the dataset.- `dataType`: The type of data displayed in the column (e.g., string, number, date).- `visible`: A boolean indicating whether the column is currently visible in the grid.- Additional dynamic state properties, such as the current sort order, filter status, or column width, reflecting any user customizations or interactions.This comprehensive array allows developers to access both the static configuration and real-time state of each column in the grid.

                                                                                                                                                                            Retrieves an array of column objects representing every column currently configured in the grid. Each column object contains key properties, including:

                                                                                                                                                                            - `label`: The display name of the column as shown in the grid header.
                                                                                                                                                                            - `dataField`: The underlying data field or key this column is bound to in the dataset.
                                                                                                                                                                            - `dataType`: The type of data displayed in the column (e.g., string, number, date).
                                                                                                                                                                            - `visible`: A boolean indicating whether the column is currently visible in the grid.
                                                                                                                                                                            - Additional dynamic state properties, such as the current sort order, filter status, or column width, reflecting any user customizations or interactions.

                                                                                                                                                                            This comprehensive array allows developers to access both the static configuration and real-time state of each column in the grid.

                                                                                                                                                                            ReturnsSmart.Grid.Column[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getColumns();

                                                                                                                                                                            Try a demo showcasing the getColumns method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            getEditCells(): []Returns an array containing information about all cells that are currently in edit mode within the grid. Each entry in the array typically includes details such as the row and column identifiers for each editable cell, allowing developers to precisely identify and interact with cells that are being edited.

                                                                                                                                                                            Returns an array containing information about all cells that are currently in edit mode within the grid. Each entry in the array typically includes details such as the row and column identifiers for each editable cell, allowing developers to precisely identify and interact with cells that are being edited.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getEditCells();
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            getFilteredColumns(): {[dataField: string]: Smart.Grid.Column}[]Returns an array of objects representing the columns that currently have active filters applied. Each object contains details about the filter and is associated with its corresponding column by the column's data field as the key. This allows you to identify which columns are being filtered and access the filter configurations for each.

                                                                                                                                                                            Returns an array of objects representing the columns that currently have active filters applied. Each object contains details about the filter and is associated with its corresponding column by the column's data field as the key. This allows you to identify which columns are being filtered and access the filter configurations for each.

                                                                                                                                                                            Returns{[dataField: string]: Smart.Grid.Column}[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getFilteredColumns();
                                                                                                                                                                            Related APIs filtering filterable header addFilter() removeFilter() clearFilter() filter

                                                                                                                                                                            getGroups(): []Fetches an array of group objects that define the current grouping configuration of the grid. Each group object contains information about the field being grouped by, the group criteria, and any sub-grouping details, providing a comprehensive representation of how the grid's data is organized into groups.

                                                                                                                                                                            Fetches an array of group objects that define the current grouping configuration of the grid. Each group object contains information about the field being grouped by, the group criteria, and any sub-grouping details, providing a comprehensive representation of how the grid's data is organized into groups.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getGroups();
                                                                                                                                                                            Related APIs grouping groupable addGroup() removeGroup() clearGroups() group

                                                                                                                                                                            getHorizontalScrollMax(): numberReturns the maximum horizontal scroll offset for the grid’s horizontal scrollbar. This value represents the furthest distance (in pixels) that the grid content can be scrolled horizontally. It is useful for programmatically setting, adjusting, or resetting the grid’s horizontal scroll position to ensure full content visibility or to align with specific scroll actions.

                                                                                                                                                                            Returns the maximum horizontal scroll offset for the grid’s horizontal scrollbar. This value represents the furthest distance (in pixels) that the grid content can be scrolled horizontally. It is useful for programmatically setting, adjusting, or resetting the grid’s horizontal scroll position to ensure full content visibility or to align with specific scroll actions.

                                                                                                                                                                            Returnsnumber

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getHorizontalScrollMax();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            getHorizontalScrollValue(): numberRetrieves the current horizontal scroll offset of the grid's horizontal scrollbar, indicating how far the grid content has been scrolled from the left edge in pixels. This value can be used to determine the current scroll position or to programmatically control grid scrolling behavior.

                                                                                                                                                                            Retrieves the current horizontal scroll offset of the grid's horizontal scrollbar, indicating how far the grid content has been scrolled from the left edge in pixels. This value can be used to determine the current scroll position or to programmatically control grid scrolling behavior.

                                                                                                                                                                            Returnsnumber

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getHorizontalScrollValue();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            getRow( rowId: string | number): GridRowReturns the complete row object from the Grid for the row corresponding to the given row ID, including all its associated data and properties.

                                                                                                                                                                            Returns the complete row object from the Grid for the row corresponding to the given row ID, including all its associated data and properties.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row.

                                                                                                                                                                            ReturnsGridRow

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getRow(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            getRowByElement( rowElement: any): GridRowReturns the Grid row object by its HTML Element, allowing access to all data and properties associated with that specific row.

                                                                                                                                                                            Returns the Grid row object by its HTML Element, allowing access to all data and properties associated with that specific row.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowElementany

                                                                                                                                                                            The row's element.

                                                                                                                                                                            ReturnsGridRow

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getRowByElement(1);

                                                                                                                                                                            Try a demo showcasing the getRowByElement method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            getRowByIndex( rowIndex: number): GridRowReturns the Grid row object at the given zero-based row index, allowing access to all data and properties associated with that specific row. The index parameter should be an integer starting from 0, where 0 corresponds to the first row in the Grid.

                                                                                                                                                                            Returns the Grid row object at the given zero-based row index, allowing access to all data and properties associated with that specific row. The index parameter should be an integer starting from 0, where 0 corresponds to the first row in the Grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIndexnumber

                                                                                                                                                                            The zero-based index of the row in the grid.

                                                                                                                                                                            ReturnsGridRow

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getRowByIndex(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            getRowData( rowId: string | number): anyFetches the original data source object directly linked to the given row ID, allowing access to all underlying data fields for that specific row as stored in the source dataset.

                                                                                                                                                                            Fetches the original data source object directly linked to the given row ID, allowing access to all underlying data fields for that specific row as stored in the source dataset.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row.

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getRowData(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            getRowId( rowIndex: number): string | numberReturns the unique identifier (row ID) associated with the row at the specified zero-based index. This allows you to access or reference a particular row in the data set by its position within the collection, where the first row has an index of 0.

                                                                                                                                                                            Returns the unique identifier (row ID) associated with the row at the specified zero-based index. This allows you to access or reference a particular row in the data set by its position within the collection, where the first row has an index of 0.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIndexnumber

                                                                                                                                                                            The zero-based index of the row.

                                                                                                                                                                            Returnsstring | number

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getRowId(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            getRowProperty( rowId: string | number, propertyName: string): anyRetrieves the value of a specified property from a database row identified by its unique row ID. This function locates the row using the provided row ID and returns the value associated with the given property key within that row. If the property does not exist, it returns null or an appropriate default value.

                                                                                                                                                                            Retrieves the value of a specified property from a database row identified by its unique row ID. This function locates the row using the provided row ID and returns the value associated with the given property key within that row. If the property does not exist, it returns null or an appropriate default value.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row.

                                                                                                                                                                            propertyNamestring

                                                                                                                                                                            The name of the row property to retrieve.

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getRowProperty(1,"freeze");
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            getSelectedCells(): []Returns an array of selected cells, where each cell is represented as an array structured as [row ID, column field, cell value]. - **Row ID**: The unique identifier for the row containing the cell. - **Column field**: The data field name (or key) corresponding to the column of the cell. - **Cell value**: The actual value contained within the cell. This structure allows you to easily identify and access the position and value of each selected cell within the data set.

                                                                                                                                                                            Returns an array of selected cells, where each cell is represented as an array structured as [row ID, column field, cell value].
                                                                                                                                                                            - **Row ID**: The unique identifier for the row containing the cell.
                                                                                                                                                                            - **Column field**: The data field name (or key) corresponding to the column of the cell.
                                                                                                                                                                            - **Cell value**: The actual value contained within the cell.

                                                                                                                                                                            This structure allows you to easily identify and access the position and value of each selected cell within the data set.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getSelectedCells();
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            getSelectedRowIds(): []Returns an array containing the unique identifiers (IDs) of all rows currently selected by the user within the grid component. Each element in the array corresponds to the ID of a selected row, allowing you to easily reference or manipulate the selected grid items programmatically.

                                                                                                                                                                            Returns an array containing the unique identifiers (IDs) of all rows currently selected by the user within the grid component. Each element in the array corresponds to the ID of a selected row, allowing you to easily reference or manipulate the selected grid items programmatically.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getSelectedRowIds();

                                                                                                                                                                            Try a demo showcasing the getSelectedRowIds method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            getSelectedRowIndexes(): []Returns an array containing the indices of the rows that are currently selected in the grid. Each element in the array represents the zero-based position of a selected row, allowing you to identify which rows the user has chosen. If no rows are selected, the array will be empty.

                                                                                                                                                                            Returns an array containing the indices of the rows that are currently selected in the grid. Each element in the array represents the zero-based position of a selected row, allowing you to identify which rows the user has chosen. If no rows are selected, the array will be empty.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getSelectedRowIndexes();
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            getSelectedRows(): []Returns an array in which each element is a two-element array: the first element is the unique row ID, and the second element is the data object associated with that row. When operating in virtual mode, the data object may be empty if the row’s data has not yet been loaded, as data is retrieved on demand.

                                                                                                                                                                            Returns an array in which each element is a two-element array: the first element is the unique row ID, and the second element is the data object associated with that row. When operating in virtual mode, the data object may be empty if the row’s data has not yet been loaded, as data is retrieved on demand.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getSelectedRows();

                                                                                                                                                                            Try a demo showcasing the getSelectedRows method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            getSelectedRowsData(): []Returns an array containing the data objects corresponding to each row currently selected in the grid. Each object in the array represents the underlying data for one selected row, allowing you to access and manipulate the specific records the user has chosen.

                                                                                                                                                                            Returns an array containing the data objects corresponding to each row currently selected in the grid. Each object in the array represents the underlying data for one selected row, allowing you to access and manipulate the specific records the user has chosen.

                                                                                                                                                                            Returns[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getSelectedRowsData();

                                                                                                                                                                            Try a demo showcasing the getSelectedRowsData method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            getSelection(): { rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }Returns an object representing the current selection state of the grid. This includes arrays listing the IDs of selected rows, the identifiers of selected columns, and the coordinates (row ID and data field) of selected cells. Additionally, it specifies the cell that is currently focused by providing its row ID and data field.

                                                                                                                                                                            Returns an object representing the current selection state of the grid. This includes arrays listing the IDs of selected rows, the identifiers of selected columns, and the coordinates (row ID and data field) of selected cells. Additionally, it specifies the cell that is currently focused by providing its row ID and data field.

                                                                                                                                                                            Returns{ rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getSelection();

                                                                                                                                                                            Try a demo showcasing the getSelection method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            getSortedColumns(): {[dataField: string]: { sortOrder: string, sortIndex: number }}Returns an object that details the columns currently sorted within a data table. Each key in the object corresponds to a column’s data field name. The value for each key is an object containing:- `sortOrder`: Specifies the sorting direction for the column, either `'asc'` for ascending or `'desc'` for descending.- `sortIndex`: Indicates the column’s priority in multi-column sorting, with lower numbers representing higher priority.This structure allows you to easily determine which columns are sorted, their order of precedence, and the sorting direction applied to each.

                                                                                                                                                                            Returns an object that details the columns currently sorted within a data table. Each key in the object corresponds to a column’s data field name. The value for each key is an object containing:

                                                                                                                                                                            - `sortOrder`: Specifies the sorting direction for the column, either `'asc'` for ascending or `'desc'` for descending.
                                                                                                                                                                            - `sortIndex`: Indicates the column’s priority in multi-column sorting, with lower numbers representing higher priority.

                                                                                                                                                                            This structure allows you to easily determine which columns are sorted, their order of precedence, and the sorting direction applied to each.

                                                                                                                                                                            Returns{[dataField: string]: { sortOrder: string, sortIndex: number }}

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getSortedColumns();
                                                                                                                                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                            getState(): {sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}Retrieves a detailed JSON object that encapsulates the entire current state of the grid. This includes the active sorting and filtering criteria, column visibility and order, which rows are expanded, any grouping configurations, current pagination settings, and the selection state of rows or cells. The resulting state object is suitable for persisting the grid configuration (such as saving to local storage or a database) and can be used to completely restore the grid to the same state at a later time.

                                                                                                                                                                            Retrieves a detailed JSON object that encapsulates the entire current state of the grid. This includes the active sorting and filtering criteria, column visibility and order, which rows are expanded, any grouping configurations, current pagination settings, and the selection state of rows or cells. The resulting state object is suitable for persisting the grid configuration (such as saving to local storage or a database) and can be used to completely restore the grid to the same state at a later time.

                                                                                                                                                                            Returns{sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getState();
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            getVerticalScrollMax(): numberReturns the maximum allowable scroll position for the grid's vertical scrollbar. This value represents the greatest vertical offset to which users can scroll within the grid's content area. It can be used to determine the scrollable range or to programmatically set the vertical scrollbar to its lowest (bottom-most) position.

                                                                                                                                                                            Returns the maximum allowable scroll position for the grid's vertical scrollbar. This value represents the greatest vertical offset to which users can scroll within the grid's content area. It can be used to determine the scrollable range or to programmatically set the vertical scrollbar to its lowest (bottom-most) position.

                                                                                                                                                                            Returnsnumber

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getVerticalScrollMax();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            getVerticalScrollValue(): numberReturns the current vertical scroll position of the grid, representing the number of pixels the grid’s content has been scrolled vertically from the top. This value corresponds to the position of the grid's vertical scrollbar and can be used to determine how far users have scrolled down within the grid.

                                                                                                                                                                            Returns the current vertical scroll position of the grid, representing the number of pixels the grid’s content has been scrolled vertically from the top. This value corresponds to the position of the grid's vertical scrollbar and can be used to determine how far users have scrolled down within the grid.

                                                                                                                                                                            Returnsnumber

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getVerticalScrollValue();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            getViewRows(): Smart.Grid.Row[]Returns an array of row objects. By default, this represents the currently visible rows after any filters have been applied. When used in TreeGrid or Grouping mode, the array instead reflects the hierarchical structure of rows, including parent-child relationships, according to the current expand/collapse state of groups or tree nodes.

                                                                                                                                                                            Returns an array of row objects. By default, this represents the currently visible rows after any filters have been applied. When used in TreeGrid or Grouping mode, the array instead reflects the hierarchical structure of rows, including parent-child relationships, according to the current expand/collapse state of groups or tree nodes.

                                                                                                                                                                            ReturnsSmart.Grid.Row[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getViewRows();
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            getVisibleRows(): Smart.Grid.Row[]Returns an array containing the data for all rows currently visible in the grid, after applying any active filters. Only rows that meet the filter criteria and are not hidden by filtering will be included in the array. This allows developers to access the up-to-date, filtered data as presented to the user in the grid interface.

                                                                                                                                                                            Returns an array containing the data for all rows currently visible in the grid, after applying any active filters. Only rows that meet the filter criteria and are not hidden by filtering will be included in the array. This allows developers to access the up-to-date, filtered data as presented to the user in the grid interface.

                                                                                                                                                                            ReturnsSmart.Grid.Row[]

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.getVisibleRows();

                                                                                                                                                                            Try a demo showcasing the getVisibleRows method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            goToPage( index: number): voidProgrammatically navigates the grid to a specified page index, provided that paging is enabled. Use this method to set the current page of the grid, allowing you to jump to a particular page in response to user actions or custom logic. The page index is zero-based, where 0 refers to the first page."

                                                                                                                                                                            Programmatically navigates the grid to a specified page index, provided that paging is enabled. Use this method to set the current page of the grid, allowing you to jump to a particular page in response to user actions or custom logic. The page index is zero-based, where 0 refers to the first page."

                                                                                                                                                                            Arguments

                                                                                                                                                                            indexnumber

                                                                                                                                                                            The zero-based index of the page to navigate to.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.goToPage(1);

                                                                                                                                                                            Try a demo showcasing the goToPage method.
                                                                                                                                                                            Related APIs paging pager nextPage() prevPage() page

                                                                                                                                                                            hasMenu(): booleanDetermines whether any column’s drop-down menu is currently open and visible within the grid component. This can be used to control grid interactions or UI behaviors that depend on the state of column drop-down menus.

                                                                                                                                                                            Determines whether any column’s drop-down menu is currently open and visible within the grid component. This can be used to control grid interactions or UI behaviors that depend on the state of column drop-down menus.

                                                                                                                                                                            Returnsboolean

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.hasMenu();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            hasSelectedRows(): booleanChecks whether any rows in the grid are currently selected by the user. This property or method returns a boolean value: `true` if at least one row is selected, and `false` if no rows are selected. It is typically used to enable or disable actions that depend on row selection, such as editing or deleting entries.

                                                                                                                                                                            Checks whether any rows in the grid are currently selected by the user. This property or method returns a boolean value: `true` if at least one row is selected, and `false` if no rows are selected. It is typically used to enable or disable actions that depend on row selection, such as editing or deleting entries.

                                                                                                                                                                            Returnsboolean

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.hasSelectedRows();
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            hideDetail( rowId: string | number): voidConceals the details section for the specified row in the grid when the row details feature is enabled, effectively collapsing or hiding any expanded information or custom content associated with that row. This function ensures that only the main data for the row is visible, while any additional details remain hidden until explicitly shown again.

                                                                                                                                                                            Conceals the details section for the specified row in the grid when the row details feature is enabled, effectively collapsing or hiding any expanded information or custom content associated with that row. This function ensures that only the main data for the row is visible, while any additional details remain hidden until explicitly shown again.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row whose details should be hidden.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.hideDetail(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            highlightCell( rowId: string | number, dataField: string, className?: string): voidEmphasizes a specific cell within the grid, identified by its row ID and column data field. Invoking this method again on the same cell will toggle the highlight on or off. You can optionally specify a CSS class to apply custom styling to the highlighted cell, allowing for personalized visual differentiation.

                                                                                                                                                                            Emphasizes a specific cell within the grid, identified by its row ID and column data field. Invoking this method again on the same cell will toggle the highlight on or off. You can optionally specify a CSS class to apply custom styling to the highlighted cell, allowing for personalized visual differentiation.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row containing the cell.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column.

                                                                                                                                                                            className?string

                                                                                                                                                                            Optional CSS class name for custom highlight styling.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.highlightCell(1,"firstName","cssClass");
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            highlightColumn( dataField: string): voidHighlights all cells within the column corresponding to the specified data field. If this method is called again with the same data field, it toggles the highlight by removing it if already applied, or reapplying it if previously removed.

                                                                                                                                                                            Highlights all cells within the column corresponding to the specified data field. If this method is called again with the same data field, it toggles the highlight by removing it if already applied, or reapplying it if previously removed.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column to highlight.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.highlightColumn("firstName");
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            highlightRow( rowId: string | number, className?: string): voidToggles a persistent highlight on the row for the given rowId; calling again with the same id removes it. Optional className overrides the default highlight class.

                                                                                                                                                                            Toggles a persistent highlight on the row for the given rowId; calling again with the same id removes it. Optional className overrides the default highlight class.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to highlight.

                                                                                                                                                                            className?string

                                                                                                                                                                            Optional CSS class name for custom highlight styling.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.highlightRow(1,"cssClass");
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            insertRow( data: any, index?: number, callback?: {(row: GridRow): void}): anyAdds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.

                                                                                                                                                                            Adds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataany

                                                                                                                                                                            The data object for the new row, matching the grid's data source schema.

                                                                                                                                                                            index?number

                                                                                                                                                                            The zero-based index at which to insert the new row. Defaults to the last position if omitted.

                                                                                                                                                                            callback?{(row: GridRow): void}

                                                                                                                                                                            Optional callback function executed after the row is inserted, receiving the newly added row object.

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.insertRow({"firstName":"My Name"},1);

                                                                                                                                                                            Try a demo showcasing the insertRow method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            insertRowAfter( data: any, row?: any, callback?: {(row: GridRow): void}): anyAdds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.

                                                                                                                                                                            Adds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataany

                                                                                                                                                                            The data object for the new row, matching the grid's data source schema.

                                                                                                                                                                            row?any

                                                                                                                                                                            The Grid row after which the new row will be added.

                                                                                                                                                                            callback?{(row: GridRow): void}

                                                                                                                                                                            Optional callback function executed after the row is inserted, receiving the newly added row object.

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.insertRowAfter({"firstName":"My Name"},1);

                                                                                                                                                                            Try a demo showcasing the insertRowAfter method.
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            insertRowBefore( data: any, row?: any, callback?: {(row: GridRow): void}): anyAdds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.

                                                                                                                                                                            Adds a new row to the grid using the provided data object. If batch editing mode is active, the row will be added only as a pending change and will not be permanently committed to the data source until the batch is saved. You may optionally specify the index at which the new row should be inserted; if omitted, the row will be added at the default position (usually at the end). Additionally, you can provide a callback function that will be executed after the row has been successfully added to the grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataany

                                                                                                                                                                            The data object for the new row, matching the grid's data source schema.

                                                                                                                                                                            row?any

                                                                                                                                                                            The Grid row before which the new row will be added.

                                                                                                                                                                            callback?{(row: GridRow): void}

                                                                                                                                                                            Optional callback function executed after the row is inserted, receiving the newly added row object.

                                                                                                                                                                            Returnsany

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.insertRowBefore({"firstName":"My Name"},1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            lastPage(): voidNavigates directly to the final page of the data grid when paging functionality is enabled, allowing users to quickly access the last set of records displayed in the grid.

                                                                                                                                                                            Navigates directly to the final page of the data grid when paging functionality is enabled, allowing users to quickly access the last set of records displayed in the grid.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.lastPage();
                                                                                                                                                                            Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                                            loadState( state: any): {sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}Restored a previously saved grid state by accepting either the name of the saved state or a state object. The state object can include detailed settings such as current sorting and filtering criteria, column visibility and order, expanded or collapsed row status, grouping configurations, paging information (such as current page and page size), and selected rows. This allows the grid to be reconfigured exactly as it was when the state was saved, providing a consistent user experience across sessions.

                                                                                                                                                                            Restored a previously saved grid state by accepting either the name of the saved state or a state object. The state object can include detailed settings such as current sorting and filtering criteria, column visibility and order, expanded or collapsed row status, grouping configurations, paging information (such as current page and page size), and selected rows. This allows the grid to be reconfigured exactly as it was when the state was saved, providing a consistent user experience across sessions.

                                                                                                                                                                            Arguments

                                                                                                                                                                            stateany

                                                                                                                                                                            A state name (string) previously saved or a state object representing the grid configuration to load.

                                                                                                                                                                            Returns{sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.loadState();

                                                                                                                                                                            Try a demo showcasing the loadState method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            nextPage(): voidAdvances to the next page of data in the grid when paging functionality is enabled. If the grid is currently displaying the last available page, this action will have no effect and the page will remain unchanged.

                                                                                                                                                                            Advances to the next page of data in the grid when paging functionality is enabled. If the grid is currently displaying the last available page, this action will have no effect and the page will remain unchanged.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.nextPage();
                                                                                                                                                                            Related APIs paging pager goToPage() prevPage() page

                                                                                                                                                                            openContextMenu( left: number, top: number): voidDisplays the context menu at the given (left, top) screen coordinates. Ensure that context menu functionality is enabled in the grid settings for this method to work.

                                                                                                                                                                            Displays the context menu at the given (left, top) screen coordinates. Ensure that context menu functionality is enabled in the grid settings for this method to work.

                                                                                                                                                                            Arguments

                                                                                                                                                                            leftnumber

                                                                                                                                                                            The left position (in pixels) where the context menu should appear.

                                                                                                                                                                            topnumber

                                                                                                                                                                            The top position (in pixels) where the context menu should appear.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.openContextMenu(5,15);

                                                                                                                                                                            openDropDown(): voidDisplays the grid’s drop-down user interface when the 'dropDownMode' property is set to true, allowing users to interact with additional grid options or filters presented within the drop-down.

                                                                                                                                                                            Displays the grid’s drop-down user interface when the 'dropDownMode' property is set to true, allowing users to interact with additional grid options or filters presented within the drop-down.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.openDropDown();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            openMenu( dataField: string): voidDisplays the drop-down menu associated with the column specified by the provided data field identifier, allowing users to access additional actions or settings related to that column.

                                                                                                                                                                            Displays the drop-down menu associated with the column specified by the provided data field identifier, allowing users to access additional actions or settings related to that column.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field name of the column whose menu to open.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.openMenu("firstName");
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            openSidePanel( content: any, width?: number, callback?: any): voidDisplays the Grid's side panel, and displays Element in it. This is useful if you have HTML Element on a page and want to move it and display it as a Side panel of the Grid.

                                                                                                                                                                            Displays the Grid's side panel, and displays Element in it. This is useful if you have HTML Element on a page and want to move it and display it as a Side panel of the Grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            contentany

                                                                                                                                                                            This is the content which will be displayed in the side panel. It can be String, HTML Element, HTML Template Element or Component

                                                                                                                                                                            width?number

                                                                                                                                                                            This is the width of the side panel

                                                                                                                                                                            callback?any

                                                                                                                                                                            Function called when the panel is opened. It can be used for dynamically showing content and initializing it.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.openSidePanel(1);

                                                                                                                                                                            Try a demo showcasing the openSidePanel method.
                                                                                                                                                                            Related APIs paging pager goToPage() nextPage() prevPage() page

                                                                                                                                                                            prevPage(): voidTriggers navigation to the previous page in the grid when paging functionality is enabled. If the grid is currently displaying the first page, the operation is ignored and the page remains unchanged. This ensures that navigation does not attempt to move before the first available page.

                                                                                                                                                                            Triggers navigation to the previous page in the grid when paging functionality is enabled. If the grid is currently displaying the first page, the operation is ignored and the page remains unchanged. This ensures that navigation does not attempt to move before the first available page.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.prevPage();
                                                                                                                                                                            Related APIs paging pager goToPage() nextPage() page

                                                                                                                                                                            print(): voidGenerates a printed version of the Grid’s data using the configuration specified in the dataExport property. During printing, the Grid automatically hides scrollbars and adjusts its width and height to ensure that all rows and columns are fully visible on the page, regardless of their original size. This ensures that the entire content of the Grid is included in the printout without any truncation or the need for scrolling. To customize aspects such as page layout, formatting, or which data is included in the print output, adjust the parameters within the dataExport property.

                                                                                                                                                                            Generates a printed version of the Grid’s data using the configuration specified in the dataExport property. During printing, the Grid automatically hides scrollbars and adjusts its width and height to ensure that all rows and columns are fully visible on the page, regardless of their original size. This ensures that the entire content of the Grid is included in the printout without any truncation or the need for scrolling. To customize aspects such as page layout, formatting, or which data is included in the print output, adjust the parameters within the dataExport property.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.print();

                                                                                                                                                                            Try a demo showcasing the print method.
                                                                                                                                                                            Related APIs dataExport exportData()

                                                                                                                                                                            refresh(): voidRefreshes the grid view for current property and data state without a full `render()` rebuild—lighter than re-creating the whole DOM (compare render).

                                                                                                                                                                            Refreshes the grid view for current property and data state without a full `render()` rebuild—lighter than re-creating the whole DOM (compare render).

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.refresh();
                                                                                                                                                                            Related APIs dataSource beginUpdate() endUpdate() change

                                                                                                                                                                            refreshSort(): voidApplies the current sorting settings again to the data and updates the Grid display to reflect any changes, ensuring the data is presented according to the latest sorting configuration.

                                                                                                                                                                            Applies the current sorting settings again to the data and updates the Grid display to reflect any changes, ensuring the data is presented according to the latest sorting configuration.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.refreshSort();
                                                                                                                                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                            refreshView(): voidRefreshes only the cells that are currently visible within the Grid’s viewport, rather than updating the entire Grid. This is especially useful for implementing real-time updates or live data feeds, as it enables efficient, seamless rendering of new cell values without triggering a full Grid refresh or losing the user's scroll position.

                                                                                                                                                                            Refreshes only the cells that are currently visible within the Grid’s viewport, rather than updating the entire Grid. This is especially useful for implementing real-time updates or live data feeds, as it enables efficient, seamless rendering of new cell values without triggering a full Grid refresh or losing the user's scroll position.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.refreshView();
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            removeFilter( dataField: string, refreshFilters?: boolean): voidRemoves the filter currently applied to the specified column. Optionally, you can delay the filter refresh process, allowing you to remove filters from multiple columns before triggering an update. This helps optimize performance when batch-processing multiple filter removals.

                                                                                                                                                                            Removes the filter currently applied to the specified column. Optionally, you can delay the filter refresh process, allowing you to remove filters from multiple columns before triggering an update. This helps optimize performance when batch-processing multiple filter removals.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the column from which to remove the filter, e.g., 'firstName'.

                                                                                                                                                                            refreshFilters?boolean

                                                                                                                                                                            If set to false, delays the filter refresh to allow multiple filters to be removed before updating the Grid.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.removeFilter("firstName");

                                                                                                                                                                            Try a demo showcasing the removeFilter method.
                                                                                                                                                                            Related APIs filtering filterable header addFilter() clearFilter() filter

                                                                                                                                                                            removeGroup( dataField: string): voidRemoves grouping from the Grid for the specified data field. This method is only applicable when grouping functionality is enabled in the Grid. When called, it will ungroup the records currently grouped by the given field, and the Grid will update to display the data without that grouping criterion.

                                                                                                                                                                            Removes grouping from the Grid for the specified data field. This method is only applicable when grouping functionality is enabled in the Grid. When called, it will ungroup the records currently grouped by the given field, and the Grid will update to display the data without that grouping criterion.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the group to remove, e.g., 'firstName'.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.removeGroup("firstName");
                                                                                                                                                                            Related APIs grouping groupable addGroup() clearGroups() group

                                                                                                                                                                            removeSort( dataField: string): voidRemoves any active sorting from the specified column. Use this method to clear the sort order applied to a particular data field, returning the column to its default, unsorted state. This is useful when you want to reset or update the sorting configuration for individual columns within a data table.

                                                                                                                                                                            Removes any active sorting from the specified column. Use this method to clear the sort order applied to a particular data field, returning the column to its default, unsorted state. This is useful when you want to reset or update the sorting configuration for individual columns within a data table.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the column whose sorting you want to remove, e.g., 'firstName'.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.removeSort("firstName");
                                                                                                                                                                            Related APIs sorting addSort() clearSort() sortBy() sort

                                                                                                                                                                            render(): voidTriggers a full re-render of the Grid, similar to when it is first initialized. This method reconstructs all underlying HTML elements for rows, columns, and cells from scratch, ensuring a fresh and accurate representation of the data. After rebuilding these elements, it also updates and refreshes the Grid layout to reflect any structural changes. This is useful when foundational data or configuration has changed and a partial update is not sufficient.

                                                                                                                                                                            Triggers a full re-render of the Grid, similar to when it is first initialized. This method reconstructs all underlying HTML elements for rows, columns, and cells from scratch, ensuring a fresh and accurate representation of the data. After rebuilding these elements, it also updates and refreshes the Grid layout to reflect any structural changes. This is useful when foundational data or configuration has changed and a partial update is not sufficient.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.render();
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            reorderColumns( dataField: string | number, referenceDataField: string | number, insertAfter?: boolean): voidReorders two columns in the Grid by moving the specified source column to a new position either before or after the target reference column. This allows for customizable column arrangements by programmatically shifting the position of columns within the Grid.

                                                                                                                                                                            Reorders two columns in the Grid by moving the specified source column to a new position either before or after the target reference column. This allows for customizable column arrangements by programmatically shifting the position of columns within the Grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring | number

                                                                                                                                                                            The data field or index of the column to move.

                                                                                                                                                                            referenceDataFieldstring | number

                                                                                                                                                                            The data field or index of the target column used as reference for repositioning.

                                                                                                                                                                            insertAfter?boolean

                                                                                                                                                                            If true, inserts the first column after the reference column; otherwise, inserts it before.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.reorderColumns("firstName","productName");
                                                                                                                                                                            Related APIs sorting addSort() removeSort() clearSort() sortBy() sort

                                                                                                                                                                            resetState(): voidRestores the Grid to its original default configuration by removing all user-applied settings, including sorting, filtering, grouping, and selected rows or cells. This action clears any user interactions, ensuring the Grid displays data with no custom modifications.

                                                                                                                                                                            Restores the Grid to its original default configuration by removing all user-applied settings, including sorting, filtering, grouping, and selected rows or cells. This action clears any user interactions, ensuring the Grid displays data with no custom modifications.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.resetState();
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            revertBatchEdit(): voidReverts the Grid to its previous state by discarding all unsaved batch editing changes made by the user. Any modifications entered during the current batch editing session will be canceled, restoring the Grid’s data to its last committed state.

                                                                                                                                                                            Reverts the Grid to its previous state by discarding all unsaved batch editing changes made by the user. Any modifications entered during the current batch editing session will be canceled, restoring the Grid’s data to its last committed state.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.revertBatchEdit();
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            saveBatchEdit(): voidSaves and applies all batch editing changes made by the end-user, persisting the updates permanently to the Grid's underlying data source. This operation commits all modifications (such as additions, deletions, and edits) performed during the batch editing session, ensuring that the Grid data source accurately reflects the latest user input.

                                                                                                                                                                            Saves and applies all batch editing changes made by the end-user, persisting the updates permanently to the Grid's underlying data source. This operation commits all modifications (such as additions, deletions, and edits) performed during the batch editing session, ensuring that the Grid data source accurately reflects the latest user input.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.saveBatchEdit();
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            saveState( name?: string): {sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}Captures and returns the current state of the Grid as a comprehensive JSON object. The state includes details such as applied sorting and filtering criteria, columns configuration (order, visibility, and sizing), currently expanded rows, grouping settings, paging information (current page, page size), and user selections. Optionally, you can provide a name parameter to uniquely identify and reference the saved state for future retrieval or restoration.

                                                                                                                                                                            Captures and returns the current state of the Grid as a comprehensive JSON object. The state includes details such as applied sorting and filtering criteria, columns configuration (order, visibility, and sizing), currently expanded rows, grouping settings, paging information (current page, page size), and user selections. Optionally, you can provide a name parameter to uniquely identify and reference the saved state for future retrieval or restoration.

                                                                                                                                                                            Arguments

                                                                                                                                                                            name?string

                                                                                                                                                                            Optional name to associate with the saved state.

                                                                                                                                                                            Returns{sort: any, filter: any, columns: any, expandedRows: any, groups: any, paging: any, selectedCells: any, selectedRows: any}

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            const result = document.querySelector('smart-grid')?.saveState();

                                                                                                                                                                            Try a demo showcasing the saveState method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            select( rowId: string | number, dataField?: string): voidSpecifies the selection of a particular row, column, or cell within a data table. If a data field (representing a column) is provided along with a row identifier, the selection targets a specific cell at the intersection of the given row and column. If only a row identifier is supplied without a data field, the entire row is selected. Similarly, providing only a data field without a row identifier selects the entire column.

                                                                                                                                                                            Specifies the selection of a particular row, column, or cell within a data table. If a data field (representing a column) is provided along with a row identifier, the selection targets a specific cell at the intersection of the given row and column. If only a row identifier is supplied without a data field, the entire row is selected. Similarly, providing only a data field without a row identifier selects the entire column.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The identifier of the row to select.

                                                                                                                                                                            dataField?string

                                                                                                                                                                            Optional data field of the column to select a specific cell.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.select(1);

                                                                                                                                                                            Try a demo showcasing the select method.
                                                                                                                                                                            Related APIs selection unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            selectAllRows(): voidSelects every row that is currently visible in the Grid, including only those rows that meet the active filters, sorting, and pagination settings. Hidden or filtered-out rows are not selected.

                                                                                                                                                                            Selects every row that is currently visible in the Grid, including only those rows that meet the active filters, sorting, and pagination settings. Hidden or filtered-out rows are not selected.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectAllRows();

                                                                                                                                                                            Try a demo showcasing the selectAllRows method.
                                                                                                                                                                            Related APIs selection select() unselect() clearSelection() change

                                                                                                                                                                            selectCells( rowIds: (string | number)[], dataFields: string[]): voidAllows you to select multiple cells within a grid by specifying arrays of row indices (cell ids) and corresponding column data fields. For example: `grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']);` This will select the cells located at the intersection of:- Row 0 and the 'firstName' column,- Row 1 and the 'quantity' column,- Row 2 and the 'date' column.Each element in the id array matches with the element in the dataFields array by position, ensuring precise cell selection across different rows and columns. This method is useful for batch selection or applying simultaneous actions to multiple, non-contiguous cells.

                                                                                                                                                                            Allows you to select multiple cells within a grid by specifying arrays of row indices (cell ids) and corresponding column data fields.
                                                                                                                                                                            For example: `grid.selectCells([0, 1, 2], ['firstName', 'quantity', 'date']);`
                                                                                                                                                                            This will select the cells located at the intersection of:
                                                                                                                                                                            - Row 0 and the 'firstName' column,
                                                                                                                                                                            - Row 1 and the 'quantity' column,
                                                                                                                                                                            - Row 2 and the 'date' column.

                                                                                                                                                                            Each element in the id array matches with the element in the dataFields array by position, ensuring precise cell selection across different rows and columns. This method is useful for batch selection or applying simultaneous actions to multiple, non-contiguous cells.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIds(string | number)[]

                                                                                                                                                                            Array of row ids

                                                                                                                                                                            dataFieldsstring[]

                                                                                                                                                                            Array of data fields.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectCells([0,1,2],["firstName","quantity","date"]);

                                                                                                                                                                            Try a demo showcasing the selectCells method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            selectCellsByQuery( query: string): voidSelects grid cells based on a query string. - Example 1: `grid.selectCellsByQuery('nancy');` selects all cells in the grid whose value is exactly 'nancy'.- Example 2: `grid.selectCellsByQuery('nancy, davolio');` selects all cells within rows where both 'nancy' and 'davolio' values appear in any columns of the same row.The query can be a single value or a comma-separated list of values. When multiple values are specified, only rows containing all the specified values (regardless of column order) will have their cells selected.

                                                                                                                                                                            Selects grid cells based on a query string.

                                                                                                                                                                            - Example 1: `grid.selectCellsByQuery('nancy');` selects all cells in the grid whose value is exactly 'nancy'.
                                                                                                                                                                            - Example 2: `grid.selectCellsByQuery('nancy, davolio');` selects all cells within rows where both 'nancy' and 'davolio' values appear in any columns of the same row.

                                                                                                                                                                            The query can be a single value or a comma-separated list of values. When multiple values are specified, only rows containing all the specified values (regardless of column order) will have their cells selected.

                                                                                                                                                                            Arguments

                                                                                                                                                                            querystring

                                                                                                                                                                            Search query

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectCellsByQuery("nancy","davolio");
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            selectRange( rowId: string | number, dataField: string, endRowId: string | number, endDataField: string): voidSelects a rectangular range of cells within the grid, defined by specifying both the starting and ending row IDs as well as the data field keys (columns). The selection includes all cells that fall within the rectangle formed by these start and end points. The behavior and outcome of this selection may vary based on the current selection mode of the Grid component (for example, whether it supports cell, row, or column selection)."

                                                                                                                                                                            Selects a rectangular range of cells within the grid, defined by specifying both the starting and ending row IDs as well as the data field keys (columns). The selection includes all cells that fall within the rectangle formed by these start and end points. The behavior and outcome of this selection may vary based on the current selection mode of the Grid component (for example, whether it supports cell, row, or column selection)."

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The starting row ID of the selection range.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The starting column data field of the selection range.

                                                                                                                                                                            endRowIdstring | number

                                                                                                                                                                            The ending row ID of the selection range.

                                                                                                                                                                            endDataFieldstring

                                                                                                                                                                            The ending column data field of the selection range.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectRange(1,"firstName",5,"lastName");
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            selectRows( rowId: (string | number)[]): voidProgrammatically selects rows by their row IDs. Honors current selection mode and other selection settings.

                                                                                                                                                                            Programmatically selects rows by their row IDs. Honors current selection mode and other selection settings.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowId(string | number)[]

                                                                                                                                                                            Array of row IDs to select.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectRows([1,3,5]);
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            selectRowsByIndex( rowIndex: number[]): voidSelects rows by zero-based index in the current (sorted/filtered/paged) view, not necessarily by data order alone.

                                                                                                                                                                            Selects rows by zero-based index in the current (sorted/filtered/paged) view, not necessarily by data order alone.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIndexnumber[]

                                                                                                                                                                            An array of zero-based row indexes to select.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectRowsByIndex([1,5]);

                                                                                                                                                                            Try a demo showcasing the selectRowsByIndex method.
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            selectRowsByQuery( query: string, dataField?: string, condition?: string): voidSelects rows from a dataset based on a specified query expression. This allows you to filter rows by applying conditions to the values in one or more columns. Supported conditions include equality (equals), partial matches (contains), comparison operators (greater than, less than), prefix matching (starts with), and more. The query expression enables flexible filtering, so only rows that meet the defined criteria are returned.

                                                                                                                                                                            Selects rows from a dataset based on a specified query expression. This allows you to filter rows by applying conditions to the values in one or more columns. Supported conditions include equality (equals), partial matches (contains), comparison operators (greater than, less than), prefix matching (starts with), and more. The query expression enables flexible filtering, so only rows that meet the defined criteria are returned.

                                                                                                                                                                            Arguments

                                                                                                                                                                            querystring

                                                                                                                                                                            The search query or value to filter by.

                                                                                                                                                                            dataField?string

                                                                                                                                                                            Optional column data field to apply the query against.

                                                                                                                                                                            condition?string

                                                                                                                                                                            Optional condition operator. Supported values 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', 'NOT_NULL'.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectRowsByQuery("Nancy","firstName","EQUAL");
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            selectRowsRange( rowId: string | number, endRowId: string | number): voidSelects all consecutive rows, inclusive, between the specified start and end row IDs. Both the start and end IDs are included in the selection, and only rows with IDs that fall within this continuous range will be selected.

                                                                                                                                                                            Selects all consecutive rows, inclusive, between the specified start and end row IDs. Both the start and end IDs are included in the selection, and only rows with IDs that fall within this continuous range will be selected.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The starting row ID of the selection range.

                                                                                                                                                                            endRowIdstring | number

                                                                                                                                                                            The ending row ID of the selection range.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.selectRowsRange(1,3);
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            setAt( rowIndex: number, dataField: string, value: string | number | Date | boolean): voidAssigns a new value to a specific cell within a data table, targeting the cell by its row index and the corresponding column's data field name. This allows precise updating of individual cell contents based on row and column identifiers.

                                                                                                                                                                            Assigns a new value to a specific cell within a data table, targeting the cell by its row index and the corresponding column's data field name. This allows precise updating of individual cell contents based on row and column identifiers.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIndexnumber

                                                                                                                                                                            The row's index.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the column where the cell is located (e.g., 'firstName').

                                                                                                                                                                            valuestring | number | Date | boolean

                                                                                                                                                                            The new value to assign to the cell.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setAt(1,"firstName","new value");

                                                                                                                                                                            Try a demo showcasing the setAt method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            setCellStyle( rowId: string | number, dataField: string, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): voidApplies inline CSS (backgroundColor, color, fontSize, etc.) to the cell for the given rowId and dataField.

                                                                                                                                                                            Applies inline CSS (backgroundColor, color, fontSize, etc.) to the cell for the given rowId and dataField.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row containing the cell.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The dataField (column) name of the cell to style.

                                                                                                                                                                            rowStyle{background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}

                                                                                                                                                                            An object specifying CSS style properties and values to apply to the specific cell.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setCellStyle(1,"firstName",{"background":"blue","color":"white"});
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            setCellValue( rowId: string | number, dataField: string, value: string | number | Date | boolean): voidAssigns a new value to a specific cell within a data table, targeting the cell by its unique row ID and the corresponding column's data field name. This allows precise updating of individual cell contents based on row and column identifiers.

                                                                                                                                                                            Assigns a new value to a specific cell within a data table, targeting the cell by its unique row ID and the corresponding column's data field name. This allows precise updating of individual cell contents based on row and column identifiers.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row containing the cell.

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the column where the cell is located (e.g., 'firstName').

                                                                                                                                                                            valuestring | number | Date | boolean

                                                                                                                                                                            The new value to assign to the cell.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setCellValue(1,"firstName","new value");

                                                                                                                                                                            Try a demo showcasing the setCellValue method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            setColumnProperty( dataField: string, propertyName: string, value: any): voidSets or updates a specific property of a column identified by its dataField. This function allows you to dynamically modify column settings, such as freezing the column, toggling its visibility, adjusting its width, and altering other configurable attributes at runtime. Use this method to programmatically change how individual columns are displayed or behave within your data grid or table component.

                                                                                                                                                                            Sets or updates a specific property of a column identified by its dataField. This function allows you to dynamically modify column settings, such as freezing the column, toggling its visibility, adjusting its width, and altering other configurable attributes at runtime. Use this method to programmatically change how individual columns are displayed or behave within your data grid or table component.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The dataField identifier of the column (e.g., 'firstName').

                                                                                                                                                                            propertyNamestring

                                                                                                                                                                            The name of the column property to set (e.g., 'freeze', 'visible', 'width').

                                                                                                                                                                            valueany

                                                                                                                                                                            The new value to assign to the specified column property.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setColumnProperty("firstName","freeze",true);

                                                                                                                                                                            Try a demo showcasing the setColumnProperty method.
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() columnClick columnResize columnReorder

                                                                                                                                                                            setColumns( columns: GridColumn[]): voidSets the columns displayed in the Grid to a new set defined by the provided argument. When 'setColumns' is called, the Grid compares the new columns array with the currently displayed columns. It will add any new columns, retain existing columns that are still present, and remove columns that are not included in the new array. After updating the columns, the Grid automatically redraws all column headers and refreshes all rows to reflect the changes. Importantly, any state associated with existing columns—such as sort order, filters, column width, and other configurable options—will be preserved for columns that remain after the update. This ensures that users do not lose their settings when columns are changed dynamically.

                                                                                                                                                                            Sets the columns displayed in the Grid to a new set defined by the provided argument. When 'setColumns' is called, the Grid compares the new columns array with the currently displayed columns. It will add any new columns, retain existing columns that are still present, and remove columns that are not included in the new array. After updating the columns, the Grid automatically redraws all column headers and refreshes all rows to reflect the changes. Importantly, any state associated with existing columns—such as sort order, filters, column width, and other configurable options—will be preserved for columns that remain after the update. This ensures that users do not lose their settings when columns are changed dynamically.

                                                                                                                                                                            Arguments

                                                                                                                                                                            columnsGridColumn[]

                                                                                                                                                                            Columns array.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setColumns([{"label":"First Name","dataField":"firstName"}]);
                                                                                                                                                                            Related APIs columns columnHeader addNewColumn() setColumnProperty() columnClick columnResize columnReorder

                                                                                                                                                                            setDropDownLabel( label: string): voidSpecifies the label text displayed for the Grid component when the 'dropDownMode' property is enabled. This label helps users identify the purpose or content of the Grid when it appears in drop-down mode.

                                                                                                                                                                            Specifies the label text displayed for the Grid component when the 'dropDownMode' property is enabled. This label helps users identify the purpose or content of the Grid when it appears in drop-down mode.

                                                                                                                                                                            Arguments

                                                                                                                                                                            labelstring

                                                                                                                                                                            The label to be displayed in the dropdown button.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setDropDownLabel("firstName");
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            setHorizontalScrollValue( value: number): voidSets the current position of the horizontal scrollbar within a scrollable container. This method allows you to programmatically adjust the horizontal scroll offset, enabling smooth navigation or custom scroll behavior. It can be used in combination with getHorizontalScrollValue to retrieve the current scroll position, and with getHorizontalScrollMax to determine the maximum scrollable distance. This is useful for implementing features such as custom scrolling controls, restoring previous scroll positions, or synchronizing scrolling across multiple elements.

                                                                                                                                                                            Sets the current position of the horizontal scrollbar within a scrollable container. This method allows you to programmatically adjust the horizontal scroll offset, enabling smooth navigation or custom scroll behavior. It can be used in combination with getHorizontalScrollValue to retrieve the current scroll position, and with getHorizontalScrollMax to determine the maximum scrollable distance. This is useful for implementing features such as custom scrolling controls, restoring previous scroll positions, or synchronizing scrolling across multiple elements.

                                                                                                                                                                            Arguments

                                                                                                                                                                            valuenumber

                                                                                                                                                                            The new scroll position

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setHorizontalScrollValue(100);
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            setLocale( locale: string, messages?: any): voidSets the locale of a component.

                                                                                                                                                                            Sets the locale of a component.

                                                                                                                                                                            Arguments

                                                                                                                                                                            localestring

                                                                                                                                                                            The locale abbreviation. For example: 'de'.

                                                                                                                                                                            messages?any

                                                                                                                                                                            Object containing the locale messages.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setLocale("'de'");

                                                                                                                                                                            Try a demo showcasing the setLocale method.

                                                                                                                                                                            setRowProperty( rowId: string | number, propertyName: string, value: any): voidUpdates or sets a specific property of a table row identified by its unique rowId. This function allows you to dynamically modify row attributes—for example, toggling the frozen state, applying custom styling, or adding arbitrary metadata—enabling flexible and responsive UI changes at the row level.

                                                                                                                                                                            Updates or sets a specific property of a table row identified by its unique rowId. This function allows you to dynamically modify row attributes—for example, toggling the frozen state, applying custom styling, or adding arbitrary metadata—enabling flexible and responsive UI changes at the row level.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to modify.

                                                                                                                                                                            propertyNamestring

                                                                                                                                                                            The name of the row property to set (e.g., 'freeze', 'expanded', 'customProperty').

                                                                                                                                                                            valueany

                                                                                                                                                                            The new value to assign to the specified row property.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setRowProperty(1,"freeze",true);
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            setRowStyle( rowId: string | number, rowStyle: {background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}): voidAllows you to apply custom CSS styles to a specific table row, identified by its unique rowId. Supported style properties include background color, text color, font size, font family, text decoration, font style, and font weight. This enables granular control over the appearance of individual rows in your table, ensuring consistency with your application's design requirements.

                                                                                                                                                                            Allows you to apply custom CSS styles to a specific table row, identified by its unique rowId. Supported style properties include background color, text color, font size, font family, text decoration, font style, and font weight. This enables granular control over the appearance of individual rows in your table, ensuring consistency with your application's design requirements.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The unique identifier of the row to style.

                                                                                                                                                                            rowStyle{background?: string, color?: string, fontSize?: string, fontFamily?: string, textDecoration?: string, fontStyle?: string, fontWeight?: string}

                                                                                                                                                                            An object specifying CSS style properties and values to apply to the entire row.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setRowStyle(1,{"background":"blue","color":"white"});
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            setVerticalScrollValue( value: number): voidSets the current position of the vertical scrollbar within a scrollable container or component. This method allows you to programmatically control the vertical scroll offset, typically specified in pixels or logical units from the top of the content. It can be used in conjunction with the getVerticalScrollValue method to retrieve the current scroll position, and with getVerticalScrollMax to determine the maximum scrollable value. This is useful for synchronizing scrolling behavior, implementing custom scroll controls, or restoring a previous scroll position.

                                                                                                                                                                            Sets the current position of the vertical scrollbar within a scrollable container or component. This method allows you to programmatically control the vertical scroll offset, typically specified in pixels or logical units from the top of the content. It can be used in conjunction with the getVerticalScrollValue method to retrieve the current scroll position, and with getVerticalScrollMax to determine the maximum scrollable value. This is useful for synchronizing scrolling behavior, implementing custom scroll controls, or restoring a previous scroll position.

                                                                                                                                                                            Arguments

                                                                                                                                                                            valuenumber

                                                                                                                                                                            The new scroll position

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.setVerticalScrollValue(100);
                                                                                                                                                                            Related APIs behavior refresh() change

                                                                                                                                                                            showCellMessage( rowId: string | number, dataField: string, value: string): voidShows a short message under a cell (rowId, dataField, message text)—tooltips, validation hints, or one-off help without a modal.

                                                                                                                                                                            Shows a short message under a cell (rowId, dataField, message text)—tooltips, validation hints, or one-off help without a modal.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            row bound id

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.

                                                                                                                                                                            valuestring

                                                                                                                                                                            The message to be shown below the cell

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.showCellMessage(1,"firstName","value");
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            showDetail( rowId: string | number): voidRenders an in-depth view of a selected row when the row details feature is activated in the grid configuration. This allows users to access and interact with additional information or actions related to the chosen row.

                                                                                                                                                                            Renders an in-depth view of a selected row when the row details feature is activated in the grid configuration. This allows users to access and interact with additional information or actions related to the chosen row.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            row bound id

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.showDetail(1);
                                                                                                                                                                            Related APIs editing editable beginEdit() endEdit() addRow() updateRow() deleteRow() beginEdit endEdit

                                                                                                                                                                            showSidePanel( content: any, width?: number, callback?: any): voidDisplays the Grid's side panel showing custom content in it. It creates a clone of the content and displays it.

                                                                                                                                                                            Displays the Grid's side panel showing custom content in it. It creates a clone of the content and displays it.

                                                                                                                                                                            Arguments

                                                                                                                                                                            contentany

                                                                                                                                                                            This is the content which will be displayed in the side panel. It can be String, HTML Element, HTML Template Element or Component

                                                                                                                                                                            width?number

                                                                                                                                                                            This is the width of the side panel

                                                                                                                                                                            callback?any

                                                                                                                                                                            Function called when the panel is opened. It can be used for dynamically showing content and initializing it.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.showSidePanel(1);

                                                                                                                                                                            Try a demo showcasing the showSidePanel method.

                                                                                                                                                                            sortBy( dataField: string, sortOrder: string | null): voidApplies sorting to the Grid based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of Grid sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.

                                                                                                                                                                            Applies sorting to the Grid based on the specified data field. You can either add sorting by providing a valid sortOrder (such as 'asc' or 'desc'), or remove sorting from a column by setting the sortOrder parameter to null. This allows dynamic adjustment of Grid sorting criteria, enabling users to sort data as needed or clear sorting on individual columns.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The data field of the column to sort, e.g., 'firstName'.

                                                                                                                                                                            sortOrderstring | null

                                                                                                                                                                            Sort order to apply: 'asc' for ascending, 'desc' for descending, or null to remove sorting.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.sortBy("firstName","asc");

                                                                                                                                                                            Try a demo showcasing the sortBy method.
                                                                                                                                                                            Related APIs sorting addSort() removeSort() clearSort() sort

                                                                                                                                                                            swapColumns( dataField: string | number, referenceDataField: string | number): voidSwaps the positions of two specified columns within the Grid layout, effectively changing their order of appearance. This operation updates the Grid so that the selected columns exchange places, while the data and structure of other columns remain unchanged.

                                                                                                                                                                            Swaps the positions of two specified columns within the Grid layout, effectively changing their order of appearance. This operation updates the Grid so that the selected columns exchange places, while the data and structure of other columns remain unchanged.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring | number

                                                                                                                                                                            The data field or index of the first column.

                                                                                                                                                                            referenceDataFieldstring | number

                                                                                                                                                                            The data field or index of the second column.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.swapColumns("firstName","productName");
                                                                                                                                                                            Related APIs appearance layout refresh() change

                                                                                                                                                                            toggleRow( rowId: string | number): voidToggles the expanded or collapsed state of a TreeGrid row specified by the provided row ID. If the target row is currently collapsed, this action will expand it to reveal its child rows. Conversely, if the row is expanded, it will collapse and hide any child rows. Use this function to dynamically show or hide hierarchical data within the TreeGrid based on user interaction or programmatic control.

                                                                                                                                                                            Toggles the expanded or collapsed state of a TreeGrid row specified by the provided row ID. If the target row is currently collapsed, this action will expand it to reveal its child rows. Conversely, if the row is expanded, it will collapse and hide any child rows. Use this function to dynamically show or hide hierarchical data within the TreeGrid based on user interaction or programmatic control.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            The ID of the row to toggle expand/collapse state.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.toggleRow(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            transpose( dataField: string, columnWidth?: number, initColumn?: any): voidTransposes the Grid.

                                                                                                                                                                            Transposes the Grid.

                                                                                                                                                                            Arguments

                                                                                                                                                                            dataFieldstring

                                                                                                                                                                            The dataField of the Column.

                                                                                                                                                                            columnWidth?number

                                                                                                                                                                            The width of the Column.

                                                                                                                                                                            initColumn?any

                                                                                                                                                                            callback for set up of the column.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.transpose("firstName");

                                                                                                                                                                            Try a demo showcasing the transpose method.

                                                                                                                                                                            uncheckAllRows(): voidResets the checked state of all rows in a TreeGrid or GroupingGrid by setting every checkbox to unchecked (`false`). This action ensures that no rows remain selected or checked, effectively deselecting all items in the grid.

                                                                                                                                                                            Resets the checked state of all rows in a TreeGrid or GroupingGrid by setting every checkbox to unchecked (`false`). This action ensures that no rows remain selected or checked, effectively deselecting all items in the grid.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.uncheckAllRows();
                                                                                                                                                                            Related APIs selection select() unselect() selectAllRows() clearSelection() change

                                                                                                                                                                            uncheckRow( rowId: string | number): voidUnchecks a specific row in the TreeGrid by setting its associated checkbox to an unchecked (false) state. This visually updates the checkbox in the UI and updates the row’s checked status in the underlying data model.

                                                                                                                                                                            Unchecks a specific row in the TreeGrid by setting its associated checkbox to an unchecked (false) state. This visually updates the checkbox in the UI and updates the row’s checked status in the underlying data model.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            row bound id

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.uncheckRow(1);
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            unselect( rowId: string | number, dataField?: string): voidDeselects a previously selected row, cell, or column within the data grid, removing any associated highlight or selection state.

                                                                                                                                                                            Deselects a previously selected row, cell, or column within the data grid, removing any associated highlight or selection state.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            row bound id

                                                                                                                                                                            dataField?string

                                                                                                                                                                            column bound data field. For example, if you have a column with dataField: 'firstName', set 'firstName' here.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.unselect(1);
                                                                                                                                                                            Related APIs selection select() selectAllRows() clearSelection() change

                                                                                                                                                                            updateRow( rowId: string | number, data: any, callback?: {(row: GridRow): void}): voidUpdates the data of a specific row identified by its unique row ID. When batch editing mode is enabled, the changes to the row are temporarily staged and will not be permanently saved to the data source until the user explicitly commits or saves the batch of edits. This ensures that multiple changes can be reviewed and either all applied or discarded together, rather than being immediately written to the underlying data.

                                                                                                                                                                            Updates the data of a specific row identified by its unique row ID. When batch editing mode is enabled, the changes to the row are temporarily staged and will not be permanently saved to the data source until the user explicitly commits or saves the batch of edits. This ensures that multiple changes can be reviewed and either all applied or discarded together, rather than being immediately written to the underlying data.

                                                                                                                                                                            Arguments

                                                                                                                                                                            rowIdstring | number

                                                                                                                                                                            row bound id

                                                                                                                                                                            dataany

                                                                                                                                                                            row data matching the data source

                                                                                                                                                                            callback?{(row: GridRow): void}

                                                                                                                                                                            Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.

                                                                                                                                                                            On the custom element in the DOM (narrow the selector, e.g. to #my-grid, if you host multiple widgets):

                                                                                                                                                                            document.querySelector('smart-grid')?.updateRow(1,{"firstName":"Nancy","lastName":"Davolio","age":32});
                                                                                                                                                                            Related APIs dataSource refresh() beginUpdate() endUpdate() change

                                                                                                                                                                            CSS Variables

                                                                                                                                                                            --smart-grid-default-widthvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "800px"

                                                                                                                                                                            Used to set the default width.

                                                                                                                                                                            --smart-grid-default-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "400px"

                                                                                                                                                                            Used to set the default height.

                                                                                                                                                                            --smart-grid-footer-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-bar-height)"

                                                                                                                                                                            Sets footer height.

                                                                                                                                                                            --smart-grid-header-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-bar-height)"

                                                                                                                                                                            Sets header height.

                                                                                                                                                                            --smart-grid-group-header-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-bar-height)"

                                                                                                                                                                            Sets group header height.

                                                                                                                                                                            --smart-grid-row-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "30px"

                                                                                                                                                                            Sets rows height.

                                                                                                                                                                            --smart-grid-column-header-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-bar-height)"

                                                                                                                                                                            Sets columns height.

                                                                                                                                                                            --smart-grid-filter-footer-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-bar-height)"

                                                                                                                                                                            Sets filter row height.

                                                                                                                                                                            --smart-grid-aggregate-footer-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-bar-height)"

                                                                                                                                                                            Sets aggregates height.

                                                                                                                                                                            --smart-grid-header-background-freezevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface)"

                                                                                                                                                                            Sets row/column header background, when row/column is frozen.

                                                                                                                                                                            --smart-grid-header-color-freezevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface-color)"

                                                                                                                                                                            Sets row/column header text color, when row/column is frozen.

                                                                                                                                                                            --smart-grid-column-menu-widthvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "200px"

                                                                                                                                                                            Sets column menu's width.

                                                                                                                                                                            --smart-grid-column-menu-heightvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "auto"

                                                                                                                                                                            Sets column menu's height.

                                                                                                                                                                            --smart-grid-column-buttons-widthvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "23px"

                                                                                                                                                                            Sets column buttons width.

                                                                                                                                                                            --smart-grid-cell-color-freezevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface-color)"

                                                                                                                                                                            Sets text color of cells when the row or column is frozen.

                                                                                                                                                                            --smart-grid-cell-background-freezevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface)"

                                                                                                                                                                            Sets background color of cells when the row or column is frozen.

                                                                                                                                                                            --smart-grid-cell-color-deletevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "#333"

                                                                                                                                                                            Sets text color of cells when the row is deleted.

                                                                                                                                                                            --smart-grid-cell-background-deletevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "#FFDCDC"

                                                                                                                                                                            Sets background color of cells when the row is deleted.

                                                                                                                                                                            --smart-grid-cell-color-updatevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "#333"

                                                                                                                                                                            Sets text color of cells when a cell is updated.

                                                                                                                                                                            --smart-grid-cell-background-updatevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "#D7F9C7"

                                                                                                                                                                            Sets background color of cells when a cell is updated.

                                                                                                                                                                            --smart-grid-cell-color-addvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "#333"

                                                                                                                                                                            Sets text color of cells when a row is added.

                                                                                                                                                                            --smart-grid-cell-background-addvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "#FED59B"

                                                                                                                                                                            Sets background color of cells when a row is added.

                                                                                                                                                                            --smart-grid-cell-color-unboundvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface-color)"

                                                                                                                                                                            Sets text color of cells when the row is unbound.

                                                                                                                                                                            --smart-grid-cell-background-unboundvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface)"

                                                                                                                                                                            Sets background color of cells when the row is unbound.

                                                                                                                                                                            --smart-grid-cell-color-sortvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface-color)"

                                                                                                                                                                            Sets text color of cells when the column is sorted.

                                                                                                                                                                            --smart-grid-cell-background-sortvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface)"

                                                                                                                                                                            Sets background color of cells when the column is sorted.

                                                                                                                                                                            --smart-grid-cell-color-filtervar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface-color)"

                                                                                                                                                                            Sets text color of cells when the column is filtered.

                                                                                                                                                                            --smart-grid-cell-background-filtervar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "var(--smart-surface)"

                                                                                                                                                                            Sets background color of cells when the column is filtered.

                                                                                                                                                                            --smart-grid-group-row-vertical-offsetvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "5"

                                                                                                                                                                            Sets grouped rows vertical offset.

                                                                                                                                                                            --smart-grid-group-row-horizontal-offsetvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "1"

                                                                                                                                                                            Sets grouped rows horizontal offset.

                                                                                                                                                                            --smart-grid-template-columnsvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "none"

                                                                                                                                                                            Sets Template columns.

                                                                                                                                                                            --smart-grid-column-gapvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "0px"

                                                                                                                                                                            Sets the element's grid-column-gap (related to CSS Grid)

                                                                                                                                                                            --smart-grid-row-gapvar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "0px"

                                                                                                                                                                            Sets the element's grid-row-gap (related to CSS Grid)

                                                                                                                                                                            --smart-grid-freeze-splitter-sizevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "1px"

                                                                                                                                                                            Sets frozen split bar size.

                                                                                                                                                                            --smart-grid-resize-line-sizevar()

                                                                                                                                                                            Default value

                                                                                                                                                                            "1px"

                                                                                                                                                                            Sets resize line size.