Grid Javascript API

columnMenuItemEditDescription

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;

iconany

Sets or gets the column's icon. Expects CSS class name.

Default value

Get the icon property.

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

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

labelstring

Sets or gets the text displayed in the column's header.

Default value

Example

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

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

 grid.columns[0].label = 'First Name';

Get the label property.

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

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

minWidthnumber

Sets or gets the minimum width.

Default value

Get the minWidth property.

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

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

sortOrder"asc" | "desc" | null

Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.

Example

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

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

 grid.columns[0].sortOrder = desc;

Get the sortOrder property.

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

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

showActionButtonboolean

Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.

Default value

false

Example

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

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

 grid.columns[0].showActionButton = false;

Get the showActionButton property.

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

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

showIconboolean

Sets or gets whether the column's header icon is displayed.

Default value

false

Example

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

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

 grid.columns[0].showIcon = false;

Get the showIcon property.

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

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

showDescriptionButtonboolean

Sets or gets whether the column's header description button is displayed.

Default value

false

Example

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

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

 grid.columns[0].showDescriptionButton = false;

Get the showDescriptionButton property.

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

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

widthany

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

Default value

Example

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

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

 grid.columns[0].width = 100;

Get the width property.

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

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

templateany

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

Default value

Get the template property.

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

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

validationRules[]

Sets or gets the column's validation rules. Accepts: Object with 'type' string property. It can be 'required', 'min', 'max', 'minLength', 'maxLength', 'email', 'null', 'requiredTrue', 'minData', 'maxDate', 'pattern'. The object needs to have additional 'value' property for all validation rule types except 'email', 'required', 'requiredTrue' and 'null'. Optional property is 'message', which allows you to define user string displayed on validation error.

Example

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

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

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

Get the validationRules property.

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

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

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

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

Default value

"center"

Example

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

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

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

Get the verticalAlign property.

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

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

visibleboolean

Sets or gets whether the column is visible. Set the property to 'false' to hide the column.

Default value

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

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

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

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

label

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

Sets the position of the 'Add New Row' UI element.

Default value

"both"

Example

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

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

 grid.editing.addNewRow.position = 'near';

Get the position property.

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

 let position = grid.editing.addNewRow.position;

visibleboolean

Makes the 'Add New Row' UI element visible.

Default value

false

Get the visible property.

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

 let visible = grid.editing.addNewRow.visible;

labelstring

Sets the label of the 'Add New Row' UI element.

Default value

"{{message}}"

Get the label property.

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

 let label = grid.editing.addNewRow.label;

Try a demo showcasing the addNewRow property.

Get the addNewRow property.

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

 let addNewRow = grid.editing.addNewRow;

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

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

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

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

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

dataSource

visibleboolean

Sets the visibility of the 'rows per page' option.

Default value

false

Get the visible property.

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

 let visible = grid.pager.pageSizeSelector.visible;

dataSourceobject

Sets the count of the 'rows per page' option.

Get the dataSource property.

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

 let dataSource = grid.pager.pageSizeSelector.dataSource;

position"near" | "far"

Sets the position of the 'rows per page' option.

Default value

"far"

Get the position property.

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

 let position = grid.pager.pageSizeSelector.position;

Get the pageSizeSelector property.

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

 let pageSizeSelector = grid.pager.pageSizeSelector;

summaryobject

Describes the summary settings.

Properties

position"near" | "far"

Sets the position of the summary.

Default value

"far"

Get the position property.

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

 let position = grid.pager.summary.position;

visibleboolean

Sets the visibility of the summary.

Default value

false

Get the visible property.

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

 let visible = grid.pager.summary.visible;

Get the summary property.

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

 let summary = grid.pager.summary;

navigationButtonsobject

Describes the navigation buttons settings.

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

visibleboolean

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

Default value

true

Get the visible property.

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

 let visible = grid.pager.navigationButtons[0].prevNextButtons[0].visible;

Get the prevNextButtons property.

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

 let prevNextButtons = grid.pager.navigationButtons[0].prevNextButtons;

firstLastButtonsobject

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

Properties

visibleboolean

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

Default value

true

Get the visible property.

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

 let visible = grid.pager.navigationButtons[0].firstLastButtons[0].visible;

Get the firstLastButtons property.

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

 let firstLastButtons = grid.pager.navigationButtons[0].firstLastButtons;

labelsobject

Describes the labels settings for navigation buttons.

Properties

visibleboolean

Sets the visibility of labels for navigation buttons.

Default value

false

Get the visible property.

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

 let visible = grid.pager.navigationButtons[0].labels[0].visible;

Get the labels property.

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

 let labels = grid.pager.navigationButtons[0].labels;

Get the navigationButtons property.

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

 let navigationButtons = grid.pager.navigationButtons;

navigationInputobject

Describes the settings about navigation input option.

Properties

position"near" | "far"

Sets the position of navigation input option.

Default value

"far"

Get the position property.

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

 let position = grid.pager.navigationInput.position;

visibleboolean

Sets the visibility of navigation input option.

Default value

false

Get the visible property.

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

 let visible = grid.pager.navigationInput.visible;

Get the navigationInput property.

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

 let navigationInput = grid.pager.navigationInput;

pageIndexSelectorsobject

Describes the settings for the numeric page buttons.

Properties

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

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

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

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

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

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;

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

allowColumnHeaderSelection

allowRowHeaderSelection

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