Reactive Forms

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

Basic Concepts

To implement the editing mode of the Kendo UI ListView for Angular with Reactive Forms:

1. Define the EditTemplateDirective for the ListView items. 1. Call the addItem or the editItem method respectively.
2. Pass the FormGroup property as one of its parameters. The FormGroup configuration is part of the Angular Forms package.

Change Theme

Theme

Loading ...

Setup

The editing of the ListView in template-driven forms is based on the item index. As a result, the Template Forms immediately update the value.

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

1. Pass an editing template.

   ts

   <kendo-listview>
       <ng-template kendoListViewEditTemplate let-formGroup="formGroup" let-index="index">
           <input type="text" formControlName="ProductName"/>
       </ng-template>
   </kendo-listview>

2. Configure the commands. You need to define the command buttons inside the editing template.

   ts

   <kendo-listview>
       <ng-template kendoListViewEditTemplate let-formGroup="formGroup" let-index="index" let-isNew="isNew">
           <input type="text" formControlName="ProductName"/>
           <button kendoListViewSaveCommand>{{ isNew ? 'Add' : 'Update' }}</button>
           <button kendoListViewCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
       </ng-template>
   </kendo-listview>

3. Attach handlers for CRUD data operations.

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

   ts

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

Toggling the Edit State

Inside the corresponding event handlers, you can toggle the edit state of the ListView by using the following events:

• edit
• add
• cancel
• save
• remove

Editing Records

The edit event fires when the kendoListViewEditCommand is clicked. Inside the event handler, you can toggle the item's editing mode by calling the editItem method.

ts

public editHandler({sender, itemIndex, dataItem}) {
    // Close the previously edited item.
    this.closeEditor(sender);

    // Track the most recently edited item.
    // It will be used in `closeEditor` for closing the previously edited item.
    this.editedItemIndex = itemIndex;

    // Clone the current - `[(ngModel)]` will modify the original item.
    // Use this copy to revert changes.
    this.editedProduct = Object.assign({}, dataItem);

    // Edit the item.
    sender.editItem(itemIndex);
}

Adding Records

The add event fires when the kendoListViewAddCommand is clicked. Inside the event handler, you can show the new item editor by calling the addItem method.

ts

public addHandler({sender}) {
    // Close the previously edited item.
    this.closeEditor(sender);

    // Define all editable fields validators and default values.
    this.formGroup = new FormGroup({
        'ProductID': new FormControl(),
        'ProductName': new FormControl("New product", Validators.required)
    });

    // Show the new item editor, with the `FormGroup` build above.
    sender.addItem(this.formGroup);
}

Cancelling Editing

The cancel event fires when the kendoListViewCancelCommand is clicked. Inside the event handler, you can switch the item back to the view mode by calling the closeItem method.

ts

public cancelHandler({sender, itemIndex}) {
    // Call the helper method.
    this.closeEditor(sender, itemIndex);
}

private closeEditor(sender, itemIndex = this.editedItemIndex) {
    // Close the editor.
    sender.closeItem(itemIndex);

    // Revert the data item to the original state.
    this.editService.resetItem(this.editedProduct);

    // Reset the helpers.
    this.editedItemIndex = undefined;
    this.editedProduct = undefined;
}

Saving Records

The save event fires when the kendoListViewSaveCommand is clicked.

ts

public saveHandler({sender, itemIndex, formGroup, isNew}) {
    const product: Product = formGroup.value;

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

    // Close the editor, that is, revert the item back into the view mode.
    sender.closeItem(itemIndex);
}

Removing Records

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

ts

public removeHandler({dataItem}) {
    // Remove the current dataItem from the current data source.
    // In this example, the dataItem is `editService`.
    this.editService.remove(dataItem);
}

Suggested Links

• Overview of Editing
• Editing in Template Forms
• API Index of the ListView
• API Reference of the ListViewComponent