ColumnComponent
Represents a column in the Grid.
Use the kendo-grid-column component to define columns in the Grid.
Definition
Package:@progress/kendo-angular-grid
Selector:kendo-grid-column
Syntax:
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
</kendo-grid>Inputs
autoSize
boolean
Specifies if the column is automatically resized during initialization to fit its header and row content.
cellRowspan
boolean | CellRowspanFn
Defines a function to determine the rowspan of each column cell.
If you set this to true, a default function is used that spans adjacent cells with equal values.
Cells have equal values when their data items' values for the respective field are equal.
class
string | string[] | Set<string> | { [key: string]: any }
Sets custom CSS classes to the column cells.
Uses the NgClass directive. See example.
To customize header and footer column cells, use the headerClass
and footerClass inputs.
columnMenu
boolean
Specifies if the column menu is shown for the column.
true
editable
boolean
Sets whether the column is editable. See example.
true
Sets the editor type for the column. See example. Used when the column enters edit mode.
'text'
field
string
Sets the field that the column binds to.
Sets the filter type for the filter row UI. See example.
'text'
filterable
boolean
Shows or hides the filter UI for this column. See example.
true
filterClass
string | string[] | Set<string> | { [key: string]: any }
Sets custom CSS classes to the filter row cell.
Uses the NgClass directive. See example.
filterStyle
{ [key: string]: string }
Sets custom styles for the filter row cell.
Uses the NgStyle directive. See example.
Specifies the filter type for the filter menu UI.
'default'
footerClass
string | string[] | Set<string> | { [key: string]: any }
Sets custom CSS classes to the column footer cell.
Uses the NgClass directive. See example.
footerStyle
{ [key: string]: string }
Sets custom styles for the footer cell of the column.
Uses the NgStyle directive. See example.
format
any
Sets the format for displaying the column value. For supported date and number formats, see the Column Formats article.
groupable
boolean
Allows dragging the column to the group panel.
Set to false to group by this column only through the Grid API.
true
headerClass
string | string[] | Set<string> | { [key: string]: any }
Sets custom CSS classes to the column header cell.
Uses the NgClass directive. See example.
headerStyle
{ [key: string]: string }
Sets custom styles for the header cell of the column.
Uses the NgStyle directive. See example.
hidden
boolean
Sets the visibility of the column (see example).
false
includeInChooser
boolean
Specifies if the column is included in the column-chooser list.
true
lockable
boolean
Specifies if the column can be locked or unlocked from the column menu or by reordering.
true
locked
boolean
Toggles the locked (frozen) state of the column (more information and example).
false
maxResizableWidth
number
Sets the maximum width (in pixels) for resizing the column by using the UI (see example).
By default, the maximum width is not restricted.
The autoFitColumn and autoFitColumns methods have higher priority.
media
string
Sets the condition for the column to remain visible (see example).
If you set the hidden property, media is ignored.
Accepts device identifiers from Bootstrap 4 (see example).
minResizableWidth
number
Sets the minimum width (in pixels) for resizing the column by using the UI (see example).
The autoFitColumn and autoFitColumns methods have higher priority.
10
reorderable
boolean
Specifies if the column is reorderable.
true
resizable
boolean
Specifies if the column is resizable.
true
resizeStep
number
Sets the distance in pixels by which the column width is adjusted during keyboard navigation resizing.
Used when resizing columns with Alt/Option + Left/Right Arrow keyboard shortcuts.
10
sortable
boolean | ColumnSortSettings
Enables sorting when the user clicks the column header. See example.
Emits the sortChange event.
true
stickable
boolean
Specifies if the column can be stuck or unstuck from the column menu.
true
sticky
boolean
Specifies if the column is always visible when scrolling the Grid horizontally.
false
style
{ [key: string]: string }
Sets custom styles for the table cells (excluding footer and header) of the column.
Uses the NgStyle directive. See example.
tableCellsRole
string
Sets the role attribute for the table cells (excluding footer and header) of the column.
'gridcell'
title
string
Sets the column title.
width
number
Sets the column width (in pixels).
Fields
orderIndex
number
Gets the column index after reordering. The orderIndex property is read-only. Setting this field does not change the column order.
0