EditTemplateDirective

Updated on Jun 13, 2025

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 current FormGroup. When you use the ListView inside Template-Driven Forms, it will be undefined.
• 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]