Reactive Forms

The Grid provides options for editing its data by using the Reactive Angular Forms.

Basic Concepts

By default, the built-in column editors in the Kendo UI Grid for Angular utilize the Model-driven Angular Forms directives. To manipulate a Grid row, you need to call the addRow or the editRow method respectively and then pass the FormGroup property as one of its parameters. The FormGroup configuration is part of the Angular Forms package.

Generally, to configure the editing mode of the Grid, you have to:

1. Click the command button so that the corresponding event gets triggered.
2. In the corresponding event handler, define the way you want the Grid to handle the field. For example, build the FormGroup, call the editRow or the closeRow method, and so on.

After you set the event handler, the row acquires the respective behavior that is configured in it. For a detailed description on the configuration of the editing mode, refer to the following section on the setup.

The following example demonstrates how to set the inline editing mode of the Kendo UI Grid for Angular.

Setup

To enable the editing mode of the Grid in the Angular Reactive Forms:

1. Configure the type of the columns editor.

   The default editor that is created by the Grid is the text editor. To change this behavior, set the editor property.

   Copy Code<!-- setting numeric editor -->
   <kendo-grid-column field="UnitPrice" editor="numeric" title="Price">
   </kendo-grid-column>
   
   <!-- setting boolean editor -->
   <kendo-grid-column field="Discontinued" editor="boolean" title="Discontinued">
   </kendo-grid-column>

2. Configure the command column by defining the command buttons inside the command column template.

   Copy Code<kendo-grid-command-column title="command" width="220">
       <ng-template kendoGridCellTemplate let-isNew="isNew">
           <!-- edit command directive, will be visible when not in edit mode -->
           <button kendoGridEditCommand [primary]="true">Edit</button>
           <!-- remove command directive, will be visible when not in edit mode -->
           <button kendoGridRemoveCommand>Remove</button>
           <!-- save command directive, will be visible when in edit mode -->
           <button kendoGridSaveCommand>{{ isNew ? 'Add' : 'Update' }}</button>
           <!-- cancel command directive, will be visible when in edit mode -->
           <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
       </ng-template>
   </kendo-grid-command-column>

3. Attach handlers for the CRUD data operations.

   When a command button is clicked, the Grid emits the corresponding event. To instruct the component what action to perform, handle the event that is emitted.

   Copy Code<kendo-grid
     [data]="view | async"
     (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
     (save)="saveHandler($event)" (remove)="removeHandler($event)"
     (add)="addHandler($event)"
   >
   <!-- the rest of confguration -->
   </kendo-grid>

Toggling the Edit State

The Grid enables you to toggle its edit state by using the following events:

• edit
• add
• cancel
• save
• remove

Editing Records

The edit event fires when the kendoGridEditCommand is clicked. Inside the event handler, you can set the row to the editing mode by calling the editRow method and by providing a FormGroup configuration that describes the view model for that editor.

Copy Codeprotected editHandler({sender, rowIndex, dataItem}) {
    // define all editable fields validators and default values
    const group = new FormGroup({
        'ProductID': new FormControl(dataItem.ProductID),
        'ProductName': new FormControl(dataItem.ProductName, Validators.required),
        'UnitPrice': new FormControl(dataItem.UnitPrice),
        'UnitsInStock': new FormControl(dataItem.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])),
        'Discontinued': new FormControl(dataItem.Discontinued)
    });

    // put the row in edit mode, with the `FormGroup` build above
    sender.editRow(rowIndex, group);
}

Adding Records

The add event fires when the kendoGridAddCommand is clicked. Inside the event handler, you can show the new row editor by calling the addRow method and by providing a FormGroup configuration that describes the view model for that editor (similar to the editRow method).

Copy Codeprotected addHandler({sender}) {
    // define all editable fields validators and default values
    const group = new FormGroup({
        'ProductID': new FormControl(),
        'ProductName': new FormControl("", Validators.required),
        'UnitPrice': new FormControl(0),
        'UnitsInStock': new FormControl("", Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])),
        'Discontinued': new FormControl(false)
    });

    // show the new row editor, with the `FormGroup` build above
    sender.addRow(group);
}

Cancelling Editing

The cancel event fires when the kendoGridCancelCommand is clicked. Inside the event handler, you can switch the row back to the view mode by calling the closeRow method.

Copy Codeprotected cancelHandler({sender, rowIndex}) {
    // close the editor for the given row
    sender.closeRow(rowIndex)
}

Saving Records

The save event fires when the kendoGridSaveCommand is clicked.

Inside the event handler, you can perform the following actions:

• Update the value of the form in the data source.
• Call the closeRow method to switch the current row back to the view mode.

Copy Codeprotected saveHandler({sender, rowIndex, formGroup, isNew}) {
    // collect the current state of the form
    // `formGroup` arguments is the same as was provided when calling `editRow`
    const product: Product = formGroup.value;

    // update the data source
    this.editService.save(product, isNew);

    // close the editor, that is, revert the row back into view mode
    sender.closeRow(rowIndex);
}

Removing Records

The remove event fires when the kendoGridRemoveCommand is clicked. Inside the event handler, you can issue a request to remove the current data item from the data source.

Copy Codeprotected removeHandler({dataItem}) {
    // remove the current dataItem from the current data source,
    // `editService` in this example
    this.editService.remove(dataItem);
}

Suggested Links

• ColumnComponent
• CommandColumnComponent
• API Reference of the GridComponent
• Overview of Editing
• Customization of Editing Options in Reactive Forms
• Built-In Editing Directives
• API Index of the Grid