New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Editing Basics

The CRUD operations (create, remove, update, and delete) are essential features of the Kendo UI or Angular Grid. You can start editing a particular row or a single column cell. As a native Angular component, the Grid is tightly integrated with the Angular Forms. Choosing the correct forms approach and editing mode depends on the specific use case and business logic that needs to be implemented.

You can implement an editable Grid by using:

  • Built-In Directives—They encapsulate the low-level editing operations, which results in cleaner code.
  • Manual Editing—With this approach, you handle the corresponding editing events and perform the CRUD operations manually.

Built-In Directives

The editing directives encapsulate the low-level operations to help you implement a fully functional editable Grid with less code. As a result, the markup is cleaner, shorter, and more readable, but this comes at the expense of flexibility.

For further details and runnable examples, check the Built-In Directives article.

Manual Editing

To take full control over the applied CRUD operations, you can follow the manual editing approach. Handle the editing-related events that the Grid emits, and perform the required editing operations as necessary.

The set of events that you must handle to enable the manual editing depends on the chosen editing mode:

Built-in Cell Editor Types

By default, the Grid provides a built-in editing UI for all basic data types (string, number, Date, boolean). You can set the editing UI type through the editor input property of each column.

<kendo-grid-column ... editor="text"></kendo-grid-column>

Text Editor

If the column contains only string values, set the editor property to text (default value). When the cell is edited, the Kendo UI for Angular TextBox component appears in the cell.

Example
View Source
Change Theme:

Numeric Editor

If the column contains only numbers, you can set the editor property to numeric. When the cell is edited, the Kendo UI for Angular NumericTextBox component appears in the cell.

Example
View Source
Change Theme:

Date Editor

If the column contains valid JavaScript Date objects, you can set the editor property to date. When the cell is edited, the Kendo UI for Angular DatePicker component appears in the cell for easier date selection.

Example
View Source
Change Theme:

Boolean Editor

If the column contains boolean values, you can set the editor property to boolean. When the cell is edited, the Kendo UI for Angular CheckBox appears in the cell.

Example
View Source
Change Theme: