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:
- Define the
EditTemplateDirective
for the ListView items. 1. Call theaddItem
or theeditItem
method respectively. - Pass the
FormGroup
property as one of its parameters. TheFormGroup
configuration is part of the Angular Forms package.
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:
-
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>
-
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>
-
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:
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.
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.
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.
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.
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.
public removeHandler({dataItem}) {
// Remove the current dataItem from the current data source.
// In this example, the dataItem is `editService`.
this.editService.remove(dataItem);
}