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

The expected object has the following fields:

appearance.alternationStart	number	0
Starting row index of alternating colors. Try a demo showcasing the property alternationStart.
appearance.alternationEnd	number	0
Ending row index of alternating colors. Try a demo showcasing the property alternationEnd.
appearance.alternationCount	number	0
number of row color alternations. Try a demo showcasing the property alternationCount.
appearance.allowHover	boolean	false
Enables row hover effect. Applies a hover style to the cells.
appearance.allowHeaderHover	boolean	true
Enables header hover effect. Applies a hover style to the headers.
appearance.allowRowToggleAnimation	boolean	false
Enables row toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode. Try a demo showcasing the property allowRowToggleAnimation.
appearance.allowSortAnimation	boolean	false
Enables sorting animation. Data records are sorted with animation, when sorting is applied. Try a demo showcasing the property allowSortAnimation.
appearance.allowColumnLabelAnimation	boolean	true
Enables column label animation. The label is moved to 'left' with animation, when the column header's drop-down button is displayed on hover or sorting is applied. Try a demo showcasing the property allowColumnLabelAnimation.
appearance.allowColumnMenuAnimation	boolean	true
Enables column menu animation. When you click on the column header's drop-down button, the menu is animated.
appearance.allowColumnSortButtonAnimation	boolean	true
Enables column sort button animation. When you click on a sortable column to change the sort order, the sort button is animated.
appearance.allowColumnActionButtonAnimation	boolean	true
Enables column action button animation. The drop-down button displayed on column header hover is optionally animated. Try a demo showcasing the property allowColumnActionButtonAnimation.
appearance.allowColumnFilterButtonAnimation	boolean	true
Enables column filter button animation.
appearance.autoShowColumnSortButton	boolean	true
If enabled, automatically shows column sort button. The sort button is displayed only when the column is sorted. If the property's value is false, sort button will be always displayed to indicate that sorting is possible.
appearance.autoShowColumnActionButton	boolean	true
If enabled, automatically shows column action button.
appearance.autoShowColumnFilterButton	boolean	true
If enabled, automatically shows column filter button.
appearance.autoGenerateRowLabelMode	string	"number"
Generates labels as 'numbers' or 'letters'. This property affects the rendering of the row header.
appearance.autoGenerateColumnLabelMode	string	"letter"
Generates labels as 'numbers' or 'letters. This property affects the rendering of the column header.
appearance.displayLoadingIndicator	boolean	false
Sets the visibility of the loading indicator. This is the Loading... image displayed in the Grid while loading data.
appearance.loadingIndicatorPlaceholder	string	"Loading..."
Sets the loading indicator label. This is the Text displayed while loading data.
appearance.placeholder	string	"No Rows"
Sets the placeholder of the Grid. The placeholder is displayed when the Grid is empty.
appearance.sortAnimationDuration	number	500
Sets the duration of sorting animation. This property is related to the allowSortAnimation property.
appearance.showRowHeader	boolean	false
Shows or hides Row header. Try a demo showcasing the property showRowHeader.
appearance.showRowHeaderNumber	boolean	false
Shows row indexes in the row header. The showRowHeader property should be true Try a demo showcasing the property showRowHeaderNumber.
appearance.showRowHeaderEditIcon	boolean	true
Shows edit icon when a cell or row is in edit state. Try a demo showcasing the property showRowHeaderEditIcon.
appearance.showRowHeaderSelectIcon	boolean	false
Shows select icon when the pointer is over the row header cell. Try a demo showcasing the property showRowHeaderSelectIcon.
appearance.showRowHeaderFocusIcon	boolean	false
Shows focus icon on cell or row focus. Try a demo showcasing the property showRowHeaderFocusIcon.
appearance.showColumnHeaderLines	boolean	true
Shows column header lines. Try a demo showcasing the property showColumnHeaderLines.
appearance.showColumnLines	boolean	true
Shows column lines. Try a demo showcasing the property showColumnLines.
appearance.showRowLines	boolean	true
Shows row lines. Try a demo showcasing the property showRowLines.
appearance.showFilterColumnBackground	boolean	true
Shows filtered column background, when filter is applied.
appearance.showSortColumnBackground	boolean	true
Shows sorted column background, when sorting is applied.
appearance.showFrozenColumnBackground	boolean	true
Shows frozen column background, when the Grid has frozen columns. Try a demo showcasing the property showFrozenColumnBackground.
appearance.showFrozenRowBackground	boolean	true
Shows filtered row background, when the Grid has frozen rows. Try a demo showcasing the property showFrozenRowBackground.
appearance.showColumnSortButton	boolean	true
Shows column sort button. Try a demo showcasing the property showColumnSortButton.
appearance.showColumnFilterButton	boolean	true
Shows column filter button. Try a demo showcasing the property showColumnFilterButton.
appearance.showColumnDescriptionButton	boolean	false
Shows column description button. The button's style is customizable through the Grid CSS.
appearance.showColumnIcon	boolean	false
Shows column icon within the column's header.
appearance.showColumnCustomButton	boolean	false
Shows column custom button. User-defined button shown in the column header.
appearance.showColumnActionButton	boolean	true
Shows column action button. This is the drop-down button displayed in the column header.
appearance.showTooltips	boolean	false
Shows tooltips when user hovers columns or cells.
appearance.showHorizontalScrollBarOnFixedColumns	boolean	false
Shows horizontal scrollbar on fixed columns.
appearance.showVerticalScrollBarOnFixedColumns	boolean	false
Shows vertical scrollbar on fixed columns.

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

The expected object has the following fields:

behavior.allowColumnAutoSizeOnDoubleClick	boolean	true
Auto-Resize on double-click of a column's right border.
behavior.allowRowAutoSizeOnDoubleClick	boolean	true
Auto-Resize on double-click of a row's bottom border.
behavior.columnResizeMode	string	"none"
Possible values: 'none' 'split' 'growAndShrink' Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size Try a demo showcasing the property columnResizeMode.
behavior.rowResizeMode	string	"none"
Possible values: 'none' 'split' 'growAndShrink' Sets the row resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size Try a demo showcasing the property rowResizeMode.

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

The expected object has the following fields:

layout.allowCellsWrap	boolean	false
Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines. Try a demo showcasing the property allowCellsWrap.
layout.autoGenerateColumnWidth	number | null	null
Sets the width of the auto-generated Grid columns.
layout.columnWidth	any	null
Sets the width of the Grid columns.
layout.columnHeight	any	null
Sets the height of the Grid columns.
layout.columnMinHeight	any	30
Sets the minimum height of the Grid columns.
layout.rowMinHeight	number	30
Sets the minimum height of the Grid rows.
layout.rowHeight	any	null
Sets the height of the Grid rows. The property can be set to null, auto or a number.

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

The expected object has the following fields:

clipboard.enabled	boolean	true
Sets or gets whether the property is enabled.
clipboard.autoFillMode	string	"fillSeries"
Possible values: '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.
clipboard.onPasteValue	any	"none"
Sets or gets a callback on paste.

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

Code example

Each member of the columns array is an object with the following fields:

columns[n].align	string	"left"
Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
columns[n].allowExport	boolean	true
Sets or gets whether the column can be exported.
columns[n].allowGroup	boolean	true
Sets or gets whether the column can be grouped.
columns[n].allowHide	boolean	true
Sets or gets whether the column can be hidden.
columns[n].allowSelect	boolean	true
Sets or gets whether the column can be selected.
columns[n].allowEdit	boolean	true
Sets or gets whether the column can be edited.
columns[n].allowSort	boolean	true
Sets or gets whether the column can be sorted.
columns[n].allowHeaderEdit	boolean	true
Sets or gets whether the column can be edited, when header editing is enabled.
columns[n].allowFilter	boolean	true
Sets or gets whether the column can be filtered.
columns[n].allowReorder	boolean	true
Sets or gets whether the column can be reordered.
columns[n].allowResize	boolean	true
Sets or gets whether the column can be resized.
columns[n].cellsFormat	string	""
Sets or gets the column's cells format.
columns[n].cellsAlign	string	"left"
Sets or gets the column's cells alignment. Accepts: 'left', 'right' and 'center'
columns[n].cellsWrap	string	false
Sets or gets the column's cells wrapping. Accepts: true or false.
columns[n].cellsVerticalAlign	string	"center"
Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'
columns[n].columnGroup	string	""
Sets the name of the column group.
columns[n].dataField	string	""
Sets or gets the column's data source bound field.
columns[n].displayField	string	true
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'.
columns[n].element	HTMLElement	null
Gets the HTML Element. The property returns null when the Column is not in the View.
columns[n].editor	any	""
Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'numberInput', 'checkBox', 'deteTimePicker', 'textArea' or a custom object with 'template' property which defines the editor type, 'onInit' and 'onRender' callback functions.
columns[n].freeze	string	""
Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).
columns[n].filter	string	""
Sets or gets the filter of the column.
columns[n].formatFunction	any	""
Sets or gets the column's format function.
columns[n].formatSettings	any	{}
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\' }}'' Each member of the formatSettings array is an object with the following fields: columns[n].formatSettings[n].decimalPlaces number "" Sets the decimal places. columns[n].formatSettings[n].negativeWithBrackets boolean false Sets the negativeWithBrackets property. Displays brackets around negative numbers columns[n].formatSettings[n].prefix string "" Sets the prefix of the formatted value. columns[n].formatSettings[n].sufix string "" Sets the sufix of the formatted value. columns[n].formatSettings[n].thousandsSeparator number "" Sets the thousands separator. columns[n].formatSettings[n].dateFormat string "" Sets the date format string.
columns[n].group	string	""
Sets or gets the column's group.
columns[n].icon	any	""
Sets or gets the column's icon. Expects CSS class name.
columns[n].label	string	""
Sets or gets the text displayed in the column's header.
columns[n].minWidth	number	30
Sets or gets the minimum width.
columns[n].sortOrder	string	null
Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.
columns[n].showActionButton	boolean	false
Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
columns[n].showIcon	boolean	false
Sets or gets whether the column's header icon is displayed.
columns[n].showDescriptionButton	boolean	false
Sets or gets whether the column's header description button is displayed.
columns[n].width	any	""
Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
columns[n].template	any	""
Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells.
columns[n].verticalAlign	string	"center"
Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
columns[n].visible	boolean	true
Sets or gets whether the column is visible. Set the property to 'false' to hide the column.

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.

The expected object has the following fields:

