Skip to main content Skip to footer
Vue Icon

Editing for Vue Datagrids

Wijmo's Vue datagrid, FlexGrid, has built-in support for Excel-like, in-cell editing. It also allows developers to customize the way users edit the data stored inside of the FlexGrid, such as data validation, pop-up editors, and customer editors.

Quick Editing

Wijmo's Vue datagrid, FlexGrid, allows users to use its quick-editing functionality by default. This enables users to send a cell into edit mode and use the arrows to switch cells. In full edit mode, the arrow keys change selection within the edited cell.

Quick Editing Demo

Read-Only

If you don't want users to edit data within the FlexGrid, disable editing by setting the datagrid to read-only. This prevents FlexGrid from going into edit mode when a user begins typing or double-clicks a cell.

Read-Only Demo

Validation

FlexGrid allows you to validate your user-entered data in multiple ways. The Vue datagrid supports Automatic Type Coercion, Data Maps, Event-Based Validation, and CollectionView-Based Validation.

Event-Based Validation Demo

CollectionView-Based Validation Demo

Inline Editing

Although FlexGrid provides Excel-like, in-cell editing, some users may want to customize the editing behavior. The DataGrid allows you to include buttons in a column, which will then send the row into edit mode when clicked.

Inline Editing Demo

Pop-Up Editors

Although FlexGrid provides Excel-like, in-cell editing, some users may want to customize the editing behavior. The datagrid allows you to create custom Vue pop-up editors to modify the selected row.

Pop-up Editors Demo

Custom Editors

FlexGrid supports the addition of custom Vue editors within cells. This allows you to insert both Wijmo and custom components inside of a cell within the datagrid to display when the user sends the cell into edit mode.

Custom Editors Demo

Input Method Editor

IME, or Input Method Editor, allows data, such as keyboard strokes or mouse movements, to be received as input by FlexGrid. IME is obligatory for languages such as Japanese, Chinese, and Korean.

IME Demo