Angular Data Grid Editing Basics

The CRUD operations (create, remove, update, and delete) are essential features of the Kendo UI for 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.

To create an editable Grid in Angular, you can use one of the following approaches:

• Quick Setup—Set up the editing with built-in directives that handle all low-level operations for you.
• Manual Setup—With this approach, you handle the corresponding editing events and perform the CRUD operations manually.

Quick Setup

The Grid provides built-in editing directives that simplify the implementation of the editing functionality for the component. These directives let you handle common editing scenarios through concise markup, thus maintaining clean and readable configurations.

The Grid offers multiple editing modes represented by the following built-in directives:

Editing Mode	Built-in Directive	Description
Inline Editing	Reactive Editing Directive Template Editing Directive	These directives provide inline editing for reactive and template-driven forms.
In-Cell Editing	In-Cell Editing Directive	Provides in-cell editing that uses reactive forms.
External Editing	External Editing Directive	Provides external dialog editing that uses reactive forms.

The editing directives handle the necessary Grid events internally which helps you cut down the repetitive boilerplate code. They encapsulate the low-level operations to help you implement a fully functional editable Grid with less markup.

By default, the built-in editing directives automatically modify the data that is passed to the Grid. This is applicable when binding a plain array to the Grid, regardless of the data binding mechanism being used (the kendoGridBinding directive or the data input property).

The built-in editing directives of the Grid allow you to:

• Easily display a confirmation dialog before removing a record.
• Customize the editing behavior by specifying a custom editing service.
• Handle editing validation automatically with Angular Forms integration.
• Use built-in action buttons for common editing operations.
• Manage row states (edit mode, add mode, normal mode) without manual event handling.
• Automatically update the data source when changes are saved or cancelled.

Manual Setup

To take full control over the applied CRUD operations, use the manual editing approach. This approach allows you to handle all the Grid's editing events yourself and perform the required operations as necessary.

With manual setup, you will need to handle different events depending on which editing mode you choose. For detailed instructions on manual editing for each mode, refer to the following articles:

• Inline Editing
• In-Cell Editing
• External Editing

Editing Action Buttons

The Grid provides built-in command directives that encapsulate the logic behind each editing operation. Each directive can be applied to a <button> element rendered inside a CommandColumnComponent and it will automatically trigger the appropriate editing event when clicked.

html

<kendo-grid-command-column title="Commands">
    <ng-template kendoGridCellTemplate>
        <button kendoGridEditCommand>Edit</button>
        ...
    </ng-template>
</kendo-grid-command-column>

These command directives can be used with both the Quick Setup and Manual Setup approaches. In quick setup scenarios, they work automatically with the built-in editing directives to handle operations seamlessly. With the manual approach, they trigger the corresponding Grid events that you can handle to implement your own custom editing logic.

The following table lists the available built-in command directives.

Command Directive	Description
AddCommandDirective	Adds a new item to the Grid. Triggers the Grid's add event. Can be used within a Toolbar template or a CommandColumnComponent.
EditCommandDirective	Puts an item in edit mode. Triggers the Grid's edit event.
RemoveCommandDirective	Deletes a record from the Grid. Triggers the Grid's remove event.
SaveCommandDirective	Saves the current changes. Triggers the Grid's save event.
CancelCommandDirective	Discards the current changes. Triggers the Grid's cancel event.

Action Buttons in the Toolbar

In addition to the command directives used within the Grid columns, you can also use dedicated toolbar tools to perform editing operations. The toolbar editing directives provide convenient buttons for adding, editing, saving, and removing records directly from the Grid's toolbar.

These tools trigger the same editing events as the command directives and offer a convenient way to manage records, especially when you want editing actions separated from the data table. For more details, see Editing Using Toolbar Tools.

Built-in Cell Editor Types

By default, the Grid provides a built-in editing UI for all common data types. Set the type of the editing UI through the editor property of each Grid column:

html

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

The table below summarizes the available editor types and the corresponding components that appear in the cells for each type:

Editor Type	Property Value	Component Rendered
Text	text (default)	TextBox
Numeric	numeric	NumericTextBox
Date	date	DatePicker
Boolean	boolean	CheckBox

The following example demonstrates all of the available editor types in action.

Change Theme

Theme

Loading ...

See Also

• Angular Data Grid Inline Editing
• Angular Data Grid In-Cell Editing
• Angular Data Grid External Editing
• Editing Using Toolbar Tools
• In-Cell OData-Service Editing
• API Reference of the GridComponent
• API Index of the Grid
• Angular FormsModule