columnMenu.autoClose	boolean	true
Automatically closes the column menu.
columnMenu.dataSource	object	Please expand entry to see sub properties
Sets the data sources to the column menu. The expected object has the following fields: columnMenu.dataSource.columnMenuCustomizeType object Please expand entry to see sub properties Describes the settings of the column menu customize type The expected object has the following fields: columnMenu.dataSource.columnMenuCustomizeType.command any "customizeTypeCommand" Sets the commant of the column menu customize type. columnMenu.dataSource.columnMenuCustomizeType.enabled boolean true Enables the column menu customize type. columnMenu.dataSource.columnMenuCustomizeType.visible boolean false Sets the visibility of the column menu customize type. columnMenu.dataSource.columnMenuCustomizeType.icon string "smart-icon-customize" Sets the icon of the column menu customize type. columnMenu.dataSource.columnMenuCustomizeType.label string "{{messages}}" Sets the label of the column menu customize type. columnMenu.dataSource.columnMenuItemRename object Please expand entry to see sub properties Describes the settings of the column menu item rename. The expected object has the following fields: columnMenu.dataSource.columnMenuItemRename.command string "renameCommand" Sets the command of the column menu item rename. columnMenu.dataSource.columnMenuItemRename.enabled boolean true Enables the column menu item rename. columnMenu.dataSource.columnMenuItemRename.visible boolean false Sets the visibility of the column menu item rename. columnMenu.dataSource.columnMenuItemRename.icon string "smart-icon-rename" Sets the icon of the column menu item rename. columnMenu.dataSource.columnMenuItemRename.label string "{{messages}}" Sets the label of the column menu item rename. columnMenu.dataSource.columnMenuItemEditDescription object Please expand entry to see sub properties Describes the settings of the column menu item edit description. The expected object has the following fields: columnMenu.dataSource.columnMenuItemEditDescription.command string "editDescriptionCommand" Sets the command of the column menu item edit description. columnMenu.dataSource.columnMenuItemEditDescription.enabled boolean true Enables the column menu item edit description. columnMenu.dataSource.columnMenuItemEditDescription.visible boolean false Sets the visibility of the column menu item edit description. columnMenu.dataSource.columnMenuItemEditDescription.icon string "smart-icon-description" Sets the icon of the column menu item edit description. columnMenu.dataSource.columnMenuItemEditDescription.label string "{{messages}}" Sets the label of the column menu item edit description. columnMenu.dataSource.columnMenuItemDuplicate object Please expand entry to see sub properties Describes the settings of the column menu item duplicate. The expected object has the following fields: columnMenu.dataSource.columnMenuItemDuplicate.command string "duplicateCommand" Sets the command of the column menu item duplicate. columnMenu.dataSource.columnMenuItemDuplicate.visible boolean false Sets the visibility of the column menu item duplicate. columnMenu.dataSource.columnMenuItemDuplicate.enabled boolean true Enables the column menu item duplicate. columnMenu.dataSource.columnMenuItemDuplicate.icon string "smart-icon-duplicate" Sets the icon of the column menu item duplicate. columnMenu.dataSource.columnMenuItemDuplicate.label string "{{messages}}" Sets the label of the column menu item duplicate. columnMenu.dataSource.columnMenuItemInsertLeft object Please expand entry to see sub properties Describes the settings of the column menu item insert left. The expected object has the following fields: columnMenu.dataSource.columnMenuItemInsertLeft.command string "insertLeftCommand" Sets the command of the column menu item insert left. columnMenu.dataSource.columnMenuItemInsertLeft.visible boolean false Sets the visibility of the column menu item insert left. columnMenu.dataSource.columnMenuItemInsertLeft.enabled boolean true Enabels the column menu item insert left. columnMenu.dataSource.columnMenuItemInsertLeft.icon string "smart-icon-insert-left" Sets the icon of the column menu item insert left. columnMenu.dataSource.columnMenuItemInsertLeft.label string "{{messages}}" Sets the label of the column menu item insert left. columnMenu.dataSource.columnMenuItemInsertRight object Please expand entry to see sub properties Describes the settings of the of the column menu item insert right. The expected object has the following fields: columnMenu.dataSource.columnMenuItemInsertRight.command string "insertRightCommand" Sets the command of the of the column menu item insert right. columnMenu.dataSource.columnMenuItemInsertRight.visible boolean false Sets the visibility of the of the column menu item insert right. columnMenu.dataSource.columnMenuItemInsertRight.enabled boolean true Enables the column menu item insert right. columnMenu.dataSource.columnMenuItemInsertRight.icon string "smart-icon-insert-right" Sets the icon of the of the column menu item insert right. columnMenu.dataSource.columnMenuItemInsertRight.label string "{{messages}}" Sets the label of the of the column menu item insert right. columnMenu.dataSource.columnMenuItemSortAsc object Please expand entry to see sub properties Describes the settings of the column menu item sort ascending. The expected object has the following fields: columnMenu.dataSource.columnMenuItemSortAsc.command string "sortAscCommand" Sets the command of the column menu item sort ascending. columnMenu.dataSource.columnMenuItemSortAsc.visible string "auto" Sets the visibility of the column menu item sort ascending. columnMenu.dataSource.columnMenuItemSortAsc.enabled boolean true Enables the column menu item sort ascending. columnMenu.dataSource.columnMenuItemSortAsc.icon string "smart-icon-sort-a-z" Sets the icon of the column menu item sort ascending. columnMenu.dataSource.columnMenuItemSortAsc.label string "{{messages}}" Sets the label of the column menu item sort ascending. columnMenu.dataSource.columnMenuItemSortDesc object Please expand entry to see sub properties Describes the settings of the column menu item sort descending. The expected object has the following fields: columnMenu.dataSource.columnMenuItemSortDesc.command string "sortDescCommand" Sets the command of the column menu item sort descending. columnMenu.dataSource.columnMenuItemSortDesc.visible string "auto" Sets the visibility of the column menu item sort descending. columnMenu.dataSource.columnMenuItemSortDesc.enabled boolean true Enables the column menu item sort descending. columnMenu.dataSource.columnMenuItemSortDesc.icon string "smart-icon-sort-z-a" Sets the icon of the column menu item sort descending. columnMenu.dataSource.columnMenuItemSortDesc.label string "{{messages}}" Sets the label of the column menu item sort descending. columnMenu.dataSource.columnMenuItemRemoveSort object Please expand entry to see sub properties Describes the settings of the column menu item remove sort. The expected object has the following fields: columnMenu.dataSource.columnMenuItemRemoveSort.command string "removeSortCommand" Sets the command of the column menu item remove sort. columnMenu.dataSource.columnMenuItemRemoveSort.visible string "auto" Sets the visibility of the column menu item remove sort. columnMenu.dataSource.columnMenuItemRemoveSort.enabled boolean true Enables the column menu item remove sort. columnMenu.dataSource.columnMenuItemRemoveSort.icon string "smart-icon-cancel-circled" Sets the icon of the column menu item remove sort. columnMenu.dataSource.columnMenuItemRemoveSort.label string "{{messages}}" Sets the label of the column menu item remove sort. columnMenu.dataSource.columnMenuItemFilter object Please expand entry to see sub properties Describes the settings of the column menu item filter. The expected object has the following fields: columnMenu.dataSource.columnMenuItemFilter.command string "addFilterCommand" Sets the command of the column menu item filter. columnMenu.dataSource.columnMenuItemFilter.visible string "auto" Sets the visibility of the column menu item filter. columnMenu.dataSource.columnMenuItemFilter.enabled boolean true Enables the column menu item filter. columnMenu.dataSource.columnMenuItemFilter.icon string "smart-icon-add-filter" Sets the icon of the column menu item filter. columnMenu.dataSource.columnMenuItemFilter.label string "{{messages}}" Sets the label of the column menu item filter. columnMenu.dataSource.columnMenuItemRemoveFilter object Please expand entry to see sub properties Describes the settings of the column menu item remove filter. The expected object has the following fields: columnMenu.dataSource.columnMenuItemRemoveFilter.command string "removeFilterCommand" Sets the command of the column menu item remove filter. columnMenu.dataSource.columnMenuItemRemoveFilter.enabled boolean true Enables the column menu item remove filter. columnMenu.dataSource.columnMenuItemRemoveFilter.visible string "auto" Sets the visibility of the column menu item remove filter. columnMenu.dataSource.columnMenuItemRemoveFilter.icon string "smart-icon-cancel-circled-outline" Sets the icon of the column menu item remove filter. columnMenu.dataSource.columnMenuItemRemoveFilter.label string "{{messages}}" Sets the label of the column menu item remove filter. columnMenu.dataSource.columnMenuItemGroupBy object Please expand entry to see sub properties Describes the settings of the column menu item group by. The expected object has the following fields: columnMenu.dataSource.columnMenuItemGroupBy.command string "groupByCommand" Sets the command of the column menu item group by. columnMenu.dataSource.columnMenuItemGroupBy.enabled boolean true Enables the column menu item group by. columnMenu.dataSource.columnMenuItemGroupBy.visible string "auto" Sets the visibility of the column menu item group by. columnMenu.dataSource.columnMenuItemGroupBy.icon string "smart-icon-group-by" Sets the icon of the column menu item group by. columnMenu.dataSource.columnMenuItemGroupBy.label string "{{messages}}" Sets the label of the column menu item group by. columnMenu.dataSource.columnMenuItemRemoveGroupBy object Please expand entry to see sub properties Describes the settings of the column menu item group by. The expected object has the following fields: columnMenu.dataSource.columnMenuItemRemoveGroupBy.command string "groupByCommand" Sets the command of the column menu item group by. columnMenu.dataSource.columnMenuItemRemoveGroupBy.enabled boolean true Enables the column menu item group by. columnMenu.dataSource.columnMenuItemRemoveGroupBy.visible string "auto" Sets the visibility of the column menu item group by. columnMenu.dataSource.columnMenuItemRemoveGroupBy.icon string "smart-icon-group-by" Sets the icon of the column menu item group by. columnMenu.dataSource.columnMenuItemRemoveGroupBy.label string "{{messages}}" Sets the label of the column menu item group by. columnMenu.dataSource.columnMenuItemHide object Please expand entry to see sub properties Describes the settings of the column menu item hide. The expected object has the following fields: columnMenu.dataSource.columnMenuItemHide.command string "hideColumnCommand" Sets the command of the column menu item hide. columnMenu.dataSource.columnMenuItemHide.enabled boolean true Enables the column menu item hide. columnMenu.dataSource.columnMenuItemHide.visible boolean false Sets the visibility of the column menu item hide. columnMenu.dataSource.columnMenuItemHide.icon string "smart-icon-hide" Sets the icon of the column menu item hide. columnMenu.dataSource.columnMenuItemHide.label string "{{messages}}" Sets the label of the column menu item hide. columnMenu.dataSource.columnMenuItemDelete object Please expand entry to see sub properties Describes the settings of the column menu item delete. The expected object has the following fields: columnMenu.dataSource.columnMenuItemDelete.command string "deleteColumnCommand" Sets the command of the column menu item delete. columnMenu.dataSource.columnMenuItemDelete.enabled boolean true Enables the column menu item delete. columnMenu.dataSource.columnMenuItemDelete.visible boolean false Sets the visibility of the column menu item delete. columnMenu.dataSource.columnMenuItemDelete.icon string "smart-icon-delete" Sets the icon of the column menu item delete. columnMenu.dataSource.columnMenuItemDelete.label string "{{messages}}" Sets the label of the column menu item delete.
columnMenu.visible	boolean	false
Gets the visibility of the column menu. Returns true, when the column menu is visible.
columnMenu.enabled	boolean	false
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.
columnMenu.width	number	250
Sets the width of the column menu.
columnMenu.height	number | null	null
Sets the height of the column menu.

Describes the settings of the column groups.

Try a demo showcasing the property columnGroups.

Code example

Each member of the columnGroups array is an object with the following fields:

columnGroups[n].label	string	""
Sets the label.
columnGroups[n].align	string	""
Sets the align.
columnGroups[n].name	string	""
Sets the name of the column group.

Sets the Grid Charting Data Visualization.

Try a demo showcasing the property charting.

The expected object has the following fields:

charting.enabled	boolean	false
Sets or gets whether charting is enabled.
charting.colorScheme	string	"scheme01"
Sets or gets the charting colors. Accepts the 'colorScheme' values of our Chart component.
charting.appendTo	any	null
Sets or gets the chart's container.
charting.dialog	object	Please expand entry to see sub properties
Sets or gets the charting dialog. The expected object has the following fields: charting.dialog.header string "{{message}}" Sets or gets the dialog header. charting.dialog.height any 400 Sets or gets the dialog height. charting.dialog.width any 400 Sets or gets the dialog width. charting.dialog.left any "center" Sets or gets the dialog Left position. charting.dialog.top any "center" Sets or gets the dialog Top position. charting.dialog.enabled boolean true Sets or gets whether the dialog is enabled. charting.dialog.visible boolean false Gets whether the dialog is displayed.

Sets the TreeGrid checkboxes.

Try a demo showcasing the property checkBoxes.

The expected object has the following fields:

checkBoxes.visible	boolean	false
Sets the visibility of the TreeGrid checkboxes.
checkBoxes.hasThreeStates	boolean	false
Sets the three-state mode of the TreeGrid checkboxes. In that mode, checking a checkbox affects the parent-child rows checkboxes.

Sets the Grid Data Export options.

The expected object has the following fields:

dataExport.header	boolean	true
Sets whether the columns header will be exported.
dataExport.filterBy	object	null
Sets whether the export uses the applied filters.
dataExport.groupBy	object	null
Sets the groups of the exported data.
dataExport.style	object	null
Sets a custom style object of the dataExport.
dataExport.fileName	string	"smartGrid"
Sets the exported file's name.
dataExport.pageOrientation	string	"portrait"
Sets the page orientation, when exporting to PDF.
dataExport.expandChar	string	"+"
Sets the expand char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
dataExport.collapseChar	string	"-"
Sets the collapse char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
dataExport.view	boolean	false
Exports only the visible data of the Grid.
dataExport.viewStart	number | null	null
Determines the start row index that will be exported or printed. 'view' should be set to true
dataExport.viewEnd	number | null	null
Determines the end row index that will be exported or printed. 'view' should be set to true

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

Try a demo showcasing the property dataSource.

Describes the grid's editing settings.

The expected object has the following fields:

editing.allowRowHeaderEdit	boolean	false
Enables row header cells editing. Try a demo showcasing the property allowRowHeaderEdit.
editing.allowColumnHeaderEdit	boolean	false
Enables column headers editing. Try a demo showcasing the property allowColumnHeaderEdit.
editing.enabled	boolean	false
Enables editing.
editing.batch	boolean	false
Enables batch editing. This allows editing multiple grid rows on the client side and sending them with a single server request. Try a demo showcasing the property batch.
editing.action	string	"click"
Possible values: 'none' 'click' 'dblClick' Determines the way editing is initiated.
editing.commandKeys	object	Please expand entry to see sub properties
Describes command keys. The expected object has the following fields: editing.commandKeys.commandKeyEdit object Please expand entry to see sub properties Describes the edit command key. The expected object has the following fields: editing.commandKeys.commandKeyEdit.command string "commandKeyEditCommand" Sets the name of the edit key command. editing.commandKeys.commandKeyEdit.key string "F2" Sets the key that invokes the edit command. editing.commandKeys.commandKeyCancel object Please expand entry to see sub properties Describes the cancel command key. The expected object has the following fields: editing.commandKeys.commandKeyCancel.command string "commandKeyCancelCommand" Sets the name of the cancel key command. editing.commandKeys.commandKeyCancel.key string "Escape" Sets the key that invokes the cancel command. editing.commandKeys.commandKeyUpdate object Please expand entry to see sub properties Describes the update command key. The expected object has the following fields: editing.commandKeys.commandKeyUpdate.command string "commandKeyUpdateCommand" Sets the name of the update key command. editing.commandKeys.commandKeyUpdate.key string "Enter" Sets the key that invokes the update command.
editing.commandBar	object	Please expand entry to see sub properties
Describes the grid's command bar settings. The command bar is a toolbar or statusbar with tools for saving and reverting edits. Try a demo showcasing the property commandBar. The expected object has the following fields: editing.commandBar.visible boolean false Makes the command bar visible. editing.commandBar.position string "near" Possible values: 'near' 'far' 'both' Sets the command bar's position. editing.commandBar.displayMode string "labelAndIcon" Possible values: 'label' 'icon' 'labelAndIcon' Sets what is to be displayed in command bar buttons. editing.commandBar.dataSource object Please expand entry to see sub properties Sets the command bar's data source. The expected object has the following fields: editing.commandBar.dataSource.commandBarAddRow object Please expand entry to see sub properties Describes the settings of the command bar's button for adding rows. The expected object has the following fields: editing.commandBar.dataSource.commandBarAddRow.command any "commandBarAddRowCommand" Sets the name of the add row command. editing.commandBar.dataSource.commandBarAddRow.icon string "smart-icon-plus" A class name to be applied to the add row button's icon. editing.commandBar.dataSource.commandBarAddRow.label string "{{messages}}" The label of the add row button. editing.commandBar.dataSource.commandBarAddRow.visible any false Makes the add row button visible. editing.commandBar.dataSource.commandBarDeleteRow object Please expand entry to see sub properties Describes the settings of the command bar's button for deleting rows. The expected object has the following fields: editing.commandBar.dataSource.commandBarDeleteRow.command any "commandBarDeleteRowCommand" Sets the name of the delete row command. editing.commandBar.dataSource.commandBarDeleteRow.icon string "smart-icon-delete" A class name to be applied to the delete row button's icon. editing.commandBar.dataSource.commandBarDeleteRow.label string "{{messages}}" The label of the delete row button. editing.commandBar.dataSource.commandBarDeleteRow.visible any false Makes the delete row button visible. editing.commandBar.dataSource.commandBarBatchSave object Please expand entry to see sub properties Describes the settings of the command bar's button for saving changes. The expected object has the following fields: editing.commandBar.dataSource.commandBarBatchSave.command any "commandBarBatchSaveCommand" Sets the name of the save command. editing.commandBar.dataSource.commandBarBatchSave.icon string "smart-icon-save" A class name to be applied to the save button's icon. editing.commandBar.dataSource.commandBarBatchSave.label string "{{messages}}" The label of the save button. editing.commandBar.dataSource.commandBarBatchSave.visible any true Makes the save button visible. editing.commandBar.dataSource.commandBarBatchRevert object Please expand entry to see sub properties Describes the settings of the command bar's button for reverting changes. The expected object has the following fields: editing.commandBar.dataSource.commandBarBatchRevert.command any "commandBarBatchRevertCommand" Sets the name of the revert command. editing.commandBar.dataSource.commandBarBatchRevert.icon string "smart-icon-revert" A class name to be applied to the revert button's icon. editing.commandBar.dataSource.commandBarBatchRevert.label string "{{messages}}" The label of the revert button. editing.commandBar.dataSource.commandBarBatchRevert.visible any true Makes the revert button visible.
editing.commandColumn	object	Please expand entry to see sub properties
Describes the grid's command column settings. The command column can be used to edit or delete a row. Try a demo showcasing the property commandColumn. The expected object has the following fields: editing.commandColumn.visible boolean false Makes the command column visible. editing.commandColumn.inline boolean false Enables inline display of the command column. editing.commandColumn.position string "far" Possible values: 'near' 'far' Sets the command column's position. editing.commandColumn.displayMode string "icon" Possible values: 'label' 'icon' 'labelAndIcon' Sets what is to be displayed in command column buttons. editing.commandColumn.dataSource object Please expand entry to see sub properties Sets the command column's data source. The expected object has the following fields: editing.commandColumn.dataSource.commandColumnMenu object Please expand entry to see sub properties 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. The expected object has the following fields: editing.commandColumn.dataSource.commandColumnMenu.command any "commandColumnMenuCommand" undefined editing.commandColumn.dataSource.commandColumnMenu.icon string "smart-icon-menu" undefined editing.commandColumn.dataSource.commandColumnMenu.label string "{{messages}}" undefined editing.commandColumn.dataSource.commandColumnMenu.visible any false undefined editing.commandColumn.dataSource.commandColumnEdit object Please expand entry to see sub properties Describes the settings of the command column's button for editing rows. The expected object has the following fields: editing.commandColumn.dataSource.commandColumnEdit.command any "commandColumnEditCommand" Sets the name of the edit row command. editing.commandColumn.dataSource.commandColumnEdit.icon string "smart-icon-rename" A class name to be applied to the edit row button's icon. editing.commandColumn.dataSource.commandColumnEdit.label string "{{messages}}" The label of the edit row button. editing.commandColumn.dataSource.commandColumnEdit.visible any "auto" Makes the edit row button visible. editing.commandColumn.dataSource.commandColumnDelete object Please expand entry to see sub properties Describes the settings of the command column's button for deleting rows. The expected object has the following fields: editing.commandColumn.dataSource.commandColumnDelete.command any "commandColumnDeleteCommand" Sets the name of the delete row command. editing.commandColumn.dataSource.commandColumnDelete.icon string "smart-icon-delete" A class name to be applied to the delete row button's icon. editing.commandColumn.dataSource.commandColumnDelete.label string "{{messages}}" The label of the delete row button. editing.commandColumn.dataSource.commandColumnDelete.visible any true Makes the delete row button visible. editing.commandColumn.dataSource.commandColumnUpdate object Please expand entry to see sub properties Describes the settings of the command column's button for updating rows. The expected object has the following fields: editing.commandColumn.dataSource.commandColumnUpdate.command any "commandColumnUpdateCommand" Sets the name of the update row command. editing.commandColumn.dataSource.commandColumnUpdate.icon string "smart-icon-save" A class name to be applied to the update row button's icon. editing.commandColumn.dataSource.commandColumnUpdate.label string "{{messages}}" The label of the update row button. editing.commandColumn.dataSource.commandColumnUpdate.visible any "auto" Makes the update row button visible. editing.commandColumn.dataSource.commandColumnCancel object Please expand entry to see sub properties Describes the settings of the command column's button for canceling edits. The expected object has the following fields: editing.commandColumn.dataSource.commandColumnCancel.command any "commandColumnCancelCommand" Sets the name of the cancel command. editing.commandColumn.dataSource.commandColumnCancel.icon string "smart-icon-cancel-circled" A class name to be applied to the cancel button's icon. editing.commandColumn.dataSource.commandColumnCancel.label string "{{messages}}" The label of the cancel button. editing.commandColumn.dataSource.commandColumnCancel.visible any "auto" Makes the cancel button visible. editing.commandColumn.dataSource.commandColumnCustom object Please expand entry to see sub properties Describes the settings of the command column's custom button. The expected object has the following fields: editing.commandColumn.dataSource.commandColumnCustom.command any "" Sets the name of the custom command. editing.commandColumn.dataSource.commandColumnCustom.icon string "smart-icon-copy-record" A class name to be applied to the custom button's icon. editing.commandColumn.dataSource.commandColumnCustom.label string "" The label of the custom button. editing.commandColumn.dataSource.commandColumnCustom.visible any false Makes the custom button visible. editing.commandColumn.width number | null null Sets the width of the command column.
editing.mode	string	"cell"
Possible values: 'cell' 'row' Sets the grid's edit mode. Try a demo showcasing the property mode.
editing.addNewRow	object	Please expand entry to see sub properties
Describes the settings of the 'Add New Row' UI element which enables the quick adding of rows to the Grid with a single click. Try a demo showcasing the property addNewRow. The expected object has the following fields: editing.addNewRow.position string "both" Possible values: 'near' 'far' 'both' Sets the position of the 'Add New Row' UI element. editing.addNewRow.visible boolean false Makes the 'Add New Row' UI element visible. editing.addNewRow.label string "{{message}}" Sets the label of the 'Add New Row' UI element.
editing.dialog	object	Please expand entry to see sub properties
Describes dialog's editing settings. The expected object has the following fields: editing.dialog.header string "{{message}}" Sets the header text of the dialog editing.dialog.height any "auto" Sets the height of the edit dialog. editing.dialog.width any "auto" Sets the width of the edit dialog. editing.dialog.left any "center" Sets the 'left' css property to the dialog. editing.dialog.top any "center" Sets the 'top' css property to the dialog. editing.dialog.enabled boolean false Enables dialog editing option. editing.dialog.visible boolean false Sets the visibility of the dialog.
editing.addDialog	object	Please expand entry to see sub properties
Describes add dialog's settings The expected object has the following fields: editing.addDialog.header string "{{message}}" Sets the header text of the dialog editing.addDialog.height any "auto" Sets the height of the dialog. editing.addDialog.width any "auto" Sets the width of the dialog. editing.addDialog.left any "center" Sets the 'left' css property to the dialog. editing.addDialog.top any "center" Sets the 'top' css property to the dialog. editing.addDialog.enabled boolean false Enables the add dialog option. editing.addDialog.visible boolean false Sets the visibility of the dialog.
editing.deleteDialog	object	Please expand entry to see sub properties
Describes delete dialog's settings The expected object has the following fields: editing.deleteDialog.header string "{{message}}" Sets the header text of the dialog editing.deleteDialog.height any "auto" Sets the height of the dialog. editing.deleteDialog.width any "auto" Sets the width of the dialog. editing.deleteDialog.left any "center" Sets the 'left' css property to the dialog. editing.deleteDialog.top any "center" Sets the 'top' css property to the dialog. editing.deleteDialog.enabled boolean false Enables the delete dialog option. editing.deleteDialog.visible boolean false Sets the visibility of the dialog.

