GridComponent

Represents the Kendo UI for Angular Data Grid component.

Use the kendo-grid component to display and manage tabular data.

html

<kendo-grid [data]="gridData"></kendo-grid>

Selector

kendo-grid

Export Name

Accessible in templates as #kendoGridInstance="kendoGrid"

Inputs

Name	Type	Default	Description
adaptiveMode	AdaptiveMode	'none'	Enables or disables adaptive mode. Adaptive rendering is off by default.
autoSize	boolean	false	If true, resizes columns during initialization to fit headers and content. Columns with autoSize set to false are excluded. See example.
cellSelected	CellSelectedFn		Sets a function to determine if a data cell is selected. The function returns an object with selected and item properties (see example).
columnMenu	boolean | ColumnMenuSettings	false	If true, displays the column menu for columns (see example).
data	any[] | GridDataResult		Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically. (more information and example).
detailRowHeight	number		Represents the height in pixels for each Grid detail row (tr) element. Required for virtual scrolling. Set detailRowHeight to match the actual DOM detail row height. The property does not change the height of the rows in the UI.
filter	CompositeFilterDescriptor		Sets the filter descriptor for the data (see examples).
filterable	FilterableSettings	false	Enables the filtering feature of the Grid for columns with a field option.
gridResizable	boolean | GridResizableSettings	false	Determines if the Grid can be resized.
group	GroupDescriptor[]		Sets the descriptors for grouping the data (see example).
groupable	boolean | GroupableSettings	false	If true, allows grouping by dragging column headers (see example).
height	number		Defines the height in pixels for the Grid when scrollable is set. You can also set the height using style.height with units like px, %, em, or rem.
hideHeader	boolean	false	If true, hides the Grid header. The header is visible by default. The header includes column headers and the filter row.
isDetailExpanded	(args: RowArgs) => boolean		Sets a function to determine if a specific row is expanded.
isGroupExpanded	(args: GroupRowArgs) => boolean		Sets a function to determine if a specific group row is expanded.
isRowSelectable	RowSelectableFn		Sets a function to determine if a data row is selectable.
loading	boolean	false	If true, displays the Grid loading indicator (see example).
navigable	GridNavigableSettings		By default, navigation is enabled. To disable, set to false. To enable navigation for specific sections, provide a GridNavigableSection.
pageable	boolean | PagerSettings	false	Configures the Grid pager (see example).
pageSize	number		Defines the page size used by the Grid pager. Required for the paging feature.
reorderable	boolean	false	If true, allows reordering columns by dragging header cells (see example).
resizable	boolean | ResizeMode	false	If true, allows resizing columns by dragging header cell edges (see example).
rowClass	RowClassFn		Sets a function to apply custom CSS classes to each data row (see example).
rowHeight	number		Represents the row height in pixels for each Grid row (tr) element. Required for virtual scrolling. Set rowHeight to match the actual DOM row height. The property does not change the height of the rows in the UI.
rowReorderable	boolean	false	Enables row reordering feature of the Grid (see example).
rowSelected	RowSelectedFn		Sets a function to determine if a data row is selected (see example).
rowSticky	RowStickyFn		Sets a function to determine if a data row is sticky (always visible after scrolling).
scrollable	ScrollMode	'scrollable'	Defines the scroll mode for the Grid.
selectable	boolean | SelectableSettings	false	Enables the selection feature of the Grid. The selectable property can be set to true, false, or an object with additional settings. See example.
showInactiveTools	boolean	false	Specifies if the currently inactive toolbar tools will be visible. Applicable when the toolbar is configured using the <kendo-toolbar> component. By default, such tools are hidden.
size	GridSize	'medium'	Specifies the sizing for Grid elements like tables, buttons, and inputs.
skip	number		Defines the number of records to skip in the pager. Required for the paging feature.
sort	SortDescriptor[]		Sets the descriptors for sorting the data (see example).
sortable	SortSettings	false	Enables sorting feature of the Grid for columns with a field option.
trackBy	TrackByFunction<GridItem>		A function that defines how to track changes for the data rows. By default, the Grid tracks changes by the index of the data item. Edited rows are tracked by reference. See example.
virtualColumns	boolean	false	If true, renders only columns in the current viewport.

