GridComponent
Represents the Kendo UI Grid component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData">
</kendo-grid>
`
})
class AppComponent {
public gridData: any[] = products;
}
const products = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}
];
Selector
kendo-grid
Export Name
Accessible in templates as #kendoGridInstance="kendoGrid"
Inputs
Name | Type | Default | Description |
---|---|---|---|
autoSize |
|
Indicates whether the Grid columns will be resized during initialization so that
they fit their headers and row content. Defaults to | |
cellSelected |
|
Defines a function that determines the selected state of a data cell.
Returns an object with 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 |
|
|
Specifies if the column menu of the columns will be displayed (see example). |
data |
|
Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count (more information and example). | |
detailRowHeight |
|
Defines the detail row height that is used when the | |
filter |
|
The descriptor by which the data will be filtered (see examples). | |
filterable |
|
Enables the filtering of the Grid columns that have their | |
group |
|
The descriptors by which the data will be grouped (see example). | |
groupable |
|
If set to | |
height |
|
Defines the height (in pixels) that is used when the | |
hideHeader |
|
Specifies if the header of the grid will be hidden. The header is visible by default.
| |
isDetailExpanded |
|
A function which determines if a specific row is expanded. | |
isGroupExpanded |
|
A function which determines if a specific group row is expanded. | |
loading |
|
|
Specifies if the loading indicator of the Grid will be displayed (see example). |
navigable |
|
If set to | |
pageable |
|
Configures the pager of the Grid (see example). The available options are:
| |
pageSize |
|
Defines the page size used by the Grid pager. Required by the paging functionality. | |
reorderable |
|
|
If set to |
resizable |
|
|
If set to |
rowClass |
|
Defines a function that is executed for every data row in the component.
| |
rowHeight |
|
Defines the row height that is used when the | |
rowSelected |
|
Defines a Boolean function that is executed for each data row in the component (see example). Determines whether the row will be selected. | |
rowSticky |
|
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 |
|
Defines the scroll mode used by the Grid. The available options are:
| |
selectable |
|
Enables the single-row selection of the Grid. | |
size |
|
|
Specifies the sizing of various Grid building blocks (e.g. tables, buttons, inputs, dropdowns, etc.) |
skip |
|
Defines the number of records to be skipped by the pager. Required by the paging functionality. | |
sort |
|
The descriptors by which the data will be sorted (see example). | |
sortable |
|
Enables the sorting of the Grid columns that have their | |
trackBy |
|
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. In some cases, you might need to override the default behavior, for example, when you implement editing with immutable data items. The following example demonstrates how to track items only by index.
| |
virtualColumns |
|
If set to |
Fields
Name | Type | Default | Description |
---|---|---|---|
activeCell |
|
Returns the currently focused cell (if any). | |
activeRow |
|
Returns the currently focused row (if any). | |
columns |
|
A query list of all declared columns. |
Events
Name | Type | Description |
---|---|---|
add |
|
Fires when the user clicks the Add command button to add a new row (see example). |
cancel |
|
Fires when the user clicks the Cancel command button to close a row (see example). |
cellClick |
|
Fires when the user clicks a cell (see example). |
cellClose |
|
Fires when the user leaves an edited cell (see example). |
columnLockedChange |
|
Fires when the user changes the locked state of the columns from the column menu or by reordering the columns. |
columnReorder |
|
Fires when the user completes the reordering of the column. |
columnResize |
|
Fires when the user completes the resizing of the column. |
columnStickyChange |
|
Fires when the user changes the sticky state of the columns from the column menu. |
columnVisibilityChange |
|
Fires when the user changes the visibility of the columns from the column menu or column chooser. |
contentScroll |
|
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 |
|
Fires when the data state of the Grid is changed. |
detailCollapse |
|
Fires when the user collapses a master row. |
detailExpand |
|
Fires when the user expands a master row. |
edit |
|
Fires when the user clicks the Edit command button to edit a row (see example. |
excelExport |
|
Fires when the user clicks the Export to Excel command button. |
filterChange |
|
Fires when the Grid filter is modified through the UI. You have to handle the event yourself and filter the data. |
groupChange |
|
Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data (see example). |
groupCollapse |
|
Fires when the user collapses a group header. |
groupExpand |
|
Fires when the user expands a group header. |
pageChange |
|
Fires when the page of the Grid is changed (see example). You have to handle the event yourself and page the data. |
pdfExport |
|
Fires when the user clicks the Export to PDF command button. |
remove |
|
Fires when the user clicks the Remove command button to remove a row (see example). |
save |
|
Fires when the user clicks the Save command button to save changes in a row (see example). |
scrollBottom |
|
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 |
|
Fires when the user selects a Grid row. Emits the SelectionEvent. |
sortChange |
|
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). | ||||||
|
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 (set
| ||||||
|
autoFitColumns | ||||||
---|---|---|---|---|---|---|
Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping.
If no columns are specified, This method requires the Grid to be resizable (set
| ||||||
|
cancelCell |
---|
Closes the current cell in edit mode. |
closeCell | ||||
---|---|---|---|---|
Closes the current cell in edit mode and fires the cellClose event. | ||||
|
closeRow | ||||||
---|---|---|---|---|---|---|
Closes the editor for a given row (see example). | ||||||
|
collapseGroup | ||||||
---|---|---|---|---|---|---|
Collapses a group header item for the given index. For example,
This method is provided only for backwards-compatibility with legacy versions. These versions tracked the expanded group state internally using the hierarchical group index.
| ||||||
|
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. | ||||||
|
drawPDF | ||||
---|---|---|---|---|
Exports the Grid element to a Drawing Group by using the | ||||
|
editCell | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Puts the cell that is specified by the table row and column in edit mode. | ||||||||||||
|
editRow | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Switches the specified table row in the edit mode (see example). | ||||||||||||
|
expandGroup | ||||||
---|---|---|---|---|---|---|
Expands a group header item for the given index. For example,
This method is provided only for backwards-compatibility with legacy versions. These versions tracked the expanded group state internally using the hierarchical group index.
| ||||||
|
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. | ||||||
|
focus | ||||
---|---|---|---|---|
Focuses the last active or the first cell of the Grid. | ||||
|
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:
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. | |||||||||
| |||||||||
|
focusNextCell | ||||||
---|---|---|---|---|---|---|
Focuses the next cell, optionally wrapping to the next row. | ||||||
| ||||||
|
focusPrevCell | ||||||
---|---|---|---|---|---|---|
Focuses the previous cell. Optionally wraps to the previous row. | ||||||
| ||||||
|
isEditing | ||||
---|---|---|---|---|
Returns 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. | ||||
|
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
| ||||||||||||
|
saveAsExcel |
---|
Initiates the Excel export (see example). |
saveAsPDF |
---|
Initiates the PDF export (see example). |
scrollTo | ||||||
---|---|---|---|---|---|---|
Scrolls to the specified row and column (see example). | ||||||
|