Describes the grid's filtering settings.

Try a demo showcasing the property filtering.

The expected object has the following fields:

filtering.enabled	boolean	false
Enables filtering.
filtering.filter	[]	[]
An array of filtering conditions to apply to the grid. Each member of the filter array is an array with two members. The first one is the column dataField to apply the filter to. The second one is the filtering condition.
filtering.filterRow	object	Please expand entry to see sub properties
(In Development)Describes the filter row's settings. The expected object has the following fields: filtering.filterRow.visible boolean false Makes the filter row visible. filtering.filterRow.menuVisible boolean false Makes the filter row's menu visible. filtering.filterRow.applyMode string "auto" Possible values: 'auto' 'click' Sets the way filtering through the filter row is applied. filtering.filterRow.autoApplyModeDelay number 300 Sets the delay (in milliseconds) before applying filtering (when filtering.filterRow.applyMode is 'auto').
filtering.filterMenu	object	Please expand entry to see sub properties
Describes the settings for the filter menu. The expected object has the following fields: filtering.filterMenu.visible boolean true Sets the visibility of the filter menu. filtering.filterMenu.buttons string[] ["cancel","clear","filter"] Sets the button text of the filter menu. filtering.filterMenu.dataSource any null Sets the filter menu datasource. filtering.filterMenu.width number 250 Sets the width of the filter menu. filtering.filterMenu.height number 200 Sets the height of the filter menu.
filtering.filterBuilder	object	Please expand entry to see sub properties
(In Development)Describes the settings for the filter builder. The expected object has the following fields: filtering.filterBuilder.visible boolean false Sets the visibility of the filter builder. filtering.filterBuilder.height number | null null Sets the height of the filter builder.

Describes the grid's grouping settings.

Try a demo showcasing the property grouping.

The expected object has the following fields:

grouping.enabled	boolean	false
Enables grouping.
grouping.allowCollapse	boolean	false
Enables collapsing of groups.
grouping.autoExpandAll	boolean	false
Automatically expands all groups.
grouping.expandMode	string	"buttonClick"
Possible values: 'buttonClick' 'rowClick' Sets the group expand mode.
grouping.groupRowHeight	any	50
Sets the group row height.
grouping.toggleButtonIndent	number	16
Sets the indent of the group toggle button.
grouping.groupIndent	number	16
Sets the indent of the group.
grouping.groupBar	object	Please expand entry to see sub properties
Describes the group bar's settings. The expected object has the following fields: grouping.groupBar.visible boolean false Makes the group bar visible. grouping.groupBar.allowColumnDragDrop boolean false Enables column drag and drop. grouping.groupBar.allowColumnCloseButtons boolean true Enables column close buttons.
grouping.groupPanel	object	Please expand entry to see sub properties
Describes the group panel's settings. The expected object has the following fields: grouping.groupPanel.visible boolean false Makes the group panel visible.
grouping.summaryRow	object	Please expand entry to see sub properties
Describes the group summary row's settings. The expected object has the following fields: grouping.summaryRow.inline boolean true Enables inline display of the group summary row. grouping.summaryRow.visible boolean true Makes the group summary row visible.

Default value:

