GridComponent

Represents the Kendo UI for Angular Data Grid component.

html

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

Selector

kendo-grid

Export Name

Accessible in templates as #kendoGridInstance="kendoGrid"

Inputs

Name	Type	Default	Description
autoSize	boolean	false	Indicates whether the Grid columns will be resized during initialization so that they fit their headers and row content. Columns with autoSize set to false are excluded. To dynamically update the column width to match the new content, refer to this example.
cellSelected	CellSelectedFn		Defines a function that determines the selected state of a data cell. Returns an object with selected and item properties. The cell is marked as selected only if the selected property equals true. The function is executed for each data cell and may be called more than once as part of a change detection cycle. (see example)
columnMenu	boolean | ColumnMenuSettings	false	Specifies if the column menu of the columns will be displayed (see example).
data	any[] | GridDataResult		Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count (more information and example).
detailRowHeight	number		Represent the actual height of each Grid detail row (tr) element in the DOM. Required by the virtual scrolling functionality. Set the detailRowHeight option to the exact pixels as the height of the detail Grid tr element appears in the DOM.
filter	CompositeFilterDescriptor		The descriptor by which the data will be filtered (see examples).
filterable	FilterableSettings	false	Enables the filtering of the Grid columns that have their field option set.
group	GroupDescriptor[]		The descriptors by which the data will be grouped (see example).
groupable	boolean | GroupableSettings	false	If set to true, the user can group the Grid by dragging the column header cells (see example).
height	number		Defines the height (in pixels) that is used when the scrollable option of the Grid is set. To set the height of the Grid, you can also use style.height. The style.height option supports units such as px, %, em, rem, and others.
hideHeader	boolean	false	Specifies if the header of the grid will be hidden. The header is visible by default. The header includes column headers and the filter row.
isDetailExpanded	(args: RowArgs) => boolean		A function which determines if a specific row is expanded.
isGroupExpanded	(args: GroupRowArgs) => boolean		A function which determines if a specific group row is expanded.
isRowSelectable	RowSelectableFn		Defines a Boolean function that is executed for each data row in the component. Determines whether the row will be selectable.
loading	boolean	false	Specifies if the loading indicator of the Grid will be displayed (see example).
navigable	GridNavigableSettings		If set to true, the user can use dedicated shortcuts to interact with the Grid. By default, navigation is disabled and the Grid content is accessible in the normal tab sequence. To enable navigation through separate Grid sections only, provide a GridNavigableSection array.
pageable	boolean | PagerSettings	false	Configures the pager of the Grid (see example).
pageSize	number		Defines the page size used by the Grid pager. Required by the paging functionality.
reorderable	boolean	false	If set to true, the user can reorder columns by dragging their header cells (see example).
resizable	boolean	false	If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells (see example).
rowClass	RowClassFn		Defines a function that is executed for every data row in the component (see example).
rowHeight	number		Represent the actual height of each Grid row (tr) element in the DOM. Required by the virtual scrolling functionality. Set the rowHeight option to the exact pixels as the height of the tr element appears in the DOM.
rowReorderable	boolean	false	Enables the row reordering of the Grid.
rowSelected	RowSelectedFn		Defines a Boolean function that is executed for each data row in the component (see example). Determines whether the row will be selected.
rowSticky	RowStickyFn		Defines a function that is executed for every data row in the component, and determines whether the row will be sticky, i.e. always visible after scrolling.
scrollable	ScrollMode	'scrollable'	Defines the scroll mode used by the Grid.
selectable	boolean | SelectableSettings	false	Enables the single-row selection of the Grid.
size	GridSize	'medium'	Specifies the sizing of various Grid building blocks (e.g. tables, buttons, inputs, dropdowns, etc.)
skip	number		Defines the number of records to be skipped by the pager. Required by the paging functionality.
sort	SortDescriptor[]		The descriptors by which the data will be sorted (see example).
sortable	SortSettings	false	Enables the sorting of the Grid columns that have their field option set.
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 set to true, the grid will render only the 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.

Events

