Grid API

Grid Javascript API

Class

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.

alternationStartnumber

Starting row index of alternating colors.

Default value

0

Example

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

0

Example

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

0

Example

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

false

Example

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

false

Example

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

true

Example

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

false

Example

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

false

Example

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

false

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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;

autoGenerateRowLabelModestring

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 = 'true';

Get the autoGenerateRowLabelMode property.

 const grid = document.querySelector('smart-grid');
 let autoGenerateRowLabelMode = grid.appearance.autoGenerateRowLabelMode;

autoGenerateColumnLabelModestring

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 = 'true';

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

false

Example

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

500

Example

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

false

Example

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

false

Example

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

true

Example

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

false

Example

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

false

Example

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;

showColumnHeaderLinesboolean

Shows column header lines.

Default value

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

false

Example

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

false

Example

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

false

Example

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

true

Example

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

false

Example

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

false

Example

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

false

Example

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.

allowColumnAutoSizeOnDoubleClickboolean

Auto-Resize on double-click of a column's right border.

Default value

true

Example

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

true

Example

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;

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.

allowCellsWrapboolean

Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines.

Default value

false

Example

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;

autoGenerateColumnWidthnumber | 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;

columnWidthany

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;

columnHeightany

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;

columnMinHeightany

Sets the minimum height of the Grid columns.

Default value

30

Example

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

30

Example

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;

rowHeightany

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

true

Example

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.

Default value

none

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

null

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

true

Example

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

true

Example

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

true

Example

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

Sets or gets whether the column can be selected.

Default value

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

false

Example

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;

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', '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

false

Example

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

30

Get 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

false

Example

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

false

Example

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

false

Example

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.

Default value

""

Get the template property.

 const grid = document.querySelector('smart-grid');
 let template = grid.columns[0].template;

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

true

Example

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.

autoCloseboolean

Automatically closes the column menu.

Default value

true

Example

Set the autoClose property by using the HTML Element's instance.

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

Get the autoClose property.

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

dataSourceobject

Sets the data sources to the column menu.

columnMenuCustomizeTypeobject

Describes the settings of the column menu customize type

commandany

Sets the commant of the column menu customize type.

Default value

customizeTypeCommand

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuCustomizeType.command;

enabledboolean

Enables the column menu customize type.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visibleboolean

Sets the visibility of the column menu customize type.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

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

iconstring

Sets the icon of the column menu customize type.

Default value

"smart-icon-customize"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuCustomizeType.icon;

labelstring

Sets the label of the column menu customize type.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuCustomizeType.label;

Get the columnMenuCustomizeType property.

 const grid = document.querySelector('smart-grid');
 let columnMenuCustomizeType = grid.columnMenu.dataSource.columnMenuCustomizeType;

columnMenuItemRenameobject

Describes the settings of the column menu item rename.

commandstring

Sets the command of the column menu item rename.

Default value

"renameCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemRename.command;

enabledboolean

Enables the column menu item rename.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visibleboolean

Sets the visibility of the column menu item rename.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

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

iconstring

Sets the icon of the column menu item rename.

Default value

"smart-icon-rename"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemRename.icon;

labelstring

Sets the label of the column menu item rename.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemRename.label;

Get the columnMenuItemRename property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemRename = grid.columnMenu.dataSource.columnMenuItemRename;

columnMenuItemEditDescriptionobject

Describes the settings of the column menu item edit description.

commandstring

Sets the command of the column menu item edit description.

Default value

"editDescriptionCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemEditDescription.command;

enabledboolean

Enables the column menu item edit description.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visibleboolean

Sets the visibility of the column menu item edit description.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

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

iconstring

Sets the icon of the column menu item edit description.

Default value

"smart-icon-description"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemEditDescription.icon;

labelstring

Sets the label of the column menu item edit description.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemEditDescription.label;

Get the columnMenuItemEditDescription property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemEditDescription = grid.columnMenu.dataSource.columnMenuItemEditDescription;

columnMenuItemDuplicateobject

Describes the settings of the column menu item duplicate.

commandstring

Sets the command of the column menu item duplicate.

Default value

"duplicateCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemDuplicate.command;

visibleboolean

