Template-Driven Forms

The ListView provides options for editing its data by using the Template-Driven Angular Forms.

Basic Concepts

To implement the editing mode of the Kendo UI ListView for Angular in Template-Driven Forms, define the EditTemplateDirective for the ListView items.

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 Template-Driven Forms:

1. Wrap the component in a form.

   ts

   <form novalidate #myForm="ngForm">
       <kendo-listview>
           <!-- the rest of ListView configuration goes here -->
       </kendo-listview>
   </form>

2. Pass an editing template.

   ts

       <kendo-listview>
       <ng-template kendoListViewEditTemplate let-dataItem="dataItem">
           <input [(ngModel)]="dataItem.ProductName" name="ProductName" class="k-textbox" required/>
       </ng-template>
   </kendo-listview>

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

   ts

   <kendo-listview>
       <ng-template kendoListViewEditTemplate let-dataItem="dataItem" let-isNew="isNew">
           <input [(ngModel)]="dataItem.ProductName" name="ProductName" class="k-textbox" required/>
           <button kendoListViewSaveCommand>{{ isNew ? 'Add' : 'Update' }}</button>
           <button kendoListViewCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
       </ng-template>
   </kendo-listview>

4. Attach handlers for CRUD data operations.

   When the user clicks a command button, the ListView will emit 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 editing mode of the item 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);

    // Open a new item editor.
    sender.addItem(new Product());
}

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(listview, itemIndex = this.editedItemIndex) {
    // Close the editor.
    listview.closeItem(itemIndex);

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

    // 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, dataItem, isNew}) {
    // Update the data source.
    this.editService.save(dataItem, 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 Reactive Forms
• API Index of the ListView
• API Reference of the ListViewComponent