New to Kendo UI for Angular? Start a free 30-day trial

Defining Columns

The Grid enables you to define its columns in several ways. You can either:

  • Define the columns explicitly in the component template.
  • Let the Grid generate the columns automatically based on the provided data.

Using the Column Component

To define the Grid columns in a declarative way, nest the columns as tags inside the <kendo-grid> tag. This approach is convenient for configuring the columns and enabling various features like hidden and locked states, resizing, reordering, and many more.

The available column components provided by the Grid are:

The following code snippet will produce a Grid with two columns bound to the ProductID and ProductName fields of the model:

<kendo-grid [data]="data">
    <kendo-grid-column field="ProductID" title="ID"> </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name"> </kendo-grid-column>
<kendo-grid>

The code above demonstrates how to configure the following column properties:

  • fieldThe model field to which you bind the column.
  • titleThe column header text. If you don't provide it, the Grid displays the field property name in the header.

The example below demonstrates how to define the Grid columns in the template.

Example
View Source
Change Theme:

Dynamic Column Generation

The Grid enables you to generate columns based on a configuration array. This dynamic column generation approach is convenient for a few scenarios:

  • The number of columns that must be displayed is large and you don't want to manually list all of them in the Grid template.
  • The column number and configuration will vary based on some business logic.
  • The column configuration must be stored and loaded separately, for example, from a remote service.

To configure dynamic column generation, use the Angular ngFor structural directive to loop through a column configuration array. The columns will be rendered according to the items order in the passed collection.

<kendo-grid [data]="gridData">
    <kendo-grid-column *ngFor="let column of columnsConfig"
        field="{{ column.field }}"
        title="{{ column.title }}">
    </kendo-grid-column>
</kendo-grid>

The following example demonstrates how to generate the Grid columns by using a ngFor loop.

Example
View Source
Change Theme:

Automatic Column Generation

By default, if the columns are not explicitly configured, the Grid will generate a column for each model field from the bound data. For example, when bound to the data below, the Grid will generate three columns (ID, Name, and Title):

public gridData: Employee[] = [
    { ID: 1268, Name: 'Mia Caldwell', Title: 'Software Architect' },
    { ID: 1326, Name: 'Daryl Sweeney', Title: 'Chief Executive Officer' },
    ...
];

The following example demonstrates the Grid default column generation.

Example
View Source
Change Theme: