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.

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.

Events

dataStateChange EventEmitter

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

pageChange EventEmitter

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

selectionChange EventEmitter

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

sortChange EventEmitter<Array>

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

In this article