Angular Grid Editing Editing Using Toolbar Tools

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

The Angular Grid provides built-in directives that allow you to implement editing capabilities for the component through dedicated toolbar tools. The toolbar editing directives trigger the Grid events, asociated with the corresponding editing operations, enabling further customizations of the functionality.

For more details on all of the available built-in directives of the Grid's toolbar, refer to the Built-In Grid Toolbar Tools article.

The following example demonstrates a Grid with inline editing configured, in which the CRUD operations are performed using the built-in toolbar editing directives.

Change Theme

Theme

Loading ...

To configure the Grid's editing functionality using the built-in toolbar directives:

Set up the Grid based on the desired forms approach and editing mode that is applicable to your scenario:
- Using the Built-In Directives
- Manual Editing
This article will show how to use the built-in toolbar directives in an inline-editing Grid, using the Reactive Editing Directive approach.

Enable the Grid's selection functionality and define the <kendo-toolbar> component inside the <kendo-grid> tag:

html

<kendo-grid ... [selectable]="{ mode: 'single' }">
   <kendo-toolbar>
   </kendo-toolbar>
</kendo-grid>

Apply the required toolbar editing directive (kendoGridEditTool, kendoGridRemoveTool, etc.) to a <kendo-toolbar-button> component, nested within the <kendo-toolbar> tag:

The Grid's toolbar editing directives encapsulate the logic behind each editing operation and trigger the corresponding editing events (add, edit, remove, save, cancel).

html

<kendo-grid ... [selectable]="{ mode: 'single' }">
    <kendo-toolbar>
        <kendo-toolbar-button kendoGridAddTool></kendo-toolbar-button>
        <kendo-toolbar-button kendoGridEditTool></kendo-toolbar-button>
        <kendo-toolbar-button kendoGridSaveTool></kendo-toolbar-button>
        ...
    </kendo-toolbar>
</kendo-grid>

(Optional) Customize the rendering of the toolbar tools based on how they should appear by default and in cases when they overflow the Grid's toolbar.

For more details on how to customize the appearance of the Grid's toolbar tools, refer to the Customizing the Toolbar Tools Rendering article.

Angular Data Grid Editing Using Toolbar Tools

Suggested Links