GridComponent

Represents the Kendo UI Grid component for Angular.

Copy Code@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

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

(default: false) 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 scrollable option of the Grid is set to virtual. Required by the virtual scrolling functionality.

filter

The descriptor by which the data will be filtered (see examples).

filterable

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

groupable

If set to true, the user can group the Grid by dragging the column header cells. By default, grouping is disabled (see example).

height

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

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

(default: false) Specifies if the loading indicator of the Grid will be displayed (see example).

navigable

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

Defines the page size used by the Grid pager. Required by the paging functionality.

pageable

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. Defaults to 10.
• info: Boolean—Toggles the information about the current page and the total number of records. Defaults to true.
• type: PagerType—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values. Defaults to 'numeric'.
• pageSizes: Boolean or Array<number>—Shows a menu for selecting the page size. Defaults to false.
• previousNext: Boolean—Toggles the Previous and Next buttons. Defaults to true.
• responsive: Boolean—Toggles the built-in responsive behavior of the Pager. Defaults to true.

reorderable

(default: false) If set to true, the user can reorder columns by dragging their header cells (see example).

resizable

(default: false) If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells (see example).

rowHeight

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

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 the height option.
• virtual—Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.

selectable

Enables the single-row selection of the Grid.

sortable

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

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.

Copy Codeimport { 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
 }
];

virtualColumns

If set to true, the grid will render only the columns in the current viewport.

cellSelected

Defines a function that determines the selected state of a data cell. Returns an object with selected and item properties. The cell is marked as selected only if the selected property equals true.

The function is executed for each data cell and may be called more than once as part of a change detection cycle. (see example)

group

The descriptors by which the data will be grouped (see example).

isDetailExpanded

A function which determines if a specific row is expanded.

rowClass

Defines a function that is executed for every data row in the component.

Copy Codeimport { 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

Defines a Boolean function that is executed for each data row in the component (see example). Determines whether the row will be selected.

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

Fields

columns

A query list of all declared columns.

activeCell

Returns the currently focused cell (if any).

activeRow

Returns the currently focused row (if any).

Events

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.

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

Parameters

group

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.

Copy Code@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

autoFitColumns

Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping. If no columns are specified, autoFitColumns is applied to all columns.

This method requires the Grid to be resizable (set resizable to true).

Copy Code@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

cancelCell

Closes the current cell in edit mode.

closeCell

Closes the current cell in edit mode and fires the cellClose event.

Returns

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?

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.
• When a Grid is pageable, the indexes of the groups are offset by the current Grid skip.

Parameters

index

The underscore separated hierarchical index of the group.

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.

Parameters

index

The data row 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

• A promise that will be resolved with the Drawing Group.

editCell

Puts the cell that is specified by the table row and column in edit mode.

Parameters

rowIndex

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

column

The leaf column index, or the field name or the column instance that should be edited.

group?

The FormGroup that describes the edit form.

editRow

Switches the specified table row in the edit mode (see example).

Parameters

rowIndex

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

group?

The FormGroup that describes the edit form.

options?

Additional options configuring the focus target once the editor opens.

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.
• When a Grid is pageable, the indexes of the groups are offset by the current Grid skip.

Parameters

index

The underscore separated hierarchical index of the group.

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.

Parameters

index

The data row index of the master row.

focus

Focuses the last active or the first cell of the Grid.

Returns

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 included, starting at index 0.
• Group headers and footers are included.
• The row indexing is absolute and does not change with paging.

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

The logical row index to focus. The top header row has an index 0.

colIndex

The column index to focus.

Returns

The focused cell.

focusNextCell

Focuses the next cell, optionally wrapping to the next row.

Parameters

wrap

A Boolean value which indicates if the focus will move to the next row. Defaults to true.

Returns

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

A Boolean value which indicates if the focus will move to the next row. Defaults to true.

Returns

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

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

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.

Copy Code@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

The column whose position will be changed.

destIndex

The new position of the column.

options

Additional options.

saveAsExcel

Initiates the Excel export (see example).

saveAsPDF

Initiates the PDF export (see example).

scrollTo

Scrolls to the specified row and column

Parameters

request