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.
To create an editable Grid in Angular, you can use one of the following approaches:
- 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 Angular Grid editing 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.
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.
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.
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.