{
  "en": {
    "invalidColumnProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Column: \"{{type}}\"",
    "invalidRowProperty": "{{elementType}}: Invalid property name \"{{propertyName}}\" set for Row\"",
    "frozenColumns": "{{elementType}}: To Pin/Freeze a column group, all columns within it should be frozen.",
    "frozenRows": "{{elementType}}: To Pin/Freeze a special cell, all rows within it should be frozen.",
    "columnGroups": "{{elementType}}: Please, check the initialization of the smartGrid's columns array. The columns in a column group are expected to be siblings in the columns array.",
    "min": "Min: {{value}}",
    "max": "Max: {{value}} ",
    "sum": "Sum: {{value}} ",
    "avg": "Avg: {{value}} ",
    "count": "Count: {{value}} ",
    "pagerFirstButton": "First",
    "pagerLastButton": "Last",
    "pagerPreviousButton": "Previous",
    "pagerNextButton": "Next",
    "pagerNavigateToLabel": "Go to:",
    "pagerPageSizeLabel": "Show:",
    "pagerNavigateToInputPlaceholder": "",
    "pagerEllipsis": "...",
    "pagerSummaryString": "of",
    "pagerSummaryPrefix": "of",
    "pagerSummarySuffix": "",
    "columnMenuCustomizeType": "Customize type",
    "columnMenuItemRename": "Rename",
    "columnMenuItemEditDescription": "Edit description",
    "columnMenuItemDuplicate": "Duplicate",
    "columnMenuItemInsertLeft": "Insert left",
    "columnMenuItemInsertRight": "Insert right",
    "columnMenuItemSortAsc": "Sort {{mode}}",
    "columnMenuItemSortDesc": "Sort {{mode}}",
    "columnMenuItemRemoveSort": "Remove Sort",
    "columnMenuItemFilter": "Filter",
    "columnMenuItemRemoveFilter": "Remove Filter",
    "columnMenuItemGroupBy": "Group by this column",
    "columnMenuItemRemoveGroupBy": "Remove Group",
    "columnMenuItemHide": "Hide",
    "columnMenuItemDelete": "Delete",
    "commandBarAddRow": "Add",
    "commandBarDeleteRow": "Delete",
    "commandBarBatchRevert": "Revert",
    "commandBarBatchSave": "Save",
    "commandColumnEdit": "Edit",
    "commandColumnDelete": "Delete",
    "commandColumnCancel": "Cancel",
    "commandColumnUpdate": "Update",
    "commandColumnMenu": "",
    "addNewRow": "Click here to add a new row",
    "dialogEditHeader": "Edit {{value}}",
    "dialogAddButtonConfirm": "ADD",
    "dialogAddButtonCancel": "CANCEL",
    "dialogEditButtonConfirm": "OK",
    "dialogEditButtonCancel": "CANCEL",
    "dialogDeleteButtonConfirm": "DELETE",
    "dialogDeleteButtonCancel": "CANCEL",
    "dialogAddHeader": "Add Row",
    "dialogDeleteHeader": "Delete Row",
    "dialogDeleteContent": "Are you sure you want to delete this row?",
    "calendar": {
      "/": "/",
      ":": ":",
      "firstDay": 0,
      "days": {
        "names": [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday"
        ],
        "namesAbbr": [
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat"
        ],
        "namesShort": [
          "Su",
          "Mo",
          "Tu",
          "We",
          "Th",
          "Fr",
          "Sa"
        ]
      },
      "months": {
        "names": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December",
          ""
        ],
        "namesAbbr": [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
          ""
        ]
      },
      "AM": [
        "AM",
        "am",
        "AM"
      ],
      "PM": [
        "PM",
        "pm",
        "PM"
      ],
      "eras": [
        {
          "name": "A.D.",
          "start": null,
          "offset": 0
        }
      ],
      "currencySymbol": "$",
      "currencySymbolPosition": "before",
      "decimalSeparator": ".",
      "thousandsSeparator": ","
    }
  }
}

Sets the messages values.

Callback function(cell: Smart.Grid.Cell) called when the Grid needs a cell value to render it. When you implement this function, you can override the default cell value rendering.

Args:

• cell: Smart.Grid.Cell - Smart.Grid.Cell object.

Callback function(cell: Smart.Grid.Cell, oldValue, value, confirm: function) 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.

Args:

• cell: Smart.Grid.Cell - Smart.Grid.Cell object.
• oldValue: any - The cell's old value.
• value: any - The cell's new value.
• confirm: function - Callback function which accepts a boolean argument. Invoke it with true to confirm the changes or false

Callback function(cell: Smart.Grid.Cell) called when a cell is rendered. This function is useful if you want to customize Smart.Grid.Cell properties, before the cell is rendered.

Args:

• cell: Smart.Grid.Cell - Smart.Grid.Cell object.

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

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

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

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

Args:

• chart: Smart.Chart - Smart.Chart object.

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

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

Args:

• event: KeyboardEvent - KeyboardEvent object.

Callback function(index: number, row: Smart.Grid.Row) called when a row is initializing. This function can be used to customize the row settings.

Args:

• index: number - row's bound index. The index is number.
• row: Smart.Grid.Row - Smart.Grid.Row object

Callback function(index: number, row: Smart.Grid.Row, detail: HTMLElement) called when a row detail is initializing. Row details are displayed below the row's data or in a separate dialog.

Args:

• index: number - row's bound index. The index is number.
• row: Smart.Grid.Row - Smart.Grid.Row object
• detail: HTMLElement - The HTMLElement displayed as a row detail.

Callback function(index: number, row: Smart.Grid.Row, detail: HTMLElement) called when a row detail is udpating.

Args:

• index: number - row's bound index. The index is number.
• row: Smart.Grid.Row - Smart.Grid.Row object
• detail: HTMLElement - The HTMLElement displayed as a row detail.

Callback function(index: number, row: Smart.Grid.Row) called when a row has been inserted.

Args:

• index: number - row's bound index. The index is number.
• row: Smart.Grid.Row - Smart.Grid.Row object

Callback function(index: number, row: Smart.Grid.Row) called when a row has been removed.

Args:

• index: number - row's bound index. The index is number.
• row: Smart.Grid.Row - Smart.Grid.Row object

Callback function(row: Smart.Grid.Row, oldValues, values, confirm: function) 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.

Args:

• row: Smart.Grid.Row - Smart.Grid.Row object.
• oldValues: [] - Indexed Array, where the index is a column data field and the value is the old cell value.
• values: [] - Indexed Array, where the index is a column data field and the value is the new cell value.
• confirm: function - Callback function which accepts a boolean argument. Invoke it with true to confirm the changes or false

Callback function(index: number, row: Smart.Grid.Row) called when a row has been updated.

Args:

• index: number - row's bound index. The index is number.
• row: Smart.Grid.Row - Smart.Grid.Row object

Callback function(index: number, column: Smart.Grid.Column) called when a column has been initialized. This function can be used to customize the column settings.

Args:

• index: number - column's bound index. The index is number.
• column: Smart.Grid.Column - Smart.Grid.Column object

Callback function(index: number, column: Smart.Grid.Column) called when a column has been inserted.

Args:

• index: number - column's bound index. The index is number.
• column: Smart.Grid.Column - Smart.Grid.Column object

Callback function(index: number, column: Smart.Grid.Column) called when a column has been removed.

Args:

• index: number - column's bound index. The index is number.
• column: Smart.Grid.Column - Smart.Grid.Column object

Callback function(index: number, column: Smart.Grid.Column) called when a column has been updated.

Args:

• index: number - column's bound index. The index is number.
• column: Smart.Grid.Column - Smart.Grid.Column object

Callback function(name: string, command: function, details: Object, event: Event, handled: boolean) 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.

Args:

• name: string - command's name.
• command: function - The command's default function called by the Grid
• details: Smart.Grid.Cell | null - The command's default arguments called by the Grid. Most frequently this parameter is empty or is Smart.Grid.Cell instance.
• event: Event | KeyboardEvent | PointerEvent - Event object. It could be also KeyboardEvent object when the command's action is related to a keyboard action.
• handled: boolean - If this is set to true, the built-in command action function is not invoked.

Describes the paging settings.

Try a demo showcasing the property paging.

The expected object has the following fields:

paging.enabled	boolean	false
Enables pagination.
paging.spinner	object	Please expand entry to see sub properties
Describes the spinner pagination settings. The expected object has the following fields: paging.spinner.enabled boolean false Enables spinner pagination. paging.spinner.step number 1 Sets the step of page
paging.pageSize	number	10
Sets the number of rows per page.
paging.pageIndex	number	0
Sets the start page.

Describes the pager settings.

Try a demo showcasing the property pager.

The expected object has the following fields:

