Grid Typescript API
Interface
Grid
GridAppearance
GridBehavior
GridLayout
GridClipboard
GridColumn
GridColumnMenu
GridColumnMenuDataSource
GridCommand
GridColumnGroup
GridCharting
GridChartingDialog
GridCheckBoxes
GridDataExport
GridEditing
GridEditingCommandKeys
GridCommandKey
GridEditingCommandBar
GridEditingCommandBarDataSource
GridEditingCommandColumn
GridEditingCommandColumnDataSource
GridEditingAddNewRow
GridEditingDialog
GridEditingAddDialog
GridEditingDeleteDialog
GridFiltering
GridFilteringFilterRow
GridFilteringFilterMenu
GridFilteringFilterBuilder
GridGrouping
GridGroupingGroupBar
GridGroupingGroupPanel
GridGroupingSummaryRow
GridPaging
GridPagingSpinner
GridPager
GridPagerPageSizeSelector
GridPagerSummary
GridPagerNavigationButtons
GridPagerNavigationButtonsPrevNextButtons
GridPagerNavigationButtonsFirstLastButtons
GridPagerNavigationButtonsLabels
GridPagerNavigationInput
GridPagerPageIndexSelectors
GridRowDetail
GridRowDetailDialog
GridColumnHeader
GridGroupHeader
GridHeader
GridFooter
GridRow
GridRowCell
GridSelection
GridSelectionCheckBoxes
GridSorting
Grid
Data Grid UI Component that covers everything from paging, sorting, grouping, filtering, and editing to row and column virtualization, right-to-left layout, export to Excel and PDF and Accessibility.
Selector
smart-grid
Properties
appearanceGridAppearance
An object containing settings related to the grid's appearance.
behaviorGridBehavior
An object containing settings related to the grid's behavior.
layoutGridLayout
An object containing settings related to the grid's layout.
clipboardGridClipboard
The clipboard property is used to enable/disable clipboard operations with Ctrl+C, Ctrl+X and Ctrl+V keyboard navigations..
columns{label: string, dataField: string}[] | string[] | number | GridColumn[]
The columns property is used to describe all columns displayed in the grid.
Default value[]
columnMenuGridColumnMenu
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.
columnGroupsGridColumnGroup[]
Describes the settings of the column groups.
chartingGridCharting
Sets the Grid Charting Data Visualization.
checkBoxesGridCheckBoxes
Sets the TreeGrid checkboxes.
dataExportGridDataExport
Sets the Grid Data Export options.
dataSourceDataAdapter
Sets the grid's data source. The value of dataSource can be an instance of Smart.DataAdapter.
editingGridEditing
Describes the grid's editing settings.
filteringGridFiltering
Describes the grid's filtering settings.
groupingGridGrouping
Describes the grid's grouping settings.
messagesany
Sets the messages values.
Default value
onCellValue{(cell: GridRowCell): void}
Callback function(cell: GridRowCell) 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: GridRowCell, oldValue: any, value: any, confirm: {(commit: boolean): void}): void}
Callback function(cell: GridRowCell, 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.
onCellRender{(cell: GridRowCell): void}
Callback function(cell: GridRowCell) called when a cell is rendered. This function is useful if you want to customize GridRowCell 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.
onChartInit{(chart: Chart): void}
Callback function(chart: Smart.Chart) called when the chart has been initialized. You can use this function to customize the Chart element settings.
onRender{(): void}
Callback function() called when the grid has been rendered.
onKey{(event: KeyboardEvent): void}
Callback function(event: KeyboardEvent) called when the grid is on focus and a keyboard key is pressed.
onRowInit{(index: number, row: GridRow): void}
Callback function(index: number, row: GridRow) called when a row is initializing. This function can be used to customize the row settings.
onRowDetailInit{(index: number, row: GridRow, details: HTMLElement): void}
Callback function(index: number, row: GridRow, detail: HTMLElement) 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: GridRow, details: HTMLElement): void}
Callback function(index: number, row: GridRow, detail: HTMLElement) called when a row detail is udpating.
onRowInserted{(index: number, row: GridRow): void}
Callback function(index: number, row: GridRow) called when a row has been inserted.
onRowRemoved{(index: number, row: GridRow): void}
Callback function(index: number, row: GridRow) called when a row has been removed.
onRowUpdate{(index: number, row: GridRow, oldValues: any[], values: any[], confirm: {(commit: boolean): void}): void}
Callback function(row: GridRow, 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.
onRowUpdated{(index: number, row: GridRow): void}
Callback function(index: number, row: GridRow) called when a row has been updated.
onColumnInit{(index: number, column: GridColumn): void}
Callback function(index: number, column: GridColumn) called when a column has been initialized. This function can be used to customize the column settings.
onColumnInserted{(index: number, column: GridColumn): void}
Callback function(index: number, column: GridColumn) called when a column has been inserted.
onColumnRemoved{(index: number, column: GridColumn): void}
Callback function(index: number, column: GridColumn) called when a column has been removed.
onColumnUpdated{(index: number, column: GridColumn): void}
Callback function(index: number, column: GridColumn) called when a column has been updated.
onCommandany
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.
pagingGridPaging
Describes the paging settings.
pagerGridPager
Describes the pager settings.
rowDetailGridRowDetail
Sets the row details.
scrollingScrolling
Sets the scroll mode settings.
Default valuephysical
columnHeaderGridColumnHeader
Describes the column header settings.
groupHeaderGridGroupHeader
Describes the settings for the group header.
headerGridHeader
Describes the header settings of the grid.
footerGridFooter
Describes the footer settings of the grid.
rowsGridRow[]
The rows property is used to describe all rows displayed in the grid. Each row is GridRow object.
selectionGridSelection
Describes the selection settings.
sortingGridSorting
Describes sorting settings.
onbeginedit((this: Window, ev: Event) => any) | null
This event is triggered, when the edit begins.
Arguments
evEvent
ev.detailObject
ev.detail.row - The edited row. The row's type is: GridRow.
ev.detail.column - The edited column. The column's type is: GridColumn.
ev.detail.cell - The edited cell. The cell's type is: GridRowCell.
onchange((this: Window, ev: Event) => any) | null
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.
Arguments
evEvent
ev.detailObject
ev.detail.started boolean - The flag is true, when the selection starts. The flag is false, when the selection ends and when the user changes the selection by dragging.
ev.detail.finished boolean - The flag is true, when the selection ends. The flag is false, when the selection starts and when the user changes the selection by dragging.
ev.detail.originalEvent Event - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
oncolumnclick((this: Window, ev: Event) => any) | null
This event is triggered, when the user clicks on the header of a column.
Arguments
evEvent
ev.detailObject
ev.detail.column - The clicked column. The column's type is: GridColumn.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
oncolumndoubleclick((this: Window, ev: Event) => any) | null
This event is triggered, when the user double clicks on the header of a column.
Arguments
evEvent
ev.detailObject
ev.detail.column - The double-clicked column. The column's type is: GridColumn.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
oncolumnresize((this: Window, ev: Event) => any) | null
This event is triggered, when the user resized a column.
Arguments
evEvent
ev.detailObject
ev.detail.column - The resized column. The column's type is: GridColumn.
ev.detail.oldWidth - The old width of the column.
ev.detail.width - The new width of the column.
onrowexpand((this: Window, ev: Event) => any) | null
This event is triggered, when the user expands a row of the grid. The Grid is in TreeGrid/Grouping mode.
Arguments
evEvent
ev.detailObject
ev.detail.row - The expanded row. The row's type is: GridRow.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
onrowcollapse((this: Window, ev: Event) => any) | null
This event is triggered, when the user collapsed a row of the grid. The Grid is in TreeGrid/Grouping mode.
Arguments
evEvent
ev.detailObject
ev.detail.row - The collapsed row. The row's type is: GridRow.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
onrowclick((this: Window, ev: Event) => any) | null
This event is triggered, when the user clicks on a row of the grid.
Arguments
evEvent
ev.detailObject
ev.detail.row - The clicked row. The row's type is: GridRow.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
onrowdoubleclick((this: Window, ev: Event) => any) | null
This event is triggered, when the user double clicks on a row of the grid.
Arguments
evEvent
ev.detailObject
ev.detail.row - The double-clicked row. The row's type is: GridRow.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
onrowresize((this: Window, ev: Event) => any) | null
This event is triggered, when the user resized a row.
Arguments
evEvent
ev.detailObject
ev.detail.row - The resized row. The row's type is: GridRow.
ev.detail.oldHeight - The old height of the row.
ev.detail.height - The new height of the row.
oncellclick((this: Window, ev: Event) => any) | null
This event is triggered, when the user clicks on a cell of the grid.
Arguments
evEvent
ev.detailObject
ev.detail.cell - The clicked cell. The cell's type is: GridRowCell.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
oncelldoubleclick((this: Window, ev: Event) => any) | null
This event is triggered, when the user double clicks on a cell of the grid.
Arguments
evEvent
ev.detailObject
ev.detail.cell - The double-clicked cell. The cell's type is: GridRowCell.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
onendedit((this: Window, ev: Event) => any) | null
This event is triggered, when the edit ends.
Arguments
evEvent
ev.detailObject
ev.detail.row - The edited row. The row's type is: GridRow.
ev.detail.column - The edited column. The column's type is: GridColumn.
ev.detail.cell - The edited cell. The cell's type is: GridRowCell.
onfilter((this: Window, ev: Event) => any) | null
This event is triggered, when a filter is added or removed.
Arguments
evEvent
ev.detailObject
ev.detail.columns - Array of columns. Each column in the array is GridColumn object.
ev.detail.data - Array of {dataField: string, filter: string}. dataField is the column's data field. filter is a filter expression like 'startsWith B'
onresize((ev: Event) => any) | null
This event is triggered, when the grid is resized.
Arguments
evEvent
onrowtap((this: Window, ev: Event) => any) | null
This event is triggered when the user touches and holds on the row for at least 300ms.
Arguments
evEvent
ev.detailObject
ev.detail.row - The tapped row. The row's type is: GridRow.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
oncelltap((this: Window, ev: Event) => any) | null
This event is triggered when the user touches and holds on the cell for at least 300ms.
Arguments
evEvent
ev.detailObject
ev.detail.cell - The tapped row. The cell's type is: GridRowCell.
ev.detail.originalEvent - The original event object, which is 'pointer', 'touch' or 'mouse' Event object, depending on the device type and web browser
onpage((this: Window, ev: Event) => any) | null
This event is triggered, when the user changes the pages.
Arguments
evEvent
onsort((this: Window, ev: Event) => any) | null
This event is triggered, when a sorting column is added or removed.
Arguments
evEvent
ev.detailObject
ev.detail.columns - Array of columns. Each column in the array is GridColumn object.
ev.detail.data - Array of {dataField: string, sortOrder: string, sortIndex: number}. dataField is the column's data field. sortOrder is 'asc' or 'desc', sortIndex is the index of the column in multi column sorting.
onscrollbottomreached((this: Window, ev: Event) => any) | null
This event is triggered, when the user reaches the bottom of the grid.
Arguments
evEvent
onscrolltopreached((this: Window, ev: Event) => any) | null
This event is triggered, when the user reaches the top of the grid.
Arguments
evEvent
Methods
addNewRow( position?: string): boolean
Adds a new row and puts it into edit mode. When batch editing is enabled, the row is not saved until the batch edit is saved.
Arguments
position?string
'near' or 'far'
Returnsboolean
addUnboundRow( count: number, position?: string): boolean
Adds a new unbound row to the top or bottom. Unbound rows are not part of the Grid's dataSource. They become part of the dataSource, after an unbound row is edited.
Arguments
countnumber
The count of unbound rows.
position?string
'near' or 'far'
Returnsboolean
addFilter( dataField: string, filter: string, refreshFilters?: boolean): void
Adds a filter to a column. This method will apply a filter to the Grid data.
Arguments
dataFieldstring
column bound data field
filterstring
Filter expression like: 'startsWith B'
refreshFilters?boolean
autoSizeRows(): void
Auto-sizes grid rows. This method will update the height of all Grid rows.
autoSizeColumns(): void
Auto-sizes grid columns. This method will update the width of all Grid columns.
beginUpdate(): void
Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
beginEdit( rowId: string | number, dataField?: string): boolean
Begins row, cell or column. This method allows you to programmatically start a cell, row or column editing. After calling it, an editor HTMLElement will be created and displayed in the Grid.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
Returnsboolean
clearFilter(): void
Clears all filters. Refreshes the view and updates all filter input components.
clearSelection(): void
Clears the selection that user have made. All row, cell and column selection highlights will be removed.
cancelEdit(): void
Cancels the editing. This method closes the cell editor and cancels the changes.
checkRow( rowId: string | number): void
Checks a TreeGrid row. This method updates the row's check-box.
Arguments
rowIdstring | number
row bound id
checkAllRows(): void
Checks all TreeGrid or Grouping rows. This method updates all check-boxes in the TreeGrid or Grouping rows.
clearRows(): void
Clears the user selection and empties the data source. The Grid will display 'No Rows' in the view.
closeMenu(): void
Closes the column drop-down menu.
collapseRow( rowId: string | number): void
Collapses a TreeGrid or Grouping row.
Arguments
rowIdstring | number
row bound id
collapseAllRows(): void
Collapses all TreeGrid or Grouping rows.
createChart( type: string, dataSource?: any[]): void
Creates a Chart, when charting is enabled.
Arguments
typestring
Chart's type
dataSource?any[]
Chart's data source
deleteRow( rowId: string | number): void
Delete a row. When batch editing is enabled, the row is not saved until the batch edit is saved.
Arguments
rowIdstring | number
row bound id
ensureVisible( rowId: string | number, dataField?: string): boolean
Scrolls to a row or cell. This method scrolls to a row or cell, when scrolling is necessary. If pagination is enabled, it will automatically change the page.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
Returnsboolean
endEdit(): void
Ends the editing. This method confirms all changes and closes the opened cell editor(s).
endUpdate( refresh?: boolean): void
Ends the update operation. This method will resume the rendering and will refresh the Grid.
Arguments
refresh?boolean
The flag that control the calls of the refresh method.
expandRow( rowId: string | number): void
Expands a TreeGrid or Grouping row.
Arguments
rowIdstring | number
row bound id
expandAllRows(): void
Expands all TreeGrid or Grouping rows.
exportData( Dataformat: string): void
Exports the Grid data to .XLSX, .PDF, .JSON, .XML, .CSV, .TSV, .HTML, .JPEG or .PNG. The method uses the options of the dataExport property.
Arguments
Dataformatstring
'xlsx', 'pdf', 'json', 'xml', 'csv', 'tsv', 'html', 'png', 'jpeg'.
getSortedColumns(): {[dataField: string]: { sortOrder: string, sortIndex: number }}
Gets an array of columns with applied sorting.
Returns{[dataField: string]: { sortOrder: string, sortIndex: number }}
getSelection(): { rows: GridRow[], columns: GridColumn[], cells: GridRowCell[], focused: {id: string, dataField: string} }
Gets the selection.
Returns{ rows: GridRow[], columns: GridColumn[], cells: GridRowCell[], focused: {id: string, dataField: string} }
getFilteredColumns(): {[dataField: string]: GridColumn}
Gets an array of columns with applied filters.
Returns{[dataField: string]: GridColumn}
getVisibleRows(): GridRow[]
Gets an array of rows, which are visible and match the applied filter.
ReturnsGridRow[]
getViewRows(): GridRow[]
Gets the result of the getVisibleRows or the rows hierarchy, when the Grid is in TreeGrid/Grouping mode.
ReturnsGridRow[]
getBatchEditChanges(): { upDated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }
Gets the changes from the batch edit.
Returns{ upDated: [{ id: string, dataField: string, oldValue: Object, newValue: Object }], deleted: [{id: string, data: Object}], added: [{id: string, data: Object}] }
hasMenu(): boolean
Gets whether a column's drop-down menu is opened.
Returnsboolean
hideDetail( rowId: string | number): void
Hides the Details of a Row, when row details are enabled.
Arguments
rowIdstring | number
row bound id
openMenu( dataField: string): void
Opens a column drop-down menu.
Arguments
dataFieldstring
column bound data field
print(): void
Prints the Grid data. The method uses the options of the dataExport property. When printed, the Grid will not display any scrollbars so all rows and columns will be displayed. The grid will auto resize width and height to fit all contents. To customize the printing options, you can use the dataExport property.
render(): void
Renders the grid. This method will make a full-refresh like in the initial Grid creation. It will create Rows, Columns and Cells HTML Elements and then refresh the Grid layout.
refresh(): void
Refreshes the grid with the current property values. This method will refresh the Grid layout.
refreshView(): void
Refreshes the grid cells in view. The method is useful for live-updates of cell values.
removeFilter( dataField: string, refreshFilters?: boolean): void
Removes a column filter.
Arguments
dataFieldstring
column bound data field
refreshFilters?boolean
revertBatchEdit(): void
Reverts the batch edit changes. This method cancels all changes made by the end-user.
saveBatchEdit(): void
Saves the batch edit changes. This method confirms the editing changes made by the end-user.
select( rowId: string | number, dataField?: string): void
Selects a row, cell or column.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
selectRange( rowId: string | number, dataField: string, endRowId: string | number, endDataField: string): void
Selects a range of rows, cells or columns. The result of the method depends on the selection configuration of the Grid.
Arguments
rowIdstring | number
row bound id
dataFieldstring
column bound data field
endRowIdstring | number
row bound id
endDataFieldstring
column bound data field
showDetail( rowId: string | number): void
Shows the Details of a Row, when row details are enabled.
Arguments
rowIdstring | number
row bound id
unselect( rowId: string | number, dataField?: string): void
Unselects a row, cell or column.
Arguments
rowIdstring | number
row bound id
dataField?string
column bound data field
uncheckRow( rowId: string | number): void
Unchecks a TreeGrid row. Sets its check-box to false.
Arguments
rowIdstring | number
row bound id
uncheckAllRows(): void
Unchecks all TreeGrid or Grouping rows. Sets all check-boxes to false.
toggleRow( rowId: string | number): void
Toggles a TreeGrid row. When this method is called, the row is expanded, if it's state is collapsed and collapsed if it's state is expanded.
Arguments
rowIdstring | number
row bound id
GridAppearance
Properties
alternationStartnumber
Starting row index of alternating colors.
Default value0
alternationEndnumber
Ending row index of alternating colors.
Default value0
alternationCountnumber
number of row color alternations.
Default value0
allowColumnStickyPositionboolean
Enables sticky columns.
Default valuefalse
allowHoverboolean
Enables row hover effect. Applies a hover style to the cells.
Default valuefalse
allowHeaderHoverboolean
Enables header hover effect. Applies a hover style to the headers.
Default valuetrue
allowRowToggleAnimationboolean
Enables row toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.
Default valuefalse
allowRowDetailToggleAnimationboolean
Enables row detail toggle animation. This animation starts when you expand/collapse a row in TreeGrid/Grouping mode.
Default valuefalse
allowSortAnimationboolean
Enables sorting animation. Data records are sorted with animation, when sorting is applied.
Default valuefalse
allowColumnLabelAnimationboolean
Enables column label animation. The label is moved to 'left' with animation, when the column header's drop-down button is displayed on hover or sorting is applied.
Default valuetrue
allowColumnMenuAnimationboolean
Enables column menu animation. When you click on the column header's drop-down button, the menu is animated.
Default valuetrue
allowColumnSortButtonAnimationboolean
Enables column sort button animation. When you click on a sortable column to change the sort order, the sort button is animated.
Default valuetrue
allowColumnActionButtonAnimationboolean
Enables column action button animation. The drop-down button displayed on column header hover is optionally animated.
Default valuetrue
allowColumnFilterButtonAnimationboolean
Enables column filter button animation.
Default valuetrue
autoShowColumnSortButtonboolean
If enabled, automatically shows column sort button. The sort button is displayed only when the column is sorted. If the property's value is false, sort button will be always displayed to indicate that sorting is possible.
Default valuetrue
autoShowColumnActionButtonboolean
If enabled, automatically shows column action button.
Default valuetrue
autoShowColumnFilterButtonboolean
If enabled, automatically shows column filter button.
Default valuetrue
autoGenerateRowLabelModestring
Generates labels as 'numbers' or 'letters'. This property affects the rendering of the row header.
Default value"number
autoGenerateColumnLabelModestring
Generates labels as 'numbers' or 'letters. This property affects the rendering of the column header.
Default value"letter
displayLoadingIndicatorboolean
Sets the visibility of the loading indicator. This is the Loading... image displayed in the Grid while loading data.
Default valuefalse
loadingIndicatorPlaceholderstring
Sets the loading indicator label. This is the Text displayed while loading data.
Default value"Loading...
placeholderstring
Sets the placeholder of the Grid. The placeholder is displayed when the Grid is empty.
Default value"No Rows
sortAnimationDurationnumber
Sets the duration of sorting animation. This property is related to the allowSortAnimation property.
Default value500
showRowHeaderboolean
Shows or hides Row header.
Default valuefalse
showRowHeaderNumberboolean
Shows row indexes in the row header. The showRowHeader property should be true
Default valuefalse
showRowHeaderEditIconboolean
Shows edit icon when a cell or row is in edit state.
Default valuetrue
showRowHeaderSelectIconboolean
Shows select icon when the pointer is over the row header cell.
Default valuefalse
showRowHeaderFocusIconboolean
Shows focus icon on cell or row focus.
Default valuefalse
showColumnHeaderLinesboolean
Shows column header lines.
Default valuetrue
showColumnLinesboolean
Shows column lines.
Default valuetrue
showRowLinesboolean
Shows row lines.
Default valuetrue
showFilterColumnBackgroundboolean
Shows filtered column background, when filter is applied.
Default valuetrue
showSortColumnBackgroundboolean
Shows sorted column background, when sorting is applied.
Default valuetrue
showFrozenColumnBackgroundboolean
Shows frozen column background, when the Grid has frozen columns.
Default valuetrue
showFrozenRowBackgroundboolean
Shows filtered row background, when the Grid has frozen rows.
Default valuetrue
showColumnSortButtonboolean
Shows column sort button.
Default valuetrue
showColumnFilterButtonboolean
Shows column filter button.
Default valuetrue
showColumnDescriptionButtonboolean
Shows column description button. The button's style is customizable through the Grid CSS.
Default valuefalse
showColumnIconboolean
Shows column icon within the column's header.
Default valuefalse
showColumnCustomButtonboolean
Shows column custom button. User-defined button shown in the column header.
Default valuefalse
showColumnActionButtonboolean
Shows column action button. This is the drop-down button displayed in the column header.
Default valuetrue
showTooltipsboolean
Shows tooltips when user hovers columns or cells.
Default valuefalse
showHorizontalScrollBarOnFixedColumnsboolean
Shows horizontal scrollbar on fixed columns.
Default valuefalse
showVerticalScrollBarOnFixedColumnsboolean
Shows vertical scrollbar on fixed columns.
Default valuefalse
GridBehavior
Properties
allowColumnAutoSizeOnDoubleClickboolean
Auto-Resize on double-click of a column's right border.
Default valuetrue
allowRowAutoSizeOnDoubleClickboolean
Auto-Resize on double-click of a row's bottom border.
Default valuetrue
columnResizeModeGridResizeMode
Sets the column resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
Default valuenone
rowResizeModeGridResizeMode
Sets the row resize mode. split resize mode 'grows' or 'shrinks' the resize element's size and 'shrinks' or 'grows' the next sibling element's size. growAndShrink resize mode 'grows' or 'shrinks' the resize element's size
Default valuenone
GridLayout
Properties
allowCellsWrapboolean
Enables or disables the Cells Value wrapping. When the property is true, cell value can wrap in multiple lines.
Default valuefalse
autoGenerateColumnWidthnumber | null
Sets the width of the auto-generated Grid columns.
columnWidthany
Sets the width of the Grid columns.
columnHeightany
Sets the height of the Grid columns.
columnMinHeightany
Sets the minimum height of the Grid columns.
Default value30
rowMinHeightnumber
Sets the minimum height of the Grid rows.
Default value30
rowHeightany
Sets the height of the Grid rows. The property can be set to null, auto or a number.
GridClipboard
Properties
enabledboolean
Sets or gets whether the property is enabled.
Default valuetrue
autoFillModeGridClipboardAutoFillMode
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 valuefillSeries
onPasteValueany
Sets or gets a callback on paste.
Default valuenone
GridColumn
Properties
alignHorizontalAlignment
Sets or gets the column's header alignment. Accepts: 'left', 'right', 'center'
Default valueleft
allowExportboolean
Sets or gets whether the column can be exported.
Default valuetrue
allowGroupboolean
Sets or gets whether the column can be grouped.
Default valuetrue
allowHideboolean
Sets or gets whether the column can be hidden.
Default valuetrue
allowSelectboolean
Sets or gets whether the column can be selected.
Default valuetrue
allowEditboolean
Sets or gets whether the column can be edited.
Default valuetrue
allowSortboolean
Sets or gets whether the column can be sorted.
Default valuetrue
allowHeaderEditboolean
Sets or gets whether the column can be edited, when header editing is enabled.
Default valuetrue
allowFilterboolean
Sets or gets whether the column can be filtered.
Default valuetrue
allowReorderboolean
Sets or gets whether the column can be reordered.
Default valuetrue
allowResizeboolean
Sets or gets whether the column can be resized.
Default valuetrue
cellsFormatstring
Sets or gets the column's cells format.
Default value"
cellsAlignHorizontalAlignment
Sets or gets the column's cells alignment. Accepts: 'left', 'right' and 'center'
Default valueleft
cellsWrapstring
Sets or gets the column's cells wrapping. Accepts: true or false.
Default value"false
cellsVerticalAlignVerticalAlignment
Sets or gets the column's cells vertical alignment. Accepts: 'top', 'bottom' and 'center'
Default valuecenter
columnGroupstring
Sets the name of the column group.
Default value"
dataFieldstring
Sets or gets the column's data source bound field.
Default value"
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"true
elementHTMLElement
Gets the HTML Element. The property returns null when the Column is not in the View.
editorany
Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'numberInput', 'checkBox', 'deteTimePicker', 'textArea' or a custom object with 'template' property which defines the editor type, 'onInit' and 'onRender' callback functions.
Default value
freezePosition
Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the column to left(near) or right(far).
Default value
filterstring
Sets or gets the filter of the column.
Default value"
formatFunctionany
Sets or gets the column's format function.
Default value
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\' }}''
groupstring
Sets or gets the column's group.
Default value"
iconany
Sets or gets the column's icon. Expects CSS class name.
Default value
labelstring
Sets or gets the text displayed in the column's header.
Default value"
minWidthnumber
Sets or gets the minimum width.
Default value30
sortOrderGridColumnSortOrder | null
Sets or gets the sort order of the column. Accepts: 'asc', 'desc' and null.
showActionButtonboolean
Sets or gets whether the column's header action drop-down button is displayed. This button opens the column's menu.
Default valuefalse
showIconboolean
Sets or gets whether the column's header icon is displayed.
Default valuefalse
showDescriptionButtonboolean
Sets or gets whether the column's header description button is displayed.
Default valuefalse
widthany
Sets or gets the width. Accepts: 'number', 'px', 'em', 'auto', 'null' values.
Default value
templateany
Sets or gets the column's template. The property expects the 'id' of HTMLTemplateElement or HTML string which is displayed in the cells.
Default value
verticalAlignVerticalAlignment
Sets or gets the column's header vertical alignment. Accepts: 'top', 'bottom' and 'center'
Default valuecenter
visibleboolean
Sets or gets whether the column is visible. Set the property to 'false' to hide the column.
Default valuetrue
GridColumnMenu
Properties
autoCloseboolean
Automatically closes the column menu.
Default valuetrue
dataSourceGridColumnMenuDataSource
Sets the data sources to the column menu.
visibleboolean
Gets the visibility of the column menu. Returns true, when the column menu is visible.
Default valuefalse
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 valuefalse
widthnumber
Sets the width of the column menu.
Default value250
heightnumber | null
Sets the height of the column menu.
GridColumnMenuDataSource
Properties
columnMenuCustomizeTypeGridCommand
Describes the settings of the column menu customize type
columnMenuItemRenameGridCommand
Describes the settings of the column menu item rename.
columnMenuItemEditDescriptionGridCommand
Describes the settings of the column menu item edit description.
columnMenuItemDuplicateGridCommand
Describes the settings of the column menu item duplicate.
columnMenuItemInsertLeftGridCommand
Describes the settings of the column menu item insert left.
columnMenuItemInsertRightGridCommand
Describes the settings of the of the column menu item insert right.
columnMenuItemSortAscGridCommand
Describes the settings of the column menu item sort ascending.
columnMenuItemSortDescGridCommand
Describes the settings of the column menu item sort descending.
columnMenuItemRemoveSortGridCommand
Describes the settings of the column menu item remove sort.
columnMenuItemFilterGridCommand
Describes the settings of the column menu item filter.
columnMenuItemRemoveFilterGridCommand
Describes the settings of the column menu item remove filter.
columnMenuItemGroupByGridCommand
Describes the settings of the column menu item group by.
columnMenuItemRemoveGroupByGridCommand
Describes the settings of the column menu item group by.
columnMenuItemHideGridCommand
Describes the settings of the column menu item hide.
columnMenuItemDeleteGridCommand
Describes the settings of the column menu item delete.
GridCommand
Properties
commandany
Sets the commant of the column menu customize type.
Default valuecustomizeTypeCommand
enabledboolean
Enables the column menu customize type.
Default valuetrue
visibleboolean
Sets the visibility of the column menu customize type.
Default valuefalse
iconstring
Sets the icon of the column menu customize type.
Default value"smart-icon-customize
labelstring
Sets the label of the column menu customize type.
Default value"{{messages}}
GridColumnGroup
Properties
labelstring
Sets the label.
Default value"
alignHorizontalAlignment
Sets the align.
Default valuecenter
namestring
Sets the name of the column group.
Default value"
parentGroupstring
Sets the name of the parent column group.
Default value"
verticalAlignVerticalAlignment
Sets the vertical align.
Default valuecenter
GridCharting
Properties
enabledboolean
Sets or gets whether charting is enabled.
Default valuefalse
colorSchemestring
Sets or gets the charting colors. Accepts the 'colorScheme' values of our Chart component.
Default value"scheme01
appendToany
Sets or gets the chart's container.
dialogGridChartingDialog
Sets or gets the charting dialog.
GridChartingDialog
Properties
headerstring
Sets or gets the dialog header.
Default value"{{message}}
heightany
Sets or gets the dialog height.
Default value400
widthany
Sets or gets the dialog width.
Default value400
leftany
Sets or gets the dialog Left position.
Default valuecenter
topany
Sets or gets the dialog Top position.
Default valuecenter
enabledboolean
Sets or gets whether the dialog is enabled.
Default valuetrue
visibleboolean
Gets whether the dialog is displayed.
Default valuefalse
GridCheckBoxes
Properties
visibleboolean
Sets the visibility of the TreeGrid checkboxes.
Default valuefalse
hasThreeStatesboolean
Sets the three-state mode of the TreeGrid checkboxes. In that mode, checking a checkbox affects the parent-child rows checkboxes.
Default valuefalse
GridDataExport
Properties
headerboolean
Sets whether the columns header will be exported.
Default valuetrue
filterByany
Sets whether the export uses the applied filters.
groupByany
Sets the groups of the exported data.
styleany
Sets a custom style object of the dataExport.
fileNamestring
Sets the exported file's name.
Default value"smartGrid
pageOrientationstring
Sets the page orientation, when exporting to PDF.
Default value"portrait
expandCharstring
Sets the expand char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
Default value"+
collapseCharstring
Sets the collapse char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
Default value"-
viewboolean
Exports only the visible data of the Grid.
Default valuefalse
viewStartnumber | null
Determines the start row index that will be exported or printed. 'view' should be set to true
Default valuefalse
viewEndnumber | null
Determines the end row index that will be exported or printed. 'view' should be set to true
Default valuefalse
GridEditing
Properties
allowRowHeaderEditboolean
Enables row header cells editing.
Default valuefalse
allowColumnHeaderEditboolean
Enables column headers editing.
Default valuefalse
enabledboolean
Enables editing.
Default valuefalse
batchboolean
Enables batch editing. This allows editing multiple grid rows on the client side and sending them with a single server request.
Default valuefalse
actionGridEditingAction
Determines the way editing is initiated.
Default valueclick
commandKeysGridEditingCommandKeys
Describes command keys.
commandBarGridEditingCommandBar
Describes the grid's command bar settings. The command bar is a toolbar or statusbar with tools for saving and reverting edits.
commandColumnGridEditingCommandColumn
Describes the grid's command column settings. The command column can be used to edit or delete a row.
modeGridEditingMode
Sets the grid's edit mode.
Default valuecell
addNewRowGridEditingAddNewRow
Describes the settings of the 'Add New Row' UI element which enables the quick adding of rows to the Grid with a single click.
dialogGridEditingDialog
Describes dialog's editing settings.
addDialogGridEditingAddDialog
Describes add dialog's settings
deleteDialogGridEditingDeleteDialog
Describes delete dialog's settings
GridEditingCommandKeys
Properties
commandKeyEditGridCommandKey
Describes the edit command key.
commandKeyCancelGridCommandKey
Describes the cancel command key.
commandKeyUpdateGridCommandKey
Describes the update command key.
GridCommandKey
Properties
commandstring
Sets the name of the edit key command.
Default value"commandKeyEditCommand
keystring
Sets the key that invokes the edit command.
Default value"F2
GridEditingCommandBar
Properties
visibleboolean
Makes the command bar visible.
Default valuefalse
positionLayoutPosition
Sets the command bar's position.
Default valuenear
displayModeGridCommandDisplayMode
Sets what is to be displayed in command bar buttons.
Default valuelabelAndIcon
dataSourceGridEditingCommandBarDataSource
Sets the command bar's data source.
GridEditingCommandBarDataSource
Properties
commandBarAddRowGridCommand
Describes the settings of the command bar's button for adding rows.
commandBarDeleteRowGridCommand
Describes the settings of the command bar's button for deleting rows.
commandBarBatchSaveGridCommand
Describes the settings of the command bar's button for saving changes.
commandBarBatchRevertGridCommand
Describes the settings of the command bar's button for reverting changes.
GridEditingCommandColumn
Properties
visibleboolean
Makes the command column visible.
Default valuefalse
inlineboolean
Enables inline display of the command column.
Default valuefalse
positionPosition
Sets the command column's position.
Default valuefar
displayModeGridCommandDisplayMode
Sets what is to be displayed in command column buttons.
Default valueicon
dataSourceGridEditingCommandColumnDataSource
Sets the command column's data source.
widthnumber | null
Sets the width of the command column.
GridEditingCommandColumnDataSource
Properties
commandColumnMenuGridCommand
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.
commandColumnEditGridCommand
Describes the settings of the command column's button for editing rows.
commandColumnDeleteGridCommand
Describes the settings of the command column's button for deleting rows.
commandColumnUpdateGridCommand
Describes the settings of the command column's button for updating rows.
commandColumnCancelGridCommand
Describes the settings of the command column's button for canceling edits.
commandColumnRowMenuGridCommand
Describes the settings of the command column's row menu button.
commandColumnCustomGridCommand
Describes the settings of the command column's custom button.
GridEditingAddNewRow
Properties
positionLayoutPosition
Sets the position of the 'Add New Row' UI element.
Default valueboth
visibleboolean
Makes the 'Add New Row' UI element visible.
Default valuefalse
labelstring
Sets the label of the 'Add New Row' UI element.
Default value"{{message}}
GridEditingDialog
Properties
headerstring
Sets the header text of the dialog
Default value"{{message}}
heightany
Sets the height of the edit dialog.
Default valueauto
widthany
Sets the width of the edit dialog.
Default valueauto
leftany
Sets the 'left' css property to the dialog.
Default valuecenter
topany
Sets the 'top' css property to the dialog.
Default valuecenter
enabledboolean
Enables dialog editing option.
Default valuefalse
visibleboolean
Sets the visibility of the dialog.
Default valuefalse
GridEditingAddDialog
Properties
headerstring
Sets the header text of the dialog
Default value"{{message}}
heightany
Sets the height of the dialog.
Default valueauto
widthany
Sets the width of the dialog.
Default valueauto
leftany
Sets the 'left' css property to the dialog.
Default valuecenter
topany
Sets the 'top' css property to the dialog.
Default valuecenter
enabledboolean
Enables the add dialog option.
Default valuefalse
visibleboolean
Sets the visibility of the dialog.
Default valuefalse
GridEditingDeleteDialog
Properties
headerstring
Sets the header text of the dialog
Default value"{{message}}
heightany
Sets the height of the dialog.
Default valueauto
widthany
Sets the width of the dialog.
Default valueauto
leftany
Sets the 'left' css property to the dialog.
Default valuecenter
topany
Sets the 'top' css property to the dialog.
Default valuecenter
enabledboolean
Enables the delete dialog option.
Default valuefalse
visibleboolean
Sets the visibility of the dialog.
Default valuefalse
GridFiltering
Properties
enabledboolean
Enables filtering.
Default valuefalse
filterany[]
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.
filterRowGridFilteringFilterRow
(In Development)Describes the filter row's settings.
filterMenuGridFilteringFilterMenu
Describes the settings for the filter menu.
filterBuilderGridFilteringFilterBuilder
(In Development)Describes the settings for the filter builder.
GridFilteringFilterRow
Properties
visibleboolean
Makes the filter row visible.
Default valuefalse
menuVisibleboolean
Makes the filter row's menu visible.
Default valuefalse
applyModeGridFilteringFilterRowApplyMode
Sets the way filtering through the filter row is applied.
Default valueauto
autoApplyModeDelaynumber
Sets the delay (in milliseconds) before applying filtering (when filtering.filterRow.applyMode is 'auto').
Default value300
GridFilteringFilterMenu
Properties
visibleboolean
Sets the visibility of the filter menu.
Default valuetrue
buttonsstring[]
Sets the button text of the filter menu.
dataSourceany
Sets the filter menu datasource.
widthnumber
Sets the width of the filter menu.
Default value250
heightnumber
Sets the height of the filter menu.
Default value200
GridFilteringFilterBuilder
Properties
visibleboolean
Sets the visibility of the filter builder.
Default valuefalse
heightnumber | null
Sets the height of the filter builder.
GridGrouping
Properties
enabledboolean
Enables grouping.
Default valuefalse
allowCollapseboolean
Enables collapsing of groups.
Default valuefalse
autoExpandAllboolean
Automatically expands all groups.
Default valuefalse
expandModeGridGroupingExpandMode
Sets the group expand mode.
Default valuebuttonClick
groupRowHeightany
Sets the group row height.
Default value50
toggleButtonIndentnumber
Sets the indent of the group toggle button.
Default value16
groupIndentnumber
Sets the indent of the group.
Default value16
groupBarGridGroupingGroupBar
Describes the group bar's settings.
groupPanelGridGroupingGroupPanel
Describes the group panel's settings.
summaryRowGridGroupingSummaryRow
Describes the group summary row's settings.
GridGroupingGroupBar
Properties
visibleboolean
Makes the group bar visible.
Default valuefalse
allowColumnDragDropboolean
Enables column drag and drop.
Default valuefalse
allowColumnCloseButtonsboolean
Enables column close buttons.
Default valuetrue
GridGroupingGroupPanel
Properties
visibleboolean
Makes the group panel visible.
Default valuefalse
GridGroupingSummaryRow
Properties
inlineboolean
Enables inline display of the group summary row.
Default valuetrue
visibleboolean
Makes the group summary row visible.
Default valuetrue
GridPaging
Properties
enabledboolean
Enables pagination.
Default valuefalse
spinnerGridPagingSpinner
Describes the spinner pagination settings.
pageSizenumber
Sets the number of rows per page.
Default value10
pageIndexnumber
Sets the start page.
Default value0
GridPagingSpinner
Properties
enabledboolean
Enables spinner pagination.
Default valuefalse
stepnumber
Sets the step of page
Default value1
GridPager
Properties
autoEllipsisGridPagerAutoEllipsis
Sets the ellipsis display mode.
Default valueboth
positionLayoutPosition
Sets the position of pager.
Default valuefar
templatestring | HTMLTemplateElement
Sets a template for the pager.
Default value
pageSizeSelectorGridPagerPageSizeSelector
Describes the settings for the 'rows per page' option.
summaryGridPagerSummary
Describes the summary settings.
navigationButtonsGridPagerNavigationButtons
Describes the navigation buttons settings.
navigationInputGridPagerNavigationInput
Describes the settings about navigation input option.
pageIndexSelectorsGridPagerPageIndexSelectors
Describes the settings for the numeric page buttons.
visibleboolean
Sets the visibility of pager.
Default valuefalse
GridPagerPageSizeSelector
Properties
visibleboolean
Sets the visibility of the 'rows per page' option.
Default valuefalse
dataSourceany
Sets the count of the 'rows per page' option.
positionPosition
Sets the position of the 'rows per page' option.
Default valuefar
GridPagerSummary
Properties
positionPosition
Sets the position of the summary.
Default valuefar
visibleboolean
Sets the visibility of the summary.
Default valuefalse
GridPagerNavigationButtons
Properties
positionLayoutPosition
Sets the navigation buttons position.
Default valueboth
prevNextButtonsGridPagerNavigationButtonsPrevNextButtons
Describes the settings about buttons 'previous page' and 'next page'.
firstLastButtonsGridPagerNavigationButtonsFirstLastButtons
Describes the settings about buttons 'first page' and 'last page'.
labelsGridPagerNavigationButtonsLabels
Describes the labels settings for navigation buttons.
GridPagerNavigationButtonsPrevNextButtons
Properties
visibleboolean
Sets the visibility of 'previous page' and 'next page' buttons.
Default valuetrue
GridPagerNavigationButtonsFirstLastButtons
Properties
visibleboolean
Sets the visibility of 'first page' and 'last page' buttons.
Default valuetrue
GridPagerNavigationButtonsLabels
Properties
visibleboolean
Sets the visibility of labels for navigation buttons.
Default valuefalse
GridPagerNavigationInput
Properties
positionPosition
Sets the position of navigation input option.
Default valuefar
visibleboolean
Sets the visibility of navigation input option.
Default valuefalse
GridPagerPageIndexSelectors
Properties
visibleboolean
Sets the visibility of numeric page buttons.
Default valuetrue
dataSourceany
Sets the number of visible page buttons.
Default value10
GridRowDetail
Properties
enabledboolean
Enables the row details.
Default valuefalse
heightnumber
Sets the height of the row details.
Default value200
positionPosition
Sets the position of the Column which allows you to dynamically expand/collapse the row details.
Default valuenear
templateany
Sets the template of the row details.
Default value
visibleboolean
Sets the visibility of the Column which allows you to dynamically expand/collapse the row details.
Default valuetrue
dialogGridRowDetailDialog
Sets the row details dialog. When enabled, row details will be displayed in a Dialog.
GridRowDetailDialog
Properties
headerstring
Sets the header of the dialog.
Default value"{{message}}
heightany
Sets the height of the dialog.
Default value300
widthany
Sets the width of the dialog.
Default value360
leftany
Sets the Left position of the dialog.
Default valuecenter
topany
Sets the Top position of the dialog.
Default valuecenter
enabledboolean
Sets whether the row details dialog is enabled. When enabled, row details are displayed in a dialog.
Default valuefalse
GridColumnHeader
Properties
visibleboolean
Sets the column header visibility.
Default valuetrue
GridGroupHeader
Properties
visibleboolean
Sets the visibility of the group header.
Default valuefalse
templatestring | HTMLTemplateElement
Sets a template for the group header.
Default value
GridHeader
Properties
visibleboolean
Sets the header visibility.
Default valuefalse
templatestring | HTMLTemplateElement
Sets a template for the header.
Default value
GridFooter
Properties
visibleboolean
Sets the footer visibility.
Default valuefalse
templatestring | HTMLTemplateElement
Sets a template for the footer.
Default value
GridRow
Properties
allowToggleboolean
Sets or gets the row can be expanded or collapsed.
Default valuetrue
allowResizeboolean
Sets or gets the row can be resized.
Default valuetrue
allowSelectboolean
Sets or gets the row can be selected.
Default valuetrue
allowCheckboolean
Sets or gets the row can be checked. This property is used when the Grid is in Tree Grid or Grouped mode.
Default valuetrue
checkedboolean
Sets or gets the row's check state. This property is used when the Grid is in Tree Grid or Grouped mode.
Default valuetrue
cellsGridRowCell[]
Gets the Row's Cells array. Each cell is an instance of GridRowCell.
Default value[]
childrenGridRow[]
Gets the row's children array of GridRow. This property is associated to the TreeGrid and Groupng mode of the Grid.
Default value
dataany
Gets the row's bound data.
Default value
detailHeightnumber
Sets or gets the row's detail height.
Default value200
detailTemplatestring | HTMLTemplateElement
Sets or gets the row's detail template.
Default value
elementany
Gets the HTML Element. The property returns null when the Row is not in the View.
expandedboolean
Sets or gets the row is expanded. This property is used when the Grid is in Tree Grid or Grouped mode.
Default valuefalse
headerHTMLElement
Gets the row's header element.
heightnumber
Sets or gets the row's height.
Default value30
indexnumber
Gets the row's bound index.
Default value-1
idstring | number
Gets the row's bound id.
Default value
leafboolean
Gets whether the row is leaf row in TreeGrid or Grouping mode.
Default valuefalse
maxHeightnumber
Sets or gets the row's maximum height.
Default value100
minHeightnumber
Sets or gets the row's minimum height.
Default value30
freezePosition
Sets or gets the Freeze mode. Accepts: 'near', 'far', true and false. Freezes/Pins the row to top(near) or bottom(far).
Default value
selectedboolean
Sets or gets whether the row is selected.
Default valuefalse
showDetailboolean
Sets or gets whether the row detail is displayed.
Default valuefalse
visibleboolean
Sets or gets whether the row is visible. Set the property to 'false' to hide the row.
Default valuetrue
visibleIndexnumber
Gets the visible index of the row.
Default value-1
GridRowCell
Properties
alignstring
"Sets or gets the horizontal alignment. Allowed values are: 'left', 'center' or 'right'".
Default value"'left'
columnGridColumn
Gets the column associated to the cell.
colorstring
Sets or gets the cell's text color.
Default value"''
backgroundstring
Sets or gets the cell's background.
Default value"''
borderColorstring
Sets or gets the cell's borderColor.
Default value"''
colSpannumber
Sets or gets the cell's colSpan.
Default value1
editorany
Sets or gets the cell's editor.
elementHTMLElement
Gets the HTMLElement associated to the cell.
getFormattedValueany
Gets a formatted number or Date.
Default valueundefined
isEditingboolean
Gets whether the cell is in edit mode.
Default valuefalse
oldValueany
Gets the old value of the cell
fontSizestring
Sets or gets the cell's fontSize
Default value"''
fontWeightstring
Sets or gets the cell's fontWeight
Default value"''
fontFamilystring
Sets or gets the cell's fontFamily
Default value"''
fontStylestring
Sets or gets the cell's fontStyle
Default value"''
readonlyboolean
"Sets or gets whether the cell can be edited.".
Default valuefalse
rowGridRow
Gets the row object associated to the cell.
rowSpannumber
Sets or gets the row span.
Default value1
selectedboolean
Sets or gets whether the cell is selected.
Default valuefalse
setPropertiesany
"Each property is an object{name: string, value: any}. This function allows you to update multiple properties with single refresh.".
Default value
tooltipstring
"Allowed values are: 'top', 'middle' or 'bottom'".
Default value"
valueany
The cell's value
verticalAlignstring
"Sets or gets the vertical alignment. Allowed values are: 'top', 'middle' or 'bottom'".
Default value"'middle'
GridSelection
Properties
enabledboolean
Enables the selection option.
Default valuefalse
allowRowHeaderSelectionboolean
Sets or gets whether selection by clicking on a Row header is allowed.
Default valuefalse
allowColumnHeaderSelectionboolean
Sets or gets whether selection by clicking on a Column header is allowed.
Default valuefalse
allowRowSelectionboolean
Sets or gets whether selection by clicking on a Row is allowed.
Default valuetrue
allowCellSelectionboolean
Sets or gets whether selection by clicking on a cell is allowed.
Default valuefalse
allowDragSelectionboolean
Sets or gets whether selection by dragging(like in Excel) is allowed.
Default valuetrue
allowDragSelectionAutoScrollboolean
Sets or gets whether selection by dragging will automatically scroll the Grid view.
Default valuetrue
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 valuetrue
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 valuetrue
allowCellDragSelectionAutoFillboolean
Sets or gets whether the Cells selection will be auto-filled with values on drop when dragging through the 'Drag Handle'.
Default valuetrue
modeGridSelectionMode
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 valuemany
actionGridSelectionAction
Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API.
Default valueclick
checkBoxesGridSelectionCheckBoxes
selectedstring
Default value"
GridSelectionCheckBoxes
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 valuefalse
enabledboolean
Sets or gets whether the checkboxes selection is enabled. In that mode a new column with checkboxes is displayed.
Default valuefalse
actionGridSelectionAction
Sets or gets whether the selection happens on 'click' or 'doubleClick'. 'none' means that selection can happen only through API.
Default valueclick
selectAllModeGridSelectionCheckBoxesSelectAllMode
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 valuepage
positionPosition
Sets or gets whether the position of the checkbox selection column.
Default valuenear
GridSorting
Properties
enabledboolean
Enables sorting.
Default valuefalse
sortstring[]
Sets the sort columns to be sorted.
modeGridSortingMode
Sets the count of allowed sorting columns.
Default valueone
sortToggleThreeStatesboolean
Enables switching between the three sort states: ascending, descending and not sorted.
Default valuetrue