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
autoSize boolean
Indicates whether the Grid columns will be resized during initialization so that
they fit their headers and row content. Defaults to false.
Columns with autoSize set to false are excluded.
To dynamically update the column width to match the new content,
refer to this example.
columnMenu boolean | ColumnMenuSettings (default: false)
Specifies if the column menu of the columns will be displayed (see example).
data Array | 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
Defines the detail row height that is used when the scrollable option of the Grid is set to virtual.
Required by the virtual scrolling functionality.
filter CompositeFilterDescriptor
The descriptor by which the data will be filtered (see examples).
filterable FilterableSettings
Enables the filtering of the Grid columns that have their field option set.
groupable GroupableSettings | boolean
If set to true, the user can group the Grid by dragging the column header cells.
By default, grouping is disabled (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
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.
loading boolean (default: false)
Specifies if the loading indicator of the Grid will be displayed (see example).
navigable boolean
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.
pageSize number
Defines the page size used by the Grid pager.
Required by the paging functionality.
pageable PagerSettings | boolean
Configures the pager of the Grid (see example).
The available options are:
-
buttonCount: Number—Sets the maximum numeric buttons count before the buttons are collapsed. -
info: Boolean—Toggles the information about the current page and the total number of records. -
type: PagerType—Accepts thenumeric(buttons with numbers) andinput(input for typing the page number) values. -
pageSizes: BooleanorArray<number>—Shows a menu for selecting the page size. -
previousNext: Boolean—Toggles the Previous and Next buttons.
reorderable boolean (default: false)
If set to true, the user can reorder columns by dragging their header cells
(see example).
resizable boolean (default: false)
If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells
(see example).
rowHeight number
Defines the row height that is used when the scrollable option of the Grid is set to virtual.
Required by the virtual scrolling functionality.
scrollable ScrollMode
Defines the scroll mode used by the Grid.
The available options are:
-
none—Renders no scrollbar. -
scrollable—The default scroll mode. It requires the setting of theheightoption. -
virtual—Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.
selectable SelectableSettings | boolean
Enables the single-row selection of the Grid.
sortable SortSettings
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.
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.
import { Component } from '@angular/core';
import { GridItem } from '@progress/kendo-angular-grid';
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData" [trackBy]="trackBy">
</kendo-grid>
`
})
class AppComponent {
public gridData: any[] = products;
public trackBy(index: number, item: GridItem): any {
console.log(item);
return index;
}
}
const products = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}
];
group Array
The descriptors by which the data will be grouped (see example).
rowClass RowClassFn
Defines a function that is executed for every data row in the component.
import { Component, ViewEncapsulation } from '@angular/core';
import { RowClassArgs } from '@progress/kendo-angular-grid';
@Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.None,
styles: [`
.k-grid tr.even { background-color: #f45c42; }
.k-grid tr.odd { background-color: #41f4df; }
`],
template: `
<kendo-grid [data]="gridData" [rowClass]="rowCallback">
</kendo-grid>
`
})
class AppComponent {
public gridData: any[] = products;
public rowCallback(context: RowClassArgs) {
const isEven = context.index % 2 == 0;
return {
even: isEven,
odd: !isEven
};
}
}
const products = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}
];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.
skip number
Defines the number of records to be skipped by the pager.
Required by the paging functionality.
sort Array
The descriptors by which the data will be sorted (see example).
Fields
columns QueryList<ColumnBase>
A query list of all declared columns.
activeCell NavigationCell
Returns the currently focused cell (if any).
activeRow NavigationRow
Returns the currently focused row (if any).
Events
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>
Fires when the user completes the resizing of the column.
columnVisibilityChange EventEmitter<ColumnVisibilityChangeEvent>
Fires when the user changes the visibility of the columns from the column menu or column chooser.
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).
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>
Fires when the grouping of the Grid is changed.
You have to handle the event yourself and group the data (see example).
groupCollapse EventEmitter<{ group: GroupResult; groupIndex: string; }>
Fires when the user collapses a group header.
groupExpand EventEmitter<{ group: GroupResult; groupIndex: string; }>
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).
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.
Emits the SelectionEvent.
sortChange EventEmitter>
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 (set resizable to true).
Makes sense to execute this method only
after the Grid is already populated with data.
@Component({
selector: 'my-app',
template: `
<kendo-grid
#grid
[data]="gridData"
[resizable]="true"
style="height: 300px">
<ng-template kendoGridToolbarTemplate>
<button class="k-button" (click)="grid.autoFitColumn(groupColumn)">
Auto-fit the group column
</button>
</ng-template>
<kendo-grid-column-group #groupColumn title="Product Info">
<kendo-grid-column
field="ProductID"
[width]="50"
[minResizableWidth]="30"
title="ID">
</kendo-grid-column>
<kendo-grid-column
field="ProductName"
title="Product Name">
</kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column
field="UnitPrice"
title="Unit Price"
[width]="180"
filter="numeric"
format="{0:c}">
</kendo-grid-column>
</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
}
];Parameters
column ColumnBase
autoFitColumns
Applies the minimum possible width for the specified columns,
so that the whole text fits without wrapping.
If no argument is supplied, autoFitColumns auto-fits
the content of current Grid columns. This method expects the Grid
to be resizable (set resizable to true).
Makes sense to execute this method only
after the Grid is already populated with data.
@Component({
selector: 'my-app',
template: `
<kendo-grid
#grid
[data]="gridData"
[resizable]="true"
style="height: 300px">
<ng-template kendoGridToolbarTemplate>
<button class="k-button" (click)="grid.autoFitColumns([firstColumn, lastColumn])">
Auto-fit the first and last column
</button>
<button class="k-button" (click)="grid.autoFitColumns()">
Auto-fit all columns
</button>
</ng-template>
<kendo-grid-column-group title="Product Info">
<kendo-grid-column
#firstColumn
field="ProductID"
[width]="50"
[minResizableWidth]="30"
title="ID">
</kendo-grid-column>
<kendo-grid-column
field="ProductName"
title="Product Name"
>
</kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column
#lastColumn
field="UnitPrice"
title="Unit Price"
[width]="180"
filter="numeric"
format="{0:c}">
</kendo-grid-column>
</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
}
];Parameters
columns Array<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.
When you use the
kendoGridGroupBindingdirective,
thecollapseGroupmethod is not supported.
Parameters
index string
The underscore separated hierarchical index of the group.
collapseRow
Collapses the specified master row.
Parameters
index number
The absolute 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
PromiseGroup.
editCell
Puts the cell that is specified by the table row and column in edit mode.
Parameters
rowIndex number
The row index that will be switched in the edit mode.
column number | string | 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
index number
The row index that will be switched in the edit mode.
group? any
The FormGroup
that describes the edit form.
options? {[skipFocus: string]: boolean}
Additional options. Use skipFocus to determine if the row's edit element should be focused. Defaults to false.
expandGroup
Expands a group header item for the given index. For example,
0_1 expands the second inner group of the first master group.
When you use the
kendoGridGroupBindingdirective,
theexpandGroupmethod is not supported.
Parameters
index string
The underscore separated hierarchical index of the group.
expandRow
Expands the specified master row (see example).
Parameters
index number
The absolute 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 indexed and start at row
#0. - Group headers and footers are indexed.
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 row index to focus.
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.
@Component({
selector: 'my-app',
template: `
<kendo-grid
#grid
[data]="gridData"
[reorderable]="true"
style="height: 300px">
<ng-template kendoGridToolbarTemplate>
<button class="k-button"
(click)="grid.reorderColumn(groupColumn, 2, { before: true })">
Move the group column before the last one.
</button>
</ng-template>
<kendo-grid-column-group #groupColumn title="Product Info">
<kendo-grid-column
field="ProductID"
[width]="50"
title="ID">
</kendo-grid-column>
<kendo-grid-column
field="ProductName"
title="Product Name">
</kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column
field="UnitPrice"
title="Unit Price"
[width]="180"
format="{0:c}">
</kendo-grid-column>
<kendo-grid-column
field="Discontinued"
title="Discontinued"
[width]="100">
</kendo-grid-column>
</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
}
];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).