All Components

GridComponent

Represents the Kendo UI Grid component for Angular.

@Component({
   selector: 'my-app',
   template: `
       <kendo-grid [data]="gridData">
       </kendo-grid>
   `
})
class AppComponent {
   private 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

Inputs

data Array<any> | GridDataResult

Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count.

detailRowHeight number

Defines the detail row height that is used when the scrollable option of the Grid is set to virtual.
It is required by the virtual scrolling functionality.

groupable GroupableSettings | boolean

If set to true the user could group the grid by dragging the column header cells. By default grouping is disabled.

height number

Defines the height (in pixels) that is used when the scrollable option of the Grid is set.

pageSize number

Defines the page size used by the Grid pager.
It is required by the paging functionality.

pageable PagerSettings | boolean

Configures the pager of the Grid. The available options of the PagerSettings 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 the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizes: Boolean or Array<number>—Shows a menu for selecting the page size.
  • previousNext: Boolean—Toggles the Previous and Next buttons.

rowHeight number

Defines the row height that is used when the scrollable option of the Grid is set to virtual.
It is 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—This is the default scroll mode. It requires the setting of the height option.
  • virtual—Displays no pager and renders a portion of data (optimized rendering) while the user is scrolling the content.

selectable boolean

Enables the single-row selection of the Grid.

skip number

Defines the number of records to be skipped by the pager.
It is required by the paging functionality.

sortable SortSettings

Enables the sorting of the Grid columns that have their field option set.

group Array<GroupDescriptor>

The descriptors by which the data will to be grouped.

Events

add EventEmitter<{ dataItem: any; isNew: boolean; rowIndex: number; sender: GridComponent; }>

The add event is trigged when the user clicks on Add command button to add a new Grid row.

cancel EventEmitter<{ dataItem: any; formGroup: FormGroup; isNew: boolean; rowIndex: number; sender: GridComponent; }>

The cancel event is trigged when the user clicks on Cancel command button to close a Grid row.

dataStateChange EventEmitter<DataStateChangeEvent>

The dataStateChange event is trigged when the data state of the Grid is changed.

detailCollapse EventEmitter<{ dataItem: any; index: number; }>

The detailCollapse event is trigged when the user collapses a master row.

detailExpand EventEmitter<{ dataItem: any; index: number; }>

The detailExpand event is trigged when the user expands a master row.

edit EventEmitter<{ dataItem: any; isNew: boolean; rowIndex: number; sender: GridComponent; }>

The edit event is trigged when the user clicks on Edit command button to edit a Grid row.

groupChange EventEmitter<Array<GroupDescriptor>>

The groupChange event is trigged when the grouping of the Grid is changed.
You have to handle the event yourself and group the data.

groupCollapse EventEmitter<{ group: GroupResult; }>

The groupCollapse event is trigged when the user collapses a group header.

groupExpand EventEmitter<{ group: GroupResult; }>

The groupExpand event is trigged when the user expands a group header.

pageChange EventEmitter<PageChangeEvent>

The pageChange event is trigged when the page of the Grid is changed. You have to handle the event yourself and page the data.

remove EventEmitter<{ dataItem: any; isNew: boolean; rowIndex: number; sender: GridComponent; }>

The remove event is trigged when the user clicks on Remove command button to remove a Grid row.

save EventEmitter<{ dataItem: any; formGroup: FormGroup; isNew: boolean; rowIndex: number; sender: GridComponent; }>

The save event is trigged when the user clicks on Save command button to save changes in a Grid row.

selectionChange EventEmitter<SelectionEvent>

The selectionChange event is trigged when the user selects a Grid row.
Emits the SelectionEvent.

sortChange EventEmitter<Array<SortDescriptor>>

The sortChange event is trigged when the sorting of the Grid is changed. You have to handle the event yourself and sort the data.

Methods

addRow

Create new row editor.

Parameters

group any

FormGroup which desribes
the edit form. If is called with data item, it will build FormGroup from the data item fields

closeRow

Closes the editor for given row.

Parameters

index? number

row index which to be switched out of edit mode. If no index is provided it assumes
that new item editor must be closed

collapseGroup

Collapses a group header item for the given index.
For example 0_1 collapse the second inner group of the first master group.

Parameters

index string

underscore separated heirarical index of the group

collapseRow

Collapses the specified master row.

Parameters

index number

the absolute index of the master row

editRow

Switches the specified table row in edit mode.

Parameters

index number

row index which to be switched in edit mode

group? any

FormGroup
which desribes the edit form

expandGroup

Expands a group header item for the given index.
For example 0_1 expands the second inner group of the first master group.

Parameters

index string

underscore separated heirarical index of the group

expandRow

Expands the specified master row.

Parameters

index number

the absolute index of the master row

In this article