Sets the visibility of the column menu item duplicate.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemDuplicate.visible;

enabledboolean

Enables the column menu item duplicate.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

 const grid = document.querySelector('smart-grid');
 let enabled = grid.columnMenu.dataSource.columnMenuItemDuplicate.enabled;

iconstring

Sets the icon of the column menu item duplicate.

Default value

"smart-icon-duplicate"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemDuplicate.icon;

labelstring

Sets the label of the column menu item duplicate.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemDuplicate.label;

Get the columnMenuItemDuplicate property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemDuplicate = grid.columnMenu.dataSource.columnMenuItemDuplicate;

columnMenuItemInsertLeftobject

Describes the settings of the column menu item insert left.

commandstring

Sets the command of the column menu item insert left.

Default value

"insertLeftCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemInsertLeft.command;

visibleboolean

Sets the visibility of the column menu item insert left.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

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

enabledboolean

Enabels the column menu item insert left.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

iconstring

Sets the icon of the column menu item insert left.

Default value

"smart-icon-insert-left"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemInsertLeft.icon;

labelstring

Sets the label of the column menu item insert left.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemInsertLeft.label;

Get the columnMenuItemInsertLeft property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemInsertLeft = grid.columnMenu.dataSource.columnMenuItemInsertLeft;

columnMenuItemInsertRightobject

Describes the settings of the of the column menu item insert right.

commandstring

Sets the command of the of the column menu item insert right.

Default value

"insertRightCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemInsertRight.command;

visibleboolean

Sets the visibility of the of the column menu item insert right.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

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

enabledboolean

Enables the column menu item insert right.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

iconstring

Sets the icon of the of the column menu item insert right.

Default value

"smart-icon-insert-right"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemInsertRight.icon;

labelstring

Sets the label of the of the column menu item insert right.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemInsertRight.label;

Get the columnMenuItemInsertRight property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemInsertRight = grid.columnMenu.dataSource.columnMenuItemInsertRight;

columnMenuItemSortAscobject

Describes the settings of the column menu item sort ascending.

commandstring

Sets the command of the column menu item sort ascending.

Default value

"sortAscCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemSortAsc.command;

visiblestring

Sets the visibility of the column menu item sort ascending.

Default value

"auto"

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemSortAsc.visible;

enabledboolean

Enables the column menu item sort ascending.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

iconstring

Sets the icon of the column menu item sort ascending.

Default value

"smart-icon-sort-a-z"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemSortAsc.icon;

labelstring

Sets the label of the column menu item sort ascending.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemSortAsc.label;

Get the columnMenuItemSortAsc property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemSortAsc = grid.columnMenu.dataSource.columnMenuItemSortAsc;

columnMenuItemSortDescobject

Describes the settings of the column menu item sort descending.

commandstring

Sets the command of the column menu item sort descending.

Default value

"sortDescCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemSortDesc.command;

visiblestring

Sets the visibility of the column menu item sort descending.

Default value

"auto"

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemSortDesc.visible;

enabledboolean

Enables the column menu item sort descending.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

iconstring

Sets the icon of the column menu item sort descending.

Default value

"smart-icon-sort-z-a"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemSortDesc.icon;

labelstring

Sets the label of the column menu item sort descending.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemSortDesc.label;

Get the columnMenuItemSortDesc property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemSortDesc = grid.columnMenu.dataSource.columnMenuItemSortDesc;

columnMenuItemRemoveSortobject

Describes the settings of the column menu item remove sort.

commandstring

Sets the command of the column menu item remove sort.

Default value

"removeSortCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemRemoveSort.command;

visiblestring

Sets the visibility of the column menu item remove sort.

Default value

"auto"

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemRemoveSort.visible;

enabledboolean

Enables the column menu item remove sort.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

iconstring

Sets the icon of the column menu item remove sort.

Default value

"smart-icon-cancel-circled"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemRemoveSort.icon;

labelstring

Sets the label of the column menu item remove sort.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemRemoveSort.label;

Get the columnMenuItemRemoveSort property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemRemoveSort = grid.columnMenu.dataSource.columnMenuItemRemoveSort;

columnMenuItemFilterobject

Describes the settings of the column menu item filter.

