GridProEditColumn

Description #

<vaadin-grid-pro-edit-column> is a helper element for the <vaadin-grid-pro> that provides default inline editing for the items.

Note that the path property must be explicitly specified for edit column.

Example: #

<vaadin-grid-pro>
 <vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>

 <vaadin-grid-column>
   ...

Properties #

autoWidth #

Type: boolean

Automatically sets the width of the column based on the column contents when this is set to true.

For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore.

Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden.

You can manually trigger the auto sizing behavior again by calling grid.recalculateColumnWidths().

The column width may still grow larger when flexGrow is not 0.

editModeRenderer #

Type: GridBodyRenderer<any> | null | undefined

Custom function for rendering the cell content in edit mode. Receives three arguments:

• root The cell content DOM element. Append your editor component to it.
• column The <vaadin-grid-pro-edit-column> element.
• model The object with the properties related with the rendered item, contains:
  • model.index The index of the item.
  • model.item The item.
  • model.expanded Sublevel toggle state.
  • model.level Level of the tree represented with a horizontal offset of the toggle button.
  • model.selected Selected state.
  • model.detailsOpened Details opened state.

See also: GridBodyRenderer

editorOptions #

Type: string[]

The list of options which should be passed to cell editor component. Used with the select editor type, to provide a list of items.

editorType #

Type: GridProEditorType

Type of the cell editor component to be rendered. Allowed values:

• text (default) - renders a text field
• checkbox - renders a checkbox
• select - renders a select with a list of items passed as editorOptions

Editor type is set to custom when editModeRenderer is set.

See also: GridProEditorType

editorValuePath #

Type: string

Path of the property used for the value of the editor component.

flexGrow #

Type: number

Flex grow ratio for the cell widths. When set to 0, cell width is fixed.

footerPartName #

Type: string | null | undefined

Custom part name for the footer cell.

footerRenderer #

Type: GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined

Custom function for rendering the footer content. Receives two arguments:

• root The footer cell content DOM element. Append your content to it.
• column The <vaadin-grid-column> element.

See also: GridHeaderFooterRenderer

frozen #

Type: boolean

When true, the column is frozen. When a column inside of a column group is frozen, all of the sibling columns inside the group will get frozen also.

frozenToEnd #

Type: boolean

When true, the column is frozen to end of grid.

When a column inside of a column group is frozen to end, all of the sibling columns inside the group will get frozen to end also.

Column can not be set as frozen and frozenToEnd at the same time.

header #

Type: string | null | undefined

Text content to display in the header cell of the column.

headerPartName #

Type: string | null | undefined

Custom part name for the header cell.

headerRenderer #

Type: GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined

Custom function for rendering the header content. Receives two arguments:

• root The header cell content DOM element. Append your content to it.
• column The <vaadin-grid-column> element.

See also: GridHeaderFooterRenderer

hidden #

Type: boolean

When set to true, the cells for this column are hidden.

isCellEditable #

Type: (model: GridItemModel<any>) => boolean

A function to check whether a specific cell of this column can be edited. This allows to disable editing of individual rows or cells, based on the item.

Receives a model object containing the item for an individual row, and should return a boolean indicating whether the column's cell in that row is editable.

The model object contains:

• model.index The index of the item.
• model.item The item.
• model.expanded Sublevel toggle state.
• model.level Level of the tree represented with a horizontal offset of the toggle button.
• model.selected Selected state.

See also: GridItemModel

path #

Type: string | null | undefined

JS Path of the property in the item used for the editable content.

renderer #

Type: GridBodyRenderer<any, GridColumn<any>> | null | undefined

Custom function for rendering the cell content. Receives three arguments:

• root The cell content DOM element. Append your content to it.
• column The <vaadin-grid-column> element.
• model The object with the properties related with the rendered item, contains:
  • model.index The index of the item.
  • model.item The item.
  • model.expanded Sublevel toggle state.
  • model.level Level of the tree represented with a horizontal offset of the toggle button.
  • model.selected Selected state.
  • model.detailsOpened Details opened state.
  • model.hasChildren Whether the item has children.

See also: GridBodyRenderer

resizable #

Type: boolean | null | undefined

When set to true, the column is user-resizable.

rowHeader #

Type: boolean

When true, the cells for this column will be rendered with the role attribute set as rowheader, instead of the gridcell role value used by default.

When a column is set as row header, its cells will be announced by screen readers while navigating to help user identify the current row as uniquely as possible.

textAlign #

Type: GridColumnTextAlign | undefined

Aligns the columns cell content horizontally. Supported values: "start", "center" and "end".

See also: GridColumnTextAlign

width #

Type: string | null | undefined

Width of the cells for this column.

Please note that using the em length unit is discouraged as it might lead to misalignment issues if the header, body, and footer cells have different font sizes. Instead, use rem if you need a length unit relative to the font size.

Events #

editor-type-changed #

Type: CustomEvent

Fired when the editorType property changes.

Types #

GridBodyRenderer #

export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
  model: GridItemModel<TItem>,
) => void;

GridColumnTextAlign #

export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;

GridHeaderFooterRenderer #

export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
) => void;

GridItemModel #

export interface GridItemModel<TItem> {
  index: number;
  item: TItem;
  selected?: boolean;
  expanded?: boolean;
  level?: number;
  detailsOpened?: boolean;
  hasChildren?: boolean;
}

GridProEditorType #

export type GridProEditorType = 'checkbox' | 'custom' | 'select' | 'text';