Fields

Name	Type	Default	Description
activeCell	NavigationCell		Returns the currently focused cell (if any).
activeRow	NavigationRow		Returns the currently focused row (if any).
columns	QueryList<ColumnBase>		A query list of all declared columns.
currentState	GridState		Gets the current GridState, including data operations and column state. Use this to store and restore the Grid state.

Events

Name	Type	Description
add	EventEmitter<AddEvent>	Fires when a new row is added by clicking the Add command button (see example).
cancel	EventEmitter<CancelEvent>	Fires when editing is canceled by clicking the Cancel command button (see example).
cellClick	EventEmitter<CellClickEvent>	Fires when a cell is clicked (see example).
cellClose	EventEmitter<CellCloseEvent>	Fires when a cell edit is closed (see example).
columnLockedChange	EventEmitter<ColumnLockedChangeEvent>	Fires when columns are locked or unlocked.
columnReorder	EventEmitter<ColumnReorderEvent>	Fires when columns are reordered.
columnResize	EventEmitter<ColumnResizeArgs[]>	Fires when columns are resized.
columnStickyChange	EventEmitter<ColumnStickyChangeEvent>	Fires when columns are made sticky or unsticky.
columnVisibilityChange	EventEmitter<ColumnVisibilityChangeEvent>	Fires when column visibility changes.
contentScroll	EventEmitter<ContentScrollEvent>	Fires when the grid content is scrolled. The event is triggered outside the Angular zone for performance. Enter the Angular zone if you make changes that require change detection.
dataStateChange	EventEmitter<DataStateChangeEvent>	Fires when the data state of the Grid is changed.
detailCollapse	EventEmitter<DetailCollapseEvent>	Fires when a detail row is collapsed through the UI.
detailExpand	EventEmitter<DetailExpandEvent>	Fires when a detail row is expanded through the UI.
edit	EventEmitter<EditEvent>	Fires when a row enters edit mode (see example).
excelExport	EventEmitter<ExcelExportEvent>	Fires when the Excel export command is triggered.
filterChange	EventEmitter<CompositeFilterDescriptor>	Fires when the Grid data is filtered through the UI and the filter descriptor changes.
gridStateChange	EventEmitter<GridState>	Fires when the data or columns state of the Grid is changed.
groupChange	EventEmitter<GroupDescriptor[]>	Fires when the Grid data is grouped through the UI and the group descriptors change (see example).
groupCollapse	EventEmitter<GroupRowArgs>	Fires when a group is collapsed through the UI.
groupExpand	EventEmitter<GroupRowArgs>	Fires when a group is expanded through the UI.
pageChange	EventEmitter<PageChangeEvent>	Fires when the page is changed through the UI (see example).
pdfExport	EventEmitter<PDFExportEvent>	Fires when the PDF export command is triggered.
remove	EventEmitter<RemoveEvent>	Fires when a row is removed by clicking the Remove command button (see example).
rowReorder	EventEmitter<RowReorderEvent>	Fires when a row is reordered through the UI.
save	EventEmitter<SaveEvent>	Fires when a row is saved by clicking the Save command button (see example).
scrollBottom	EventEmitter<ScrollBottomEvent>	Fires when the last record is scrolled into view (see example).
selectionChange	EventEmitter<SelectionEvent>	Fires when the Grid selection changes through the UI.
sortChange	EventEmitter<SortDescriptor[]>	Fires when the Grid data is sorted through the UI and the sort descriptors change (see example).

Methods

addRow
Creates a new row editor (see example).
Parameters group any The FormGroup that describes the edit form. If you pass a data item, the method builds the FormGroup from the data item fields.

autoFitColumn
Applies the minimum possible width for the specified column so the whole text fits without wrapping. This method expects the Grid to be resizable. Run this method after the Grid is populated with data. See example
Parameters column ColumnBase

autoFitColumns
Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping. If you do not specify columns, autoFitColumns applies to all columns. Run this method after the Grid is populated with data. See example
Parameters columns ColumnBase[] | QueryList<ColumnBase>

