Template-Driven Forms
The Grid provides options for editing its data by using the Template-Driven Angular Forms.
Basic Concepts
To implement the editing mode of the Kendo UI Grid for Angular in Template-Driven Forms, define the EditTemplateDirective
for every Grid column.
Setup
The editing of the Grid in template-driven forms is based on the
row
index. As a result, the Template Forms immediately update the value.
To enable the editing mode of the Grid in Template-Driven Forms:
Wrap the component.
<form novalidate #myForm="ngForm"> <kendo-grid> <!-- the rest of Grid configuration goes here --> </kendo-grid> </form>
Configure the columns editor template. Verify that each column of the Grid has a defined editor template.
<kendo-grid-column field="ProductName" title="Product Name"> <ng-template kendoGridEditTemplate let-dataItem="dataItem"> <input [(ngModel)]="dataItem.ProductName" name="ProductName" class="k-textbox" required/> </ng-template> </kendo-grid-column>
Configure the command column. You need to define the command buttons inside the
CommandColumn
template.<kendo-grid-command-column title="command" width="220"> <ng-template kendoGridCellTemplate let-isNew="isNew"> <!-- edit the command directive, will be visible when not in edit mode --> <button kendoGridEditCommand [primary]="true">Edit</button> <!-- remove the command directive, will be visible when not in edit mode --> <button kendoGridRemoveCommand>Remove</button> <!-- save the command directive, will be visible when in edit mode --> <button kendoGridSaveCommand>{{ isNew ? 'Add' : 'Update' }}</button> <!-- cancel the command directive, will be visible when in edit mode --> <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button> </ng-template> </kendo-grid-command-column>
Attach handlers for CRUD data operations.
When a command button is clicked, the Grid emits the corresponding event. To instruct the component what action to perform, handle the event that is emitted.
<kendo-grid [data]="view | async" (edit)="editHandler($event)" (cancel)="cancelHandler($event)" (save)="saveHandler($event)" (remove)="removeHandler($event)" (add)="addHandler($event)" > <!-- the rest of configuration --> </kendo-grid>
Toggling the Edit State
Inside the corresponding event handlers, you can toggle the edit state of the Grid by using the:
Editing Records
The edit
event fires when the kendoGridEditCommand
is clicked. Inside the event handler, you can set the row to the editing mode by calling the editRow
method.
public editHandler({sender, rowIndex, dataItem}) {
// close the previously edited item
this.closeEditor(sender);
// track the most recently edited row
// it will be used in `closeEditor` for closing the previously edited row
this.editedRowIndex = rowIndex;
// clone the current - `[(ngModel)]` will modify the original item
// use this copy to revert changes
this.editedProduct = Object.assign({}, dataItem);
// edit the row
sender.editRow(rowIndex);
}
Adding Records
The add
event fires when the kendoGridAddCommand
is clicked. Inside the event handler, you can show the new row editor by calling the addRow
method.
public addHandler({sender}) {
// close the previously edited item
this.closeEditor(sender);
// open a new item editor
sender.addRow(new Product());
}
Cancelling Editing
The cancel
event fires when the kendoGridCancelCommand
is clicked. Inside the event handler, you can switch the row back to the view mode by calling the closeRow
method.
public cancelHandler({sender, rowIndex}) {
// call the helper method
this.closeEditor(sender, rowIndex);
}
private closeEditor(grid, rowIndex = this.editedRowIndex) {
// close the editor
grid.closeRow(rowIndex);
// revert the data item to original state
this.editService.resetItem(this.editedProduct, rowIndex);
// reset the helpers
this.editedRowIndex = undefined;
this.editedProduct = undefined;
}
Saving Records
The save
event fires when the kendoGridSaveCommand
is clicked.
public saveHandler({sender, rowIndex, dataItem, isNew}) {
// update the data source
this.editService.save(dataItem, isNew);
// close the editor, that is, revert the row back into view mode
sender.closeRow(rowIndex);
}
Removing Records
The remove
event fires when the kendoGridRemoveCommand
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);
}