commandstring

Sets the command of the column menu item filter.

Default value

"addFilterCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemFilter.command;

visiblestring

Sets the visibility of the column menu item filter.

Default value

"auto"

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemFilter.visible;

enabledboolean

Enables the column menu item filter.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

iconstring

Sets the icon of the column menu item filter.

Default value

"smart-icon-add-filter"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemFilter.icon;

labelstring

Sets the label of the column menu item filter.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemFilter.label;

Get the columnMenuItemFilter property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemFilter = grid.columnMenu.dataSource.columnMenuItemFilter;

columnMenuItemRemoveFilterobject

Describes the settings of the column menu item remove filter.

commandstring

Sets the command of the column menu item remove filter.

Default value

"removeFilterCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.command;

enabledboolean

Enables the column menu item remove filter.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visiblestring

Sets the visibility of the column menu item remove filter.

Default value

"auto"

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.visible;

iconstring

Sets the icon of the column menu item remove filter.

Default value

"smart-icon-cancel-circled-outline"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.icon;

labelstring

Sets the label of the column menu item remove filter.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemRemoveFilter.label;

Get the columnMenuItemRemoveFilter property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemRemoveFilter = grid.columnMenu.dataSource.columnMenuItemRemoveFilter;

columnMenuItemGroupByobject

Describes the settings of the column menu item group by.

commandstring

Sets the command of the column menu item group by.

Default value

"groupByCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemGroupBy.command;

enabledboolean

Enables the column menu item group by.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visiblestring

Sets the visibility of the column menu item group by.

Default value

"auto"

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemGroupBy.visible;

iconstring

Sets the icon of the column menu item group by.

Default value

"smart-icon-group-by"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemGroupBy.icon;

labelstring

Sets the label of the column menu item group by.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemGroupBy.label;

Get the columnMenuItemGroupBy property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemGroupBy = grid.columnMenu.dataSource.columnMenuItemGroupBy;

columnMenuItemRemoveGroupByobject

Describes the settings of the column menu item group by.

commandstring

Sets the command of the column menu item group by.

Default value

"groupByCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.command;

enabledboolean

Enables the column menu item group by.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visiblestring

Sets the visibility of the column menu item group by.

Default value

"auto"

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.visible;

iconstring

Sets the icon of the column menu item group by.

Default value

"smart-icon-group-by"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.icon;

labelstring

Sets the label of the column menu item group by.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy.label;

Get the columnMenuItemRemoveGroupBy property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemRemoveGroupBy = grid.columnMenu.dataSource.columnMenuItemRemoveGroupBy;

columnMenuItemHideobject

Describes the settings of the column menu item hide.

commandstring

Sets the command of the column menu item hide.

Default value

"hideColumnCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemHide.command;

enabledboolean

Enables the column menu item hide.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visibleboolean

Sets the visibility of the column menu item hide.

Default value

false

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnMenu.dataSource.columnMenuItemHide.visible;

iconstring

Sets the icon of the column menu item hide.

Default value

"smart-icon-hide"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemHide.icon;

labelstring

Sets the label of the column menu item hide.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemHide.label;

Get the columnMenuItemHide property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemHide = grid.columnMenu.dataSource.columnMenuItemHide;

columnMenuItemDeleteobject

Describes the settings of the column menu item delete.

commandstring

Sets the command of the column menu item delete.

Default value

"deleteColumnCommand"

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.columnMenu.dataSource.columnMenuItemDelete.command;

enabledboolean

Enables the column menu item delete.

Default value

true

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

visibleboolean

Sets the visibility of the column menu item delete.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

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

iconstring

Sets the icon of the column menu item delete.

Default value

"smart-icon-delete"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.columnMenu.dataSource.columnMenuItemDelete.icon;

labelstring

Sets the label of the column menu item delete.

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.columnMenu.dataSource.columnMenuItemDelete.label;

Get the columnMenuItemDelete property.

 const grid = document.querySelector('smart-grid');
 let columnMenuItemDelete = grid.columnMenu.dataSource.columnMenuItemDelete;

Get the dataSource property.

 const grid = document.querySelector('smart-grid');
 let dataSource = grid.columnMenu.dataSource;

visibleboolean

Gets the visibility of the column menu. Returns true, when the column menu is visible.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

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

Get the visible property.

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

enabledboolean

Sets or gets whether the column menu is enabled. If the value is false, the column menu will not be displayed, when user hovers the column.

Default value

false

Example

Set the enabled property by using the HTML Element's instance.

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

Get the enabled property.

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

widthnumber

Sets the width of the column menu.

Default value

250

Get the width property.

 const grid = document.querySelector('smart-grid');
 let width = grid.columnMenu.width;

heightnumber | null

Sets the height of the column menu.

Get the height property.

 const grid = document.querySelector('smart-grid');
 let height = grid.columnMenu.height;

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' } ] });

chartingobject

Sets the Grid Charting Data Visualization.

enabledboolean

Sets or gets whether charting is enabled.

Default value

false

Example

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;

heightany

Sets or gets the dialog height.

Default value

400

Example

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;

widthany

Sets or gets the dialog width.

Default value

400

Example

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;

leftany

Sets or gets the dialog Left position.

Default value

center

Example

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;

topany

Sets or gets the dialog Top position.

Default value

center

Example

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

true

Example

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

false

Example

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

false

Example

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

false

Example

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.

headerboolean

Sets whether the columns header will be exported.

Default value

true

Get 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;

pageOrientationstring

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

false

Get 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

Default value

false

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

Default value

false

Get the viewEnd property.

 const grid = document.querySelector('smart-grid');
 let viewEnd = grid.dataExport.viewEnd;

dataSourceDataAdapter

Sets the grid's data source. The value of dataSource can be an instance of Smart.DataAdapter.

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.

allowRowHeaderEditboolean

Enables row header cells editing.

Default value

false

Example

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

false

Example

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

false

Example

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

false

Example

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.

Properties

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.

Properties

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.

Properties

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

false

Get 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

commandBarAddRowCommand

Get 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;

visibleany

Makes the add row button visible.

Default value

false

Get 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

commandBarDeleteRowCommand

Get 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;

visibleany

Makes the delete row button visible.

Default value

false

Get 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

commandBarBatchSaveCommand

Get 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;

visibleany

Makes the save button visible.

Default value

true

Get 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

commandBarBatchRevertCommand

Get 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;

visibleany

Makes the revert button visible.

Default value

true

Get 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

false

Get 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

false

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

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.

commandany

Default value

commandColumnMenuCommand

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.editing.commandColumn.dataSource.commandColumnMenu.command;

iconstring

Default value

"smart-icon-menu"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.editing.commandColumn.dataSource.commandColumnMenu.icon;

labelstring

Default value

"{{messages}}"

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.editing.commandColumn.dataSource.commandColumnMenu.label;

visibleany

Default value

false

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.editing.commandColumn.dataSource.commandColumnMenu.visible;

Get the commandColumnMenu property.

 const grid = document.querySelector('smart-grid');
 let commandColumnMenu = grid.editing.commandColumn.dataSource.commandColumnMenu;

commandColumnEditobject

Describes the settings of the command column's button for editing rows.

commandany

Sets the name of the edit row command.

Default value

commandColumnEditCommand

Get 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;

visibleany

Makes the edit row button visible.

Default value

auto

Get 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

commandColumnDeleteCommand

Get 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;

visibleany

Makes the delete row button visible.

Default value

true

Get 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

commandColumnUpdateCommand

Get 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;

visibleany

Makes the update row button visible.

Default value

auto

Get 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

commandColumnCancelCommand

Get 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;

visibleany

Makes the cancel button visible.

Default value

auto

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

commandany

Sets the name of the row menu command.

Default value

""

Get the command property.

 const grid = document.querySelector('smart-grid');
 let command = grid.editing.commandColumn.dataSource.commandColumnRowMenu.command;

iconstring

A class name to be applied to the custom button's icon.

Default value

"smart-icon-ellipsis"

Get the icon property.

 const grid = document.querySelector('smart-grid');
 let icon = grid.editing.commandColumn.dataSource.commandColumnRowMenu.icon;

labelstring

The label of the row menu button.

Default value

""

