In this tutorial we’ll go through an example of how you can batch edit all rows of a Kendo UI Grid at the same time, effectively binding the whole grid to an Angular Reactive Forms FormGroup and FormArray to enable the validation and saving of all form data together instead of line by line, so it behaves a little more like a “normal” Reactive Form. This example is built with Angular 8.2.6.
The below example contains a Kendo UI Grid with a list of products that displays in “view” mode by default. When the edit button is clicked, the grid is switched to “edit” mode, which makes all product fields editable and allows products to be added or removed from the grid. After editing, you can either save or cancel the changes.
Styling of the example is done with Bootstrap 4.3, the Kendo UI for Angular Default Theme, and a couple of custom CSS styles in the main index.html file. For more info on styling Kendo UI components for Angular, see this styling overview.
Here it is in action:
(Edit on StackBlitz at https://stackblitz.com/edit/batch-editing-with-kendo-ui-grid-for-angular)
Angular App Component Template with Kendo UI Grid
The app component template contains the HTML and Angular template syntax for displaying the example Kendo UI Grid; it contains a single <kendo-grid> component wrapped in a bootstrap card for layout.
The grid defines the template reference variable #grid so it can be accessed from the app component below with the ViewChild('grid') decorator, and the data property of the grid is bound to an array of products defined in the app component using the Angular property binding [data]="products".
A different toolbar is displayed when the grid is in “view” or “edit” mode with the help of the isEditMode property, the “view” mode toolbar only contains an Edit button, and the “edit” mode toolbar contains buttons for Add, Save and Cancel. Each toolbar is defined using an <ng-template> tag with the kendoGridToolbarTemplate directive, and each button is bound to an event handler method in the app component using an Angular event binding attribute e.g. (click)="onAdd()".
There are four columns defined with the <kendo-grid-column> tag— one for each product field and one with a Remove button that is only displayed when the grid is in “edit” mode.
<divclass="card m-3"><h5class="card-header">Batch Editing with Kendo UI Grid for Angular</h5><divclass="card-body"><kendo-grid#grid[data]="products"><ng-template*ngIf="!isEditMode"kendoGridToolbarTemplate><button(click)="onEdit()"class="k-button k-primary">Edit</button></ng-template><ng-template*ngIf="isEditMode"kendoGridToolbarTemplate><button(click)="onAdd()"class="k-button">Add</button><button(click)="onSave()"class="k-button">Save</button><button(click)="onCancel()"class="k-button">Cancel</button></ng-template><kendo-grid-columnfield="Name"></kendo-grid-column><kendo-grid-columnfield="Price"editor="numeric"format="{0:c}"></kendo-grid-column><kendo-grid-columnfield="InStock"title="In Stock"editor="boolean"></kendo-grid-column><kendo-grid-column*ngIf="isEditMode"><ng-templatekendoGridCellTemplatelet-rowIndex="rowIndex"><button(click)="onRemove(rowIndex)"class="k-button">Remove</button></ng-template></kendo-grid-column></kendo-grid></div></div>Angular App Component with Kendo UI Grid
The app component contains all of the properties and methods for interacting with our grid.
Component Properties
products contains the array of product objects bound to the grid in the template with the [data]="products" property binding attribute.
originalProducts is used to hold a copy of the original products array just before switching to “edit” mode, so the changes to the products array can be reset if the Cancel button is clicked.
productsForm is an Angular Reactive FormGroup that holds the FormArray and all FormControl components for the whole form, so all fields can be validated and saved together.
isEditMode is a boolean flag used to toggle the app component template between “view” and “edit” modes.
@ViewChild('grid') grid holds a reference to the Kendo UI Grid component defined in the app component template. The ViewChild decorator enables access to the grid component using the 'grid' parameter because it matches the #grid template reference variable defined on the kendo-grid tag in the template.
Component Methods
ngOnInit() initializes the the products array with a sample set of products, and sets the productsForm to a new FormGroup containing a FormArray for holding all of the product form groups and controls. The form group is created with the FormBuilder instance that is injected in the component constructor.
onEdit() handles when the Edit button is clicked and converts the grid into an editable form. It makes a copy of the products array in case the edit action is cancelled, then calls a couple of helper functions to initialize the form controls and switch all grid rows into “edit” mode, and lastly sets isEditMode to true to display the correct toolbars in the template.
onAdd() handles when the Add button is clicked to add a new product row to the bottom of the grid. It pushes a new object to the products array and a new form group to the FormArray of the productsForm, then sets the new row of the grid to “edit” mode.
onRemove(index) handles when the Remove button is clicked to remove the selected row from the grid. First it closes all rows of the grid (sets them to “view” mode), then removes the product object from the products array and the product form group from the FormArray before setting all rows back to “edit” mode. I found it necessary to close all rows before removing to avoid unexpected side effects from the grid.
onSave() handles when the Save button is clicked to validate and save the form data. If the form is invalid, an alert is displayed and the data is not saved. If the form is valid, the data is “saved” by copying the updated form data into the products array and setting the grid back to “view” mode. In a real world application, this is where you would typically put an API or service call to persist the data.
onCancel() handles when the Cancel button is clicked to discard any changes and switch the grid back to “view” mode. It closes all the grid rows to set them back to “view” mode, then reverts any changes by copying the original product data back into the products array, and sets isEditMode to false to display the correct toolbars in the template.
import{ Component, OnInit, ViewChild }from'@angular/core';import{ FormBuilder, FormGroup, FormArray, Validators }from'@angular/forms';import{ GridComponent }from'@progress/kendo-angular-grid';
@Component({ selector:'app', templateUrl:'app.component.html'})exportclassAppComponentimplementsOnInit{
products =[];
originalProducts =[];
productsForm: FormGroup;
isEditMode =false;
@ViewChild('grid') grid: GridComponent;constructor(private formBuilder: FormBuilder){}ngOnInit(){this.products =[{ Name:'Vegemite', Price:2.50, InStock:true},{ Name:'Tim Tams', Price:3.99, InStock:true},{ Name:'Meat Pies', Price:6.00, InStock:false},{ Name:'Pavlova', Price:4.39, InStock:true}];// initialise products form with empty form arraythis.productsForm =this.formBuilder.group({
formArray:newFormArray([])});}// convenience getters for easy access to form fieldsgetf(){returnthis.productsForm.controls;}getfa(){returnthis.f.formArray as FormArray;}onEdit(){// store copy of original products in case cancelledthis.originalProducts =[...this.products];// reset / initialise form fieldsthis.resetForm();// set all rows to edit mode to display form fieldsthis.editAllRows();this.isEditMode =true;}onAdd(){// add item to products arraythis.products.push({});// add new form group to form arrayconst formGroup =this.createFormGroup();this.fa.push(formGroup);// set new row to edit mode in kendo gridthis.grid.editRow(this.products.length -1, formGroup);}onRemove(index){// rows must all be closed while removing productsthis.closeAllRows();// remove product and product form groupthis.products.splice(index,1);this.fa.removeAt(index);// reset all rows back to edit modethis.editAllRows();}onSave(){// mark all fields as touched to highlight any invalid fieldsthis.productsForm.markAllAsTouched();// stop here if form is invalidif(this.productsForm.invalid){alert('FORM INVALID :(');return;}// copy form data to products array on successthis.products =this.fa.value;this.closeAllRows();this.isEditMode =false;}onCancel(){this.closeAllRows();// reset products back to original data (before edit was clicked)this.products =this.originalProducts;this.isEditMode =false;}// helper methodsprivateeditAllRows(){// set all rows to edit mode to display form fieldsthis.products.forEach((x, i)=>{this.grid.editRow(i,this.fa.controls[i]);});}privatecloseAllRows(){// close all rows to display readonly view of datathis.products.forEach((x, i)=>{this.grid.closeRow(i);});}privateresetForm(){// clear form array and create a new form group for each productthis.fa.clear();this.products.forEach((x, i)=>{this.fa.push(this.createFormGroup(x));});}privatecreateFormGroup(product: any ={}){// create a new form group containing controls and validators for a productreturnthis.formBuilder.group({
Name:[product.Name, Validators.required],
Price:[product.Price, Validators.required],
InStock:[product.InStock ||false, Validators.required]})}}Angular App Module
This is a fairly simple Angular app module with just what’s required for the example. To use the Kendo UI Grid for Angular, it imports the { GridModule } from '@progress/kendo-angular-grid' and includes it in the imports array of the @NgModule decorator; and to use Angular reactive forms, it imports the { ReactiveFormsModule } from '@angular/forms' and includes it in the imports array of the @NgModule decorator.
import{ NgModule }from'@angular/core';import{ BrowserModule }from'@angular/platform-browser';import{ ReactiveFormsModule }from'@angular/forms';import{ BrowserAnimationsModule }from'@angular/platform-browser/animations';import{ GridModule }from'@progress/kendo-angular-grid';import{ AppComponent }from'./app.component';
@NgModule({
imports:[
BrowserModule,
ReactiveFormsModule,
BrowserAnimationsModule,
GridModule
],
declarations:[
AppComponent
],
bootstrap:[AppComponent]})exportclassAppModule{}Conclusion
So that’s everything you need to do to effectively bind a Kendo UI Grid component to an Angular Reactive Forms FormArray in order to batch edit, validate and save all form fields together as a whole.
For further information about the Kendo UI Grid for Angular check out the official documentation at https://www.telerik.com/kendo-angular-ui/components/grid/.
Thanks for reading!
.png?sfvrsn=671c6f06_0 "Bitly Home Page (002)")
.png?sfvrsn=ccc92ae2_0 "Bitly Scroll 1 (002)")
.png?sfvrsn=7a332b_0 "Bitly Scroll 2 (002)")
.png?sfvrsn=5d3a8215_0 "Rebrandly Primary Call-to-action (002)")
.png?sfvrsn=e0d3a313_0 "Monday Home Page CTA (002)")
.png?sfvrsn=eb32ef04_0 "Monday Clickable Link (002)")
.png?sfvrsn=545178d9_0 "MoEngage Learn More (002)")
.png?sfvrsn=c18dfe25_0 "Toggl Home Page (002)")
.png?sfvrsn=658de244_0 "Toggl Features (002)")
.png?sfvrsn=801e7f8a_0 "Yummly Features (002)")
Telerik UI for Blazor Grid Virtual Scroll
Telerik UI for Blazor Grid Column Reordering
.gif?sfvrsn=a3ab337_0 "WebCam Video Recording")
