ColumnComponent
Represents the columns of the Angular Data Grid.
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" [width]="120">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" [width]="120">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
class AppComponent {
public gridData: any[];
constructor() {
this.gridData = products;
}
}
const products = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}
];
Selector
kendo-grid-column
Inputs
Name | Type | Default | Description |
---|---|---|---|
autoSize |
|
Indicates whether the column will be resized during initialization so that it fits its header and row content. | |
columnMenu |
|
|
Specifies if the column menu will be shown for the column. |
class |
|
Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the | |
editable |
|
Defines whether the column is editable. The default value is
| |
editor |
|
Defines the editor type (see example).
Used when the column enters the edit mode. The default value is
| |
field |
|
The field to which the column is bound. | |
filter |
|
Defines the filter type that is displayed inside the filter row. The default value is
| |
filterable |
|
Defines if a filter UI will be displayed for this column. The default value is
| |
filterClass |
|
Sets the custom CSS classes to the filter row cell. Under the hood, to apply the property,
the | |
filterStyle |
|
Sets the custom styles for the filter row cell. Under the hood, to apply the property,
the | |
footerClass |
|
Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
the | |
footerStyle |
|
Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
the | |
format |
|
The format that is applied to the value before it is displayed.
Takes the Standard format:
Format object for currency:
Format object for dates:
| |
groupable |
|
Determines if the column can be dragged to the group panel. The default value is | |
headerClass |
|
Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
the | |
headerStyle |
|
Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
the | |
hidden |
|
|
Sets the visibility of the column (see example). |
includeInChooser |
|
|
Specifies if the column will be included in the column-chooser list. |
lockable |
|
|
Specifies if the column can be locked or unlocked from the column menu or by reordering the columns. |
locked |
|
|
Toggles the locked (frozen) state of the columns (more information and example). |
maxResizableWidth |
|
The width (in pixels) above which the user is not able to resize the column by using the UI (see example). By default, the maximum width is not restricted. | |
media |
|
Sets the condition that needs to be satisfied for a column to remain visible (see example).
If you set the Accepts the device identifiers that are available in Bootstrap 4 (see example): | |
minResizableWidth |
|
|
The width (in pixels) below which the user is not able to resize the column by using the UI (see example). |
reorderable |
|
|
Indicates whether the column is reorderable. |
resizable |
|
|
Indicates whether the column is resizable. |
sortable |
|
Allows the column headers to be clicked and the | |
stickable |
|
|
Specifies if the column can be stuck or unstuck from the column menu. |
sticky |
|
|
Determines whether the column will be always visible when scrolling the Grid horizontally. |
style |
|
Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
to apply the property, the | |
title |
|
The title of the column. | |
width |
|
The width of the column (in pixels). |
Fields
Name | Type | Default | Description |
---|---|---|---|
orderIndex |
|
|
The column index after reordering. The |