Get the label property.

 const grid = document.querySelector('smart-grid');
 let label = grid.editing.commandColumn.dataSource.commandColumnRowMenu.label;

visibleany

Makes the row menu button visible.

Default value

false

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.editing.commandColumn.dataSource.commandColumnRowMenu.visible;

Get the commandColumnRowMenu property.

 const grid = document.querySelector('smart-grid');
 let commandColumnRowMenu = grid.editing.commandColumn.dataSource.commandColumnRowMenu;

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;

visibleany

Makes the custom button visible.

Default value

false

Get 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

false

Get 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;

heightany

Sets the height of the edit dialog.

Default value

auto

Get the height property.

 const grid = document.querySelector('smart-grid');
 let height = grid.editing.dialog.height;

widthany

Sets the width of the edit dialog.

Default value

auto

Get the width property.

 const grid = document.querySelector('smart-grid');
 let width = grid.editing.dialog.width;

leftany

Sets the 'left' css property to the dialog.

Default value

center

Get the left property.

 const grid = document.querySelector('smart-grid');
 let left = grid.editing.dialog.left;

topany

Sets the 'top' css property to the dialog.

Default value

center

Get the top property.

 const grid = document.querySelector('smart-grid');
 let top = grid.editing.dialog.top;

enabledboolean

Enables dialog editing option.

Default value

false

Example

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

false

Example

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;

heightany

Sets the height of the dialog.

Default value

auto

Get the height property.

 const grid = document.querySelector('smart-grid');
 let height = grid.editing.addDialog.height;

widthany

Sets the width of the dialog.

Default value

auto

Get the width property.

 const grid = document.querySelector('smart-grid');
 let width = grid.editing.addDialog.width;

leftany

Sets the 'left' css property to the dialog.

Default value

center

Get the left property.

 const grid = document.querySelector('smart-grid');
 let left = grid.editing.addDialog.left;

topany

Sets the 'top' css property to the dialog.

Default value

center

Get the top property.

 const grid = document.querySelector('smart-grid');
 let top = grid.editing.addDialog.top;

enabledboolean

Enables the add dialog option.

Default value

false

Example

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

false

Example

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;

heightany

Sets the height of the dialog.

Default value

auto

Get the height property.

 const grid = document.querySelector('smart-grid');
 let height = grid.editing.deleteDialog.height;

widthany

Sets the width of the dialog.

Default value

auto

Get the width property.

 const grid = document.querySelector('smart-grid');
 let width = grid.editing.deleteDialog.width;

leftany

Sets the 'left' css property to the dialog.

Default value

center

Get the left property.

 const grid = document.querySelector('smart-grid');
 let left = grid.editing.deleteDialog.left;

topany

Sets the 'top' css property to the dialog.

Default value

center

Get the top property.

 const grid = document.querySelector('smart-grid');
 let top = grid.editing.deleteDialog.top;

enabledboolean

Enables the delete dialog option.

Default value

false

Example

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

false

Example

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

false

Example

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

Get the filter property.

 const grid = document.querySelector('smart-grid');
 let filter = grid.filtering.filter;

filterRowobject

(In Development)Describes the filter row's settings.

visibleboolean

Makes the filter row visible.

Default value

false

Example

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

false

Example

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

300

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

visibleboolean

Sets the visibility of the filter menu.

Default value

true

Example

Set the visible property by using the HTML Element's instance.

 const grid = document.querySelector('smart-grid');
 grid.filtering.filterMenu.visible = true;

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.filtering.filterMenu.visible;

buttonsstring[]

Sets the button text of the filter menu.

Get the buttons property.

 const grid = document.querySelector('smart-grid');
 let buttons = grid.filtering.filterMenu.buttons;

dataSourceany

Sets the filter menu datasource.

Get the dataSource property.

 const grid = document.querySelector('smart-grid');
 let dataSource = grid.filtering.filterMenu.dataSource;

widthnumber

Sets the width of the filter menu.

Default value

250

Get the width property.

 const grid = document.querySelector('smart-grid');
 let width = grid.filtering.filterMenu.width;

heightnumber

Sets the height of the filter menu.

Default value

200

