Grid JAVASCRIPT UI Component 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

appearanceobject

An object containing settings related to the grid's appearance.

Properties

alternationStart

alternationEnd

alternationCount

allowColumnStickyPosition

allowHover

allowHeaderHover

allowRowToggleAnimation

allowRowDetailToggleAnimation

allowSortAnimation

allowColumnLabelAnimation

allowColumnMenuAnimation

allowColumnSortButtonAnimation

allowColumnActionButtonAnimation

allowColumnFilterButtonAnimation

autoShowColumnSortButton

autoShowColumnActionButton

autoShowColumnFilterButton

autoGenerateRowLabelMode

autoGenerateColumnLabelMode

displayLoadingIndicator

loadingIndicatorPlaceholder

placeholder

sortAnimationDuration

showRowHeader

showRowHeaderNumber

showRowHeaderEditIcon

showRowHeaderSelectIcon

showRowHeaderFocusIcon

showRowHeaderDragIcon

showColumnHeaderLines

showColumnLines

showRowLines

showFilterColumnBackground

showSortColumnBackground

showFrozenColumnBackground

showFrozenRowBackground

showColumnSortButton

showColumnFilterButton

showColumnDescriptionButton

showColumnIcon

showColumnCustomButton

showColumnActionButton

showTooltips

showHorizontalScrollBarOnFixedColumns

showVerticalScrollBarOnFixedColumns

alternationStartnumber

Starting row index of alternating colors.

Default value

Try a demo showcasing the alternationStart property.

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

Try a demo showcasing the alternationEnd property.

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

Try a demo showcasing the alternationCount property.

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

Try a demo showcasing the allowRowToggleAnimation property.

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

Try a demo showcasing the allowRowDetailToggleAnimation property.

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

Try a demo showcasing the allowSortAnimation property.

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

Try a demo showcasing the allowColumnLabelAnimation property.

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

Try a demo showcasing the allowColumnActionButtonAnimation property.

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;

autoGenerateRowLabelMode"number" | "letter"

Generates labels as 'numbers' or 'letters'. This property affects the rendering of the row header.

Default value

"number"

Example

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

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

 grid.appearance.autoGenerateRowLabelMode = 'number';

Get the autoGenerateRowLabelMode property.

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

 let autoGenerateRowLabelMode = grid.appearance.autoGenerateRowLabelMode;

autoGenerateColumnLabelMode"number" | "letter"

Generates labels as 'numbers' or 'letters. This property affects the rendering of the column header.

Default value

"letter"

Example

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

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

 grid.appearance.autoGenerateColumnLabelMode = 'number';

Get the autoGenerateColumnLabelMode property.

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

 let autoGenerateColumnLabelMode = grid.appearance.autoGenerateColumnLabelMode;

displayLoadingIndicatorboolean

Sets the visibility of the loading indicator. This is the Loading... image displayed in the Grid while loading data.

Default value

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

Try a demo showcasing the showRowHeader property.

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

Try a demo showcasing the showRowHeaderNumber property.

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

Try a demo showcasing the showRowHeaderEditIcon property.

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

Try a demo showcasing the showRowHeaderSelectIcon property.

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

Try a demo showcasing the showRowHeaderFocusIcon property.

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;

showRowHeaderDragIconboolean

Shows drag icon on the row header.

Default value

false

Example

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

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

 grid.appearance.showRowHeaderDragIcon = true;

Get the showRowHeaderDragIcon property.

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

 let showRowHeaderDragIcon = grid.appearance.showRowHeaderDragIcon;

showColumnHeaderLinesboolean

Shows column header lines.

Default value

true

Try a demo showcasing the showColumnHeaderLines property.

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

Try a demo showcasing the showColumnLines property.

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

Try a demo showcasing the showRowLines property.

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

Try a demo showcasing the showFrozenColumnBackground property.

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

Try a demo showcasing the showFrozenRowBackground property.

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

Try a demo showcasing the showColumnSortButton property.

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

Try a demo showcasing the showColumnFilterButton property.

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.

Properties

allowColumnAutoSizeOnDoubleClick

allowRowAutoSizeOnDoubleClick

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;

allowRowReorderboolean

Determines whether row reorder is enabled.

Default value

false

Example

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

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

 grid.behavior.allowRowReorder = true;

Get the allowRowReorder property.

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

 let allowRowReorder = grid.behavior.allowRowReorder;

allowColumnReorderboolean

Determines whether column reorder is enabled.

Default value

false

Example

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

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

 grid.behavior.allowColumnReorder = true;

Get the allowColumnReorder property.

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

 let allowColumnReorder = grid.behavior.allowColumnReorder;

columnResizeMode"none" | "split" | "growAndShrink"

Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size

Default value

"none"

Try a demo showcasing the columnResizeMode property.

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"

Try a demo showcasing the rowResizeMode property.

Example

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

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

 grid.behavior.rowResizeMode = 'split';

Get the rowResizeMode property.

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

 let rowResizeMode = grid.behavior.rowResizeMode;

layoutobject

An object containing settings related to the grid's layout.

Properties

allowCellsWrap

autoGenerateColumnWidth

allowCellsWrapboolean

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

Default value

false

Try a demo showcasing the allowCellsWrap property.

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;

autoGenerateColumnWidthstring | number | null

Sets the width of the auto-generated Grid columns.

Example

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

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

 grid.layout.autoGenerateColumnWidth = 200;

Get the autoGenerateColumnWidth property.

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

 let autoGenerateColumnWidth = grid.layout.autoGenerateColumnWidth;

columnWidthstring | number | null

Sets the width of the Grid columns.

Example

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

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

 grid.layout.columnWidth = 200;

Get the columnWidth property.

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

 let columnWidth = grid.layout.columnWidth;

columnHeightstring | number | null

Sets the height of the Grid columns.

Example

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

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

 grid.layout.columnHeight = 60;

Get the columnHeight property.

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

 let columnHeight = grid.layout.columnHeight;

columnMinHeightnumber

Sets the minimum height of the Grid columns.

Default value

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

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;

rowHeightstring | number | null

Sets the height of the Grid rows. The property can be set to null, auto or a number.

Example

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

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

 grid.layout.rowHeight = 60;

Get the rowHeight property.

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

 let rowHeight = grid.layout.rowHeight;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-grid locale='de'></smart-grid>

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

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

 grid.locale = 'fr';

Get the locale property.

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

 let locale = grid.locale;

clipboardobject

The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..

Properties

enabled

autoFillMode

onPasteValue

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.

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 | null

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;

dataTypestring

Sets or gets the column's data type.

Default value

"string"

Example

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

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

 grid.columns[0].dataType = 'number';

Get the dataType property.

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

 let dataType = grid.columns[0].dataType;

displayFieldstring

Sets or gets the column's data source bound field which will be displayed to the user. When the property is not set, it is equal to the 'dataField'.

Default value

Example

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

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

 grid.columns[0].displayField = 'firstName';

Get the displayField property.

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

 let displayField = grid.columns[0].displayField;

elementHTMLElement

Gets the HTML Element. The property returns null when the Column is not in the View.

Get the element property.

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

 let element = grid.columns[0].element;

editorany

Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'numberInput', 'checkBox', 'deteTimePicker', 'timeInput', 'dateInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'onInit' and 'onRender' callback functions.

Example

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

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

 grid.columns[0].editor = input;

Get the editor property.

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

 let editor = grid.columns[0].editor;

freeze"near" | "far" | "true" | "false"

Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).

Default value

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;

iconstring

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

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;

widthstring | number

Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.

Default value

Example

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

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

 grid.columns[0].width = 100;

Get the width property.

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

 let width = grid.columns[0].width;

templateany

Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells. Built-in values are: 'checkBox', 'url', 'email',

Default value

Get the template property.

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

 let template = grid.columns[0].template;

validationRules[] | null

Sets or gets the column's validation rules. The expected value is an Array of Objects. Each object should have a 'type' property that can be set to 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The 'value' property should be set, too. For validation rule types 'required', 'requiredTrue' and 'null' you can skip the 'value' property. Optional property is 'message', which determines the error message.

Example

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

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

 grid.columns[0].validationRules = {type: 'email'};

Get the validationRules property.

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

 let validationRules = grid.columns[0].validationRules;

verticalAlign"top" | "bottom" | "center"

Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'

Default value

"center"

Example

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

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

 grid.columns[0].verticalAlign = 'bottom';

Get the verticalAlign property.

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

 let verticalAlign = grid.columns[0].verticalAlign;

summary"sum" | "min" | "max" | "avg" | "count" | "median" | "stdev" | "stdevp" | "var" | "varp"

Sets or gets the column summary.

Default value

"sum"

Example

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

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

 grid.columns[0].summary = 'avg';

Get the summary property.

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

 let summary = grid.columns[0].summary;

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.

Properties

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.

Properties

columnMenuCustomizeType

columnMenuItemRename

columnMenuItemEditDescription

columnMenuItemDuplicate

columnMenuItemInsertLeft

columnMenuItemInsertRight

columnMenuItemSortAsc

columnMenuItemSortDesc

columnMenuItemRemoveSort

columnMenuItemFilter

columnMenuItemRemoveFilter

columnMenuItemGroupBy

columnMenuItemRemoveGroupBy

columnMenuItemHide

columnMenuItemDelete

columnMenuCustomizeTypeobject

Describes the settings of the column menu customize type

Properties

commandstring

Sets the command 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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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.

Properties

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;

Try a demo showcasing the columnGroups property.

Example about columnGroups
const grid = new smartGrid('#grid', {
	dataSource: new smartDataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	columnGroups: [{ label: 'Name', align: 'center', name: 'name'}],
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});

conditionalFormatting{ column?: string; condition?: string; firstValue?: number; fontFamily?: string; fontSize?: string; highlight?: string; secondValue?: number; text?: string; }[]

Sets or gets details about conditional formatting to be applied to the Grid's cells.

Properties

columnstring

The data field of a numeric column to format. Set 'all' to format all numeric columns.

Default value

"all"

Get the column property.

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

 let column = grid.conditionalFormatting.column;

condition"between" | "equal" | "greaterThan" | "lessThan" | "notEqual"

The formatting condition.

Default value

"lessThan"

Get the condition property.

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

 let condition = grid.conditionalFormatting.condition;

firstValuenumber

The value to compare by. When condition is 'between', this is the start (from) value.

Default value

Get the firstValue property.

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

 let firstValue = grid.conditionalFormatting.firstValue;

fontFamilystring

The fontFamily to apply to formatted cells.

Default value

Get the fontFamily property.

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

 let fontFamily = grid.conditionalFormatting.fontFamily;

fontSizestring

The fontSize to apply to formatted cells.

Default value

"The default fontSize as set in CSS"

Get the fontSize property.

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

 let fontSize = grid.conditionalFormatting.fontSize;

highlightstring

The background color to apply to formatted cells.

Default value

"The default backgroundColor as set in CSS"

Get the highlight property.

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

 let highlight = grid.conditionalFormatting.highlight;

secondValuenumber

When condition is 'between', this is the end (to) value. Otherwise, this value is not used.

Default value

Get the secondValue property.

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

 let secondValue = grid.conditionalFormatting.secondValue;

textstring

The text color to apply to formatted cells.

Default value

"The default color as set in CSS"

Get the text property.

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

 let text = grid.conditionalFormatting.text;

Try a demo showcasing the conditionalFormatting property.

Example

Set the conditionalFormatting property.

 <smart-grid conditional-formatting='{ column: 'quantity', condition: 'greaterThan', firstValue: 8, text: '#6AA84F' }, { column: 'quantity', condition: 'lessThan', firstValue: 3, text: '#CC0000' }'></smart-grid>

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

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

 grid.conditionalFormatting = { column: 'price', condition: 'between', firstValue: 3, secondValue: 5, fontFamily: 'Courier New', text: '#0000FF' }, { column: 'total', condition: 'greaterThan', firstValue: 25, fontSize: '14px', text: '#FFFFFF', highlight: '#6AA84F' };

Get the conditionalFormatting property.

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

 let conditionalFormatting = grid.conditionalFormatting;

chartingobject

Sets the Grid Charting Data Visualization.

Properties

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.

Properties

headerstring

Sets or gets the dialog header.

Default value

"{{message}}"

Example

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

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

 grid.charting.dialog.header = 'Dialog';

Get the header property.

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

 let header = grid.charting.dialog.header;

heightnumber

Sets or gets the dialog height.

Default value

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;

widthnumber

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;

leftstring | number

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;

topstring | number

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;

Try a demo showcasing the charting property.

checkBoxesobject

Sets the TreeGrid checkboxes.

Properties

visible

hasThreeStates

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;

Try a demo showcasing the checkBoxes property.

dataExportobject

Sets the Grid Data Export options.

Properties

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;

pageOrientation"landscape" | "portrait"

Sets the page orientation, when exporting to PDF.

Default value

"portrait"

Get the pageOrientation property.

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

 let pageOrientation = grid.dataExport.pageOrientation;

expandCharstring

Sets the expand char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.

Default value

"+"

Get the expandChar property.

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

 let expandChar = grid.dataExport.expandChar;

collapseCharstring

Sets the collapse char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.

Default value

"-"

Get the collapseChar property.

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

 let collapseChar = grid.dataExport.collapseChar;

viewboolean

Exports only the visible data of the Grid.

Default value

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

Get the viewStart property.

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

 let viewStart = grid.dataExport.viewStart;

viewEndnumber | null

Determines the end row index that will be exported or printed. 'view' should be set to true

Get the viewEnd property.

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

 let viewEnd = grid.dataExport.viewEnd;

rowIds(string | number)[] | null

An array of row ids that denotes the rows to export.

Get the rowIds property.

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

 let rowIds = grid.dataExport.rowIds;

dataSourceany

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

Try a demo showcasing the dataSource property.

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

dataSourceSettingsobject

Sets the grid's data source settings when the dataSource property is set to an Array or URL.

Properties

virtualDataSourceOnExpand

autoGenerateColumnsboolean

Sets or gets whether a column will be auto-generated.

Default value

false

Example

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

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

 grid.dataSourceSettings[0].autoGenerateColumns = false;

Get the autoGenerateColumns property.

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

 let autoGenerateColumns = grid.dataSourceSettings[0].autoGenerateColumns;

childrenDataFieldstring

Sets or gets a children data field like 'children', 'items' in the data source. When this property is set, the dataAdapter will look for this data field when looping through the items. If it is found a hierarchical data source would be created.

Default value

Example

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

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

 grid.dataSourceSettings[0].childrenDataField = 'children';

Get the childrenDataField property.

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

 let childrenDataField = grid.dataSourceSettings[0].childrenDataField;

rootstring

Sets or gets the XML binding root.

Default value

Example

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

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

 grid.dataSourceSettings[0].root = 'children';

Get the root property.

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

 let root = grid.dataSourceSettings[0].root;

recordstring

Sets or gets the XML binding record.

Default value

Example

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

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

 grid.dataSourceSettings[0].record = 'children';

Get the record property.

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

 let record = grid.dataSourceSettings[0].record;

groupBystring[]

Sets or gets the data fields to group by.

Default value

[]

Example

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

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

 grid.dataSourceSettings[0].groupBy = true;

Get the groupBy property.

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

 let groupBy = grid.dataSourceSettings[0].groupBy;

dataFields{name: string, dataType: string}[] | string[]

Sets or gets the data fields which decribe the loaded data and data type. Ex: ['id: number', 'firstName: string', 'lastName: string']

Properties

name

map

dataType

namestring

Sets the dataField name.

Default value

Get the name property.

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

 let name = grid.dataSourceSettings[0].dataFields[0].name;

mapstring

Sets the dataField mapping path. For nested mapping, use '.'. Example: 'name.firstName'.

Default value

Get the map property.

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

 let map = grid.dataSourceSettings[0].dataFields[0].map;

dataType"string" | "date" | "boolean" | "number" | "array" | "any"

Sets the dataField type.

Default value

"string"

Get the dataType property.

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

 let dataType = grid.dataSourceSettings[0].dataFields[0].dataType;

Example

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

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

 grid.dataSourceSettings[0].dataFields = [id: number];

Get the dataFields property.

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

 let dataFields = grid.dataSourceSettings[0].dataFields;

dataSourceType"array" | "json" | "xml" | "csv" | "tsv"

Sets or gets whether the data source type.

Default value

"array"

Example

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

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

 grid.dataSourceSettings[0].dataSourceType = 'json';

Get the dataSourceType property.

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

 let dataSourceType = grid.dataSourceSettings[0].dataSourceType;

idstring

Sets or gets the dataAdapter's id

Default value

Example

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

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

 grid.dataSourceSettings[0].id = 'uid';

Get the id property.

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

 let id = grid.dataSourceSettings[0].id;

keyDataFieldstring

Sets or gets the key data field to be used for building the hierarchy. It is used in combination with the parentDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'

Default value

Example

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

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

 grid.dataSourceSettings[0].keyDataField = 'uid';

Get the keyDataField property.

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

 let keyDataField = grid.dataSourceSettings[0].keyDataField;

parentDataFieldstring

Sets or gets the parent data field to be used for building the hierarchy. It is used in combination with the keyDataField property. Usually the 'id' field is used as key data field and 'parentId' as parent data field'

Default value

Example

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

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

 grid.dataSourceSettings[0].parentDataField = 'uid';

Get the parentDataField property.

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

 let parentDataField = grid.dataSourceSettings[0].parentDataField;

mapCharstring

Sets the 'mapChar' data field of the record

Default value

"."

Example

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

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

 grid.dataSourceSettings[0].mapChar = 'uid';

Get the mapChar property.

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

 let mapChar = grid.dataSourceSettings[0].mapChar;

virtualDataSourceany

Sets the virtual data source function which is called each time the Grid requests data. Demos using 'virtualDataSource' are available on the Grid demos page.

Get the virtualDataSource property.

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

 let virtualDataSource = grid.dataSourceSettings[0].virtualDataSource;

virtualDataSourceOnExpandany

Sets the virtual data source on expand function. This function is called when we load data on demand in Tree or TreeGrid and virtualDataSource in these components is set, too

Get the virtualDataSourceOnExpand property.

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

 let virtualDataSourceOnExpand = grid.dataSourceSettings[0].virtualDataSourceOnExpand;

Try a demo showcasing the dataSourceSettings property.