pager.autoEllipsis	string	"both"
Possible values: 'none' 'before' 'after' 'both' Sets the ellipsis display mode.
pager.position	string	"far"
Possible values: 'near' 'far' 'both' Sets the position of pager.
pager.template	string	""
Sets a template for the pager.
pager.pageSizeSelector	object	Please expand entry to see sub properties
Describes the settings for the 'rows per page' option. The expected object has the following fields: pager.pageSizeSelector.visible boolean false Sets the visibility of the 'rows per page' option. pager.pageSizeSelector.dataSource object [10,20,50] Sets the count of the 'rows per page' option. pager.pageSizeSelector.position string "far" Possible values: 'near' 'far' Sets the position of the 'rows per page' option.
pager.summary	object	Please expand entry to see sub properties
Describes the summary settings. The expected object has the following fields: pager.summary.position string "far" Possible values: 'near' 'far' Sets the position of the summary. pager.summary.visible boolean false Sets the visibility of the summary.
pager.navigationButtons	object	Please expand entry to see sub properties
Describes the navigation buttons settings. The expected object has the following fields: pager.navigationButtons.position string "both" Possible values: 'near' 'far' 'both' Sets the navigation buttons position. pager.navigationButtons.prevNextButtons object Please expand entry to see sub properties Describes the settings about buttons 'previous page' and 'next page'. The expected object has the following fields: pager.navigationButtons.prevNextButtons.visible boolean true Sets the visibility of 'previous page' and 'next page' buttons. pager.navigationButtons.firstLastButtons object Please expand entry to see sub properties Describes the settings about buttons 'first page' and 'last page'. The expected object has the following fields: pager.navigationButtons.firstLastButtons.visible boolean true Sets the visibility of 'first page' and 'last page' buttons. pager.navigationButtons.labels object Please expand entry to see sub properties Describes the labels settings for navigation buttons. The expected object has the following fields: pager.navigationButtons.labels.visible boolean false Sets the visibility of labels for navigation buttons.
pager.navigationInput	object	Please expand entry to see sub properties
Describes the settings about navigation input option. The expected object has the following fields: pager.navigationInput.position string "far" Possible values: 'near' 'far' Sets the position of navigation input option. pager.navigationInput.visible boolean false Sets the visibility of navigation input option.
pager.pageIndexSelectors	object	Please expand entry to see sub properties
Describes the settings for the numeric page buttons. The expected object has the following fields: pager.pageIndexSelectors.visible boolean true Sets the visibility of numeric page buttons. pager.pageIndexSelectors.dataSource any 10 Sets the number of visible page buttons.
pager.visible	boolean	false
Sets the visibility of pager.

Sets the row details.

Try a demo showcasing the property rowDetail.

The expected object has the following fields:

rowDetail.enabled	boolean	false
Enables the row details.
rowDetail.height	number	200
Sets the height of the row details.
rowDetail.position	string	"near"
Possible values: 'near' 'far' Sets the position of the Column which allows you to dynamically expand/collapse the row details.
rowDetail.template	any	""
Sets the template of the row details.
rowDetail.visible	boolean	true
Sets the visibility of the Column which allows you to dynamically expand/collapse the row details.
rowDetail.dialog	object	Please expand entry to see sub properties
Sets the row details dialog. When enabled, row details will be displayed in a Dialog. The expected object has the following fields: rowDetail.dialog.header string "{{message}}" Sets the header of the dialog. rowDetail.dialog.height any 300 Sets the height of the dialog. rowDetail.dialog.width any 360 Sets the width of the dialog. rowDetail.dialog.left any "center" Sets the Left position of the dialog. rowDetail.dialog.top any "center" Sets the Top position of the dialog. rowDetail.dialog.enabled boolean false Sets whether the row details dialog is enabled. When enabled, row details are displayed in a dialog.

Possible values:

• 'physical'
• 'virtual'
• 'infinite'
• 'deferred'

Sets the scroll mode settings.

Try a demo showcasing the property scrolling.

Describes the column header settings.

The expected object has the following fields:

columnHeader.visible	boolean	true
Sets the column header visibility.

Describes the settings for the group header.

The expected object has the following fields:

groupHeader.visible	boolean	false
Sets the visibility of the group header.
groupHeader.template	string	""
Sets a template for the group header.

Describes the header settings of the grid.

The expected object has the following fields:

header.visible	boolean	false
Sets the header visibility.
header.template	string	""
Sets a template for the header.

Describes the footer settings of the grid.

The expected object has the following fields:

footer.visible	boolean	false
Sets the footer visibility.
footer.template	string	""
Sets a template for the footer.

The rows property is used to describe all rows displayed in the grid. Each row is Smart.Grid.Row object.

Code example

Each member of the rows array is an object with the following fields:

rows[n].allowToggle	boolean	true
Sets or gets the row can be expanded or collapsed.
rows[n].allowResize	boolean	true
Sets or gets the row can be resized.
rows[n].allowSelect	boolean	true
Sets or gets the row can be selected.
rows[n].allowCheck	boolean	true
Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
rows[n].checked	boolean	true
Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
rows[n].cells	Smart.Grid.Cell[]	"[]"
Gets the Row's Cells array. Each cell is an instance of Smart.Grid.Cell. Each member of the cells array is an object with the following fields: rows[n].cells[n].align string "'left'" "Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'". rows[n].cells[n].column Smart.Grid.Column null Gets the column associated to the cell. rows[n].cells[n].color string "''" Sets or gets the cell's text color. rows[n].cells[n].background string "''" Sets or gets the cell's background. rows[n].cells[n].borderColor string "''" Sets or gets the cell's borderColor. rows[n].cells[n].colSpan number 1 Sets or gets the cell's colSpan. rows[n].cells[n].editor "Object{template: string, setValue: function(value), getValue: function(), blur: function(), focus: function(), attach: function(), detach: function, selector: HTMLTemplateElement". Template values: 'checkBox', 'input', 'numberInput', 'autoComplete', 'dateTimePicker', 'custom' null Sets or gets the cell's editor. rows[n].cells[n].element HTMLElement null Gets the HTMLElement associated to the cell. rows[n].cells[n].getFormattedValue function(value, format) undefined Gets a formatted number or Date. rows[n].cells[n].isEditing boolean false Gets whether the cell is in edit mode. rows[n].cells[n].oldValue any null Gets the old value of the cell rows[n].cells[n].fontSize string "''" Sets or gets the cell's fontSize rows[n].cells[n].fontWeight string "''" Sets or gets the cell's fontWeight rows[n].cells[n].fontFamily string "''" Sets or gets the cell's fontFamily rows[n].cells[n].fontStyle string "''" Sets or gets the cell's fontStyle rows[n].cells[n].readonly boolean false "Sets or gets whether the cell can be edited.". rows[n].cells[n].row Smart.Grid.Row null Gets the row object associated to the cell. rows[n].cells[n].rowSpan number 1 Sets or gets the row span. rows[n].cells[n].selected boolean false Sets or gets whether the cell is selected. rows[n].cells[n].setProperties function(properties) "" "Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.". rows[n].cells[n].tooltip string "" "Allowed values are: 'top', 'middle' or 'bottom'". rows[n].cells[n].value any null The cell's value rows[n].cells[n].verticalAlign string "'middle'" "Sets or gets the vertical alignment. Allowed values are: 'top', 'middle' or 'bottom'".
rows[n].children	Smart.Grid.Row[]	""
Gets the row's children array of Smart.Grid.Row. This property is associated to the TreeGrid and Groupng mode of the Grid.
rows[n].data	any	""
Gets the row's bound data.
rows[n].detailHeight	number	200
Sets or gets the row's detail height.
rows[n].detailTemplate	HTMLTemplateElement	""
Sets or gets the row's detail template.
rows[n].element	object	null
Gets the HTML Element. The property returns null when the Row is not in the View.
rows[n].expanded	boolean	false
Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.
rows[n].header	HTMLElement	null
Gets the row's header element.
rows[n].height	number	30
Sets or gets the row's height.
rows[n].index	number	-1
Gets the row's bound index.
rows[n].id	string	""
Gets the row's bound id.
rows[n].leaf	boolean	false
Gets whether the row is leaf row in TreeGrid or Grouping mode.
rows[n].maxHeight	number	100
Sets or gets the row's maximum height.
rows[n].minHeight	number	30
Sets or gets the row's minimum height.
rows[n].freeze	string	""
Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far).
rows[n].selected	boolean	false
Sets or gets whether the row is selected.
rows[n].visible	boolean	true
Sets or gets whether the row is visible. Set the property to 'false' to hide the row.
rows[n].visibleIndex	number	-1
Gets the visible index of the row.