cancelCell
Closes the current cell in edit mode.

closeCell
Closes the current cell in edit mode and fires the cellClose event.
Returns boolean true if the cell closed. Returns false if the cellClose event was prevented.

closeRow
Closes the editor for the specified row (see example).
Parameters index? number The row index to switch out of edit mode. If you do not provide an index, the new item editor closes.

collapseGroup
Collapses a group header at the given hierarchical index, such as 0_1 for the second inner group of the first master group. This method is for backwards compatibility with legacy versions that track expanded group state by hierarchical group index. If the Grid is pageable, the group indexes are offset by the current Grid skip.
Parameters index string The underscore-separated hierarchical index of the group.

collapseRow
Collapses the master row at the specified data row index (see example). This method is for backwards compatibility with legacy versions that track expanded state by row index. For new development, use the kendoGridDetailsExpandBy directive or provide an isDetailExpanded callback. See Controlling the Expanded State for examples.
Parameters index number The data row index of the master row.

drawPDF
Exports the Grid element to a Drawing Group using the kendo-grid-pdf component options (see example).
Returns Promise<any> A promise that resolves with the Drawing Group.

editCell
Puts the specified cell in edit mode (see example).
Parameters rowIndex number The data row index to switch to edit mode. column any The leaf column index, field name, or column instance to edit. group? any The FormGroup that describes the edit form.

editRow
Switches the specified table row to edit mode (see example).
Parameters rowIndex number The data row index to switch to edit mode. group? FormGroup<any> The FormGroup that describes the edit form. options? EditRowOptions Additional options to configure the focus target when the editor opens.

expandGroup
Expands a group header at the given hierarchical index, such as 0_1 for the second inner group of the first master group. This method is for backwards compatibility with legacy versions that track expanded group state by hierarchical group index. If the Grid is pageable, the group indexes are offset by the current Grid skip.
Parameters index string The underscore-separated hierarchical index of the group.

expandRow
Expands the master row at the specified data row index (see example). This method is for backwards compatibility with legacy versions that track expanded state by row index. For new development, use the kendoGridDetailsExpandBy directive or provide an isDetailExpanded callback. See Controlling the Expanded State for examples.
Parameters index number The data row index of the master row.

focus
Focuses the last active or the first cell of the Grid.
Returns NavigationCell The focused cell.

focusCell
Focuses the cell with the specified row and column index. The row index is based on the logical structure of the Grid and does not correspond to the data item index. Header rows are included, starting at index 0. Group headers and footers are included. The row indexing is absolute and does not change with paging. If the Grid is configured for scrolling, including virtual scrolling, the scroll position will be updated. If the row is not present on the current page, the method will have no effect.
Parameters rowIndex number The logical row index to focus. The top header row has an index 0. colIndex number The column index to focus.
Returns NavigationCell The focused cell.

focusNextCell
Focuses the next cell, optionally wrapping to the next row.
Parameters wrap boolean A Boolean value which indicates if the focus will move to the next row. Defaults to true.
Returns NavigationCell The focused cell. If the focus is already on the last cell, returns null.

focusPrevCell
Focuses the previous cell. Optionally wraps to the previous row.
Parameters wrap boolean A Boolean value which indicates if the focus will move to the next row. Defaults to true.
Returns NavigationCell The focused cell. If the focus is already on the first cell, returns null.

isEditing
Returns true if a row or cell is currently edited.
Returns boolean true if a row or cell is currently edited.

isEditingCell
Returns true if a cell is currently edited.
Returns boolean true if a cell is currently being edited.

loadState
Applies the given GridState object to the Grid.
Parameters state GridState

reorderColumn
Changes the position of the specified column. The reordering of columns operates only on the level inferred by the source column. For this method to work, the source column must be visible.
Parameters source ColumnBase The column to move. destIndex number The new position of the column. options ColumnReorderConfig Additional options.

saveAsExcel
Initiates the Excel export (see example).

saveAsPDF
Initiates the PDF export (see example).

scrollTo
Scrolls to the specified row and column (see example).
Parameters request ScrollRequest

scrollToItem
Scrolls to the specified data item and column (see example).
Parameters request ScrollToItemRequest