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.

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

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

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

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

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.

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

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

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

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.

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.

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.

Sets the data sources to the column menu.

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

Describes the settings of the column menu customize type

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.

Sets the Grid Charting Data Visualization.

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

Sets or gets the charting dialog.

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

Sets the TreeGrid checkboxes.

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

Sets the Grid Data Export options.

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

Describes the grid's editing settings.

GridEditingCommandKeys

Properties

commandKeyEditGridCommandKey

Describes the edit command key.

commandKeyCancelGridCommandKey

Describes the cancel command key.

commandKeyUpdateGridCommandKey

Describes the update command key.

Describes command keys.

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

Describes the edit command key.

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.

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

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.

Sets the command bar's data source.

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.

Describes the grid's command column settings. The command column can be used to edit or delete a row.

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.

Sets the command column's data source.

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

Describes the settings of the 'Add New Row' UI element which enables the quick adding of rows to the Grid with a single click.

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

Describes dialog's editing settings.

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

Describes add dialog's settings

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

Describes delete dialog's settings

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.

Describes the grid's filtering settings.

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

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

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

Describes the settings for the filter menu.

GridFilteringFilterBuilder

Properties

visibleboolean

Sets the visibility of the filter builder.

Default valuefalse

heightnumber | null

Sets the height of the filter builder.

(In Development)Describes the settings for 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.

Describes the grid's grouping 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

Describes the group bar's settings.

GridGroupingGroupPanel

Properties

visibleboolean

Makes the group panel visible.

Default valuefalse

Describes the group panel's settings.

GridGroupingSummaryRow

Properties

inlineboolean

Enables inline display of the group summary row.

Default valuetrue

visibleboolean

Makes the group summary row visible.

Default valuetrue

Describes the group summary row's settings.

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

Describes the paging settings.

GridPagingSpinner

Properties

enabledboolean

Enables spinner pagination.

Default valuefalse

stepnumber

Sets the step of page

Default value1

Describes the spinner pagination settings.

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

Describes the pager settings.

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

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

GridPagerSummary

Properties

positionPosition

Sets the position of the summary.

Default valuefar

visibleboolean

Sets the visibility of the summary.

Default valuefalse

Describes the summary settings.

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.

Describes the navigation buttons settings.

GridPagerNavigationButtonsPrevNextButtons

Properties

visibleboolean

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

Default valuetrue

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

GridPagerNavigationButtonsFirstLastButtons

Properties

visibleboolean

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

Default valuetrue

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

GridPagerNavigationButtonsLabels

Properties

visibleboolean

Sets the visibility of labels for navigation buttons.

Default valuefalse

Describes the labels settings for navigation buttons.

GridPagerNavigationInput

Properties

positionPosition

Sets the position of navigation input option.

Default valuefar

visibleboolean

Sets the visibility of navigation input option.

Default valuefalse

Describes the settings about navigation input option.

GridPagerPageIndexSelectors

Properties

visibleboolean

Sets the visibility of numeric page buttons.

Default valuetrue

dataSourceany

Sets the number of visible page buttons.

Default value10

Describes the settings for the numeric page buttons.

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.

Sets the row details.

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

Sets the row details dialog. When enabled, row details will be displayed in a Dialog.

GridColumnHeader

Properties

visibleboolean

Sets the column header visibility.

Default valuetrue

Describes the column header settings.

GridGroupHeader

Properties

visibleboolean

Sets the visibility of the group header.

Default valuefalse

templatestring | HTMLTemplateElement

Sets a template for the group header.

Default value

Describes the settings for the group header.

GridHeader

Properties

visibleboolean

Sets the header visibility.

Default valuefalse

templatestring | HTMLTemplateElement

Sets a template for the header.

Default value

Describes the header settings of the grid.

GridFooter

Properties

visibleboolean

Sets the footer visibility.

Default valuefalse

templatestring | HTMLTemplateElement

Sets a template for the footer.

Default value

Describes the footer settings of the grid.

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"

Describes the selection settings.

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

Describes sorting settings.

Enums

GridClipboardAutoFillMode

None Copy FillSeries

GridColumnSortOrder

Asc Desc

GridCommandDisplayMode

Label Icon LabelAndIcon

GridEditingAction

None Click DblClick

GridEditingMode

Cell Row

GridFilteringFilterRowApplyMode

Auto Click

GridGroupingExpandMode

ButtonClick RowClick

GridPagerAutoEllipsis

None Before After Both

GridResizeMode

None Split GrowAndShrink

GridSelectionAction

None Click DoubleClick

GridSelectionCheckBoxesSelectAllMode

None Page All

GridSelectionMode

One Many Extended

GridSortingMode

One Many

HorizontalAlignment

Left Center Right

LayoutPosition

Near Far Both

Position

Near Far

Scrolling

Physical Virtual Infinite Deferred

VerticalAlignment

Top Center Bottom