Name	Type	Description
add	EventEmitter<AddEvent>	Fires when the user clicks the Add command button to add a new row (see example).
cancel	EventEmitter<CancelEvent>	Fires when the user clicks the Cancel command button to close a row (see example).
cellClick	EventEmitter<CellClickEvent>	Fires when the user clicks a cell (see example).
cellClose	EventEmitter<CellCloseEvent>	Fires when the user leaves an edited cell (see example).
columnLockedChange	EventEmitter<ColumnLockedChangeEvent>	Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
columnReorder	EventEmitter<ColumnReorderEvent>	Fires when the user completes the reordering of the column.
columnResize	EventEmitter<ColumnResizeArgs[]>	Fires when the user completes the resizing of the column.
columnStickyChange	EventEmitter<ColumnStickyChangeEvent>	Fires when the user changes the sticky state of the columns from the column menu.
columnVisibilityChange	EventEmitter<ColumnVisibilityChangeEvent>	Fires when the user changes the visibility of the columns from the column menu or column chooser.
contentScroll	EventEmitter<ContentScrollEvent>	Fires when the grid content is scrolled. For performance reasons, the event is triggered outside the Angular zone. Enter the Angular zone if you make any changes that require change detection.
dataStateChange	EventEmitter<DataStateChangeEvent>	Fires when the data state of the Grid is changed.
detailCollapse	EventEmitter<DetailCollapseEvent>	Fires when the user collapses a master row.
detailExpand	EventEmitter<DetailExpandEvent>	Fires when the user expands a master row.
edit	EventEmitter<EditEvent>	Fires when the user clicks the Edit command button to edit a row ([see example])(slug://inline_editing_grid#editing-records-1).
excelExport	EventEmitter<ExcelExportEvent>	Fires when the user clicks the Export to Excel command button.
filterChange	EventEmitter<CompositeFilterDescriptor>	Fires when the Grid filter is modified through the UI. You have to handle the event yourself and filter the data.
groupChange	EventEmitter<GroupDescriptor[]>	Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data (see example).
groupCollapse	EventEmitter<GroupRowArgs>	Fires when the user collapses a group header.
groupExpand	EventEmitter<GroupRowArgs>	Fires when the user expands a group header.
pageChange	EventEmitter<PageChangeEvent>	Fires when the page of the Grid is changed (see example). You have to handle the event yourself and page the data.
pdfExport	EventEmitter<PDFExportEvent>	Fires when the user clicks the Export to PDF command button.
remove	EventEmitter<RemoveEvent>	Fires when the user clicks the Remove command button to remove a row (see example).
rowReorder	EventEmitter<RowReorderEvent>	Fires when the user drops the dragged row and reordering is performed.
save	EventEmitter<SaveEvent>	Fires when the user clicks the Save command button to save changes in a row (see example).
scrollBottom	EventEmitter<ScrollBottomEvent>	Fires when the user scrolls to the last record on the page and enables endless scrolling (see example). You have to handle the event yourself and page the data.
selectionChange	EventEmitter<SelectionEvent>	Fires when the user selects a Grid row.
sortChange	EventEmitter<SortDescriptor[]>	Fires when the sorting of the Grid is changed (see example). You have to handle the event yourself and sort the data.

Methods

addRow
Creates a new row editor (see example).
Parameters group any The FormGroup that describes the edit form. If called with a data item, it will build the FormGroup from the data item fields.

autoFitColumn
Applies the minimum possible width for the specified column, so that the whole text fits without wrapping. This method expects the Grid to be resizable. The method must be executed after the Grid is already 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 no columns are specified, autoFitColumns is applied to all columns.The method must be executed after the Grid is already 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 Indicates whether the edited cell was closed. A false value indicates that the cellClose event was prevented.

closeRow
Closes the editor for a given row (see example).
Parameters index? number The row index that will be switched out of the edit mode. If no index is provided, it is assumed that the new item editor will be closed.

collapseGroup
Collapses a group header item for the given index. For example, 0_1 collapses the second inner group of the first master group. This method is provided only for backwards-compatibility with legacy versions. These versions tracked the expanded group state internally using the hierarchical group index. When a Grid is pageable, the indexes of the groups are offset by the current Grid skip.
Parameters index string The underscore separated hierarchical index of the group.

collapseRow
Collapses the specified master row (see example). This method is provided only for backwards-compatibility with legacy versions. These versions tracked the expanded state internally using the data row index. For new development, use the kendoGridDetailsExpandBy directive or provide an isDetailExpanded callback. See Controlling the Expanded State for examples on how to control the expanded state.
Parameters index number The data row index of the master row.

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

editCell
Puts the cell that is specified by the table row and column in edit mode (see example).
Parameters rowIndex number The data row index that will be switched in the edit mode. column any The leaf column index, or the field name or the column instance that should be edited. group? any The FormGroup that describes the edit form.

editRow
Switches the specified table row in the edit mode (see example).
Parameters rowIndex number The data row index that will be switched in the edit mode. group? FormGroup<any> The FormGroup that describes the edit form. options? EditRowOptions Additional options configuring the focus target once the editor opens.

expandGroup
Expands a group header item for the given index. For example, 0_1 expands the second inner group of the first master group. This method is provided only for backwards-compatibility with legacy versions. These versions tracked the expanded group state internally using the hierarchical group index. When a Grid is pageable, the indexes of the groups are offset by the current Grid skip.
Parameters index string The underscore separated hierarchical index of the group.

expandRow
Expands the specified master row (see example). This method is provided only for backwards-compatibility with legacy versions. These versions tracked the expanded state internally using the data row index. For new development, use the kendoGridDetailsExpandBy directive or provide an isDetailExpanded callback. See Controlling the Expanded State for examples on how to control the expanded state.
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 a flag which indicates if a row or a cell is currently edited.
Returns boolean A flag which indicates if a row or a cell is currently edited.

isEditingCell
Returns a flag which indicates if a cell is currently edited.
Returns boolean A flag which indicates if a cell is currently being edited.

reorderColumn
Changes the position of the specified column. The reordering of columns operates only on the level which is inferred by the source column. For the reorderColumn method to work properly, the source column has to be visible.
Parameters source ColumnBase The column whose position will be changed. 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