Get the height property.

 const grid = document.querySelector('smart-grid');
 let height = grid.filtering.filterMenu.height;

Get the filterMenu property.

 const grid = document.querySelector('smart-grid');
 let filterMenu = grid.filtering.filterMenu;

filterBuilderobject

(In Development)Describes the settings for the filter builder.

Properties

visibleboolean

Sets the visibility of the filter builder.

Default value

false

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

enabledboolean

Enables grouping.

Default value

false

Example

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

false

Example

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

false

Example

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;

groupRowHeightany

Sets the group row height.

Default value

50

Get 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

16

Get the toggleButtonIndent property.

 const grid = document.querySelector('smart-grid');
 let toggleButtonIndent = grid.grouping.toggleButtonIndent;

groupIndentnumber

Sets the indent of the group.

Default value

16

Get 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

false

Example

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

false

Get the allowColumnDragDrop property.

 const grid = document.querySelector('smart-grid');
 let allowColumnDragDrop = grid.grouping.groupBar.allowColumnDragDrop;

allowColumnCloseButtonsboolean

Enables column close buttons.

Default value

true

Get 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;

groupPanelobject

Describes the group panel's settings.

Properties

visibleboolean

Makes the group panel visible.

Default value

false

Example

Set the visible property by using the HTML Element's instance.

 const grid = document.querySelector('smart-grid');
 grid.grouping.groupPanel.visible = true;

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.grouping.groupPanel.visible;

Get the groupPanel property.

 const grid = document.querySelector('smart-grid');
 let groupPanel = grid.grouping.groupPanel;

summaryRowobject

Describes the group summary row's settings.

Properties

inlineboolean

Enables inline display of the group summary row.

Default value

true

Example

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

true

Example

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\"",
    "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",
    "commandBarAddRow": "Add",
    "commandBarDeleteRow": "Delete",
    "commandBarBatchRevert": "Revert",
    "commandBarBatchSave": "Save",
    "commandColumnEdit": "Edit",
    "commandColumnDelete": "Delete",
    "commandColumnCancel": "Cancel",
    "commandColumnUpdate": "Update",
    "commandColumnMenu": "",
    "addNewRow": "Click here to add a new row",
    "dialogEditHeader": "Edit {{value}}",
    "dialogAddButtonConfirm": "ADD",
    "dialogAddButtonCancel": "CANCEL",
    "dialogEditButtonConfirm": "OK",
    "dialogEditButtonCancel": "CANCEL",
    "dialogDeleteButtonConfirm": "DELETE",
    "dialogDeleteButtonCancel": "CANCEL",
    "dialogAddHeader": "Add Row",
    "dialogDeleteHeader": "Delete Row",
    "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": "$",
      "currencySymbolPosition": "before",
      "decimalSeparator": ".",
      "thousandsSeparator": ","
    }
  }
}

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.

onRender{(): void}

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

false

Example

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.

Properties

enabledboolean

Enables spinner pagination.

Default value

false

Get the enabled property.

 const grid = document.querySelector('smart-grid');
 let enabled = grid.paging.spinner.enabled;

stepnumber

Sets the step of page

Default value

1

Get 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

10

Get the pageSize property.

 const grid = document.querySelector('smart-grid');
 let pageSize = grid.paging.pageSize;

pageIndexnumber

Sets the start page.

Default value

0

Get the pageIndex property.

 const grid = document.querySelector('smart-grid');
 let pageIndex = grid.paging.pageIndex;

pagerobject

Describes the pager settings.

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

false

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

Properties

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

false

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

position"near" | "far" | "both"

Sets the navigation buttons position.

Default value

"both"

Get the position property.

 const grid = document.querySelector('smart-grid');
 let position = grid.pager.navigationButtons[0].position;

prevNextButtonsobject

Describes the settings about buttons 'previous page' and 'next page'.

Properties

visibleboolean

Sets the visibility of 'previous page' and 'next page' buttons.

Default value

true

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.pager.navigationButtons[0].prevNextButtons[0].visible;

Get the prevNextButtons property.

 const grid = document.querySelector('smart-grid');
 let prevNextButtons = grid.pager.navigationButtons[0].prevNextButtons;

firstLastButtonsobject

Describes the settings about buttons 'first page' and 'last page'.

Properties

visibleboolean

Sets the visibility of 'first page' and 'last page' buttons.

Default value

true

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.pager.navigationButtons[0].firstLastButtons[0].visible;

Get the firstLastButtons property.

 const grid = document.querySelector('smart-grid');
 let firstLastButtons = grid.pager.navigationButtons[0].firstLastButtons;

labelsobject

Describes the labels settings for navigation buttons.

Properties

visibleboolean

Sets the visibility of labels for navigation buttons.

Default value

false

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.pager.navigationButtons[0].labels[0].visible;

Get the labels property.

 const grid = document.querySelector('smart-grid');
 let labels = grid.pager.navigationButtons[0].labels;

Get the navigationButtons property.

 const grid = document.querySelector('smart-grid');
 let navigationButtons = grid.pager.navigationButtons;

navigationInputobject

Describes the settings about navigation input option.

Properties

position"near" | "far"

Sets the position of navigation input option.

Default value

"far"

Get the position property.

 const grid = document.querySelector('smart-grid');
 let position = grid.pager.navigationInput.position;

visibleboolean

Sets the visibility of navigation input option.

Default value

false

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.pager.navigationInput.visible;

Get the navigationInput property.

 const grid = document.querySelector('smart-grid');
 let navigationInput = grid.pager.navigationInput;

pageIndexSelectorsobject

Describes the settings for the numeric page buttons.

Properties

visibleboolean

Sets the visibility of numeric page buttons.

Default value

true

Get 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

10

Get 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

false

Example

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

false

Example

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

200

Get 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

true

Example

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;

heightany

Sets the height of the dialog.

Default value

300

Get the height property.

 const grid = document.querySelector('smart-grid');
 let height = grid.rowDetail.dialog.height;

widthany

Sets the width of the dialog.

Default value

360

Get the width property.

 const grid = document.querySelector('smart-grid');
 let width = grid.rowDetail.dialog.width;

leftany

Sets the Left position of the dialog.

Default value

center

Get the left property.

 const grid = document.querySelector('smart-grid');
 let left = grid.rowDetail.dialog.left;

topany

Sets the Top position of the dialog.

Default value

center

Get 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

false

Get 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

true

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.columnHeader.visible;

groupHeaderobject

Describes the settings for the group header.

Properties

visibleboolean

Sets the visibility of the group header.

Default value

false

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

Properties

visibleboolean

Sets the header visibility.

Default value

false

Get 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;

footerobject

Describes the footer settings of the grid.

Properties

visibleboolean

Sets the footer visibility.

Default value

false

Get the visible property.

 const grid = document.querySelector('smart-grid');
 let visible = grid.footer.visible;

templatestring | HTMLTemplateElement

Sets a template for the footer.

Default value

""

Get the template property.

 const grid = document.querySelector('smart-grid');
 let template = grid.footer.template;

rowsSmart.Grid.Row[]

The rows property is used to describe all rows displayed in the grid.

allowToggleboolean

Sets or gets the row can be expanded or collapsed.

Default value

true

Example

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

true

Example

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

Sets or gets the row can be selected.

Default value

true

Example

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

true

Example

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

true

Example

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

null

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

1

Example

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

false

Get 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

false

Example

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

1

Get 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

false

Example

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

200

Get 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

false

Get 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

30

Get the height property.

 const grid = document.querySelector('smart-grid');
 let height = grid.rows[0].height;

indexnumber

Gets the row's bound index.

Default value

-1

Get 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

false

Get 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

100

Get 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

30

Get 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

false

Get 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

false

Example

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

false

Get 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

true

Example

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

-1

Get the visibleIndex property.

 const grid = document.querySelector('smart-grid');
 let visibleIndex = grid.rows[0].visibleIndex;

selectionobject

Describes the selection settings.

enabledboolean

Enables the selection option.

Default value

false

Example

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

false

Example

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

false

Example

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

true

Example

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

false

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

true

Example

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

false

Example

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

false

Example

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

false

Example

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

true

Example

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

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

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): 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


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();

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();

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();

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.

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.

Default value

"var(--smart-bar-height)"

Sets filter row height.

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.