Defining Columns
The Angular Grid enables you to define its columns in two 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:
<kendo-grid-column>—Represents the basic Grid column. Used to display model data or templated content.<kendo-grid-column-group>—Used to define multi-column group headers, which span over subordinate columns.<kendo-grid-checkbox-column>—Defines a column with a dedicated checkbox for row selection.<kendo-grid-rowreorder-column>—Defines a column with a dedicated handle for reordering rows.<kendo-grid-command-column>—Defines a column dedicated to displaying command buttons like Edit, Remove, and others.<kendo-grid-span-column>—Allows you to span row content over multiple cells while retaining the individual header and footer cells.
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:
field—The model field to which you bind the column.title—The column header text. If you don't provide it, the Grid displays thefieldproperty name in the header.
The example below demonstrates how to define the Grid columns in the template.
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.
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.