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
Properties
Events
Methods
Properties
appearanceobject
An object containing settings related to the grid's appearance.
Properties
alternationStartnumber
Starting row index of alternating colors.
Default value
0Example
Set the alternationStart property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.alternationStart = 1;
Get the alternationStart property.
const grid = document.querySelector('smart-grid');
let alternationStart = grid.appearance.alternationStart;
alternationEndnumber
Ending row index of alternating colors.
Default value
0Example
Set the alternationEnd property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.alternationEnd = 10;
Get the alternationEnd property.
const grid = document.querySelector('smart-grid');
let alternationEnd = grid.appearance.alternationEnd;
alternationCountnumber
number of row color alternations.
Default value
0Example
Set the alternationCount property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.alternationCount = 10;
Get the alternationCount property.
const grid = document.querySelector('smart-grid');
let alternationCount = grid.appearance.alternationCount;
allowColumnStickyPositionboolean
Enables sticky columns.
Default value
falseExample
Set the allowColumnStickyPosition property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowColumnStickyPosition = true;
Get the allowColumnStickyPosition property.
const grid = document.querySelector('smart-grid');
let allowColumnStickyPosition = grid.appearance.allowColumnStickyPosition;
allowHoverboolean
Enables row hover effect. Applies a hover style to the cells.
Default value
falseExample
Set the allowHover property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowHover = true;
Get the allowHover property.
const grid = document.querySelector('smart-grid');
let allowHover = grid.appearance.allowHover;
allowHeaderHoverboolean
Enables header hover effect. Applies a hover style to the headers.
Default value
trueExample
Set the allowHeaderHover property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowHeaderHover = true;
Get the allowHeaderHover property.
const grid = document.querySelector('smart-grid');
let allowHeaderHover = grid.appearance.allowHeaderHover;
allowRowToggleAnimationboolean
Enables row toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.
Default value
falseExample
Set the allowRowToggleAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowRowToggleAnimation = true;
Get the allowRowToggleAnimation property.
const grid = document.querySelector('smart-grid');
let allowRowToggleAnimation = grid.appearance.allowRowToggleAnimation;
allowRowDetailToggleAnimationboolean
Enables row detail toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.
Default value
falseExample
Set the allowRowDetailToggleAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowRowDetailToggleAnimation = true;
Get the allowRowDetailToggleAnimation property.
const grid = document.querySelector('smart-grid');
let allowRowDetailToggleAnimation = grid.appearance.allowRowDetailToggleAnimation;
allowSortAnimationboolean
Enables sorting animation. Data records are sorted with animation, when sorting is applied.
Default value
falseExample
Set the allowSortAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowSortAnimation = true;
Get the allowSortAnimation property.
const grid = document.querySelector('smart-grid');
let allowSortAnimation = grid.appearance.allowSortAnimation;
allowColumnLabelAnimationboolean
Enables column label animation. The label is moved to 'left' with animation, when the column header's drop-down button is displayed on hover or sorting is applied.
Default value
trueExample
Set the allowColumnLabelAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowColumnLabelAnimation = true;
Get the allowColumnLabelAnimation property.
const grid = document.querySelector('smart-grid');
let allowColumnLabelAnimation = grid.appearance.allowColumnLabelAnimation;
allowColumnMenuAnimationboolean
Enables column menu animation. When you click on the column header's drop-down button, the menu is animated.
Default value
trueExample
Set the allowColumnMenuAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowColumnMenuAnimation = true;
Get the allowColumnMenuAnimation property.
const grid = document.querySelector('smart-grid');
let allowColumnMenuAnimation = grid.appearance.allowColumnMenuAnimation;
allowColumnSortButtonAnimationboolean
Enables column sort button animation. When you click on a sortable column to change the sort order, the sort button is animated.
Default value
trueExample
Set the allowColumnSortButtonAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowColumnSortButtonAnimation = true;
Get the allowColumnSortButtonAnimation property.
const grid = document.querySelector('smart-grid');
let allowColumnSortButtonAnimation = grid.appearance.allowColumnSortButtonAnimation;
allowColumnActionButtonAnimationboolean
Enables column action button animation. The drop-down button displayed on column header hover is optionally animated.
Default value
trueExample
Set the allowColumnActionButtonAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowColumnActionButtonAnimation = true;
Get the allowColumnActionButtonAnimation property.
const grid = document.querySelector('smart-grid');
let allowColumnActionButtonAnimation = grid.appearance.allowColumnActionButtonAnimation;
allowColumnFilterButtonAnimationboolean
Enables column filter button animation.
Default value
trueExample
Set the allowColumnFilterButtonAnimation property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.allowColumnFilterButtonAnimation = true;
Get the allowColumnFilterButtonAnimation property.
const grid = document.querySelector('smart-grid');
let allowColumnFilterButtonAnimation = grid.appearance.allowColumnFilterButtonAnimation;
autoShowColumnSortButtonboolean
If enabled, automatically shows column sort button. The sort button is displayed only when the column is sorted. If the property's value is false, sort button will be always displayed to indicate that sorting is possible.
Default value
trueExample
Set the autoShowColumnSortButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.autoShowColumnSortButton = true;
Get the autoShowColumnSortButton property.
const grid = document.querySelector('smart-grid');
let autoShowColumnSortButton = grid.appearance.autoShowColumnSortButton;
autoShowColumnActionButtonboolean
If enabled, automatically shows column action button.
Default value
trueExample
Set the autoShowColumnActionButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.autoShowColumnActionButton = true;
Get the autoShowColumnActionButton property.
const grid = document.querySelector('smart-grid');
let autoShowColumnActionButton = grid.appearance.autoShowColumnActionButton;
autoShowColumnFilterButtonboolean
If enabled, automatically shows column filter button.
Default value
trueExample
Set the autoShowColumnFilterButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.autoShowColumnFilterButton = true;
Get the autoShowColumnFilterButton property.
const grid = document.querySelector('smart-grid');
let autoShowColumnFilterButton = grid.appearance.autoShowColumnFilterButton;
autoGenerateRowLabelMode"number" | "letter"
Generates labels as 'numbers' or 'letters'. This property affects the rendering of the row header.
Default value
"number"Example
Set the autoGenerateRowLabelMode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.autoGenerateRowLabelMode = 'number';
Get the autoGenerateRowLabelMode property.
const grid = document.querySelector('smart-grid');
let autoGenerateRowLabelMode = grid.appearance.autoGenerateRowLabelMode;
autoGenerateColumnLabelMode"number" | "letter"
Generates labels as 'numbers' or 'letters. This property affects the rendering of the column header.
Default value
"letter"Example
Set the autoGenerateColumnLabelMode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.autoGenerateColumnLabelMode = 'number';
Get the autoGenerateColumnLabelMode property.
const grid = document.querySelector('smart-grid');
let autoGenerateColumnLabelMode = grid.appearance.autoGenerateColumnLabelMode;
displayLoadingIndicatorboolean
Sets the visibility of the loading indicator. This is the Loading... image displayed in the Grid while loading data.
Default value
falseExample
Set the displayLoadingIndicator property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.displayLoadingIndicator = true;
Get the displayLoadingIndicator property.
const grid = document.querySelector('smart-grid');
let displayLoadingIndicator = grid.appearance.displayLoadingIndicator;
loadingIndicatorPlaceholderstring
Sets the loading indicator label. This is the Text displayed while loading data.
Default value
"Loading..."Example
Set the loadingIndicatorPlaceholder property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.loadingIndicatorPlaceholder = 'true';
Get the loadingIndicatorPlaceholder property.
const grid = document.querySelector('smart-grid');
let loadingIndicatorPlaceholder = grid.appearance.loadingIndicatorPlaceholder;
placeholderstring
Sets the placeholder of the Grid. The placeholder is displayed when the Grid is empty.
Default value
"No Rows"Example
Set the placeholder property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.placeholder = 'true';
Get the placeholder property.
const grid = document.querySelector('smart-grid');
let placeholder = grid.appearance.placeholder;
sortAnimationDurationnumber
Sets the duration of sorting animation. This property is related to the allowSortAnimation property.
Default value
500Example
Set the sortAnimationDuration property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.sortAnimationDuration = true;
Get the sortAnimationDuration property.
const grid = document.querySelector('smart-grid');
let sortAnimationDuration = grid.appearance.sortAnimationDuration;
showRowHeaderboolean
Shows or hides Row header.
Default value
falseExample
Set the showRowHeader property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showRowHeader = true;
Get the showRowHeader property.
const grid = document.querySelector('smart-grid');
let showRowHeader = grid.appearance.showRowHeader;
showRowHeaderNumberboolean
Shows row indexes in the row header. The showRowHeader property should be true
Default value
falseExample
Set the showRowHeaderNumber property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showRowHeaderNumber = true;
Get the showRowHeaderNumber property.
const grid = document.querySelector('smart-grid');
let showRowHeaderNumber = grid.appearance.showRowHeaderNumber;
showRowHeaderEditIconboolean
Shows edit icon when a cell or row is in edit state.
Default value
trueExample
Set the showRowHeaderEditIcon property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showRowHeaderEditIcon = true;
Get the showRowHeaderEditIcon property.
const grid = document.querySelector('smart-grid');
let showRowHeaderEditIcon = grid.appearance.showRowHeaderEditIcon;
showRowHeaderSelectIconboolean
Shows select icon when the pointer is over the row header cell.
Default value
falseExample
Set the showRowHeaderSelectIcon property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showRowHeaderSelectIcon = true;
Get the showRowHeaderSelectIcon property.
const grid = document.querySelector('smart-grid');
let showRowHeaderSelectIcon = grid.appearance.showRowHeaderSelectIcon;
showRowHeaderFocusIconboolean
Shows focus icon on cell or row focus.
Default value
falseExample
Set the showRowHeaderFocusIcon property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showRowHeaderFocusIcon = true;
Get the showRowHeaderFocusIcon property.
const grid = document.querySelector('smart-grid');
let showRowHeaderFocusIcon = grid.appearance.showRowHeaderFocusIcon;
showRowHeaderDragIconboolean
Shows drag icon on the row header.
Default value
falseExample
Set the showRowHeaderDragIcon property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showRowHeaderDragIcon = true;
Get the showRowHeaderDragIcon property.
const grid = document.querySelector('smart-grid');
let showRowHeaderDragIcon = grid.appearance.showRowHeaderDragIcon;
showColumnHeaderLinesboolean
Shows column header lines.
Default value
trueExample
Set the showColumnHeaderLines property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnHeaderLines = true;
Get the showColumnHeaderLines property.
const grid = document.querySelector('smart-grid');
let showColumnHeaderLines = grid.appearance.showColumnHeaderLines;
showColumnLinesboolean
Shows column lines.
Default value
trueExample
Set the showColumnLines property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnLines = true;
Get the showColumnLines property.
const grid = document.querySelector('smart-grid');
let showColumnLines = grid.appearance.showColumnLines;
showRowLinesboolean
Shows row lines.
Default value
trueExample
Set the showRowLines property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showRowLines = true;
Get the showRowLines property.
const grid = document.querySelector('smart-grid');
let showRowLines = grid.appearance.showRowLines;
showFilterColumnBackgroundboolean
Shows filtered column background, when filter is applied.
Default value
trueExample
Set the showFilterColumnBackground property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showFilterColumnBackground = true;
Get the showFilterColumnBackground property.
const grid = document.querySelector('smart-grid');
let showFilterColumnBackground = grid.appearance.showFilterColumnBackground;
showSortColumnBackgroundboolean
Shows sorted column background, when sorting is applied.
Default value
trueExample
Set the showSortColumnBackground property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showSortColumnBackground = true;
Get the showSortColumnBackground property.
const grid = document.querySelector('smart-grid');
let showSortColumnBackground = grid.appearance.showSortColumnBackground;
showFrozenColumnBackgroundboolean
Shows frozen column background, when the Grid has frozen columns.
Default value
trueExample
Set the showFrozenColumnBackground property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showFrozenColumnBackground = true;
Get the showFrozenColumnBackground property.
const grid = document.querySelector('smart-grid');
let showFrozenColumnBackground = grid.appearance.showFrozenColumnBackground;
showFrozenRowBackgroundboolean
Shows filtered row background, when the Grid has frozen rows.
Default value
trueExample
Set the showFrozenRowBackground property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showFrozenRowBackground = true;
Get the showFrozenRowBackground property.
const grid = document.querySelector('smart-grid');
let showFrozenRowBackground = grid.appearance.showFrozenRowBackground;
showColumnSortButtonboolean
Shows column sort button.
Default value
trueExample
Set the showColumnSortButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnSortButton = true;
Get the showColumnSortButton property.
const grid = document.querySelector('smart-grid');
let showColumnSortButton = grid.appearance.showColumnSortButton;
showColumnFilterButtonboolean
Shows column filter button.
Default value
trueExample
Set the showColumnFilterButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnFilterButton = true;
Get the showColumnFilterButton property.
const grid = document.querySelector('smart-grid');
let showColumnFilterButton = grid.appearance.showColumnFilterButton;
showColumnDescriptionButtonboolean
Shows column description button. The button's style is customizable through the Grid CSS.
Default value
falseExample
Set the showColumnDescriptionButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnDescriptionButton = true;
Get the showColumnDescriptionButton property.
const grid = document.querySelector('smart-grid');
let showColumnDescriptionButton = grid.appearance.showColumnDescriptionButton;
showColumnIconboolean
Shows column icon within the column's header.
Default value
falseExample
Set the showColumnIcon property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnIcon = true;
Get the showColumnIcon property.
const grid = document.querySelector('smart-grid');
let showColumnIcon = grid.appearance.showColumnIcon;
showColumnCustomButtonboolean
Shows column custom button. User-defined button shown in the column header.
Default value
falseExample
Set the showColumnCustomButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnCustomButton = true;
Get the showColumnCustomButton property.
const grid = document.querySelector('smart-grid');
let showColumnCustomButton = grid.appearance.showColumnCustomButton;
showColumnActionButtonboolean
Shows column action button. This is the drop-down button displayed in the column header.
Default value
trueExample
Set the showColumnActionButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showColumnActionButton = true;
Get the showColumnActionButton property.
const grid = document.querySelector('smart-grid');
let showColumnActionButton = grid.appearance.showColumnActionButton;
showTooltipsboolean
Shows tooltips when user hovers columns or cells.
Default value
falseExample
Set the showTooltips property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showTooltips = true;
Get the showTooltips property.
const grid = document.querySelector('smart-grid');
let showTooltips = grid.appearance.showTooltips;
showHorizontalScrollBarOnFixedColumnsboolean
Shows horizontal scrollbar on fixed columns.
Default value
falseExample
Set the showHorizontalScrollBarOnFixedColumns property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showHorizontalScrollBarOnFixedColumns = true;
Get the showHorizontalScrollBarOnFixedColumns property.
const grid = document.querySelector('smart-grid');
let showHorizontalScrollBarOnFixedColumns = grid.appearance.showHorizontalScrollBarOnFixedColumns;
showVerticalScrollBarOnFixedColumnsboolean
Shows vertical scrollbar on fixed columns.
Default value
falseExample
Set the showVerticalScrollBarOnFixedColumns property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.appearance.showVerticalScrollBarOnFixedColumns = true;
Get the showVerticalScrollBarOnFixedColumns property.
const grid = document.querySelector('smart-grid');
let showVerticalScrollBarOnFixedColumns = grid.appearance.showVerticalScrollBarOnFixedColumns;
behaviorobject
An object containing settings related to the grid's behavior.
Properties
allowColumnAutoSizeOnDoubleClickboolean
Auto-Resize on double-click of a column's right border.
Default value
trueExample
Set the allowColumnAutoSizeOnDoubleClick property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.behavior.allowColumnAutoSizeOnDoubleClick = true;
Get the allowColumnAutoSizeOnDoubleClick property.
const grid = document.querySelector('smart-grid');
let allowColumnAutoSizeOnDoubleClick = grid.behavior.allowColumnAutoSizeOnDoubleClick;
allowRowAutoSizeOnDoubleClickboolean
Auto-Resize on double-click of a row's bottom border.
Default value
trueExample
Set the allowRowAutoSizeOnDoubleClick property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.behavior.allowRowAutoSizeOnDoubleClick = true;
Get the allowRowAutoSizeOnDoubleClick property.
const grid = document.querySelector('smart-grid');
let allowRowAutoSizeOnDoubleClick = grid.behavior.allowRowAutoSizeOnDoubleClick;
allowRowReorderboolean
Determines whether row reorder is enabled.
Default value
falseExample
Set the allowRowReorder property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.behavior.allowRowReorder = true;
Get the allowRowReorder property.
const grid = document.querySelector('smart-grid');
let allowRowReorder = grid.behavior.allowRowReorder;
allowColumnReorderboolean
Determines whether column reorder is enabled.
Default value
falseExample
Set the allowColumnReorder property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.behavior.allowColumnReorder = true;
Get the allowColumnReorder property.
const grid = document.querySelector('smart-grid');
let allowColumnReorder = grid.behavior.allowColumnReorder;
columnResizeMode"none" | "split" | "growAndShrink"
Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
Default value
"none"Example
Set the columnResizeMode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.behavior.columnResizeMode = 'split';
Get the columnResizeMode property.
const grid = document.querySelector('smart-grid');
let columnResizeMode = grid.behavior.columnResizeMode;
rowResizeMode"none" | "split" | "growAndShrink"
Sets the row resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
Default value
"none"Example
Set the rowResizeMode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.behavior.rowResizeMode = 'split';
Get the rowResizeMode property.
const grid = document.querySelector('smart-grid');
let rowResizeMode = grid.behavior.rowResizeMode;
layoutobject
An object containing settings related to the grid's layout.
Properties
allowCellsWrapboolean
Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines.
Default value
falseExample
Set the allowCellsWrap property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.layout.allowCellsWrap = true;
Get the allowCellsWrap property.
const grid = document.querySelector('smart-grid');
let allowCellsWrap = grid.layout.allowCellsWrap;
autoGenerateColumnWidthstring | number | null
Sets the width of the auto-generated Grid columns.
Example
Set the autoGenerateColumnWidth property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.layout.autoGenerateColumnWidth = 200;
Get the autoGenerateColumnWidth property.
const grid = document.querySelector('smart-grid');
let autoGenerateColumnWidth = grid.layout.autoGenerateColumnWidth;
columnWidthstring | number | null
Sets the width of the Grid columns.
Example
Set the columnWidth property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.layout.columnWidth = 200;
Get the columnWidth property.
const grid = document.querySelector('smart-grid');
let columnWidth = grid.layout.columnWidth;
columnHeightstring | number | null
Sets the height of the Grid columns.
Example
Set the columnHeight property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.layout.columnHeight = 60;
Get the columnHeight property.
const grid = document.querySelector('smart-grid');
let columnHeight = grid.layout.columnHeight;
columnMinHeightnumber
Sets the minimum height of the Grid columns.
Default value
30Example
Set the columnMinHeight property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.layout.columnMinHeight = 60;
Get the columnMinHeight property.
const grid = document.querySelector('smart-grid');
let columnMinHeight = grid.layout.columnMinHeight;
rowMinHeightnumber
Sets the minimum height of the Grid rows.
Default value
30Example
Set the rowMinHeight property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.layout.rowMinHeight = 60;
Get the rowMinHeight property.
const grid = document.querySelector('smart-grid');
let rowMinHeight = grid.layout.rowMinHeight;
rowHeightstring | number | null
Sets the height of the Grid rows. The property can be set to null, auto or a number.
Example
Set the rowHeight property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.layout.rowHeight = 60;
Get the rowHeight property.
const grid = document.querySelector('smart-grid');
let rowHeight = grid.layout.rowHeight;
clipboardobject
The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..
enabledboolean
Sets or gets whether the property is enabled.
Default value
trueExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.clipboard.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.clipboard.enabled;
autoFillMode"none" | "copy" | "fillSeries"
Sets or gets whether the copy-pasted values will be auto-filled by using automatic pattern detection. This is used in the Drag&Drop Multiple Cells selection. none does nothing. copy just copies the cells. 'fillSeries' detects and automatically fills the values. For example, if the selection has '1, 2' and the possible positions are more, the pasted values would be '1, 2, 3, 4, etc.
Default value
"fillSeries"Example
Set the autoFillMode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.clipboard.autoFillMode = 'copy';
Get the autoFillMode property.
const grid = document.querySelector('smart-grid');
let autoFillMode = grid.clipboard.autoFillMode;
onPasteValueany
Sets or gets a callback on paste.
Get the onPasteValue property.
const grid = document.querySelector('smart-grid');
let onPasteValue = grid.clipboard.onPasteValue;
columns{label: string, dataField: string}[] | string[] | number | Smart.Grid.Column[]
The columns property is used to describe all columns displayed in the grid.
Default value
nullProperties
align"left" | "right" | "center"
Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
Default value
"left"Example
Set the align property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].align = 'right';
Get the align property.
const grid = document.querySelector('smart-grid');
let align = grid.columns[0].align;
allowExportboolean
Sets or gets whether the column can be exported.
Default value
trueExample
Set the allowExport property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowExport = true;
Get the allowExport property.
const grid = document.querySelector('smart-grid');
let allowExport = grid.columns[0].allowExport;
allowGroupboolean
Sets or gets whether the column can be grouped.
Default value
trueExample
Set the allowGroup property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowGroup = true;
Get the allowGroup property.
const grid = document.querySelector('smart-grid');
let allowGroup = grid.columns[0].allowGroup;
allowHideboolean
Sets or gets whether the column can be hidden.
Default value
trueExample
Set the allowHide property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowHide = true;
Get the allowHide property.
const grid = document.querySelector('smart-grid');
let allowHide = grid.columns[0].allowHide;
allowSelectboolean | null
Sets or gets whether the column can be selected.
Default value
trueExample
Set the allowSelect property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowSelect = true;
Get the allowSelect property.
const grid = document.querySelector('smart-grid');
let allowSelect = grid.columns[0].allowSelect;
allowEditboolean
Sets or gets whether the column can be edited.
Default value
trueExample
Set the allowEdit property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowEdit = true;
Get the allowEdit property.
const grid = document.querySelector('smart-grid');
let allowEdit = grid.columns[0].allowEdit;
allowSortboolean
Sets or gets whether the column can be sorted.
Default value
trueExample
Set the allowSort property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowSort = true;
Get the allowSort property.
const grid = document.querySelector('smart-grid');
let allowSort = grid.columns[0].allowSort;
allowHeaderEditboolean
Sets or gets whether the column can be edited, when header editing is enabled.
Default value
trueExample
Set the allowHeaderEdit property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowHeaderEdit = true;
Get the allowHeaderEdit property.
const grid = document.querySelector('smart-grid');
let allowHeaderEdit = grid.columns[0].allowHeaderEdit;
allowFilterboolean
Sets or gets whether the column can be filtered.
Default value
trueExample
Set the allowFilter property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowFilter = true;
Get the allowFilter property.
const grid = document.querySelector('smart-grid');
let allowFilter = grid.columns[0].allowFilter;
allowReorderboolean
Sets or gets whether the column can be reordered.
Default value
trueExample
Set the allowReorder property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowReorder = true;
Get the allowReorder property.
const grid = document.querySelector('smart-grid');
let allowReorder = grid.columns[0].allowReorder;
allowResizeboolean
Sets or gets whether the column can be resized.
Default value
trueExample
Set the allowResize property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].allowResize = true;
Get the allowResize property.
const grid = document.querySelector('smart-grid');
let allowResize = grid.columns[0].allowResize;
cellsFormatstring
Sets or gets the column's cells format.
Default value
""Example
Set the cellsFormat property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].cellsFormat = 'd';
Get the cellsFormat property.
const grid = document.querySelector('smart-grid');
let cellsFormat = grid.columns[0].cellsFormat;
cellsAlign"left" | "right" | "center"
Sets or gets the column's cells alignment. Accepts: 'left', 'right' and 'center'
Default value
"left"Example
Set the cellsAlign property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].cellsAlign = 'center';
Get the cellsAlign property.
const grid = document.querySelector('smart-grid');
let cellsAlign = grid.columns[0].cellsAlign;
cellsWrapboolean
Sets or gets the column's cells wrapping. Accepts: true or false.
Default value
falseExample
Set the cellsWrap property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].cellsWrap = true;
Get the cellsWrap property.
const grid = document.querySelector('smart-grid');
let cellsWrap = grid.columns[0].cellsWrap;
cellsVerticalAlign"top" | "bottom" | "center"
Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'
Default value
"center"Example
Set the cellsVerticalAlign property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].cellsVerticalAlign = 'top';
Get the cellsVerticalAlign property.
const grid = document.querySelector('smart-grid');
let cellsVerticalAlign = grid.columns[0].cellsVerticalAlign;
columnGroupstring
Sets the name of the column group.
Default value
""Example
Set the columnGroup property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].columnGroup = 'Name';
Get the columnGroup property.
const grid = document.querySelector('smart-grid');
let columnGroup = grid.columns[0].columnGroup;
dataFieldstring
Sets or gets the column's data source bound field.
Default value
""Example
Set the dataField property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].dataField = 'firstName';
Get the dataField property.
const grid = document.querySelector('smart-grid');
let dataField = grid.columns[0].dataField;
dataTypestring
Sets or gets the column's data type.
Default value
"string"Example
Set the dataType property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].dataType = 'number';
Get the dataType property.
const grid = document.querySelector('smart-grid');
let dataType = grid.columns[0].dataType;
displayFieldstring
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
""Example
Set the displayField property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].displayField = 'firstName';
Get the displayField property.
const grid = document.querySelector('smart-grid');
let displayField = grid.columns[0].displayField;
elementHTMLElement
Gets the HTML Element. The property returns null when the Column is not in the View.
Get the element property.
const grid = document.querySelector('smart-grid');
let element = grid.columns[0].element;
editorany
Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'numberInput', 'checkBox', 'deteTimePicker', 'timeInput', 'dateInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'onInit' and 'onRender' callback functions.
Example
Set the editor property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].editor = input;
Get the editor property.
const grid = document.querySelector('smart-grid');
let editor = grid.columns[0].editor;
freeze"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
falseExample
Set the freeze property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].freeze = far;
Get the freeze property.
const grid = document.querySelector('smart-grid');
let freeze = grid.columns[0].freeze;
filterstring
Sets or gets the filter of the column.
Default value
""Get the filter property.
const grid = document.querySelector('smart-grid');
let filter = grid.columns[0].filter;
formatFunctionany
Sets or gets the column's format function.
Get the formatFunction property.
const grid = document.querySelector('smart-grid');
let formatFunction = grid.columns[0].formatFunction;
formatSettingsany
Sets or gets the column's format settings. You can use any of the build in formatting options or to NumberFormat object like that: 'Intl: { NumberFormat: { style: \'currency\', currency: \'EUR\' }}' or DateTimeFormat object like that: 'Intl: { DateTimeFormat: { dateStyle: \'full\' }}''
Get the formatSettings property.
const grid = document.querySelector('smart-grid');
let formatSettings = grid.columns[0].formatSettings;
groupstring
Sets or gets the column's group.
Default value
""Example
Set the group property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].group = 'firstName';
Get the group property.
const grid = document.querySelector('smart-grid');
let group = grid.columns[0].group;
iconany
Sets or gets the column's icon. Expects CSS class name.
Default value
""Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.columns[0].icon;
labelstring
Sets or gets the text displayed in the column's header.
Default value
""Example
Set the label property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].label = 'First Name';
Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.columns[0].label;
minWidthnumber
Sets or gets the minimum width.
Default value
30Get the minWidth property.
const grid = document.querySelector('smart-grid');
let minWidth = grid.columns[0].minWidth;
sortOrder"asc" | "desc" | null
Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.
Example
Set the sortOrder property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].sortOrder = desc;
Get the sortOrder property.
const grid = document.querySelector('smart-grid');
let sortOrder = grid.columns[0].sortOrder;
showActionButtonboolean
Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
Default value
falseExample
Set the showActionButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].showActionButton = false;
Get the showActionButton property.
const grid = document.querySelector('smart-grid');
let showActionButton = grid.columns[0].showActionButton;
showIconboolean
Sets or gets whether the column's header icon is displayed.
Default value
falseExample
Set the showIcon property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].showIcon = false;
Get the showIcon property.
const grid = document.querySelector('smart-grid');
let showIcon = grid.columns[0].showIcon;
showDescriptionButtonboolean
Sets or gets whether the column's header description button is displayed.
Default value
falseExample
Set the showDescriptionButton property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].showDescriptionButton = false;
Get the showDescriptionButton property.
const grid = document.querySelector('smart-grid');
let showDescriptionButton = grid.columns[0].showDescriptionButton;
widthany
Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
Default value
""Example
Set the width property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].width = 100;
Get the width property.
const grid = document.querySelector('smart-grid');
let width = grid.columns[0].width;
templateany
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 values are: 'checkBox', 'url', 'email',
Default value
""Get the template property.
const grid = document.querySelector('smart-grid');
let template = grid.columns[0].template;
validationRules[]
Sets or gets the column's validation rules. Accepts: Object with 'type' string property. It can be 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The object needs to have additional 'value' property for all validation rule types except 'email', 'required', 'requiredTrue' and 'null'. Optional property is 'message', which allows you to define user string displayed on validation error.
Example
Set the validationRules property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].validationRules = {type: 'email'};
Get the validationRules property.
const grid = document.querySelector('smart-grid');
let validationRules = grid.columns[0].validationRules;
verticalAlign"top" | "bottom" | "center"
Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
Default value
"center"Example
Set the verticalAlign property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].verticalAlign = 'bottom';
Get the verticalAlign property.
const grid = document.querySelector('smart-grid');
let verticalAlign = grid.columns[0].verticalAlign;
visibleboolean
Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
Default value
trueExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columns[0].visible = false;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.columns[0].visible;
columnMenuobject
Column Menu is the drop-down menu displayed after clicking the column header's drop-down button, which is displayed when you hover the column header. It allows you to customize column settings. For example: Sort, Filter or Group the Grid by the current column.
columnGroups{label: string, name: string, align: 'left' | 'center' | 'right', verticalAlign: 'top' | 'center' | 'bottom', parentGroup: string}[]
Describes the settings of the column groups.
labelstring
Sets the label.
Default value
""Example
Set the label property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columnGroups[0].label = 'Name';
Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.columnGroups[0].label;
align"left" | "center" | "right"
Sets the align.
Default value
"center"Example
Set the align property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columnGroups[0].align = 'right';
Get the align property.
const grid = document.querySelector('smart-grid');
let align = grid.columnGroups[0].align;
namestring
Sets the name of the column group.
Default value
""Example
Set the name property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columnGroups[0].name = 'Name';
Get the name property.
const grid = document.querySelector('smart-grid');
let name = grid.columnGroups[0].name;
parentGroupstring
Sets the name of the parent column group.
Default value
""Example
Set the parentGroup property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columnGroups[0].parentGroup = 'Employee';
Get the parentGroup property.
const grid = document.querySelector('smart-grid');
let parentGroup = grid.columnGroups[0].parentGroup;
verticalAlign"top" | "center" | "bottom"
Sets the vertical align.
Default value
"center"Example
Set the verticalAlign property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.columnGroups[0].verticalAlign = 'center';
Get the verticalAlign property.
const grid = document.querySelector('smart-grid');
let verticalAlign = grid.columnGroups[0].verticalAlign;
Example about columnGroups
const grid = new smartGrid('#grid', { dataSource: new smartDataAdapter({ 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' } ] });
conditionalFormatting{ column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]
Sets or gets details about conditional formatting to be applied to the Grid's cells.
columnstring
The data field of a numeric column to format. Set 'all' to format all numeric columns.
Default value
"all"Get the column property.
const grid = document.querySelector('smart-grid');
let column = grid.conditionalFormatting.column;
condition"between" | "equal" | "greaterThan" | "lessThan" | "notEqual"
The formatting condition.
Default value
"lessThan"Get the condition property.
const grid = document.querySelector('smart-grid');
let condition = grid.conditionalFormatting.condition;
firstValuenumber
The value to compare by. When condition is 'between', this is the start (from) value.
Default value
0Get the firstValue property.
const grid = document.querySelector('smart-grid');
let firstValue = grid.conditionalFormatting.firstValue;
fontFamilystring
The fontFamily to apply to formatted cells.
Default value
""Get the fontFamily property.
const grid = document.querySelector('smart-grid');
let fontFamily = grid.conditionalFormatting.fontFamily;
fontSizestring
The fontSize to apply to formatted cells.
Default value
"The default fontSize as set in CSS"Get the fontSize property.
const grid = document.querySelector('smart-grid');
let fontSize = grid.conditionalFormatting.fontSize;
highlightstring
The background color to apply to formatted cells.
Default value
"The default backgroundColor as set in CSS"Get the highlight property.
const grid = document.querySelector('smart-grid');
let highlight = grid.conditionalFormatting.highlight;
secondValuenumber
When condition is 'between', this is the end (to) value. Otherwise, this value is not used.
Default value
1Get the secondValue property.
const grid = document.querySelector('smart-grid');
let secondValue = grid.conditionalFormatting.secondValue;
textstring
The text color to apply to formatted cells.
Default value
"The default color as set in CSS"Get the text property.
const grid = document.querySelector('smart-grid');
let text = grid.conditionalFormatting.text;
Example
Set the conditionalFormatting property.
<smart-grid conditional-formatting='{ column: 'quantity', condition: 'greaterThan', firstValue: 8, text: '#6AA84F' }, { column: 'quantity', condition: 'lessThan', firstValue: 3, text: '#CC0000' }'></smart-grid>
Set the conditionalFormatting property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.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' };
Get the conditionalFormatting property.
const grid = document.querySelector('smart-grid');
let conditionalFormatting = grid.conditionalFormatting;
chartingobject
Sets the Grid Charting Data Visualization.
enabledboolean
Sets or gets whether charting is enabled.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.charting.enabled;
colorSchemestring
Sets or gets the charting colors. Accepts the 'colorScheme' values of our Chart component.
Default value
"scheme01"Get the colorScheme property.
const grid = document.querySelector('smart-grid');
let colorScheme = grid.charting.colorScheme;
appendToany
Sets or gets the chart's container.
Get the appendTo property.
const grid = document.querySelector('smart-grid');
let appendTo = grid.charting.appendTo;
dialogobject
Sets or gets the charting dialog.
headerstring
Sets or gets the dialog header.
Default value
"{{message}}"Example
Set the header property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.dialog.header = 'Dialog';
Get the header property.
const grid = document.querySelector('smart-grid');
let header = grid.charting.dialog.header;
heightnumber
Sets or gets the dialog height.
Default value
400Example
Set the height property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.dialog.height = 300;
Get the height property.
const grid = document.querySelector('smart-grid');
let height = grid.charting.dialog.height;
widthnumber
Sets or gets the dialog width.
Default value
400Example
Set the width property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.dialog.width = 300;
Get the width property.
const grid = document.querySelector('smart-grid');
let width = grid.charting.dialog.width;
leftstring | number
Sets or gets the dialog Left position.
Default value
centerExample
Set the left property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.dialog.left = center;
Get the left property.
const grid = document.querySelector('smart-grid');
let left = grid.charting.dialog.left;
topstring | number
Sets or gets the dialog Top position.
Default value
centerExample
Set the top property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.dialog.top = center;
Get the top property.
const grid = document.querySelector('smart-grid');
let top = grid.charting.dialog.top;
enabledboolean
Sets or gets whether the dialog is enabled.
Default value
trueExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.dialog.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.charting.dialog.enabled;
visibleboolean
Gets whether the dialog is displayed.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.charting.dialog.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.charting.dialog.visible;
Get the dialog property.
const grid = document.querySelector('smart-grid');
let dialog = grid.charting.dialog;
checkBoxesobject
Sets the TreeGrid checkboxes.
visibleboolean
Sets the visibility of the TreeGrid checkboxes.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.checkBoxes[0].visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.checkBoxes[0].visible;
hasThreeStatesboolean
Sets the three-state mode of the TreeGrid checkboxes. In that mode, checking a checkbox affects the parent-child rows checkboxes.
Default value
falseExample
Set the hasThreeStates property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.checkBoxes[0].hasThreeStates = true;
Get the hasThreeStates property.
const grid = document.querySelector('smart-grid');
let hasThreeStates = grid.checkBoxes[0].hasThreeStates;
dataExportobject
Sets the Grid Data Export options.
Properties
headerboolean
Sets whether the columns header will be exported.
Default value
trueGet the header property.
const grid = document.querySelector('smart-grid');
let header = grid.dataExport.header;
filterByobject
Sets whether the export uses the applied filters.
Get the filterBy property.
const grid = document.querySelector('smart-grid');
let filterBy = grid.dataExport.filterBy;
groupByobject
Sets the groups of the exported data.
Get the groupBy property.
const grid = document.querySelector('smart-grid');
let groupBy = grid.dataExport.groupBy;
styleobject
Sets a custom style object of the dataExport.
Get the style property.
const grid = document.querySelector('smart-grid');
let style = grid.dataExport.style;
fileNamestring
Sets the exported file's name.
Default value
"smartGrid"Get the fileName property.
const grid = document.querySelector('smart-grid');
let fileName = grid.dataExport.fileName;
pageOrientation"landscape" | "portrait"
Sets the page orientation, when exporting to PDF.
Default value
"portrait"Get the pageOrientation property.
const grid = document.querySelector('smart-grid');
let pageOrientation = grid.dataExport.pageOrientation;
expandCharstring
Sets the expand char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
Default value
"+"Get the expandChar property.
const grid = document.querySelector('smart-grid');
let expandChar = grid.dataExport.expandChar;
collapseCharstring
Sets the collapse char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
Default value
"-"Get the collapseChar property.
const grid = document.querySelector('smart-grid');
let collapseChar = grid.dataExport.collapseChar;
viewboolean
Exports only the visible data of the Grid.
Default value
falseGet the view property.
const grid = document.querySelector('smart-grid');
let view = grid.dataExport.view;
viewStartnumber | null
Determines the start row index that will be exported or printed. 'view' should be set to true
Get the viewStart property.
const grid = document.querySelector('smart-grid');
let viewStart = grid.dataExport.viewStart;
viewEndnumber | null
Determines the end row index that will be exported or printed. 'view' should be set to true
Get the viewEnd property.
const grid = document.querySelector('smart-grid');
let viewEnd = grid.dataExport.viewEnd;
rowIds(string | number)[] | null
An array of row ids that denotes the rows to export.
Get the rowIds property.
const grid = document.querySelector('smart-grid');
let rowIds = grid.dataExport.rowIds;
dataSourceany
Sets the grid's data source. The value of dataSource can be an instance of Smart.DataAdapter or an Array.
Example about dataSource
const grid = new smartGrid('#grid', { dataSource: new smartDataAdapter({ 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' } ] });
editingobject
Describes the grid's editing settings.
Properties
allowRowHeaderEditboolean
Enables row header cells editing.
Default value
falseExample
Set the allowRowHeaderEdit property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.allowRowHeaderEdit = true;
Get the allowRowHeaderEdit property.
const grid = document.querySelector('smart-grid');
let allowRowHeaderEdit = grid.editing.allowRowHeaderEdit;
allowColumnHeaderEditboolean
Enables column headers editing.
Default value
falseExample
Set the allowColumnHeaderEdit property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.allowColumnHeaderEdit = true;
Get the allowColumnHeaderEdit property.
const grid = document.querySelector('smart-grid');
let allowColumnHeaderEdit = grid.editing.allowColumnHeaderEdit;
enabledboolean
Enables editing.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.editing.enabled;
batchboolean
Enables batch editing. This allows editing multiple grid rows on the client side and sending them with a single server request.
Default value
falseExample
Set the batch property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.batch = true;
Get the batch property.
const grid = document.querySelector('smart-grid');
let batch = grid.editing.batch;
action"none" | "click" | "dblClick"
Determines the way editing is initiated.
Default value
"click"Example
Set the action property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.action = 'click';
Get the action property.
const grid = document.querySelector('smart-grid');
let action = grid.editing.action;
commandKeysobject
Describes command keys.
commandKeyEditobject
Describes the edit command key.
commandstring
Sets the name of the edit key command.
Default value
"commandKeyEditCommand"Get the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandKeys[0].commandKeyEdit.command;
keystring
Sets the key that invokes the edit command.
Default value
"F2"Get the key property.
const grid = document.querySelector('smart-grid');
let key = grid.editing.commandKeys[0].commandKeyEdit.key;
Get the commandKeyEdit property.
const grid = document.querySelector('smart-grid');
let commandKeyEdit = grid.editing.commandKeys[0].commandKeyEdit;
commandKeyCancelobject
Describes the cancel command key.
commandstring
Sets the name of the cancel key command.
Default value
"commandKeyCancelCommand"Get the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandKeys[0].commandKeyCancel.command;
keystring
Sets the key that invokes the cancel command.
Default value
"Escape"Get the key property.
const grid = document.querySelector('smart-grid');
let key = grid.editing.commandKeys[0].commandKeyCancel.key;
Get the commandKeyCancel property.
const grid = document.querySelector('smart-grid');
let commandKeyCancel = grid.editing.commandKeys[0].commandKeyCancel;
commandKeyUpdateobject
Describes the update command key.
commandstring
Sets the name of the update key command.
Default value
"commandKeyUpdateCommand"Get the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandKeys[0].commandKeyUpdate.command;
keystring
Sets the key that invokes the update command.
Default value
"Enter"Get the key property.
const grid = document.querySelector('smart-grid');
let key = grid.editing.commandKeys[0].commandKeyUpdate.key;
Get the commandKeyUpdate property.
const grid = document.querySelector('smart-grid');
let commandKeyUpdate = grid.editing.commandKeys[0].commandKeyUpdate;
Get the commandKeys property.
const grid = document.querySelector('smart-grid');
let commandKeys = grid.editing.commandKeys;
commandBarobject
Describes the grid's command bar settings. The command bar is a toolbar or statusbar with tools for saving and reverting edits.
visibleboolean
Makes the command bar visible.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandBar.visible;
position"near" | "far" | "both"
Sets the command bar's position.
Default value
"near"Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.editing.commandBar.position;
displayMode"label" | "icon" | "labelAndIcon"
Sets what is to be displayed in command bar buttons.
Default value
"labelAndIcon"Get the displayMode property.
const grid = document.querySelector('smart-grid');
let displayMode = grid.editing.commandBar.displayMode;
dataSourceobject
Sets the command bar's data source.
commandBarAddRowobject
Describes the settings of the command bar's button for adding rows.
commandany
Sets the name of the add row command.
Default value
commandBarAddRowCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandBar.dataSource.commandBarAddRow.command;
iconstring
A class name to be applied to the add row button's icon.
Default value
"smart-icon-plus"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandBar.dataSource.commandBarAddRow.icon;
labelstring
The label of the add row button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandBar.dataSource.commandBarAddRow.label;
visibleboolean
Makes the add row button visible.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandBar.dataSource.commandBarAddRow.visible;
Get the commandBarAddRow property.
const grid = document.querySelector('smart-grid');
let commandBarAddRow = grid.editing.commandBar.dataSource.commandBarAddRow;
commandBarDeleteRowobject
Describes the settings of the command bar's button for deleting rows.
commandany
Sets the name of the delete row command.
Default value
commandBarDeleteRowCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandBar.dataSource.commandBarDeleteRow.command;
iconstring
A class name to be applied to the delete row button's icon.
Default value
"smart-icon-delete"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandBar.dataSource.commandBarDeleteRow.icon;
labelstring
The label of the delete row button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandBar.dataSource.commandBarDeleteRow.label;
visibleboolean
Makes the delete row button visible.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandBar.dataSource.commandBarDeleteRow.visible;
Get the commandBarDeleteRow property.
const grid = document.querySelector('smart-grid');
let commandBarDeleteRow = grid.editing.commandBar.dataSource.commandBarDeleteRow;
commandBarBatchSaveobject
Describes the settings of the command bar's button for saving changes.
commandany
Sets the name of the save command.
Default value
commandBarBatchSaveCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandBar.dataSource.commandBarBatchSave.command;
iconstring
A class name to be applied to the save button's icon.
Default value
"smart-icon-save"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandBar.dataSource.commandBarBatchSave.icon;
labelstring
The label of the save button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandBar.dataSource.commandBarBatchSave.label;
visibleboolean
Makes the save button visible.
Default value
trueGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandBar.dataSource.commandBarBatchSave.visible;
Get the commandBarBatchSave property.
const grid = document.querySelector('smart-grid');
let commandBarBatchSave = grid.editing.commandBar.dataSource.commandBarBatchSave;
commandBarBatchRevertobject
Describes the settings of the command bar's button for reverting changes.
commandany
Sets the name of the revert command.
Default value
commandBarBatchRevertCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandBar.dataSource.commandBarBatchRevert.command;
iconstring
A class name to be applied to the revert button's icon.
Default value
"smart-icon-revert"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandBar.dataSource.commandBarBatchRevert.icon;
labelstring
The label of the revert button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandBar.dataSource.commandBarBatchRevert.label;
visibleboolean
Makes the revert button visible.
Default value
trueGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandBar.dataSource.commandBarBatchRevert.visible;
Get the commandBarBatchRevert property.
const grid = document.querySelector('smart-grid');
let commandBarBatchRevert = grid.editing.commandBar.dataSource.commandBarBatchRevert;
Get the dataSource property.
const grid = document.querySelector('smart-grid');
let dataSource = grid.editing.commandBar.dataSource;
Get the commandBar property.
const grid = document.querySelector('smart-grid');
let commandBar = grid.editing.commandBar;
commandColumnobject
Describes the grid's command column settings. The command column can be used to edit or delete a row.
visibleboolean
Makes the command column visible.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandColumn.visible;
inlineboolean
Enables inline display of the command column.
Default value
falseGet the inline property.
const grid = document.querySelector('smart-grid');
let inline = grid.editing.commandColumn.inline;
position"near" | "far"
Sets the command column's position.
Default value
"far"Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.editing.commandColumn.position;
displayMode"label" | "icon" | "labelAndIcon"
Sets what is to be displayed in command column buttons.
Default value
"icon"Get the displayMode property.
const grid = document.querySelector('smart-grid');
let displayMode = grid.editing.commandColumn.displayMode;
dataSourceobject
Sets the command column's data source.
Properties
commandColumnMenuobject
Describes the settings of the command column's button displayed in the column's header. By default, this Command opens a Menu with Column Chooser.
commandColumnEditobject
Describes the settings of the command column's button for editing rows.
commandany
Sets the name of the edit row command.
Default value
commandColumnEditCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandColumn.dataSource.commandColumnEdit.command;
iconstring
A class name to be applied to the edit row button's icon.
Default value
"smart-icon-rename"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandColumn.dataSource.commandColumnEdit.icon;
labelstring
The label of the edit row button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandColumn.dataSource.commandColumnEdit.label;
visibleboolean
Makes the edit row button visible.
Default value
autoGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandColumn.dataSource.commandColumnEdit.visible;
Get the commandColumnEdit property.
const grid = document.querySelector('smart-grid');
let commandColumnEdit = grid.editing.commandColumn.dataSource.commandColumnEdit;
commandColumnDeleteobject
Describes the settings of the command column's button for deleting rows.
commandany
Sets the name of the delete row command.
Default value
commandColumnDeleteCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandColumn.dataSource.commandColumnDelete.command;
iconstring
A class name to be applied to the delete row button's icon.
Default value
"smart-icon-delete"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandColumn.dataSource.commandColumnDelete.icon;
labelstring
The label of the delete row button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandColumn.dataSource.commandColumnDelete.label;
visibleboolean
Makes the delete row button visible.
Default value
trueGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandColumn.dataSource.commandColumnDelete.visible;
Get the commandColumnDelete property.
const grid = document.querySelector('smart-grid');
let commandColumnDelete = grid.editing.commandColumn.dataSource.commandColumnDelete;
commandColumnUpdateobject
Describes the settings of the command column's button for updating rows.
commandany
Sets the name of the update row command.
Default value
commandColumnUpdateCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandColumn.dataSource.commandColumnUpdate.command;
iconstring
A class name to be applied to the update row button's icon.
Default value
"smart-icon-save"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandColumn.dataSource.commandColumnUpdate.icon;
labelstring
The label of the update row button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandColumn.dataSource.commandColumnUpdate.label;
visibleboolean
Makes the update row button visible.
Default value
autoGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandColumn.dataSource.commandColumnUpdate.visible;
Get the commandColumnUpdate property.
const grid = document.querySelector('smart-grid');
let commandColumnUpdate = grid.editing.commandColumn.dataSource.commandColumnUpdate;
commandColumnCancelobject
Describes the settings of the command column's button for canceling edits.
commandany
Sets the name of the cancel command.
Default value
commandColumnCancelCommandGet the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandColumn.dataSource.commandColumnCancel.command;
iconstring
A class name to be applied to the cancel button's icon.
Default value
"smart-icon-cancel-circled"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandColumn.dataSource.commandColumnCancel.icon;
labelstring
The label of the cancel button.
Default value
"{{messages}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandColumn.dataSource.commandColumnCancel.label;
visibleboolean
Makes the cancel button visible.
Default value
autoGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandColumn.dataSource.commandColumnCancel.visible;
Get the commandColumnCancel property.
const grid = document.querySelector('smart-grid');
let commandColumnCancel = grid.editing.commandColumn.dataSource.commandColumnCancel;
commandColumnRowMenuobject
Describes the settings of the command column's row menu button.
commandColumnCustomobject
Describes the settings of the command column's custom button.
commandany
Sets the name of the custom command.
Default value
""Get the command property.
const grid = document.querySelector('smart-grid');
let command = grid.editing.commandColumn.dataSource.commandColumnCustom.command;
iconstring
A class name to be applied to the custom button's icon.
Default value
"smart-icon-copy-record"Get the icon property.
const grid = document.querySelector('smart-grid');
let icon = grid.editing.commandColumn.dataSource.commandColumnCustom.icon;
labelstring
The label of the custom button.
Default value
""Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.commandColumn.dataSource.commandColumnCustom.label;
visibleboolean
Makes the custom button visible.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.commandColumn.dataSource.commandColumnCustom.visible;
Get the commandColumnCustom property.
const grid = document.querySelector('smart-grid');
let commandColumnCustom = grid.editing.commandColumn.dataSource.commandColumnCustom;
Get the dataSource property.
const grid = document.querySelector('smart-grid');
let dataSource = grid.editing.commandColumn.dataSource;
widthnumber | null
Sets the width of the command column.
Get the width property.
const grid = document.querySelector('smart-grid');
let width = grid.editing.commandColumn.width;
Get the commandColumn property.
const grid = document.querySelector('smart-grid');
let commandColumn = grid.editing.commandColumn;
mode"cell" | "row"
Sets the grid's edit mode.
Default value
"cell"Example
Set the mode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.mode = 'row';
Get the mode property.
const grid = document.querySelector('smart-grid');
let mode = grid.editing.mode;
addNewRowobject
Describes the settings of the 'Add New Row' UI element which enables the quick adding of rows to the Grid with a single click.
position"near" | "far" | "both"
Sets the position of the 'Add New Row' UI element.
Default value
"both"Example
Set the position property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.addNewRow.position = 'near';
Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.editing.addNewRow.position;
visibleboolean
Makes the 'Add New Row' UI element visible.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.addNewRow.visible;
labelstring
Sets the label of the 'Add New Row' UI element.
Default value
"{{message}}"Get the label property.
const grid = document.querySelector('smart-grid');
let label = grid.editing.addNewRow.label;
Get the addNewRow property.
const grid = document.querySelector('smart-grid');
let addNewRow = grid.editing.addNewRow;
dialogobject
Describes dialog's editing settings.
headerstring
Sets the header text of the dialog
Default value
"{{message}}"Get the header property.
const grid = document.querySelector('smart-grid');
let header = grid.editing.dialog.header;
heightstring | number
Sets the height of the edit dialog.
Default value
autoGet the height property.
const grid = document.querySelector('smart-grid');
let height = grid.editing.dialog.height;
widthstring | number
Sets the width of the edit dialog.
Default value
autoGet the width property.
const grid = document.querySelector('smart-grid');
let width = grid.editing.dialog.width;
leftstring | number
Sets the 'left' css property to the dialog.
Default value
centerGet the left property.
const grid = document.querySelector('smart-grid');
let left = grid.editing.dialog.left;
topstring | number
Sets the 'top' css property to the dialog.
Default value
centerGet the top property.
const grid = document.querySelector('smart-grid');
let top = grid.editing.dialog.top;
enabledboolean
Enables dialog editing option.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.dialog.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.editing.dialog.enabled;
visibleboolean
Sets the visibility of the dialog.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.dialog.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.dialog.visible;
Get the dialog property.
const grid = document.querySelector('smart-grid');
let dialog = grid.editing.dialog;
addDialogobject
Describes add dialog's settings
headerstring
Sets the header text of the dialog
Default value
"{{message}}"Get the header property.
const grid = document.querySelector('smart-grid');
let header = grid.editing.addDialog.header;
heightstring | number
Sets the height of the dialog.
Default value
autoGet the height property.
const grid = document.querySelector('smart-grid');
let height = grid.editing.addDialog.height;
widthstring | number
Sets the width of the dialog.
Default value
autoGet the width property.
const grid = document.querySelector('smart-grid');
let width = grid.editing.addDialog.width;
leftstring | number
Sets the 'left' css property to the dialog.
Default value
centerGet the left property.
const grid = document.querySelector('smart-grid');
let left = grid.editing.addDialog.left;
topstring | number
Sets the 'top' css property to the dialog.
Default value
centerGet the top property.
const grid = document.querySelector('smart-grid');
let top = grid.editing.addDialog.top;
enabledboolean
Enables the add dialog option.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.addDialog.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.editing.addDialog.enabled;
visibleboolean
Sets the visibility of the dialog.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.addDialog.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.addDialog.visible;
Get the addDialog property.
const grid = document.querySelector('smart-grid');
let addDialog = grid.editing.addDialog;
deleteDialogobject
Describes delete dialog's settings
headerstring
Sets the header text of the dialog
Default value
"{{message}}"Get the header property.
const grid = document.querySelector('smart-grid');
let header = grid.editing.deleteDialog.header;
heightstring | number
Sets the height of the dialog.
Default value
autoGet the height property.
const grid = document.querySelector('smart-grid');
let height = grid.editing.deleteDialog.height;
widthstring | number
Sets the width of the dialog.
Default value
autoGet the width property.
const grid = document.querySelector('smart-grid');
let width = grid.editing.deleteDialog.width;
leftstring | number
Sets the 'left' css property to the dialog.
Default value
centerGet the left property.
const grid = document.querySelector('smart-grid');
let left = grid.editing.deleteDialog.left;
topstring | number
Sets the 'top' css property to the dialog.
Default value
centerGet the top property.
const grid = document.querySelector('smart-grid');
let top = grid.editing.deleteDialog.top;
enabledboolean
Enables the delete dialog option.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.deleteDialog.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.editing.deleteDialog.enabled;
visibleboolean
Sets the visibility of the dialog.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.editing.deleteDialog.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.editing.deleteDialog.visible;
Get the deleteDialog property.
const grid = document.querySelector('smart-grid');
let deleteDialog = grid.editing.deleteDialog;
filteringobject
Describes the grid's filtering settings.
enabledboolean
Enables filtering.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.filtering.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.filtering.enabled;
filter[]
An array of filtering conditions to apply to the DataGrid. Each member of the filter array is an array with two members. The first one is the column dataField to apply the filter to. The second one is the filtering condition. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '>= 3 and <= 8']]
Get the filter property.
const grid = document.querySelector('smart-grid');
let filter = grid.filtering.filter;
filterRowobject
Describes the filter row's settings.
visibleboolean
Makes the filter row visible.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.filtering.filterRow.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.filtering.filterRow.visible;
menuVisibleboolean
Makes the filter row's menu visible.
Default value
falseExample
Set the menuVisible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.filtering.filterRow.menuVisible = true;
Get the menuVisible property.
const grid = document.querySelector('smart-grid');
let menuVisible = grid.filtering.filterRow.menuVisible;
applyMode"auto" | "click"
Sets the way filtering through the filter row is applied.
Default value
"auto"Get the applyMode property.
const grid = document.querySelector('smart-grid');
let applyMode = grid.filtering.filterRow.applyMode;
autoApplyModeDelaynumber
Sets the delay (in milliseconds) before applying filtering (when filtering.filterRow.applyMode is 'auto').
Default value
300Get the autoApplyModeDelay property.
const grid = document.querySelector('smart-grid');
let autoApplyModeDelay = grid.filtering.filterRow.autoApplyModeDelay;
Get the filterRow property.
const grid = document.querySelector('smart-grid');
let filterRow = grid.filtering.filterRow;
filterMenuobject
Describes the settings for the filter menu.
filterBuilderobject
(In Development)Describes the settings for the filter builder.
visibleboolean
Sets the visibility of the filter builder.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.filtering.filterBuilder.visible;
heightnumber | null
Sets the height of the filter builder.
Get the height property.
const grid = document.querySelector('smart-grid');
let height = grid.filtering.filterBuilder.height;
Get the filterBuilder property.
const grid = document.querySelector('smart-grid');
let filterBuilder = grid.filtering.filterBuilder;
groupingobject
Describes the grid's grouping settings.
Properties
enabledboolean
Enables grouping.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.grouping.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.grouping.enabled;
allowCollapseboolean
Enables collapsing of groups.
Default value
falseExample
Set the allowCollapse property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.grouping.allowCollapse = true;
Get the allowCollapse property.
const grid = document.querySelector('smart-grid');
let allowCollapse = grid.grouping.allowCollapse;
autoExpandAllboolean
Automatically expands all groups.
Default value
falseExample
Set the autoExpandAll property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.grouping.autoExpandAll = true;
Get the autoExpandAll property.
const grid = document.querySelector('smart-grid');
let autoExpandAll = grid.grouping.autoExpandAll;
expandMode"buttonClick" | "rowClick"
Sets the group expand mode.
Default value
"buttonClick"Get the expandMode property.
const grid = document.querySelector('smart-grid');
let expandMode = grid.grouping.expandMode;
renderMode"basic" | "compact" | "advanced"
Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level.
Default value
"advanced"Get the renderMode property.
const grid = document.querySelector('smart-grid');
let renderMode = grid.grouping.renderMode;
groupRowHeightstring | number
Sets the group row height.
Default value
50Get the groupRowHeight property.
const grid = document.querySelector('smart-grid');
let groupRowHeight = grid.grouping.groupRowHeight;
toggleButtonIndentnumber
Sets the indent of the group toggle button.
Default value
16Get the toggleButtonIndent property.
const grid = document.querySelector('smart-grid');
let toggleButtonIndent = grid.grouping.toggleButtonIndent;
groupIndentnumber
Sets the indent of the group.
Default value
16Get the groupIndent property.
const grid = document.querySelector('smart-grid');
let groupIndent = grid.grouping.groupIndent;
groupBarobject
Describes the group bar's settings.
visibleboolean
Makes the group bar visible.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.grouping.groupBar.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.grouping.groupBar.visible;
allowColumnDragDropboolean
Enables column drag and drop.
Default value
falseGet the allowColumnDragDrop property.
const grid = document.querySelector('smart-grid');
let allowColumnDragDrop = grid.grouping.groupBar.allowColumnDragDrop;
allowColumnCloseButtonsboolean
Enables column close buttons.
Default value
trueGet the allowColumnCloseButtons property.
const grid = document.querySelector('smart-grid');
let allowColumnCloseButtons = grid.grouping.groupBar.allowColumnCloseButtons;
Get the groupBar property.
const grid = document.querySelector('smart-grid');
let groupBar = grid.grouping.groupBar;
summaryRowobject
Describes the group summary row's settings.
inlineboolean
Enables inline display of the group summary row.
Default value
trueExample
Set the inline property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.grouping.summaryRow.inline = true;
Get the inline property.
const grid = document.querySelector('smart-grid');
let inline = grid.grouping.summaryRow.inline;
visibleboolean
Makes the group summary row visible.
Default value
trueExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.grouping.summaryRow.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.grouping.summaryRow.visible;
Get the summaryRow property.
const grid = document.querySelector('smart-grid');
let summaryRow = grid.grouping.summaryRow;
messagesobject
Sets the messages values.
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:" } }
onCellValue{(cell: Smart.Grid.Cell): void}
Callback function, which is called when the Grid needs a cell value to render it. When you implement this function, you can override the default cell value rendering.
onCellUpdate{(cell: Smart.Grid.Cell, oldValue: any, value: any, confirm: {(commit: boolean): void}): void}
Callback function, which is called when a cell value will be updated. This function is useful if you want to make Ajax call to a server to validate the cell changes. If the changes are validated, invoke the confirm function.
onCellRender{(cell: Smart.Grid.Cell): void}
Callback function, which is called when a cell is rendered. This function is useful if you want to customize GridCell properties, before the cell is rendered.
onBeforeInit{(): void}
Callback function() called before the grid has been initialized and the Grid's Virtual DOM is not created.
onInit{(): void}
Callback function() called when the grid is initializing and the Grid's Virtual DOM is created.
onAfterInit{(): void}
Callback function() called after the grid has been initialized and the Grid's Virtual DOM is created.
onChartInitSmart.Chart
Callback function(chart: Smart.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings.
onRenderany
Callback function() called when the grid has been rendered.
onKey{(event: KeyboardEvent): void}
Callback function(event: KeyboardEvent) called when the grid is on focus and a keyboard key is pressed.
onRowInit{(index: number, row: Smart.Grid.Row): void}
Callback function, which is called when a row is initializing. This function can be used to customize the row settings.
onRowDetailInit{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}
Callback function, which is called when a row detail is initializing. Row details are displayed below the row's data or in a separate dialog.
onRowDetailUpdated{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}
Callback function, which is called when a row detail is udpating.
onRowInserted{(index: number, row: Smart.Grid.Row): void}
Callback function which is called when a row has been inserted.
onRowRemoved{(index: number, row: Smart.Grid.Row): void}
Callback function, which is called when a row has been removed.
onRowUpdate{(index: number, row: Smart.Grid.Row, oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}
Callback function, which is called when row's cell values will be updated. This function is useful if you want to make Ajax call to a server to validate the edit changes. If the changes are validated, invoke the confirm function.
onRowUpdated{(index: number, row: Smart.Grid.Row): void}
Callback function, called when a row has been updated.
onColumnInit{(index: number, column: Smart.Grid.Column): void}
Callback function, which is called when a column has been initialized. This function can be used to customize the column settings.
onColumnInserted{(index: number, column: Smart.Grid.Column): void}
Callback function, which called when a column has been inserted.
onColumnRemoved{(index: number, column: Smart.Grid.Column): void}
Callback function, which is called when a column has been removed.
onColumnUpdated{(index: number, column: Smart.Grid.Column): void}
Callback function, which is called when a column has been updated.
onCommand{(name: string, command: any, details: Smart.Grid.Cell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void}
Callback function, which is called when a command is executed. The name argument is the command's name. The command argument is the command's function. details are built in command arguments passed by the Grid. The handled parameter allows you to cancel built-in command, because when you set it to true the Grid will not execute the default command's behavior.
pagingobject
Describes the paging settings.
enabledboolean
Enables pagination.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.paging.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.paging.enabled;
spinnerobject
Describes the spinner pagination settings.
enabledboolean
Enables spinner pagination.
Default value
falseGet the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.paging.spinner.enabled;
stepnumber
Sets the step of page
Default value
1Get the step property.
const grid = document.querySelector('smart-grid');
let step = grid.paging.spinner.step;
Get the spinner property.
const grid = document.querySelector('smart-grid');
let spinner = grid.paging.spinner;
pageSizenumber
Sets the number of rows per page.
Default value
10Get the pageSize property.
const grid = document.querySelector('smart-grid');
let pageSize = grid.paging.pageSize;
pageIndexnumber
Sets the start page.
Default value
0Get the pageIndex property.
const grid = document.querySelector('smart-grid');
let pageIndex = grid.paging.pageIndex;
pagerobject
Describes the pager settings.
Properties
autoEllipsis"none" | "before" | "after" | "both"
Sets the ellipsis display mode.
Default value
"both"Get the autoEllipsis property.
const grid = document.querySelector('smart-grid');
let autoEllipsis = grid.pager.autoEllipsis;
position"near" | "far" | "both"
Sets the position of pager.
Default value
"far"Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.pager.position;
templatestring | HTMLTemplateElement
Sets a template for the pager.
Default value
""Get the template property.
const grid = document.querySelector('smart-grid');
let template = grid.pager.template;
pageSizeSelectorobject
Describes the settings for the 'rows per page' option.
visibleboolean
Sets the visibility of the 'rows per page' option.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.pager.pageSizeSelector.visible;
dataSourceobject
Sets the count of the 'rows per page' option.
Get the dataSource property.
const grid = document.querySelector('smart-grid');
let dataSource = grid.pager.pageSizeSelector.dataSource;
position"near" | "far"
Sets the position of the 'rows per page' option.
Default value
"far"Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.pager.pageSizeSelector.position;
Get the pageSizeSelector property.
const grid = document.querySelector('smart-grid');
let pageSizeSelector = grid.pager.pageSizeSelector;
summaryobject
Describes the summary settings.
position"near" | "far"
Sets the position of the summary.
Default value
"far"Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.pager.summary.position;
visibleboolean
Sets the visibility of the summary.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.pager.summary.visible;
Get the summary property.
const grid = document.querySelector('smart-grid');
let summary = grid.pager.summary;
navigationButtonsobject
Describes the navigation buttons settings.
navigationInputobject
Describes the settings about navigation input option.
pageIndexSelectorsobject
Describes the settings for the numeric page buttons.
visibleboolean
Sets the visibility of numeric page buttons.
Default value
trueGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.pager.pageIndexSelectors[0].visible;
dataSourceany
Sets the number of visible page buttons.
Default value
10Get the dataSource property.
const grid = document.querySelector('smart-grid');
let dataSource = grid.pager.pageIndexSelectors[0].dataSource;
Get the pageIndexSelectors property.
const grid = document.querySelector('smart-grid');
let pageIndexSelectors = grid.pager.pageIndexSelectors;
visibleboolean
Sets the visibility of pager.
Default value
falseExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.pager.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.pager.visible;
rowDetailobject
Sets the row details.
enabledboolean
Enables the row details.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rowDetail.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.rowDetail.enabled;
heightnumber
Sets the height of the row details.
Default value
200Get the height property.
const grid = document.querySelector('smart-grid');
let height = grid.rowDetail.height;
position"near" | "far"
Sets the position of the Column which allows you to dynamically expand/collapse the row details.
Default value
"near"Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.rowDetail.position;
templateany
Sets the template of the row details.
Default value
""Get the template property.
const grid = document.querySelector('smart-grid');
let template = grid.rowDetail.template;
visibleboolean
Sets the visibility of the Column which allows you to dynamically expand/collapse the row details.
Default value
trueExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rowDetail.visible = true;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.rowDetail.visible;
dialogobject
Sets the row details dialog. When enabled, row details will be displayed in a Dialog.
headerstring
Sets the header of the dialog.
Default value
"{{message}}"Get the header property.
const grid = document.querySelector('smart-grid');
let header = grid.rowDetail.dialog.header;
heightstring | number
Sets the height of the dialog.
Default value
300Get the height property.
const grid = document.querySelector('smart-grid');
let height = grid.rowDetail.dialog.height;
widthstring | number
Sets the width of the dialog.
Default value
360Get the width property.
const grid = document.querySelector('smart-grid');
let width = grid.rowDetail.dialog.width;
leftstring | number
Sets the Left position of the dialog.
Default value
centerGet the left property.
const grid = document.querySelector('smart-grid');
let left = grid.rowDetail.dialog.left;
topstring | number
Sets the Top position of the dialog.
Default value
centerGet the top property.
const grid = document.querySelector('smart-grid');
let top = grid.rowDetail.dialog.top;
enabledboolean
Sets whether the row details dialog is enabled. When enabled, row details are displayed in a dialog.
Default value
falseGet the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.rowDetail.dialog.enabled;
Get the dialog property.
const grid = document.querySelector('smart-grid');
let dialog = grid.rowDetail.dialog;
scrolling"physical" | "virtual" | "infinite" | "deferred"
Sets the scroll mode settings.
Default value
"physical"Example
Set the scrolling property.
<smart-grid scrolling='physical'></smart-grid>
Set the scrolling property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.scrolling = 'deferred';
Get the scrolling property.
const grid = document.querySelector('smart-grid');
let scrolling = grid.scrolling;
columnHeaderobject
Describes the column header settings.
Properties
visibleboolean
Sets the column header visibility.
Default value
trueGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.columnHeader.visible;
summaryRowobject
Describes the summary row settings.
Properties
visibleboolean
Sets the summary row visibility.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.summaryRow.visible;
groupHeaderobject
Describes the settings for the group header.
visibleboolean
Sets the visibility of the group header.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.groupHeader.visible;
templatestring | HTMLTemplateElement
Sets a template for the group header.
Default value
""Get the template property.
const grid = document.querySelector('smart-grid');
let template = grid.groupHeader.template;
headerobject
Describes the header settings of the grid.
visibleboolean
Sets the header visibility.
Default value
falseGet the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.header.visible;
templatestring | HTMLTemplateElement
Sets a template for the header.
Default value
""Get the template property.
const grid = document.querySelector('smart-grid');
let template = grid.header.template;
buttonsstring[]
Determines the buttons displayed in the Grid header. 'columns' displays a button opening the columns chooser panel. 'filter' displays a button opening the filtering panel. 'group' displays a button opening the grouping panel. 'sort' displays a button opening the sorting panel. 'format' displays a button opening the conditional formatting panel. 'search' displays a button opening the search panel.
Default value
[ "columns", "filter", "group", "sort", "format", "search" ]Get the buttons property.
const grid = document.querySelector('smart-grid');
let buttons = grid.header.buttons;
footerobject
Describes the footer settings of the grid.
rowsSmart.Grid.Row[]
The rows property is used to describe all rows displayed in the grid.
Properties
allowToggleboolean
Sets or gets the row can be expanded or collapsed.
Default value
trueExample
Set the allowToggle property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].allowToggle = true;
Get the allowToggle property.
const grid = document.querySelector('smart-grid');
let allowToggle = grid.rows[0].allowToggle;
allowResizeboolean
Sets or gets the row can be resized.
Default value
trueExample
Set the allowResize property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].allowResize = true;
Get the allowResize property.
const grid = document.querySelector('smart-grid');
let allowResize = grid.rows[0].allowResize;
allowSelectboolean | null
Sets or gets the row can be selected.
Default value
trueExample
Set the allowSelect property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].allowSelect = false;
Get the allowSelect property.
const grid = document.querySelector('smart-grid');
let allowSelect = grid.rows[0].allowSelect;
allowCheckboolean
Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
Default value
trueExample
Set the allowCheck property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].allowCheck = false;
Get the allowCheck property.
const grid = document.querySelector('smart-grid');
let allowCheck = grid.rows[0].allowCheck;
checkedboolean
Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
Default value
trueExample
Set the checked property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].checked = false;
Get the checked property.
const grid = document.querySelector('smart-grid');
let checked = grid.rows[0].checked;
cellsSmart.Grid.Cell[]
Gets the Row's Cells array.
Default value
nullProperties
alignstring
"Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".
Default value
"'left'"Example
Set the align property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].align = 'right';
Get the align property.
const grid = document.querySelector('smart-grid');
let align = grid.rows[0].cells[0].align;
columnSmart.Grid.Column
Gets the column associated to the cell.
Get the column property.
const grid = document.querySelector('smart-grid');
let column = grid.rows[0].cells[0].column;
colorstring
Sets or gets the cell's text color.
Default value
"''"Example
Set the color property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].color = 'red';
Get the color property.
const grid = document.querySelector('smart-grid');
let color = grid.rows[0].cells[0].color;
backgroundstring
Sets or gets the cell's background.
Default value
"''"Example
Set the background property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].background = 'yellow';
Get the background property.
const grid = document.querySelector('smart-grid');
let background = grid.rows[0].cells[0].background;
borderColorstring
Sets or gets the cell's borderColor.
Default value
"''"Example
Set the borderColor property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].borderColor = 'red';
Get the borderColor property.
const grid = document.querySelector('smart-grid');
let borderColor = grid.rows[0].cells[0].borderColor;
colSpannumber
Sets or gets the cell's colSpan.
Default value
1Example
Set the colSpan property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].colSpan = 1;
Get the colSpan property.
const grid = document.querySelector('smart-grid');
let colSpan = grid.rows[0].cells[0].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.
Get the editor property.
const grid = document.querySelector('smart-grid');
let editor = grid.rows[0].cells[0].editor;
elementHTMLElement
Gets the HTMLElement associated to the cell.
Get the element property.
const grid = document.querySelector('smart-grid');
let element = grid.rows[0].cells[0].element;
getFormattedValue{(value: any, type: string): void}
Gets a formatted number or Date.
Get the getFormattedValue property.
const grid = document.querySelector('smart-grid');
let getFormattedValue = grid.rows[0].cells[0].getFormattedValue;
isEditingboolean
Gets whether the cell is in edit mode.
Default value
falseGet the isEditing property.
const grid = document.querySelector('smart-grid');
let isEditing = grid.rows[0].cells[0].isEditing;
oldValueany
Gets the old value of the cell
Get the oldValue property.
const grid = document.querySelector('smart-grid');
let oldValue = grid.rows[0].cells[0].oldValue;
fontSizestring
Sets or gets the cell's fontSize
Default value
"''"Example
Set the fontSize property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].fontSize = '24px';
Get the fontSize property.
const grid = document.querySelector('smart-grid');
let fontSize = grid.rows[0].cells[0].fontSize;
fontWeightstring
Sets or gets the cell's fontWeight
Default value
"''"Example
Set the fontWeight property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].fontWeight = '700';
Get the fontWeight property.
const grid = document.querySelector('smart-grid');
let fontWeight = grid.rows[0].cells[0].fontWeight;
fontFamilystring
Sets or gets the cell's fontFamily
Default value
"''"Example
Set the fontFamily property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].fontFamily = 'Verdana';
Get the fontFamily property.
const grid = document.querySelector('smart-grid');
let fontFamily = grid.rows[0].cells[0].fontFamily;
fontStylestring
Sets or gets the cell's fontStyle
Default value
"''"Example
Set the fontStyle property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].fontStyle = 'italic';
Get the fontStyle property.
const grid = document.querySelector('smart-grid');
let fontStyle = grid.rows[0].cells[0].fontStyle;
readonlyboolean
"Sets or gets whether the cell can be edited.".
Default value
falseExample
Set the readonly property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].readonly = false;
Get the readonly property.
const grid = document.querySelector('smart-grid');
let readonly = grid.rows[0].cells[0].readonly;
rowSmart.Grid.Row
Gets the row object associated to the cell.
Get the row property.
const grid = document.querySelector('smart-grid');
let row = grid.rows[0].cells[0].row;
rowSpannumber
Sets or gets the row span.
Default value
1Get the rowSpan property.
const grid = document.querySelector('smart-grid');
let rowSpan = grid.rows[0].cells[0].rowSpan;
selectedboolean
Sets or gets whether the cell is selected.
Default value
falseExample
Set the selected property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].selected = false;
Get the selected property.
const grid = document.querySelector('smart-grid');
let selected = grid.rows[0].cells[0].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.".
Default value
""Get the setProperties property.
const grid = document.querySelector('smart-grid');
let setProperties = grid.rows[0].cells[0].setProperties;
tooltipstring
"Allowed values are: 'top', 'middle' or 'bottom'".
Default value
""Example
Set the tooltip property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].tooltip = 'my awesome tooltip';
Get the tooltip property.
const grid = document.querySelector('smart-grid');
let tooltip = grid.rows[0].cells[0].tooltip;
valueany
The cell's value
Example
Set the value property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].value = 400;
Get the value property.
const grid = document.querySelector('smart-grid');
let value = grid.rows[0].cells[0].value;
verticalAlignstring
"Sets or gets the vertical alignment. Allowed values are: 'top', 'center' or 'bottom'".
Default value
"'center'"Example
Set the verticalAlign property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].cells[0].verticalAlign = 'bottom';
Get the verticalAlign property.
const grid = document.querySelector('smart-grid');
let verticalAlign = grid.rows[0].cells[0].verticalAlign;
Get the cells property.
const grid = document.querySelector('smart-grid');
let cells = grid.rows[0].cells;
childrenSmart.Grid.Row[]
Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
Get the children property.
const grid = document.querySelector('smart-grid');
let children = grid.rows[0].children;
dataany
Gets the row's bound data.
Get the data property.
const grid = document.querySelector('smart-grid');
let data = grid.rows[0].data;
detailHeightnumber
Sets or gets the row's detail height.
Default value
200Get the detailHeight property.
const grid = document.querySelector('smart-grid');
let detailHeight = grid.rows[0].detailHeight;
detailTemplatestring | HTMLTemplateElement | null
Sets or gets the row's detail template.
Get the detailTemplate property.
const grid = document.querySelector('smart-grid');
let detailTemplate = grid.rows[0].detailTemplate;
elementobject | null
Gets the HTML Element. The property returns null when the Row is not in the View.
Get the element property.
const grid = document.querySelector('smart-grid');
let element = grid.rows[0].element;
expandedboolean
Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.
Default value
falseGet the expanded property.
const grid = document.querySelector('smart-grid');
let expanded = grid.rows[0].expanded;
headerHTMLElement
Gets the row's header element.
Get the header property.
const grid = document.querySelector('smart-grid');
let header = grid.rows[0].header;
heightnumber
Sets or gets the row's height.
Default value
30Get the height property.
const grid = document.querySelector('smart-grid');
let height = grid.rows[0].height;
indexnumber
Gets the row's bound index.
Default value
-1Get the index property.
const grid = document.querySelector('smart-grid');
let index = grid.rows[0].index;
idstring | number
Gets the row's bound id.
Default value
""Get the id property.
const grid = document.querySelector('smart-grid');
let id = grid.rows[0].id;
leafboolean
Gets whether the row is leaf row in TreeGrid or Grouping mode.
Default value
falseGet the leaf property.
const grid = document.querySelector('smart-grid');
let leaf = grid.rows[0].leaf;
maxHeightnumber
Sets or gets the row's maximum height.
Default value
100Get the maxHeight property.
const grid = document.querySelector('smart-grid');
let maxHeight = grid.rows[0].maxHeight;
minHeightnumber
Sets or gets the row's minimum height.
Default value
30Get the minHeight property.
const grid = document.querySelector('smart-grid');
let minHeight = grid.rows[0].minHeight;
freeze"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
falseGet the freeze property.
const grid = document.querySelector('smart-grid');
let freeze = grid.rows[0].freeze;
selectedboolean
Sets or gets whether the row is selected.
Default value
falseExample
Set the selected property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].selected = false;
Get the selected property.
const grid = document.querySelector('smart-grid');
let selected = grid.rows[0].selected;
showDetailboolean
Sets or gets whether the row detail is displayed.
Default value
falseGet the showDetail property.
const grid = document.querySelector('smart-grid');
let showDetail = grid.rows[0].showDetail;
visibleboolean
Sets or gets whether the row is visible. Set the property to 'false' to hide the row.
Default value
trueExample
Set the visible property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.rows[0].visible = false;
Get the visible property.
const grid = document.querySelector('smart-grid');
let visible = grid.rows[0].visible;
visibleIndexnumber
Gets the visible index of the row.
Default value
-1Get the visibleIndex property.
const grid = document.querySelector('smart-grid');
let visibleIndex = grid.rows[0].visibleIndex;
getCellany
Methods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.
Default value
-1Get the getCell property.
const grid = document.querySelector('smart-grid');
let getCell = grid.rows[0].getCell;
selectionobject
Describes the selection settings.
Properties
enabledboolean
Enables the selection option.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.selection.enabled;
allowRowHeaderSelectionboolean
Sets or gets whether selection by clicking on a Row header is allowed.
Default value
falseExample
Set the allowRowHeaderSelection property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowRowHeaderSelection = true;
Get the allowRowHeaderSelection property.
const grid = document.querySelector('smart-grid');
let allowRowHeaderSelection = grid.selection.allowRowHeaderSelection;
allowColumnHeaderSelectionboolean
Sets or gets whether selection by clicking on a Column header is allowed.
Default value
falseExample
Set the allowColumnHeaderSelection property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowColumnHeaderSelection = true;
Get the allowColumnHeaderSelection property.
const grid = document.querySelector('smart-grid');
let allowColumnHeaderSelection = grid.selection.allowColumnHeaderSelection;
allowRowSelectionboolean
Sets or gets whether selection by clicking on a Row is allowed.
Default value
trueExample
Set the allowRowSelection property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowRowSelection = true;
Get the allowRowSelection property.
const grid = document.querySelector('smart-grid');
let allowRowSelection = grid.selection.allowRowSelection;
allowCellSelectionboolean
Sets or gets whether selection by clicking on a cell is allowed.
Default value
falseExample
Set the allowCellSelection property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowCellSelection = true;
Get the allowCellSelection property.
const grid = document.querySelector('smart-grid');
let allowCellSelection = grid.selection.allowCellSelection;
allowDragSelectionboolean
Sets or gets whether selection by dragging(like in Excel) is allowed.
Default value
trueExample
Set the allowDragSelection property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowDragSelection = true;
Get the allowDragSelection property.
const grid = document.querySelector('smart-grid');
let allowDragSelection = grid.selection.allowDragSelection;
allowDragSelectionAutoScrollboolean
Sets or gets whether selection by dragging will automatically scroll the Grid view.
Default value
trueExample
Set the allowDragSelectionAutoScroll property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowDragSelectionAutoScroll = true;
Get the allowDragSelectionAutoScroll property.
const grid = document.querySelector('smart-grid');
let allowDragSelectionAutoScroll = grid.selection.allowDragSelectionAutoScroll;
allowCellDragSelectionHandleboolean
Sets or gets whether the Cells selection bottom-right corner selection 'Drag Handle' (litte square like in Excel) is displayed. That handle allows you to resize the selection horizontally or vertically
Default value
trueExample
Set the allowCellDragSelectionHandle property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowCellDragSelectionHandle = true;
Get the allowCellDragSelectionHandle property.
const grid = document.querySelector('smart-grid');
let allowCellDragSelectionHandle = grid.selection.allowCellDragSelectionHandle;
allowCellDragDropSelectionHandleboolean
Sets or gets whether the Cells selection can be dragged and dropped. Drag happens when the cursor is moved to the bottom of the cells selection. The cursor is changed to a drag cursor. Press the button and hold and move the selection. By default the dragged cell values are copied on drop.
Default value
trueExample
Set the allowCellDragDropSelectionHandle property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowCellDragDropSelectionHandle = true;
Get the allowCellDragDropSelectionHandle property.
const grid = document.querySelector('smart-grid');
let allowCellDragDropSelectionHandle = grid.selection.allowCellDragDropSelectionHandle;
allowCellDragSelectionAutoFillboolean
Sets or gets whether the Cells selection will be auto-filled with values on drop when dragging through the 'Drag Handle'.
Default value
trueExample
Set the allowCellDragSelectionAutoFill property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.allowCellDragSelectionAutoFill = true;
Get the allowCellDragSelectionAutoFill property.
const grid = document.querySelector('smart-grid');
let allowCellDragSelectionAutoFill = grid.selection.allowCellDragSelectionAutoFill;
mode"one" | "many" | "extended"
Sets or gets whether the selection allows you to select 'one', 'many' or a variation of 'many' called 'extended'. 'one' allows you to have only single cell or row selected. 'many'
Default value
"many"Example
Set the mode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.mode = 'extended';
Get the mode property.
const grid = document.querySelector('smart-grid');
let mode = grid.selection.mode;
action"none" | "click" | "doubleClick"
Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API.
Default value
"click"Get the action property.
const grid = document.querySelector('smart-grid');
let action = grid.selection.action;
checkBoxesobject
autoShowboolean
Sets or gets whether the checkboxes are automatically displayed only when the mouse is over the Grid. When false, checkboses are always displayed
Default value
falseExample
Set the autoShow property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.checkBoxes[0].autoShow = true;
Get the autoShow property.
const grid = document.querySelector('smart-grid');
let autoShow = grid.selection.checkBoxes[0].autoShow;
enabledboolean
Sets or gets whether the checkboxes selection is enabled. In that mode a new column with checkboxes is displayed.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.selection.checkBoxes[0].enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.selection.checkBoxes[0].enabled;
action"none" | "click" | "doubleClick"
Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API.
Default value
"click"Get the action property.
const grid = document.querySelector('smart-grid');
let action = grid.selection.checkBoxes[0].action;
selectAllMode"none" | "page" | "all"
Sets or gets whether the checkbox selection selects all rows in the current page or all rows. The 'none' setting disables the header checkbox.
Default value
"page"Get the selectAllMode property.
const grid = document.querySelector('smart-grid');
let selectAllMode = grid.selection.checkBoxes[0].selectAllMode;
position"near" | "far"
Sets or gets whether the position of the checkbox selection column.
Default value
"near"Get the position property.
const grid = document.querySelector('smart-grid');
let position = grid.selection.checkBoxes[0].position;
Get the checkBoxes property.
const grid = document.querySelector('smart-grid');
let checkBoxes = grid.selection.checkBoxes;
selectedstring
Default value
""Get the selected property.
const grid = document.querySelector('smart-grid');
let selected = grid.selection.selected;
sortingobject
Describes sorting settings.
enabledboolean
Enables sorting.
Default value
falseExample
Set the enabled property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.sorting.enabled = true;
Get the enabled property.
const grid = document.querySelector('smart-grid');
let enabled = grid.sorting.enabled;
sortstring[]
Sets the sort columns to be sorted.
Get the sort property.
const grid = document.querySelector('smart-grid');
let sort = grid.sorting.sort;
mode"one" | "many"
Sets the count of allowed sorting columns.
Default value
"one"Example
Set the mode property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.sorting.mode = 'many';
Get the mode property.
const grid = document.querySelector('smart-grid');
let mode = grid.sorting.mode;
sortToggleThreeStatesboolean
Enables switching between the three sort states: ascending, descending and not sorted.
Default value
trueExample
Set the sortToggleThreeStates property by using the HTML Element's instance.
const grid = document.querySelector('smart-grid');
grid.sorting.sortToggleThreeStates = true;
Get the sortToggleThreeStates property.
const grid = document.querySelector('smart-grid');
let sortToggleThreeStates = grid.sorting.sortToggleThreeStates;
Events
beginEditCustomEvent
This event is triggered, when the edit begins.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onBeginEdit
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The edited row.
ev.detail.column Smart.Grid.Column - The edited column.
ev.detail.cell Smart.Grid.Cell - 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.
Example
Set up the event handler of beginEdit event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('beginEdit', function (event) { const detail = event.detail, row = detail.row, column = detail.column, cell = detail.cell; // event handling code goes here. })
changeCustomEvent
This event is triggered, when the selection is changed. When you select with a drag, the event is triggered when the drag starts and ends.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onChange
Arguments
evCustomEvent
ev.detailObject
ev.detail.started boolean - The flag is true, when the selection starts. The flag is false, when the selection ends and when the user changes the selection by dragging.
ev.detail.finished boolean - The flag is true, when the selection ends. The flag is false, when the selection starts and when the user changes the selection by dragging.
ev.detail.originalEvent Event - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of change event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('change', function (event) { const detail = event.detail, started = detail.started, finished = detail.finished, originalEvent = detail.originalEvent; // event handling code goes here. })
columnClickCustomEvent
This event is triggered, when the user clicks on the header of a column.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onColumnClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.column Smart.Grid.Column - The clicked column.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of columnClick event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('columnClick', function (event) { const detail = event.detail, column = detail.column, originalEvent = detail.originalEvent; // event handling code goes here. })
columnDoubleClickCustomEvent
This event is triggered, when the user double clicks on the header of a column.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onColumnDoubleClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.column Smart.Grid.Column - The double-clicked column.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of columnDoubleClick event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('columnDoubleClick', function (event) { const detail = event.detail, column = detail.column, originalEvent = detail.originalEvent; // event handling code goes here. })
columnResizeCustomEvent
This event is triggered, when the user resized a column.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onColumnResize
Arguments
evCustomEvent
ev.detailObject
ev.detail.column Smart.Grid.Column - The resized column.
ev.detail.oldWidth - The old width of the column.
ev.detail.width - The new width of the column.
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.
Example
Set up the event handler of columnResize event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('columnResize', function (event) { const detail = event.detail, column = detail.column, oldWidth = detail.oldWidth, width = detail.width; // event handling code goes here. })
columnDragStartCustomEvent
This event is triggered, when the user starts a column drag.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onColumnDragStart
Arguments
evCustomEvent
ev.detailObject
ev.detail.column Smart.Grid.Column - The column.
ev.detail.index - The column's index
ev.detail.originalEvent - The origianl Event object.
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.
Example
Set up the event handler of columnDragStart event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('columnDragStart', function (event) { const detail = event.detail, column = detail.column, index = detail.index, originalEvent = detail.originalEvent; // event handling code goes here. })
columnDraggingCustomEvent
This event is triggered, when the user drags a column.
- Bubbles Yes
- Cancelable Yes
- Interface CustomEvent
- Event handler property onColumnDragging
Arguments
evCustomEvent
ev.detailObject
ev.detail.column Smart.Grid.Column - The column.
ev.detail.index - The column's index
ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
ev.detail.originalEvent - The origianl Event object.
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.
Example
Set up the event handler of columnDragging event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('columnDragging', function (event) { const detail = event.detail, column = detail.column, index = detail.index, data = detail.data, originalEvent = detail.originalEvent; // event handling code goes here. })
columnDragEndCustomEvent
This event is triggered, when the user drags a column.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onColumnDragEnd
Arguments
evCustomEvent
ev.detailObject
ev.detail.column Smart.Grid.Column - The column.
ev.detail.index - The column's index
ev.detail.newIndex - The column's new index
ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
ev.detail.originalEvent - The origianl Event object.
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.
Example
Set up the event handler of columnDragEnd event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('columnDragEnd', function (event) { const detail = event.detail, column = detail.column, index = detail.index, newIndex = detail.newIndex, data = detail.data, originalEvent = detail.originalEvent; // event handling code goes here. })
rowDragStartCustomEvent
This event is triggered, when the user starts a row drag.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowDragStart
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The row.
ev.detail.index - The row's index
ev.detail.originalEvent - The origianl Event object.
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.
Example
Set up the event handler of rowDragStart event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowDragStart', function (event) { const detail = event.detail, row = detail.row, index = detail.index, originalEvent = detail.originalEvent; // event handling code goes here. })
rowDraggingCustomEvent
This event is triggered, when the user drags a row.
- Bubbles Yes
- Cancelable Yes
- Interface CustomEvent
- Event handler property onRowDragging
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The row.
ev.detail.index - The row's index
ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
ev.detail.originalEvent - The origianl Event object.
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.
Example
Set up the event handler of rowDragging event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowDragging', function (event) { const detail = event.detail, row = detail.row, index = detail.index, data = detail.data, originalEvent = detail.originalEvent; // event handling code goes here. })
rowDragEndCustomEvent
This event is triggered, when the user drags a row.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowDragEnd
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The row.
ev.detail.index - The row's index
ev.detail.newIndex - The row's new index
ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.
ev.detail.originalEvent - The origianl Event object.
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.
Example
Set up the event handler of rowDragEnd event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowDragEnd', function (event) { const detail = event.detail, row = detail.row, index = detail.index, newIndex = detail.newIndex, data = detail.data, originalEvent = detail.originalEvent; // event handling code goes here. })
rowExpandCustomEvent
This event is triggered, when the user expands a row of the grid. The Grid is in TreeGrid/Grouping mode.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowExpand
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The expanded row.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of rowExpand event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowExpand', function (event) { const detail = event.detail, row = detail.row, originalEvent = detail.originalEvent; // event handling code goes here. })
rowCollapseCustomEvent
This event is triggered, when the user collapsed a row of the grid. The Grid is in TreeGrid/Grouping mode.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowCollapse
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The collapsed row.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of rowCollapse event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowCollapse', function (event) { const detail = event.detail, row = detail.row, originalEvent = detail.originalEvent; // event handling code goes here. })
rowClickCustomEvent
This event is triggered, when the user clicks on a row of the grid.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The clicked row.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of rowClick event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowClick', function (event) { const detail = event.detail, row = detail.row, originalEvent = detail.originalEvent; // event handling code goes here. })
rowDoubleClickCustomEvent
This event is triggered, when the user double clicks on a row of the grid.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowDoubleClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The double-clicked row.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of rowDoubleClick event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowDoubleClick', function (event) { const detail = event.detail, row = detail.row, originalEvent = detail.originalEvent; // event handling code goes here. })
rowResizeCustomEvent
This event is triggered, when the user resized a row.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowResize
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The resized row.
ev.detail.oldHeight - The old height of the row.
ev.detail.height - The new height of the row.
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.
Example
Set up the event handler of rowResize event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowResize', function (event) { const detail = event.detail, row = detail.row, oldHeight = detail.oldHeight, height = detail.height; // event handling code goes here. })
cellClickCustomEvent
This event is triggered, when the user clicks on a cell of the grid.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onCellClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.cell Smart.Grid.Cell - The clicked cell.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of cellClick event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('cellClick', function (event) { const detail = event.detail, cell = detail.cell, originalEvent = detail.originalEvent; // event handling code goes here. })
cellDoubleClickCustomEvent
This event is triggered, when the user double clicks on a cell of the grid.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onCellDoubleClick
Arguments
evCustomEvent
ev.detailObject
ev.detail.cell Smart.Grid.Cell - The double-clicked cell.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of cellDoubleClick event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('cellDoubleClick', function (event) { const detail = event.detail, cell = detail.cell, originalEvent = detail.originalEvent; // event handling code goes here. })
endEditCustomEvent
This event is triggered, when the edit ends.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onEndEdit
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The edited row.
ev.detail.column Smart.Grid.Column - The edited column.
ev.detail.cell Smart.Grid.Cell - 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.
Example
Set up the event handler of endEdit event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('endEdit', function (event) { const detail = event.detail, row = detail.row, column = detail.column, cell = detail.cell; // event handling code goes here. })
filterCustomEvent
This event is triggered, when a filter is added or removed.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onFilter
Arguments
evCustomEvent
ev.detailObject
ev.detail.columns Smart.Grid.Column[] - Array of columns.
ev.detail.data - Array of {dataField: string, filter: string}. dataField is the column's data field. filter is a filter expression like 'startsWith B'
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.
Example
Set up the event handler of filter event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('filter', function (event) { const detail = event.detail, columns = detail.columns, data = detail.data; // event handling code goes here. })
resizeCustomEvent
This event is triggered, when the grid is resized.
- 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.
Example
Set up the event handler of resize event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('resize', function (event) { // event handling code goes here. })
rowTapCustomEvent
This event is triggered when the user touches and holds on the row for at least 300ms.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onRowTap
Arguments
evCustomEvent
ev.detailObject
ev.detail.row Smart.Grid.Row - The tapped row.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of rowTap event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('rowTap', function (event) { const detail = event.detail, row = detail.row, originalEvent = detail.originalEvent; // event handling code goes here. })
cellTapCustomEvent
This event is triggered when the user touches and holds on the cell for at least 300ms.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onCellTap
Arguments
evCustomEvent
ev.detailObject
ev.detail.cell Smart.Grid.Cell - The tapped row.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
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.
Example
Set up the event handler of cellTap event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('cellTap', function (event) { const detail = event.detail, cell = detail.cell, originalEvent = detail.originalEvent; // event handling code goes here. })
pageCustomEvent
This event is triggered, when the user changes the pages.
- 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.
Example
Set up the event handler of page event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('page', function (event) { // event handling code goes here. })
sortCustomEvent
This event is triggered, when a sorting column is added or removed.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onSort
Arguments
evCustomEvent
ev.detailObject
ev.detail.columns Smart.Grid.Column[] - Array of columns.
ev.detail.data - Array of {dataField: string, sortOrder: string, sortIndex: number}. dataField is the column's data field. sortOrder is 'asc' or 'desc', sortIndex is the index of the column in multi column sorting.
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.
Example
Set up the event handler of sort event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('sort', function (event) { const detail = event.detail, columns = detail.columns, data = detail.data; // event handling code goes here. })
scrollBottomReachedCustomEvent
This event is triggered, when the user reaches the bottom of the grid.
- 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.
Example
Set up the event handler of scrollBottomReached event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('scrollBottomReached', function (event) { // event handling code goes here. })
scrollTopReachedCustomEvent
This event is triggered, when the user reaches the top 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.
Example
Set up the event handler of scrollTopReached event.
const grid = document.querySelector('smart-grid'); grid.addEventListener('scrollTopReached', function (event) { // event handling code goes here. })
Methods
addRow( data: any, insertAtBottom?: boolean, callback?: any): void
Adds a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
Arguments
dataany
row data matching the data source
insertAtBottom?boolean
Determines whether to add the new row to the bottom or top of the collection. The default value is 'true'
callback?any
Sets a callback function, which is called after the new row is added. The callback's argument is the new row.
Invoke the addRow method.
const grid = document.querySelector('smart-grid'); grid.addRow(1);
addNewRow( position?: string): boolean
Adds a new row and puts it into edit mode. When batch editing is enabled, the row is not saved until the batch edit is saved.
Arguments
position?string
'near' or 'far'
Returnsboolean
Invoke the addNewRow method.
const grid = document.querySelector('smart-grid'); const result = grid.addNewRow();
addUnboundRow( count: number, position?: string): boolean
Adds a new unbound row to the top or bottom. Unbound rows are not part of the Grid's dataSource. They become part of the dataSource, after an unbound row is edited.
Arguments
countnumber
The count of unbound rows.
position?string
'near' or 'far'
Returnsboolean
Invoke the addUnboundRow method.
const grid = document.querySelector('smart-grid'); const result = grid.addUnboundRow(5);
addFilter( dataField: string, filter: string, refreshFilters?: boolean): void
Adds a filter to a column. This method will apply a filter to the Grid data.
Arguments
dataFieldstring
column bound data field
filterstring
Filter expression like: 'startsWith B'
refreshFilters?boolean
Invoke the addFilter method.
const grid = document.querySelector('smart-grid'); grid.addFilter("firstName","startsWith B");
autoSizeRows(): void
Auto-sizes grid rows. This method will update the height of all Grid rows.
Invoke the autoSizeRows method.
const grid = document.querySelector('smart-grid'); grid.autoSizeRows();
autoSizeColumns(): void
Auto-sizes grid columns. This method will update the width of all Grid columns.
Invoke the autoSizeColumns method.
const grid = document.querySelector('smart-grid'); grid.autoSizeColumns();
beginUpdate(): void
Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
Invoke the beginUpdate method.
const grid = document.querySelector('smart-grid'); grid.beginUpdate();
beginEdit( rowId: string | number, dataField?: string): boolean
Begins row, cell or column. This method allows you to programmatically start a cell, row or column editing. After calling it, an editor HTMLElement will be created and displayed in the Grid.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
Returnsboolean
Invoke the beginEdit method.
const grid = document.querySelector('smart-grid'); const result = grid.beginEdit(1,"firstName");
clearFilter(): void
Clears all filters. Refreshes the view and updates all filter input components.
Invoke the clearFilter method.
const grid = document.querySelector('smart-grid'); grid.clearFilter();
clearSelection(): void
Clears the selection that user have made. All row, cell and column selection highlights will be removed.
Invoke the clearSelection method.
const grid = document.querySelector('smart-grid'); grid.clearSelection();
cancelEdit(): void
Cancels the editing. This method closes the cell editor and cancels the changes.
Invoke the cancelEdit method.
const grid = document.querySelector('smart-grid'); grid.cancelEdit();
checkRow( rowId: string | number): void
Checks a TreeGrid row. This method updates the row's check-box.
Arguments
rowIdstring | number
row bound id
Invoke the checkRow method.
const grid = document.querySelector('smart-grid'); grid.checkRow(1);
checkAllRows(): void
Checks all TreeGrid or Grouping rows. This method updates all check-boxes in the TreeGrid or Grouping rows.
Invoke the checkAllRows method.
const grid = document.querySelector('smart-grid'); grid.checkAllRows();
clearRows(): void
Clears the user selection and empties the data source. The Grid will display 'No Rows' in the view.
Invoke the clearRows method.
const grid = document.querySelector('smart-grid'); grid.clearRows();
closeMenu(): void
Closes the column drop-down menu.
Invoke the closeMenu method.
const grid = document.querySelector('smart-grid'); grid.closeMenu();
collapseRow( rowId: string | number): void
Collapses a TreeGrid or Grouping row.
Arguments
rowIdstring | number
row bound id
Invoke the collapseRow method.
const grid = document.querySelector('smart-grid'); grid.collapseRow(1);
collapseAllRows(): void
Collapses all TreeGrid or Grouping rows.
Invoke the collapseAllRows method.
const grid = document.querySelector('smart-grid'); grid.collapseAllRows();
createChart( type: string, dataSource?: any): void
Creates a Chart, when charting is enabled.
Arguments
typestring
Chart's type
dataSource?any
Chart's data source
Invoke the createChart method.
const grid = document.querySelector('smart-grid'); grid.createChart("pie");
deleteRow( rowId: string | number, callback?: any): void
Delete a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
Arguments
rowIdstring | number
row bound id
callback?any
Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.
Invoke the deleteRow method.
const grid = document.querySelector('smart-grid'); grid.deleteRow(1);
ensureVisible( rowId: string | number, dataField?: string): boolean
Scrolls to a row or cell. This method scrolls to a row or cell, when scrolling is necessary. If pagination is enabled, it will automatically change the page.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
Returnsboolean
Invoke the ensureVisible method.
const grid = document.querySelector('smart-grid'); const result = grid.ensureVisible(1,"firstName");
endEdit(): void
Ends the editing. This method confirms all changes and closes the opened cell editor(s).
Invoke the endEdit method.
const grid = document.querySelector('smart-grid'); grid.endEdit();
endUpdate( refresh?: boolean): void
Ends the update operation. This method will resume the rendering and will refresh the Grid.
Arguments
refresh?boolean
The flag that control the calls of the refresh method.
Invoke the endUpdate method.
const grid = document.querySelector('smart-grid'); grid.endUpdate();
expandRow( rowId: string | number): void
Expands a TreeGrid or Grouping row.
Arguments
rowIdstring | number
row bound id
Invoke the expandRow method.
const grid = document.querySelector('smart-grid'); grid.expandRow(1);
expandAllRows(): void
Expands all TreeGrid or Grouping rows.
Invoke the expandAllRows method.
const grid = document.querySelector('smart-grid'); grid.expandAllRows();
exportData( Dataformat: string): void
Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the dataExport property.
Arguments
Dataformatstring
'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
Invoke the exportData method.
const grid = document.querySelector('smart-grid'); grid.exportData("pdf");
Try a demo showcasing the exportData method.
getSortedColumns(): {[dataField: string]: { sortOrder: string, sortIndex: number }}
Gets an array of columns with applied sorting.
Returns{[dataField: string]: { sortOrder: string, sortIndex: number }}
Invoke the getSortedColumns method.
const grid = document.querySelector('smart-grid'); const result = grid.getSortedColumns();
getSelection(): { rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }
Gets the selection.
Returns{ rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }
Invoke the getSelection method.
const grid = document.querySelector('smart-grid'); const result = grid.getSelection();
getSelectedRows(): []
Gets the selected row ids.
Returns[]
Invoke the getSelectedRows method.
const grid = document.querySelector('smart-grid'); const result = grid.getSelectedRows();
getFilteredColumns(): {[dataField: string]: Smart.Grid.Column}[]
Gets an array of columns with applied filters.
Returns{[dataField: string]: Smart.Grid.Column}[]
Invoke the getFilteredColumns method.
const grid = document.querySelector('smart-grid'); const result = grid.getFilteredColumns();
getVisibleRows(): Smart.Grid.Row[]
Gets an array of rows, which are visible and match the applied filter.
ReturnsSmart.Grid.Row[]
Invoke the getVisibleRows method.
const grid = document.querySelector('smart-grid'); const result = grid.getVisibleRows();
getViewRows(): Smart.Grid.Row[]
Gets the result of the getVisibleRows or the rows hierarchy, when the Grid is in TreeGrid/Grouping mode.
ReturnsSmart.Grid.Row[]
Invoke the getViewRows method.
const grid = document.querySelector('smart-grid'); const result = grid.getViewRows();
getBatchEditChanges(): { updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }
Gets the changes from the batch edit.
Returns{ updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }
Invoke the getBatchEditChanges method.
const grid = document.querySelector('smart-grid'); const result = grid.getBatchEditChanges();
hasMenu(): boolean
Gets whether a column's drop-down menu is opened.
Returnsboolean
Invoke the hasMenu method.
const grid = document.querySelector('smart-grid'); const result = grid.hasMenu();
hideDetail( rowId: string | number): void
Hides the Details of a Row, when row details are enabled.
Arguments
rowIdstring | number
row bound id
Invoke the hideDetail method.
const grid = document.querySelector('smart-grid'); grid.hideDetail(1);
openMenu( dataField: string): void
Opens a column drop-down menu.
Arguments
dataFieldstring
column bound data field
Invoke the openMenu method.
const grid = document.querySelector('smart-grid'); grid.openMenu("firstName");
print(): void
Prints the Grid data. The method uses the options of the dataExport property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use the dataExport property.
Invoke the print method.
const grid = document.querySelector('smart-grid'); grid.print();
render(): void
Renders the grid. This method will make a full-refresh like in the initial Grid creation. It will create Rows, Columns and Cells HTML Elements and then refresh the Grid layout.
Invoke the render method.
const grid = document.querySelector('smart-grid'); grid.render();
refresh(): void
Refreshes the grid with the current property values. This method will refresh the Grid layout.
Invoke the refresh method.
const grid = document.querySelector('smart-grid'); grid.refresh();
refreshView(): void
Refreshes the grid cells in view. The method is useful for live-updates of cell values.
Invoke the refreshView method.
const grid = document.querySelector('smart-grid'); grid.refreshView();
removeFilter( dataField: string, refreshFilters?: boolean): void
Removes a column filter.
Arguments
dataFieldstring
column bound data field
refreshFilters?boolean
Invoke the removeFilter method.
const grid = document.querySelector('smart-grid'); grid.removeFilter("firstName");
revertBatchEdit(): void
Reverts the batch edit changes. This method cancels all changes made by the end-user.
Invoke the revertBatchEdit method.
const grid = document.querySelector('smart-grid'); grid.revertBatchEdit();
saveBatchEdit(): void
Saves the batch edit changes. This method confirms the editing changes made by the end-user.
Invoke the saveBatchEdit method.
const grid = document.querySelector('smart-grid'); grid.saveBatchEdit();
updateRow( rowId: string | number, data: any, callback?: any): void
Updates a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
Arguments
rowIdstring | number
row bound id
dataany
row data matching the data source
callback?any
Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.
Invoke the updateRow method.
const grid = document.querySelector('smart-grid'); grid.updateRow();
select( rowId: string | number, dataField?: string): void
Selects a row, cell or column.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
Invoke the select method.
const grid = document.querySelector('smart-grid'); grid.select(1);
selectRange( rowId: string | number, dataField: string, endRowId: string | number, endDataField: string): void
Selects a range of rows, cells or columns. The result of the method depends on the selection configuration of the Grid.
Arguments
rowIdstring | number
row bound id
dataFieldstring
column bound data field
endRowIdstring | number
row bound id
endDataFieldstring
column bound data field
Invoke the selectRange method.
const grid = document.querySelector('smart-grid'); grid.selectRange(1,"firstName",5,"lastName");
selectRowsRange( rowId: string | number, endRowId: string | number): void
Selects a range of rows.
Arguments
rowIdstring | number
row bound id
endRowIdstring | number
row bound id
Invoke the selectRowsRange method.
const grid = document.querySelector('smart-grid'); grid.selectRowsRange(1,3);
selectRows( rowId: (string | number)[]): void
Selects multiple rows by their ids.
Arguments
rowId(string | number)[]
Array of row ids
Invoke the selectRows method.
const grid = document.querySelector('smart-grid'); grid.selectRows([1,3,5]);
selectRowsByIndex( rowIndex: number[]): void
Selects multiple rows by their index.
Arguments
rowIndexnumber[]
Array of row indexes
Invoke the selectRowsByIndex method.
const grid = document.querySelector('smart-grid'); grid.selectRowsByIndex([1,5]);
showDetail( rowId: string | number): void
Shows the Details of a Row, when row details are enabled.
Arguments
rowIdstring | number
row bound id
Invoke the showDetail method.
const grid = document.querySelector('smart-grid'); grid.showDetail(1);
unselect( rowId: string | number, dataField?: string): void
Unselects a row, cell or column.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
Invoke the unselect method.
const grid = document.querySelector('smart-grid'); grid.unselect();
uncheckRow( rowId: string | number): void
Unchecks a TreeGrid row. Sets its check-box to false.
Arguments
rowIdstring | number
row bound id
Invoke the uncheckRow method.
const grid = document.querySelector('smart-grid'); grid.uncheckRow(1);
uncheckAllRows(): void
Unchecks all TreeGrid or Grouping rows. Sets all check-boxes to false.
Invoke the uncheckAllRows method.
const grid = document.querySelector('smart-grid'); grid.uncheckAllRows();
toggleRow( rowId: string | number): void
Toggles a TreeGrid row. When this method is called, the row is expanded, if it's state is collapsed and collapsed if it's state is expanded.
Arguments
rowIdstring | number
row bound id
Invoke the toggleRow method.
const grid = document.querySelector('smart-grid'); grid.toggleRow(1);
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 row/column is frozen.
--smart-grid-cell-background-freezevar()
Default value
"var(--smart-surface)"Sets background color of cells, when row/column is frozen
--smart-grid-cell-color-deletevar()
Default value
"#333"Sets text color of cells, when row is deleted.
--smart-grid-cell-background-deletevar()
Default value
"#FFDCDC"Sets background color of cells, when row is deleted.
--smart-grid-cell-color-updatevar()
Default value
"#333"Sets text color of cells, when cell is updated..
--smart-grid-cell-background-updatevar()
Default value
"#D7F9C7"Sets background color of cells, when cell is updated..
--smart-grid-cell-color-addvar()
Default value
"#333"Sets text color of cells, when row is added..
--smart-grid-cell-background-addvar()
Default value
"#FED59B"Sets background color of cells, when row is deleted..
--smart-grid-cell-color-unboundvar()
Default value
"var(--smart-surface-color)"Sets text color of cells, when row is unbound.
--smart-grid-cell-background-unboundvar()
Default value
"var(--smart-surface)"Sets background color of cells, when row is unbound.
--smart-grid-cell-color-sortvar()
Default value
"var(--smart-surface-color)"Sets text color of cells, when column is sorted.
--smart-grid-cell-background-sortvar()
Default value
"var(--smart-surface)"Sets background color of cells, when column is sorted.
--smart-grid-cell-color-filtervar()
Default value
"var(--smart-surface-color)"Sets text color of cells, when column is filtered.
--smart-grid-cell-background-filtervar()
Default value
"var(--smart-surface)"Sets background color of cells, when 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.