New to Kendo UI for VueStart a free 30-day trial

The properties of the default Grid Cell.

Definition

Package:@progress/kendo-vue-grid

Properties

The index to be applied to the aria-colindex attribute.

Defines a set of custom cell components that the Grid will render instead of the default cell.

The custom CSS classes of the cells.

colSpan?

number

The column span of the cell.

The index of all rendered columns.

The number of rendered columns in the Grid.

Sets the type of the column and renders a dedicated column for interaction.

Default:

"data"

The data object that represents the current row.

editor?

string

The type of the editor which will be used when the cell is in edit mode. Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.

expanded?

boolean

The expanded value of the cell when hierarchy or grouping are used.

field

string

The field to which the cell is bound (see example).

format?

string

The format that is applied to the value before the value is displayed. Takes the {0:format} form where format is any of the following:

  • A standard number format
  • A custom number format
  • A standard date format
  • A custom date format

For more information on the supported date and number formats, refer to the kendo-intl documentation.

Indicates if the cell is highlighted.

isRtl

boolean

Indicates if the cell is in rtl direction.

isSelected

boolean

Indicates if the cell is selected.

key?

number

The field to which the cell is bound (see example).

onAdd?

(event: { dataItem: any }) => void

The event that is fired when the cell is about to be added.

Parameters:event{ dataItem: any }

onCancel?

(event: { dataItem: any }) => void

The event that is fired when the cell is about to be canceled.

Parameters:event{ dataItem: any }

onCellclick?

(event: { dataItem: any; field: string }) => void

The event that is fired when the cell is clicked.

Parameters:event{ dataItem: any; field: string }

onCellkeydown?

(event: { event: any; dataItem: any; field: string }) => void

The event that is fired when the keydown event of the cell is triggered.

Parameters:event{ event: any; dataItem: any; field: string }

onChange?

(event: { dataItem: any; event: any; field?: string; value?: any }) => void

The event that is fired when the cell value is changed.

Parameters:event{ dataItem: any; event: any; field?: string; value?: any }

onEdit?

(event: { dataItem: any }) => void

The event that is fired when the cell is about to be edited.

Parameters:event{ dataItem: any }

The data Item read format.

remove?

(event: { dataItem: any }) => void

The event that is fired when the cell is about to be removed.

Parameters:event{ dataItem: any }

The method for rendering the cell.

rowType?

string

The type of the row.

save?

(event: { dataItem: any }) => void

The event that is fired when the cell is about to be saved.

Parameters:event{ dataItem: any }

selectionchange?

(event: any, dataItem: any) => void

The event that is fired when the cell is selected.

Parameters:eventanydataItemany

td2Props?

TdHTMLAttributes

The props and attributes that are applied to the second td. Such element is rendered in very rare cases when we have grouping and sticky columns.

tdProps?

TdHTMLAttributes

The props and attributes that are applied to the td element by default.

type?

string

The type of the data which will be used when formatting the cell data. Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.