Example about dataSource
const grid = new smartGrid('#grid', {
	dataSource: new smartDataAdapter({
	dataSource: [
		{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
		{ "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
		{ "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
		{ "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "ReportsTo": 2, "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
		{ "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "ReportsTo": 2, "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
		{ "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
		{ "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
		{ "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
		{ "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
	],
	id: 'EmployeeID',
	dataFields:
	[
		'EmployeeID: number',
		'ReportsTo: number',
		'FirstName: string',
		'LastName: string',
		'Country: string',
		'City: string',
		'Address: string',
		'Title: string',
		'HireDate: date',
		'BirthDate: date'
	]}),
	
	columns: [
		{ label: 'First Name', dataField: 'FirstName', columnGroup: 'name', width: 200 },
		{ label: 'Last Name', dataField: 'LastName', columnGroup: 'name', width: 200 },
		{ label: 'Title', dataField: 'Title', width: 160 },
		{ label: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
		{ label: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
		{ label: 'Address', dataField: 'Address', width: 250 },
		{ label: 'City', dataField: 'City', width: 120 },
		{ label: 'Country', dataField: 'Country' }
	]
});

editingobject

Describes the grid's editing settings.

Properties

allowRowHeaderEdit

allowColumnHeaderEdit

allowRowHeaderEditboolean

Enables row header cells editing.

Default value

false

Try a demo showcasing the allowRowHeaderEdit property.

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

Try a demo showcasing the allowColumnHeaderEdit property.

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

Try a demo showcasing the batch property.

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.

Properties

commandKeyEdit

commandKeyCancel

commandKeyUpdate

commandKeyEditobject

Describes the edit command key.

Properties

command

key

commandstring

Sets the name of the edit key command.

Default value

"commandKeyEditCommand"

Get the command property.

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

 let command = grid.editing.commandKeys[0].commandKeyEdit.command;

keystring

Sets the key that invokes the edit command.

Default value

"F2"

Get the key property.

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

 let key = grid.editing.commandKeys[0].commandKeyEdit.key;

Get the commandKeyEdit property.

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

 let commandKeyEdit = grid.editing.commandKeys[0].commandKeyEdit;

commandKeyCancelobject

Describes the cancel command key.

Properties

command

key

commandstring

Sets the name of the cancel key command.

Default value

"commandKeyCancelCommand"

Get the command property.

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

 let command = grid.editing.commandKeys[0].commandKeyCancel.command;

keystring

Sets the key that invokes the cancel command.

Default value

"Escape"

Get the key property.

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

 let key = grid.editing.commandKeys[0].commandKeyCancel.key;

Get the commandKeyCancel property.

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

 let commandKeyCancel = grid.editing.commandKeys[0].commandKeyCancel;

commandKeyUpdateobject

Describes the update command key.

Properties

command

key

commandstring

Sets the name of the update key command.

Default value

"commandKeyUpdateCommand"

Get the command property.

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

 let command = grid.editing.commandKeys[0].commandKeyUpdate.command;

keystring

Sets the key that invokes the update command.

Default value

"Enter"

Get the key property.

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

 let key = grid.editing.commandKeys[0].commandKeyUpdate.key;

Get the commandKeyUpdate property.

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

 let commandKeyUpdate = grid.editing.commandKeys[0].commandKeyUpdate;

Get the commandKeys property.

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

 let commandKeys = grid.editing.commandKeys;

commandBarobject

Describes the grid's command bar settings. The command bar is a toolbar or statusbar with tools for saving and reverting edits.

Properties

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.

Properties

commandBarAddRow

commandBarDeleteRow

commandBarBatchSave

commandBarBatchRevert

commandBarAddRowobject

Describes the settings of the command bar's button for adding rows.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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;

Try a demo showcasing the commandBar property.

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.

Properties

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.

Properties

commandColumnMenuobject

Describes the settings of the command column's button displayed in the column's header. By default, this Command opens a Menu with Column Chooser.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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.

Properties

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;

visibleboolean

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.

Properties

commandany

Sets the name of the custom command.

Default value

Get the command property.

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

 let command = grid.editing.commandColumn.dataSource.commandColumnCustom.command;

iconstring

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

Default value

"smart-icon-copy-record"

Get the icon property.

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

 let icon = grid.editing.commandColumn.dataSource.commandColumnCustom.icon;

labelstring

The label of the custom button.

Default value

Get the label property.

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

 let label = grid.editing.commandColumn.dataSource.commandColumnCustom.label;

visibleboolean

Makes the custom button visible.

Default value

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;

Try a demo showcasing the commandColumn property.

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"

Try a demo showcasing the mode property.

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.

Properties

autoCreateboolean

Adds new row by clicking the Enter button, when the focused row is the last row.

Default value

false

Get the autoCreate property.

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

 let autoCreate = grid.editing.addNewRow.autoCreate;

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;

displayMode"row" | "button"

Sets or gets the display mode of the new row action. It could be either 'row' or 'button'.

Default value

"row"

Get the displayMode property.

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

 let displayMode = grid.editing.addNewRow.displayMode;

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;

Try a demo showcasing the addNewRow property.

Get the addNewRow property.

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

 let addNewRow = grid.editing.addNewRow;

addNewColumnobject

Enables users to dynamically add new columns through the User Interface. When the add new column is visible, a '+' is displayed as a last column. Clicking it opens a dialog for adding new columns.

Properties

visible

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.addNewColumn.visible;

Try a demo showcasing the addNewColumn property.

Get the addNewColumn property.

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

 let addNewColumn = grid.editing.addNewColumn;

dialogobject

Describes dialog's editing settings.

Properties

headerstring

Sets the header text of the dialog

Default value

"{{message}}"

Get the header property.

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

 let header = grid.editing.dialog.header;

heightstring | number

Sets the height of the edit dialog.

Default value

auto

Get the height property.

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

 let height = grid.editing.dialog.height;

widthstring | number

Sets the width of the edit dialog.

Default value

auto

Get the width property.

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

 let width = grid.editing.dialog.width;

leftstring | number

Sets the 'left' css property to the dialog.

Default value

center

Get the left property.

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

 let left = grid.editing.dialog.left;

topstring | number

Sets the 'top' css property to the dialog.

Default value

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

Properties

headerstring

Sets the header text of the dialog

Default value

"{{message}}"

Get the header property.

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

 let header = grid.editing.addDialog.header;

heightstring | number

Sets the height of the dialog.

Default value

auto

Get the height property.

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

 let height = grid.editing.addDialog.height;

widthstring | number

Sets the width of the dialog.

Default value

auto

Get the width property.

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

 let width = grid.editing.addDialog.width;

leftstring | number

Sets the 'left' css property to the dialog.

Default value

center

Get the left property.

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

 let left = grid.editing.addDialog.left;

topstring | number

Sets the 'top' css property to the dialog.

Default value

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

Properties

headerstring

Sets the header text of the dialog

Default value

"{{message}}"

Get the header property.

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

 let header = grid.editing.deleteDialog.header;

heightstring | number

Sets the height of the dialog.

Default value

auto

Get the height property.

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

 let height = grid.editing.deleteDialog.height;

widthstring | number

Sets the width of the dialog.

Default value

auto

Get the width property.

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

 let width = grid.editing.deleteDialog.width;

leftstring | number

Sets the 'left' css property to the dialog.

Default value

center

Get the left property.

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

 let left = grid.editing.deleteDialog.left;

topstring | number

Sets the 'top' css property to the dialog.

Default value

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.

Properties

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 DataGrid. Each member of the filter array is an array with two members. The first one is the column dataField to apply the filter to. The second one is the filtering condition. Example: [['firstName', 'contains Andrew or contains Nancy'], ['quantity', '<= 3 and >= 8']]

Get the filter property.

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

 let filter = grid.filtering.filter;

filterRowobject

Describes the filter row's settings.

Properties

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.

Properties

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;

mode"default" | "excel"

Sets the filter menu mode.

Default value

"default"

Get the mode property.

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

 let mode = grid.filtering.filterMenu.mode;

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

visible

height

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;

Try a demo showcasing the filtering property.

groupingobject

Describes the grid's grouping settings.

Properties

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;

renderMode"basic" | "compact" | "advanced"

Sets the group render mode. 'basic' mode renders the group headers without taking into account the indent, groupRowHeight and column label properties. 'compact' mode is the same as basic, but also renders the column labels in the group headers. The default mode is 'advanced', which adds indents to groups that depend on the group level.

Default value

"advanced"

Get the renderMode property.

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

 let renderMode = grid.grouping.renderMode;

groupRowHeightstring | number

Sets the group row height.

Default value

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

Get the toggleButtonIndent property.

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

 let toggleButtonIndent = grid.grouping.toggleButtonIndent;

groupIndentnumber

Sets the indent of the group.

Default value

Get the groupIndent property.

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

 let groupIndent = grid.grouping.groupIndent;

groupBarobject

Describes the group bar's settings.

Properties

visible

allowColumnDragDrop

allowColumnCloseButtons

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;

summaryRowobject

Describes the group summary row's settings.

Properties

inline

visible

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;

Try a demo showcasing the grouping property.

messagesobject

Sets the messages values.

Default value

{
  "en": {
    "invalidColumnProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Column: \"{{type}}\"",
    "invalidRowProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Row\"",
    "invalidCellValue": "Invalid cell value \"{{value}}\", Validation rule: \"{{validationRule}}\"",
    "frozenColumns": "{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.",
    "frozenRows": "{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.",
    "columnGroups": "{{elementType}}: Please, check the initialization of the smartGrid's columns array. The columns in a column group are expected to be siblings in the columns array.",
    "min": "Min: {{value}}",
    "max": "Max: {{value}} ",
    "sum": "Sum: {{value}} ",
    "avg": "Avg: {{value}} ",
    "count": "Count: {{value}} ",
    "pagerFirstButton": "First",
    "pagerLastButton": "Last",
    "pagerPreviousButton": "Previous",
    "pagerNextButton": "Next",
    "pagerNavigateToLabel": "Go to:",
    "pagerPageSizeLabel": "Show:",
    "pagerNavigateToInputPlaceholder": "",
    "pagerEllipsis": "...",
    "pagerSummaryString": "of",
    "pagerSummaryPrefix": "of",
    "pagerSummarySuffix": "",
    "columnMenuCustomizeType": "Customize type",
    "columnMenuItemRename": "Rename",
    "columnMenuItemEditDescription": "Edit description",
    "columnMenuItemDuplicate": "Duplicate",
    "columnMenuItemInsertLeft": "Insert left",
    "columnMenuItemInsertRight": "Insert right",
    "columnMenuItemSortAsc": "Sort {{mode}}",
    "columnMenuItemSortDesc": "Sort {{mode}}",
    "columnMenuItemRemoveSort": "Remove Sort",
    "columnMenuItemFilter": "Filter",
    "columnMenuItemRemoveFilter": "Remove Filter",
    "columnMenuItemGroupBy": "Group by this column",
    "columnMenuItemRemoveGroupBy": "Remove Group",
    "columnMenuItemHide": "Hide",
    "columnMenuItemDelete": "Delete",
    "columnResizeTooltip": "width: {{value}}px",
    "rowResizeTooltip": "height: {{value}}px",
    "commandBarAddRow": "Add",
    "commandBarDeleteRow": "Delete",
    "commandBarBatchRevert": "Revert",
    "commandBarBatchSave": "Save",
    "commandBarFilter": "Filter",
    "commandBarSort": "Sort",
    "commandBarSearch": "Search",
    "commandBarCustomize": "Customize",
    "commandBarGroup": "Group",
    "commandColumnEdit": "Edit",
    "commandColumnDelete": "Delete",
    "commandColumnCancel": "Cancel",
    "commandColumnUpdate": "Update",
    "commandColumnMenu": "",
    "expandRow": "Expand row",
    "collapseRow": "Collapse row",
    "addNewRow": "Click here to add a new row",
    "addNewColumn": "Click here to add a new column",
    "dialogChartHeader": "{{value}} Chart",
    "dialogRowDetailHeader": "Row Id: {{value}}",
    "dialogDescriptionHeader": "Column: {{value}}",
    "dialogRowDetailButtonConfirm": "OK",
    "dialogRowDetailButtonCancel": "CANCEL",
    "dialogEditHeader": "Edit {{value}}",
    "dialogAddButtonConfirm": "ADD",
    "dialogAddButtonCancel": "CANCEL",
    "dialogEditButtonConfirm": "OK",
    "dialogEditButtonCancel": "CANCEL",
    "dialogFilterButtonConfirm": "FILTER",
    "dialogFilterButtonCancel": "CLEAR",
    "dialogDeleteButtonConfirm": "DELETE",
    "dialogDeleteButtonCancel": "CANCEL",
    "dialogEditColumn": "Column: {{value}}",
    "dialogAddColumn": "Add Column",
    "dialogAddHeader": "Add Row",
    "dialogDeleteHeader": "Delete Row",
    "dialogFilterHeader": "Filter by",
    "dialogFilterMinLabel": "Min",
    "dialogFilterMaxLabel": "Max",
    "conditionalFormatting": "Conditional Formatting",
    "groupBarLabel": "Drag a column header here to group by that column",
    "dialogDeleteContent": "Are you sure you want to delete this row?",
    "calendar": {
      "/": "/",
      ":": ":",
      "firstDay": 0,
      "days": {
        "names": [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday"
        ],
        "namesAbbr": [
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat"
        ],
        "namesShort": [
          "Su",
          "Mo",
          "Tu",
          "We",
          "Th",
          "Fr",
          "Sa"
        ]
      },
      "months": {
        "names": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December",
          ""
        ],
        "namesAbbr": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
          ""
        ]
      },
      "AM": [
        "AM",
        "am",
        "AM"
      ],
      "PM": [
        "PM",
        "pm",
        "PM"
      ],
      "eras": [
        {
          "name": "A.D.",
          "start": null,
          "offset": 0
        }
      ],
      "currencySymbol": "$",
      "currency": "USD",
      "currencySymbolPosition": "before",
      "decimalSeparator": ".",
      "thousandsSeparator": ","
    },
    "CONTAINS": "Contains",
    "DOES_NOT_CONTAIN": "Does not contain",
    "ENDS_WITH": "Ends with",
    "EQUAL": "Equal",
    "GREATER_THAN": "Greater than",
    "GREATER_THAN_OR_EQUAL": "Greater than or equal",
    "LESS_THAN": "Less than",
    "LESS_THAN_OR_EQUAL": "Less than or equal",
    "NOT_EQUAL": "Not equal",
    "RANGE": "Range",
    "CLEAR_FILTER": "Clear Filter",
    "STARTS_WITH": "Starts with",
    "addFilter": "+ Add filter",
    "and": "And",
    "apply": "Apply",
    "booleanFirst": "☐",
    "booleanLast": "☑",
    "cancel": "Cancel",
    "CONTAINS_CASE_SENSITIVE": "Contains (case sensitive)",
    "dateFirst": "1",
    "dateLast": "9",
    "DOES_NOT_CONTAIN_CASE_SENSITIVE": "does not contain (case sensitive)",
    "EMPTY": "empty",
    "ENDS_WITH_CASE_SENSITIVE": "ends with (case sensitive)",
    "EQUAL_CASE_SENSITIVE": "equal (case sensitive)",
    "filter": "Filter",
    "customize": "Customize Columns",
    "filteredByMultiple": "{{n}} filters",
    "filteredByOne": "1 filter",
    "filterValuePlaceholder": "Value",
    "find": "Find a field",
    "findInView": "Find in view",
    "firstBy": "Sort by",
    "found": "{{nth}} of {{n}}",
    "from": "from",
    "noFilters": "No filters applied",
    "noResults": "No results",
    "noSorting": "No sorting applied",
    "NOT_EMPTY": "not empty",
    "NOT_NULL": "not null",
    "NULL": "null",
    "numberFirst": "1",
    "numberLast": "9",
    "ok": "OK",
    "or": "Or",
    "pickAnother": "Pick another field to sort by",
    "sort": "Sort",
    "group": "Group",
    "sortedByMultiple": "Sorted by {{n}} fields",
    "sortedByOne": "Sorted by 1 field",
    "STARTS_WITH_CASE_SENSITIVE": "starts with (case sensitive)",
    "stringFirst": "A",
    "stringLast": "Z",
    "thenBy": "then by",
    "where": "Where",
    "collapseAll": "Collapse all",
    "expandAll": "Expand all",
    "noGrouping": "No grouping",
    "groupedByMultiple": "{{n}} groups",
    "groupedByOne": "1 group",
    "firstByGroup": "Group by",
    "pickAnotherGroupBy": "Pick another field to group by",
    "add": "Add condition",
    "all": "All columns",
    "between": "Between",
    "close": "Close",
    "column": "Column:",
    "condition": "Condition:",
    "equal": "Equal To",
    "fontFamily": "Font family:",
    "fontSize": "Font size:",
    "format": "Format:",
    "greaterThan": "Greater Than",
    "highlight": "Highlight",
    "lessThan": "Less Than",
    "notEqual": "Not Equal To",
    "remove": "Remove condition",
    "secondValue": "Second value:",
    "text": "Text",
    "value": "Value:"
  }
}

onCellValue{(cell: Smart.Grid.Cell): void}

Callback function, which is called when the Grid needs a cell value to render it. When you implement this function, you can override the default cell value rendering.

onCellUpdate{(cell: Smart.Grid.Cell, oldValue: any, value: any, confirm: {(commit: boolean): void}): void}

Callback function, which is called when a cell value will be updated. This function is useful if you want to make Ajax call to a server to validate the cell changes. If the changes are validated, invoke the confirm function.

onCellRender{(cell: Smart.Grid.Cell): void}

Callback function, which is called when a cell is rendered. This function is useful if you want to customize GridCell properties, before the cell is rendered.

onBeforeInit{(): void}

Callback function() called before the grid has been initialized and the Grid's Virtual DOM is not created.

onInit{(): void}

Callback function() called when the grid is initializing and the Grid's Virtual DOM is created.

onAfterInit{(): void}

Callback function() called after the grid has been initialized and the Grid's Virtual DOM is created.

onChartInitSmart.Chart

Callback function(chart: Smart.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings.

onRenderany

Callback function() called when the grid has been rendered.

onKey{(event: KeyboardEvent): void}

Callback function(event: KeyboardEvent) called when the grid is on focus and a keyboard key is pressed.

onRowInit{(index: number, row: Smart.Grid.Row): void}

Callback function, which is called when a row is initializing. This function can be used to customize the row settings.

onRowDetailInit{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}

Callback function, which is called when a row detail is initializing. Row details are displayed below the row's data or in a separate dialog.

onRowDetailUpdated{(index: number, row: Smart.Grid.Row, details: HTMLElement): void}

Callback function, which is called when a row detail is udpating.

onRowInserted{(index: number, row: Smart.Grid.Row): void}

Callback function which is called when a row has been inserted.

onRowRemoved{(index: number, row: Smart.Grid.Row): void}

Callback function, which is called when a row has been removed.

onRowUpdate{(index: number, row: Smart.Grid.Row, oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}

Callback function, which is called when row's cell values will be updated. This function is useful if you want to make Ajax call to a server to validate the edit changes. If the changes are validated, invoke the confirm function.

onRowUpdated{(index: number, row: Smart.Grid.Row): void}

Callback function, called when a row has been updated.

onColumnInit{(index: number, column: Smart.Grid.Column): void}

Callback function, which is called when a column has been initialized. This function can be used to customize the column settings.

onColumnInserted{(index: number, column: Smart.Grid.Column): void}

Callback function, which called when a column has been inserted.

onColumnRemoved{(index: number, column: Smart.Grid.Column): void}

Callback function, which is called when a column has been removed.

onColumnUpdated{(index: number, column: Smart.Grid.Column): void}

Callback function, which is called when a column has been updated.

onCommand{(name: string, command: any, details: Smart.Grid.Cell, event: Event | KeyboardEvent | PointerEvent, handled: boolean): void}

Callback function, which is called when a command is executed. The name argument is the command's name. The command argument is the command's function. details are built in command arguments passed by the Grid. The handled parameter allows you to cancel built-in command, because when you set it to true the Grid will not execute the default command's behavior.

pagingobject

Describes the paging settings.

Properties

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

enabled

step

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

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

Get the pageSize property.

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

 let pageSize = grid.paging.pageSize;

pageIndexnumber

Sets the start page.

Default value

Get the pageIndex property.

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

 let pageIndex = grid.paging.pageIndex;

Try a demo showcasing the paging property.

pagerobject

Describes the pager settings.

Properties

autoEllipsis"none" | "before" | "after" | "both"

Sets the ellipsis display mode.

Default value

"both"

Get the autoEllipsis property.

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

 let autoEllipsis = grid.pager.autoEllipsis;

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

Sets the position of pager.

Default value

"far"

Get the position property.

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

 let position = grid.pager.position;

templatestring | HTMLTemplateElement

Sets a template for the pager.

Default value

Get the template property.

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

 let template = grid.pager.template;

pageSizeSelectorobject

Describes the settings for the 'rows per page' option.

Properties

visible

dataSource

position

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

visible

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.

Properties

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

visible

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

visible

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

visible

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

visible

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

visible

dataSource

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

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;

Try a demo showcasing the pager property.

rowDetailobject

Sets the row details.

Properties

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.

Properties

headerstring

Sets the header of the dialog.

Default value

"{{message}}"

Get the header property.

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

 let header = grid.rowDetail.dialog.header;

heightstring | number

Sets the height of the dialog.

Default value

300

Get the height property.

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

 let height = grid.rowDetail.dialog.height;

widthstring | number

Sets the width of the dialog.

Default value

360

Get the width property.

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

 let width = grid.rowDetail.dialog.width;

leftstring | number

Sets the Left position of the dialog.

Default value

center

Get the left property.

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

 let left = grid.rowDetail.dialog.left;

topstring | number

Sets the Top position of the dialog.

Default value

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;

Try a demo showcasing the rowDetail property.

scrolling"physical" | "virtual" | "infinite" | "deferred"

Sets the scroll mode settings.

Default value

"physical"

Try a demo showcasing the scrolling property.

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

visible

visibleboolean

Sets the column header visibility.

Default value

true

Get the visible property.

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

 let visible = grid.columnHeader.visible;

summaryRowobject

Describes the summary row settings.

Properties

visible

visibleboolean

Sets the summary row visibility.

Default value

false

Get the visible property.

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

 let visible = grid.summaryRow.visible;

groupHeaderobject

Describes the settings for the group header.

Properties

visible

template

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

visible

template

buttons

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;

buttonsstring[]

Determines the buttons displayed in the Grid header. 'columns' displays a button opening the columns chooser panel. 'filter' displays a button opening the filtering panel. 'group' displays a button opening the grouping panel. 'sort' displays a button opening the sorting panel. 'format' displays a button opening the conditional formatting panel. 'search' displays a button opening the search panel.

Default value

[ "columns", "filter", "group", "sort", "format", "search" ]

Get the buttons property.

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

 let buttons = grid.header.buttons;

footerobject

Describes the footer settings of the grid.

Properties

visible

template

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;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Example

Set the rightToLeft property.

 <smart-grid right-to-left></smart-grid>

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

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

 grid.rightToLeft = false;

Get the rightToLeft property.

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

 let rightToLeft = grid.rightToLeft;

rowsSmart.Grid.Row[]

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

Properties

allowToggleboolean

Sets or gets the row can be expanded or collapsed.

Default value

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 | null

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

Properties

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

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

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;

"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

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

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;

getCellany

Methods which gets a cell, which is inside a row. A dataField string is a required argument, when you call this method.

Default value

-1

Get the getCell property.

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

 let getCell = grid.rows[0].getCell;

selectionobject

Describes the selection settings.

Properties

enabled

allowRowHeaderSelection

allowColumnHeaderSelection

allowRowSelection

allowCellSelection

allowDragSelection

allowDragSelectionAutoScroll

allowCellDragSelectionHandle

allowCellDragDropSelectionHandle

allowCellDragSelectionAutoFill

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

Try a demo showcasing the allowRowSelection property.

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

Properties

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;

Try a demo showcasing the checkBoxes property.

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;

Try a demo showcasing the selection property.

sortingobject

Describes sorting settings.

Properties

enabled

sort

mode

sortToggleThreeStates

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;

Try a demo showcasing the sorting property.

Events

beginEditCustomEvent

This event is triggered, when the edit begins.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onBeginEdit

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The edited row.

ev.detail.column Smart.Grid.Column - The edited column.

ev.detail.cell Smart.Grid.Cell - The edited cell.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of beginEdit event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('beginEdit', function (event) {
    const detail = event.detail,
        row = detail.row,
        column = detail.column,
        cell = detail.cell;

	// event handling code goes here.
})

changeCustomEvent

This event is triggered, when the selection is changed. When you select with a drag, the event is triggered when the drag starts and ends.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.started boolean - The flag is true, when the selection starts. The flag is false, when the selection ends and when the user changes the selection by dragging.

ev.detail.finished boolean - The flag is true, when the selection ends. The flag is false, when the selection starts and when the user changes the selection by dragging.

ev.detail.originalEvent Event - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('change', function (event) {
    const detail = event.detail,
        started = detail.started,
        finished = detail.finished,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

columnClickCustomEvent

This event is triggered, when the user clicks on the header of a column.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onColumnClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.column Smart.Grid.Column - The clicked column.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnClick event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnClick', function (event) {
    const detail = event.detail,
        column = detail.column,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

columnDoubleClickCustomEvent

This event is triggered, when the user double clicks on the header of a column.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onColumnDoubleClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.column Smart.Grid.Column - The double-clicked column.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnDoubleClick event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDoubleClick', function (event) {
    const detail = event.detail,
        column = detail.column,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

columnResizeCustomEvent

This event is triggered, when the user resized a column.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onColumnResize

Arguments

evCustomEvent

ev.detailObject

ev.detail.column Smart.Grid.Column - The resized column.

ev.detail.oldWidth - The old width of the column.

ev.detail.width - The new width of the column.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnResize event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnResize', function (event) {
    const detail = event.detail,
        column = detail.column,
        oldWidth = detail.oldWidth,
        width = detail.width;

	// event handling code goes here.
})

columnDragStartCustomEvent

This event is triggered, when the user starts a column drag.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onColumnDragStart

Arguments

evCustomEvent

ev.detailObject

ev.detail.column Smart.Grid.Column - The column.

ev.detail.index - The column's index

ev.detail.originalEvent - The origianl Event object.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnDragStart event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDragStart', function (event) {
    const detail = event.detail,
        column = detail.column,
        index = detail.index,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

columnDraggingCustomEvent

This event is triggered, when the user drags a column.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onColumnDragging

Arguments

evCustomEvent

ev.detailObject

ev.detail.column Smart.Grid.Column - The column.

ev.detail.index - The column's index

ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.

ev.detail.originalEvent - The origianl Event object.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnDragging event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDragging', function (event) {
    const detail = event.detail,
        column = detail.column,
        index = detail.index,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

columnDragEndCustomEvent

This event is triggered, when the user drags a column.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onColumnDragEnd

Arguments

evCustomEvent

ev.detailObject

ev.detail.column Smart.Grid.Column - The column.

ev.detail.index - The column's index

ev.detail.newIndex - The column's new index

ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.

ev.detail.originalEvent - The origianl Event object.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of columnDragEnd event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('columnDragEnd', function (event) {
    const detail = event.detail,
        column = detail.column,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowDragStartCustomEvent

This event is triggered, when the user starts a row drag.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowDragStart

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The row.

ev.detail.index - The row's index

ev.detail.originalEvent - The origianl Event object.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowDragStart event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDragStart', function (event) {
    const detail = event.detail,
        row = detail.row,
        index = detail.index,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowDraggingCustomEvent

This event is triggered, when the user drags a row.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onRowDragging

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The row.

ev.detail.index - The row's index

ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.

ev.detail.originalEvent - The origianl Event object.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowDragging event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDragging', function (event) {
    const detail = event.detail,
        row = detail.row,
        index = detail.index,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowDragEndCustomEvent

This event is triggered, when the user drags a row.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowDragEnd

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The row.

ev.detail.index - The row's index

ev.detail.newIndex - The row's new index

ev.detail.data - The dragging object. data.feedback and data.feedbackLine are HTML Elements which are displayed while the user drags. The object has error(), success() and data() methods which you can call to set the feedback state.

ev.detail.originalEvent - The origianl Event object.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowDragEnd event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDragEnd', function (event) {
    const detail = event.detail,
        row = detail.row,
        index = detail.index,
        newIndex = detail.newIndex,
        data = detail.data,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowExpandCustomEvent

This event is triggered, when the user expands a row of the grid. The Grid is in TreeGrid/Grouping mode.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowExpand

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The expanded row.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowExpand event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowExpand', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowCollapseCustomEvent

This event is triggered, when the user collapsed a row of the grid. The Grid is in TreeGrid/Grouping mode.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowCollapse

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The collapsed row.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowCollapse event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowCollapse', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowClickCustomEvent

This event is triggered, when the user clicks on a row of the grid.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The clicked row.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowClick event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowClick', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowDoubleClickCustomEvent

This event is triggered, when the user double clicks on a row of the grid.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowDoubleClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The double-clicked row.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowDoubleClick event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowDoubleClick', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

rowResizeCustomEvent

This event is triggered, when the user resized a row.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowResize

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The resized row.

ev.detail.oldHeight - The old height of the row.

ev.detail.height - The new height of the row.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowResize event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowResize', function (event) {
    const detail = event.detail,
        row = detail.row,
        oldHeight = detail.oldHeight,
        height = detail.height;

	// event handling code goes here.
})

cellClickCustomEvent

This event is triggered, when the user clicks on a cell of the grid.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCellClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.cell Smart.Grid.Cell - The clicked cell.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cellClick event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('cellClick', function (event) {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

cellDoubleClickCustomEvent

This event is triggered, when the user double clicks on a cell of the grid.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCellDoubleClick

Arguments

evCustomEvent

ev.detailObject

ev.detail.cell Smart.Grid.Cell - The double-clicked cell.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cellDoubleClick event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('cellDoubleClick', function (event) {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

endEditCustomEvent

This event is triggered, when the edit ends.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onEndEdit

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The edited row.

ev.detail.column Smart.Grid.Column - The edited column.

ev.detail.cell Smart.Grid.Cell - The edited cell.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of endEdit event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('endEdit', function (event) {
    const detail = event.detail,
        row = detail.row,
        column = detail.column,
        cell = detail.cell;

	// event handling code goes here.
})

filterCustomEvent

This event is triggered, when a filter is added or removed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onFilter

Arguments

evCustomEvent

ev.detailObject

ev.detail.columns Smart.Grid.Column[] - Array of columns.

ev.detail.data - Array of {dataField: string, filter: string}. dataField is the column's data field. filter is a filter expression like 'startsWith B'

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of filter event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('filter', function (event) {
    const detail = event.detail,
        columns = detail.columns,
        data = detail.data;

	// event handling code goes here.
})

resizeCustomEvent

This event is triggered, when the grid is resized.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onResize

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resize event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('resize', function (event) {
	// event handling code goes here.
})

rowTapCustomEvent

This event is triggered when the user touches and holds on the row for at least 300ms.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onRowTap

Arguments

evCustomEvent

ev.detailObject

ev.detail.row Smart.Grid.Row - The tapped row.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of rowTap event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('rowTap', function (event) {
    const detail = event.detail,
        row = detail.row,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

cellTapCustomEvent

This event is triggered when the user touches and holds on the cell for at least 300ms.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onCellTap

Arguments

evCustomEvent

ev.detailObject

ev.detail.cell Smart.Grid.Cell - The tapped row.

ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cellTap event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('cellTap', function (event) {
    const detail = event.detail,
        cell = detail.cell,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

pageCustomEvent

This event is triggered, when the user changes the pages.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onPage

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of page event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('page', function (event) {
	// event handling code goes here.
})

sortCustomEvent

This event is triggered, when a sorting column is added or removed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onSort

Arguments

evCustomEvent

ev.detailObject

ev.detail.columns Smart.Grid.Column[] - Array of columns.

ev.detail.data - Array of {dataField: string, sortOrder: string, sortIndex: number}. dataField is the column's data field. sortOrder is 'asc' or 'desc', sortIndex is the index of the column in multi column sorting.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of sort event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('sort', function (event) {
    const detail = event.detail,
        columns = detail.columns,
        data = detail.data;

	// event handling code goes here.
})

scrollBottomReachedCustomEvent

This event is triggered, when the user reaches the bottom of the grid.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onScrollBottomReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of scrollBottomReached event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

scrollTopReachedCustomEvent

This event is triggered, when the user reaches the top of the grid.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onScrollTopReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of scrollTopReached event.

const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

Methods

addRow( data: any, insertAtBottom?: boolean, callback?: any): void

Adds a row. When batch editing is enabled, the row is not saved until the batch edit is saved.

Arguments

dataany

row data matching the data source

insertAtBottom?boolean

Determines whether to add the new row to the bottom or top of the collection. The default value is 'true'

callback?any

Sets a callback function, which is called after the new row is added. The callback's argument is the new row.

Invoke the addRow method.

const grid = document.querySelector('smart-grid');
grid.addRow(1);

addNewRow( position?: string): boolean

Adds a new row and puts it into edit mode. When batch editing is enabled, the row is not saved until the batch edit is saved.

Arguments

position?string

'near' or 'far'

Returnsboolean

Invoke the addNewRow method.

const grid = document.querySelector('smart-grid');
const result = grid.addNewRow();

addUnboundRow( count: number, position?: string): boolean

Adds a new unbound row to the top or bottom. Unbound rows are not part of the Grid's dataSource. They become part of the dataSource, after an unbound row is edited.

Arguments

countnumber

The count of unbound rows.

position?string

'near' or 'far'

Returnsboolean

Invoke the addUnboundRow method.

const grid = document.querySelector('smart-grid');
const result = grid.addUnboundRow(5);

addFilter( dataField: string, filter: string, refreshFilters?: boolean): void

Adds a filter to a column. This method will apply a filter to the Grid data.

Arguments

dataFieldstring

column bound data field

filterstring

Filter expression like: 'startsWith B'

refreshFilters?boolean

Invoke the addFilter method.

const grid = document.querySelector('smart-grid');
grid.addFilter("firstName","startsWith B");

autoSizeRows(): void

Auto-sizes grid rows. This method will update the height of all Grid rows.

Invoke the autoSizeRows method.

const grid = document.querySelector('smart-grid');
grid.autoSizeRows();

autoSizeColumns(): void

Auto-sizes grid columns. This method will update the width of all Grid columns.

Invoke the autoSizeColumns method.

const grid = document.querySelector('smart-grid');
grid.autoSizeColumns();

beginUpdate(): void

Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.

Invoke the beginUpdate method.

const grid = document.querySelector('smart-grid');
grid.beginUpdate();

beginEdit( rowId: string | number, dataField?: string): boolean

Begins row, cell or column. This method allows you to programmatically start a cell, row or column editing. After calling it, an editor HTMLElement will be created and displayed in the Grid.

Arguments

rowIdstring | number

row bound id

dataField?string

column bound data field

Returnsboolean

Invoke the beginEdit method.

const grid = document.querySelector('smart-grid');
const result = grid.beginEdit(1,"firstName");

clearFilter(): void

Clears all filters. Refreshes the view and updates all filter input components.

Invoke the clearFilter method.

const grid = document.querySelector('smart-grid');
grid.clearFilter();

clearSelection(): void

Clears the selection that user have made. All row, cell and column selection highlights will be removed.

Invoke the clearSelection method.

const grid = document.querySelector('smart-grid');
grid.clearSelection();

cancelEdit(): void

Cancels the editing. This method closes the cell editor and cancels the changes.

Invoke the cancelEdit method.

const grid = document.querySelector('smart-grid');
grid.cancelEdit();

checkRow( rowId: string | number): void

Checks a TreeGrid row. This method updates the row's check-box.

Arguments

rowIdstring | number

row bound id

Invoke the checkRow method.

const grid = document.querySelector('smart-grid');
grid.checkRow(1);

checkAllRows(): void

Checks all TreeGrid or Grouping rows. This method updates all check-boxes in the TreeGrid or Grouping rows.

Invoke the checkAllRows method.

const grid = document.querySelector('smart-grid');
grid.checkAllRows();

clearRows(): void

Clears the user selection and empties the data source. The Grid will display 'No Rows' in the view.

Invoke the clearRows method.

const grid = document.querySelector('smart-grid');
grid.clearRows();

closeMenu(): void

Closes the column drop-down menu.

Invoke the closeMenu method.

const grid = document.querySelector('smart-grid');
grid.closeMenu();

collapseRow( rowId: string | number): void

Collapses a TreeGrid or Grouping row.

Arguments

rowIdstring | number

row bound id

Invoke the collapseRow method.

const grid = document.querySelector('smart-grid');
grid.collapseRow(1);

collapseAllRows(): void

Collapses all TreeGrid or Grouping rows.

Invoke the collapseAllRows method.

const grid = document.querySelector('smart-grid');
grid.collapseAllRows();

createChart( type: string, dataSource?: any): void

Creates a Chart, when charting is enabled.

Arguments

typestring

Chart's type

dataSource?any

Chart's data source

Invoke the createChart method.

const grid = document.querySelector('smart-grid');
grid.createChart("pie");

deleteRow( rowId: string | number, callback?: any): void

Delete a row. When batch editing is enabled, the row is not saved until the batch edit is saved.

Arguments

rowIdstring | number

row bound id

callback?any

Sets a callback function, which is called after the row is deleted. The callback's argument is the deleted row.

Invoke the deleteRow method.

const grid = document.querySelector('smart-grid');
grid.deleteRow(1);

ensureVisible( rowId: string | number, dataField?: string): boolean

Scrolls to a row or cell. This method scrolls to a row or cell, when scrolling is necessary. If pagination is enabled, it will automatically change the page.

Arguments

rowIdstring | number

row bound id

dataField?string

column bound data field

Returnsboolean

Invoke the ensureVisible method.

const grid = document.querySelector('smart-grid');
const result = grid.ensureVisible(1,"firstName");

endEdit(): void

Ends the editing. This method confirms all changes and closes the opened cell editor(s).

Invoke the endEdit method.

const grid = document.querySelector('smart-grid');
grid.endEdit();

endUpdate( refresh?: boolean): void

Ends the update operation. This method will resume the rendering and will refresh the Grid.

Arguments

refresh?boolean

The flag that control the calls of the refresh method.

Invoke the endUpdate method.

const grid = document.querySelector('smart-grid');
grid.endUpdate();

expandRow( rowId: string | number): void

Expands a TreeGrid or Grouping row.

Arguments

rowIdstring | number

row bound id

Invoke the expandRow method.

const grid = document.querySelector('smart-grid');
grid.expandRow(1);

expandAllRows(): void

Expands all TreeGrid or Grouping rows.

Invoke the expandAllRows method.

const grid = document.querySelector('smart-grid');
grid.expandAllRows();

exportData( Dataformat: string): void

Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the dataExport property.

Arguments

Dataformatstring

'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.

Invoke the exportData method.

const grid = document.querySelector('smart-grid');
grid.exportData("pdf");

Try a demo showcasing the exportData method.

getSortedColumns(): {[dataField: string]: { sortOrder: string, sortIndex: number }}

Gets an array of columns with applied sorting.

Returns{[dataField: string]: { sortOrder: string, sortIndex: number }}

Invoke the getSortedColumns method.

const grid = document.querySelector('smart-grid');
const result = grid.getSortedColumns();

getSelection(): { rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }

Gets the selection.

Returns{ rows: Smart.Grid.Row[], columns: Smart.Grid.Column[], cells: Smart.Grid.Cell[], focused: {id: string, dataField: string} }

Invoke the getSelection method.

const grid = document.querySelector('smart-grid');
const result = grid.getSelection();

getSelectedRows(): []

Gets the selected row ids.

Returns[]

Invoke the getSelectedRows method.

const grid = document.querySelector('smart-grid');
const result = grid.getSelectedRows();

getFilteredColumns(): {[dataField: string]: Smart.Grid.Column}[]

Gets an array of columns with applied filters.

Returns{[dataField: string]: Smart.Grid.Column}[]

Invoke the getFilteredColumns method.

const grid = document.querySelector('smart-grid');
const result = grid.getFilteredColumns();

getVisibleRows(): Smart.Grid.Row[]

Gets an array of rows, which are visible and match the applied filter.

ReturnsSmart.Grid.Row[]

Invoke the getVisibleRows method.

const grid = document.querySelector('smart-grid');
const result = grid.getVisibleRows();

getViewRows(): Smart.Grid.Row[]

Gets the result of the getVisibleRows or the rows hierarchy, when the Grid is in TreeGrid/Grouping mode.

ReturnsSmart.Grid.Row[]

Invoke the getViewRows method.

const grid = document.querySelector('smart-grid');
const result = grid.getViewRows();

getBatchEditChanges(): { updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }

Gets the changes from the batch edit.

Returns{ updated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }

Invoke the getBatchEditChanges method.

const grid = document.querySelector('smart-grid');
const result = grid.getBatchEditChanges();

getCellValue( rowId: string | number, dataField: string): any

Gets a value of a cell.

Arguments

rowIdstring | number

row bound id

dataFieldstring

column bound data field

Returnsany

Invoke the getCellValue method.

const grid = document.querySelector('smart-grid');
const result = grid.getCellValue(1,"firstName");

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

highlightCell( rowId: string | number, dataField: string, className?: string): any

Highlights a cell. Calling the method a second time toggle the highlight state.

Arguments

rowIdstring | number

row bound id

dataFieldstring

column bound data field

className?string

CSS Class Name

Returnsany

Invoke the highlightCell method.

const grid = document.querySelector('smart-grid');
const result = grid.highlightCell(1,"firstName","cssClass");

highlightRow( rowId: string | number, className?: string): any

Highlights a row. Calling the method a second time toggle the highlight state.

Arguments

rowIdstring | number

row bound id

className?string

CSS Class Name

Returnsany

Invoke the highlightRow method.

const grid = document.querySelector('smart-grid');
const result = grid.highlightRow(1,"cssClass");

openMenu( dataField: string): void

Opens a column drop-down menu.

Arguments

dataFieldstring

column bound data field

Invoke the openMenu method.

const grid = document.querySelector('smart-grid');
grid.openMenu("firstName");

print(): void

Prints the Grid data. The method uses the options of the dataExport property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use the dataExport property.

Invoke the print method.

const grid = document.querySelector('smart-grid');
grid.print();

render(): void

Renders the grid. This method will make a full-refresh like in the initial Grid creation. It will create Rows, Columns and Cells HTML Elements and then refresh the Grid layout.

Invoke the render method.

const grid = document.querySelector('smart-grid');
grid.render();

refresh(): void

Refreshes the grid with the current property values. This method will refresh the Grid layout.

Invoke the refresh method.

const grid = document.querySelector('smart-grid');
grid.refresh();

refreshView(): void

Refreshes the grid cells in view. The method is useful for live-updates of cell values.

Invoke the refreshView method.

const grid = document.querySelector('smart-grid');
grid.refreshView();

removeFilter( dataField: string, refreshFilters?: boolean): void

Removes a column filter.

Arguments

dataFieldstring

column bound data field

refreshFilters?boolean

Invoke the removeFilter method.

const grid = document.querySelector('smart-grid');
grid.removeFilter("firstName");

revertBatchEdit(): void

Reverts the batch edit changes. This method cancels all changes made by the end-user.

Invoke the revertBatchEdit method.

const grid = document.querySelector('smart-grid');
grid.revertBatchEdit();

saveBatchEdit(): void

Saves the batch edit changes. This method confirms the editing changes made by the end-user.

Invoke the saveBatchEdit method.

const grid = document.querySelector('smart-grid');
grid.saveBatchEdit();

updateRow( rowId: string | number, data: any, callback?: any): void

Updates a row. When batch editing is enabled, the row is not saved until the batch edit is saved.

Arguments

rowIdstring | number

row bound id

dataany

row data matching the data source

callback?any

Sets a callback function, which is called after the row is updated. The callback's argument is the updated row.

Invoke the updateRow method.

const grid = document.querySelector('smart-grid');
grid.updateRow();

select( rowId: string | number, dataField?: string): void

Selects a row, cell or column.

Arguments

rowIdstring | number

row bound id

dataField?string

column bound data field

Invoke the select method.

const grid = document.querySelector('smart-grid');
grid.select(1);

selectRange( rowId: string | number, dataField: string, endRowId: string | number, endDataField: string): void

Selects a range of rows, cells or columns. The result of the method depends on the selection configuration of the Grid.

Arguments

rowIdstring | number

row bound id

dataFieldstring

column bound data field

endRowIdstring | number

row bound id

endDataFieldstring

column bound data field

Invoke the selectRange method.

const grid = document.querySelector('smart-grid');
grid.selectRange(1,"firstName",5,"lastName");

selectRowsRange( rowId: string | number, endRowId: string | number): void

Selects a range of rows.

Arguments

rowIdstring | number

row bound id

endRowIdstring | number

row bound id

Invoke the selectRowsRange method.

const grid = document.querySelector('smart-grid');
grid.selectRowsRange(1,3);

selectRows( rowId: (string | number)[]): void

Selects multiple rows by their ids.

Arguments

rowId(string | number)[]

Array of row ids

Invoke the selectRows method.

const grid = document.querySelector('smart-grid');
grid.selectRows([1,3,5]);

selectRowsByIndex( rowIndex: number[]): void

Selects multiple rows by their index.

Arguments

rowIndexnumber[]

Array of row indexes

Invoke the selectRowsByIndex method.

const grid = document.querySelector('smart-grid');
grid.selectRowsByIndex([1,5]);

setCellValue( rowId: string | number, dataField: string, value: string | number | Date | boolean): void

Sets a new value to a cell.

Arguments

rowIdstring | number

row bound id

dataFieldstring

column bound data field

valuestring | number | Date | boolean

New Cell value.

Invoke the setCellValue method.

const grid = document.querySelector('smart-grid');
grid.setCellValue(1,"firstName","new value");

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.

Default value

"200px"

Sets column menu's width.

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.