New to Kendo UI for Angular? Start a free 30-day trial
EditTemplateDirective
Defines the edit template of the ListView (see example).
Helps you customize the content of the edited items. To define the template, nest an <ng-template>
tag with the kendoListViewEditTemplate
directive inside a <kendo-listview>
tag.
The template context contains the following fields:
formGroup
—The currentFormGroup
. When you use the ListView inside Template-Driven Forms, it will beundefined
.itemIndex
—The current item index. When inside a new item,itemIndex
is-1
.dataItem
—The current data item.isNew
—The state of the current item.
typescript
@Component({
template: `
<kendo-listview [data]="items">
<ng-template kendoListViewEditTemplate let-dataItem let-formGroup="formGroup">
<div class="edit-form">
<input [(ngModel)]="dataItem.name" [formControl]="formGroup.get('name')" />
<button kendoListViewSaveCommand>Save</button>
<button kendoListViewCancelCommand>Cancel</button>
</div>
</ng-template>
</kendo-listview>
`
})
export class AppComponent { }
Selector
[kendoListViewEditTemplate]