Describes the selection settings.

Try a demo showcasing the property selection.

The expected object has the following fields:

selection.enabled	boolean	false
Enables the selection option.
selection.allowRowHeaderSelection	boolean	false
Sets or gets whether selection by clicking on a Row header is allowed.
selection.allowColumnHeaderSelection	boolean	false
Sets or gets whether selection by clicking on a Column header is allowed.
selection.allowRowSelection	boolean	true
Sets or gets whether selection by clicking on a Row is allowed. Try a demo showcasing the property allowRowSelection.
selection.allowCellSelection	boolean	false
Sets or gets whether selection by clicking on a cell is allowed.
selection.allowDragSelection	boolean	true
Sets or gets whether selection by dragging(like in Excel) is allowed.
selection.allowDragSelectionAutoScroll	boolean	true
Sets or gets whether selection by dragging will automatically scroll the Grid view.
selection.allowCellDragSelectionHandle	boolean	true
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
selection.allowCellDragDropSelectionHandle	boolean	true
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.
selection.allowCellDragSelectionAutoFill	boolean	true
Sets or gets whether the Cells selection will be auto-filled with values on drop when dragging through the 'Drag Handle'.
selection.mode	string	"many"
Possible values: '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'
selection.action	string	"click"
Possible values: 'none' 'click' 'doubleClick' Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API.
selection.checkBoxes	object	Please expand entry to see sub properties
undefined Try a demo showcasing the property checkBoxes. The expected object has the following fields: selection.checkBoxes.enabled boolean false Sets or gets whether the checkboxes selection is enabled. In that mode a new column with checkboxes is displayed. selection.checkBoxes.action string "click" Possible values: 'none' 'click' 'doubleClick' Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API. selection.checkBoxes.selectAllMode string "page" Possible values: '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. selection.checkBoxes.position string "near" Possible values: 'near' 'far' Sets or gets whether the position of the checkbox selection column.
selection.selected	string	""
undefined

Describes sorting settings.

Try a demo showcasing the property sorting.

The expected object has the following fields:

sorting.enabled	boolean	false
Enables sorting.
sorting.sort	string[]	[]
Sets the sort columns to be sorted.
sorting.mode	string	"one"
Possible values: 'one' 'many' Sets the count of allowed sorting columns.
sorting.sortToggleThreeStates	boolean	true
Enables switching between the three sort states: ascending, descending and not sorted.

This event is triggered, when the edit begins.

Detail:

• row - The edited row. The row's type is: Smart.Grid.Row.
• column - The edited column. The column's type is: Smart.Grid.Column.
• cell - The edited cell. The cell's type is: Smart.Grid.Cell.

Code example

Bind to the beginEdit event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• started - The flag is true, when the selection starts. The flag is false, when the selection ends and when the user changes the selection by dragging.
• finished - The flag is true, when the selection ends. The flag is false, when the selection starts and when the user changes the selection by dragging.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the change event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• column - The clicked column. The column's type is: Smart.Grid.Column.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the columnClick event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• column - The double-clicked column. The column's type is: Smart.Grid.Column.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the columnDoubleClick event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• column - The resized column. The column's type is: Smart.Grid.Column.
• oldWidth - The old width of the column.
• width - The new width of the column.

Code example

Bind to the columnResize event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• row - The expanded row. The row's type is: Smart.Grid.Row.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the rowExpand event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• row - The collapsed row. The row's type is: Smart.Grid.Row.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the rowCollapse event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• row - The clicked row. The row's type is: Smart.Grid.Row.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the rowClick event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• row - The double-clicked row. The row's type is: Smart.Grid.Row.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the rowDoubleClick event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• row - The resized row. The row's type is: Smart.Grid.Row.
• oldHeight - The old height of the row.
• height - The new height of the row.

Code example

Bind to the rowResize event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• cell - The clicked cell. The cell's type is: Smart.Grid.Cell.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the cellClick event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• cell - The double-clicked cell. The cell's type is: Smart.Grid.Cell.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the cellDoubleClick event by "type": smartGrid

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


    // event handling code goes here.
}

This event is triggered, when the edit ends.

Detail:

• row - The edited row. The row's type is: Smart.Grid.Row.
• column - The edited column. The column's type is: Smart.Grid.Column.
• cell - The edited cell. The cell's type is: Smart.Grid.Cell.

Code example

Bind to the endEdit event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• columns - Array of columns. Each column in the array is Smart.Grid.Column object.
• data - Array of {dataField: string, filter: string}. dataField is the column's data field. filter is a filter expression like 'startsWith B'

Code example

Bind to the filter event by "type": smartGrid

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


    // event handling code goes here.
}

This event is triggered, when the grid is resized.

Code example

Bind to the resize event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('resize', function (event) {

    // event handling code goes here.
}

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

Detail:

• row - The tapped row. The row's type is: Smart.Grid.Row.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the rowTap event by "type": smartGrid

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


    // event handling code goes here.
}

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

Detail:

• cell - The tapped row. The cell's type is: Smart.Grid.Cell.
• originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser

Code example

Bind to the cellTap event by "type": smartGrid

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


    // event handling code goes here.
}

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

Code example

Bind to the page event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('page', function (event) {

    // event handling code goes here.
}

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

Detail:

• columns - Array of columns. Each column in the array is Smart.Grid.Column object.
• data - Array of {dataField: string, sortOrder: string, sortIndex: number}. dataField is the column's data field. sortOrder is 'asc' or 'desc', sortIndex is the index of the column in multi column sorting.

Code example

Bind to the sort event by "type": smartGrid

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


    // event handling code goes here.
}

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

Code example

Bind to the scrollBottomReached event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollBottomReached', function (event) {

    // event handling code goes here.
}

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

Code example

Bind to the scrollTopReached event by "type": smartGrid

const grid = document.querySelector('smart-grid');
grid.addEventListener('scrollTopReached', function (event) {

    // event handling code goes here.
}

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

Code example

Invoke the addNewRow(position?: string): boolean method.

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

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

Code example

Invoke the addUnboundRow(count: number, position?: string): boolean method.

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

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

Code example

Invoke the addFilter(dataField: string, filter: string, refreshFilters?: boolean): void method.

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

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

Code example

Invoke the autoSizeRows(): void method.

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

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

Code example

Invoke the autoSizeColumns(): void method.

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

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

Code example

Invoke the beginUpdate(): void method.

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

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

Code example

Invoke the beginEdit(rowId: string, dataField?: string): boolean method.

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

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

Code example

Invoke the clearFilter(): void method.

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

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

Code example

Invoke the clearSelection(): void method.

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

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

Code example

Invoke the cancelEdit(): void method.

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

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

Code example

Invoke the checkRow(rowId: string): void method.

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

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

Code example

Invoke the checkAllRows(): void method.

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

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

Code example

Invoke the clearRows(): void method.

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

Closes the column drop-down menu.

Code example

Invoke the closeMenu(): void method.

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

Collapses a TreeGrid or Grouping row.

Code example

Invoke the collapseRow(rowId: string): void method.

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

Collapses all TreeGrid or Grouping rows.

Code example

Invoke the collapseAllRows(): void method.

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

Creates a Chart, when charting is enabled.

Code example

Invoke the createChart(type: string, dataSource?: []): void method.

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

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

Code example

Invoke the deleteRow(rowId: string): void method.

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

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

Code example

Invoke the ensureVisible(rowId: string, dataField?: string): boolean method.

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

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

Code example

Invoke the endEdit(): void method.

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

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

Code example

Invoke the endUpdate(refresh?: boolean): void method.

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

Expands a TreeGrid or Grouping row.

Code example

Invoke the expandRow(rowId: string): void method.

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