All Components
Components

Components / Grid / API

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

data Array | 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.
Required by the virtual scrolling functionality.

filter CompositeFilterDescriptor

The descriptor by which the data will be filtered.

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.

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.

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.

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 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.

reorderable boolean (default: false)

If set to true, the user can reorder columns by dragging their header cells.
(see the basic usage 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 the basic usage 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—This is the default scroll mode. It requires the setting of the height option.
  • 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.

group Array

The descriptors by which the data will be grouped.

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.
It determines whether the row will be selected.
For a basic usage example, refer to the section on
setting the selected rows of the Grid.

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.

Events

add EventEmitter<AddEvent>

Fires when the user clicks the Add command button to add a new row.

cancel EventEmitter<CancelEvent>

Fires when the user clicks the Cancel command button to close a row.

cellClick EventEmitter<CellClickEvent>

Fires when the user clicks a cell.

cellClose EventEmitter<CellCloseEvent>

Fires when the user leaves an edited cell.

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.

dataStateChange EventEmitter<DataStateChangeEvent>

Fires when the data state of the Grid is changed.

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

Fires when the user collapses a master row.

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

Fires when the user expands a master row.

edit EventEmitter<EditEvent>

Fires when the user clicks the Edit command button to edit a row.

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.

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.
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.

save EventEmitter<SaveEvent>

Fires when the user clicks the Save command button to save changes in a row.

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.
You have to handle the event yourself and sort the data.

Methods

addRow

Creates a new row editor.

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).

It 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).

It 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 | QueryList

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.

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 kendoGridGroupBinding directive,
the collapseGroup method 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.

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.

Parameters

index number

The row index that will be switched in the edit mode.

group? any

The FormGroup
that describes 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.

When you use the kendoGridGroupBinding directive,
the expandGroup method is not supported.

Parameters

index string

The underscore separated hierarchical index of the group.

expandRow

Expands the specified master row.

Parameters

index number

The absolute index of the master row.

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.

saveAsPDF

Initiates the PDF export.

In this article