Template editing in Angular Grid component
17 Sep 202524 minutes to read
The Syncfusion Angular Grid component supports template editing, enabling advanced customization of the appearance and behavior of cell editors. Template editing leverages Angular templates, providing flexible control over the layout and content of grid cells during editing operations.
Inline or dialog template editing
The Syncfusion Grid provides support for inline and dialog template editing, allowing you to customize the editing using either Reactive or Template-driven Forms. These forms can be utilized to add and update grid records.
To enable this feature, you need to set the editSettings.mode property of the Grid to either Normal or Dialog and define the grid editors using the editSettingsTemplate template variable of ngTemplate.
Using Reactive Forms
Reactive forms take a programmatic, model-driven approach to handling forms with TypeScript, offering dynamic control over form structure, state management, validation, and error handling. This is ideal for scenarios requiring custom logic or the inclusion of editors for fields that are not part of the grid column model. Dialog templates allow for additional editors beyond the default edit dialog.
In this example, a FormGroup with relevant FormControls is created during the actionBegin event. When saving, the form is validated, and, if successful, the grid updates using the data from the FormGroup.
import { CommonModule } from '@angular/common';
import { GridModule, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids'
import { ReactiveFormsModule, FormsModule } from '@angular/forms'
import { NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import {TextAreaModule} from '@syncfusion/ej2-angular-inputs';
import { Component, OnInit } from '@angular/core';
import { orderDetails } from './datasource';
import { DialogEditEventArgs, SaveEventArgs } from '@syncfusion/ej2-angular-grids';
import { DataUtil } from '@syncfusion/ej2-data';
import { FormGroup, AbstractControl, FormControl, Validators } from '@angular/forms';
@Component({
imports: [
GridModule,
NumericTextBoxAllModule, DatePickerAllModule,CommonModule,
DropDownListAllModule, ReactiveFormsModule, FormsModule,TextAreaModule
],
providers: [EditService, ToolbarService],
standalone: true,
selector: 'app-root',
templateUrl: `reactive-form.html`
})
export class AppComponent implements OnInit {
public data?: Object[];
public editSettings?: Object;
public toolbar?: string[];
public orderForm?: FormGroup|any;
public pageSettings?: Object;
public shipCityDistinctData?: Object[];
public shipCountryDistinctData?: Object[];
public submitClicked: boolean = false;
public ngOnInit(): void {
this.data = orderDetails;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit', 'Delete'];
this.pageSettings = { pageCount: 5};
this.shipCityDistinctData = DataUtil.distinct(orderDetails, 'ShipCity', true);
this.shipCountryDistinctData = DataUtil.distinct(orderDetails, 'ShipCountry', true );
}
createFormGroup(data: IOrderModel): FormGroup {
return new FormGroup({
OrderID: new FormControl(data.OrderID, Validators.required),
OrderDate: new FormControl(data.OrderDate, (this.dateValidator() as Object)),
CustomerName: new FormControl(data.CustomerName, Validators.required),
Freight: new FormControl(data.Freight,Validators.required),
ShipAddress: new FormControl(data.ShipAddress,Validators.required),
ShipCity: new FormControl(data.ShipCity,Validators.required),
ShipCountry: new FormControl(data.ShipCountry,Validators.required)
});
}
dateValidator() {
return (control: FormControl): null | Object => {
return control.value && control.value.getFullYear &&
(1900 <= control.value.getFullYear() && control.value.getFullYear() <= 2099) ? null : { OrderDate: { value : control.value}};
}
}
actionBegin(args: SaveEventArgs): void {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
this.submitClicked = false;
this.orderForm = this.createFormGroup((args.rowData as Object));
}
if (args.requestType === 'save') {
this.submitClicked = true;
if (this.orderForm.valid) {
args.data = this.orderForm.value;
} else {
args.cancel = true;
}
}
}
actionComplete(args: DialogEditEventArgs): void {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Set initial focus
if (args.requestType === 'beginEdit') {
((args.form as HTMLFormElement).elements.namedItem('CustomerName') as HTMLInputElement).focus();
} else if (args.requestType === 'add') {
((args.form as HTMLFormElement).elements.namedItem('OrderID') as HTMLInputElement).focus();
}
}
}
get OrderID(): AbstractControl { return this.orderForm.get('OrderID'); }
get CustomerName(): AbstractControl { return this.orderForm.get('CustomerName'); }
get OrderDate(): AbstractControl { return this.orderForm.get('OrderDate'); }
get Freight(): AbstractControl { return this.orderForm.get('Freight'); }
get ShipCountry(): AbstractControl { return this.orderForm.get('ShipCountry'); }
get ShipCity(): AbstractControl { return this.orderForm.get('ShipCity'); }
}
export interface IOrderModel {
OrderID?: number;
CustomerName?: string;
ShipCity?: string;
OrderDate?: Date;
Freight?: number;
ShipCountry?: string;
ShipAddress?: string;
}<div class="control-section">
<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings'
[toolbar]='toolbar' (actionBegin)='actionBegin($event)' (actionComplete)='actionComplete($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'
[isPrimaryKey]='true'></e-column>
<e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
</e-columns>
<ng-template #editSettingsTemplate let-data>
<div [formGroup]="orderForm">
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper"
[ngClass]="{'e-error': OrderID.invalid && (OrderID.dirty || OrderID.touched)}">
<input formControlName="OrderID" data-msg-containerid='OrderIDError' id="OrderID"
name="OrderID" type="text" [attr.disabled]="!data.isAdd ? '' : null">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="OrderID"> Order ID</label>
</div>
<div id="OrderIDError"
[style.visibility]='((OrderID.invalid && (OrderID.dirty || OrderID.touched)) || (OrderID.invalid && submitClicked))? "visible": "hidden"'>
<label class="e-error" for="OrderID" id="OrderID-info" style="display: block;">*Order ID is
required</label>
</div>
</div>
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper"
[ngClass]="{'e-error': CustomerName.invalid && (CustomerName.dirty || CustomerName.touched)}">
<input formControlName="CustomerName" data-msg-containerid='CustomerNameError'
id="CustomerName" name="CustomerName" type="text">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="CustomerName">Customer Name</label>
</div>
<div id="CustomerNameError"
[style.visibility]='((CustomerName.invalid && (CustomerName.dirty || CustomerName.touched)) || (CustomerName.invalid && submitClicked))? "visible": "hidden"'>
<label class="e-error" for="CustomerName" id="CustomerName-info"
style="display: block;">*Customer Name is required</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<ejs-numerictextbox formControlName="Freight" id="Freight" placeholder="Freight"
floatLabelType='Always'></ejs-numerictextbox>
<div id="FreightError"
[style.visibility]='((Freight.invalid && (Freight.dirty || Freight.touched)) || (Freight.invalid && submitClicked)) ? "visible": "hidden"'>
<label class="e-error" for="Freight" id="Freight-info" style="display: block;">*Order Date
is required</label>
</div>
</div>
<div class="form-group col-md-6">
<ejs-datepicker id="OrderDate" formControlName="OrderDate" placeholder="Order Date"
floatLabelType='Always'></ejs-datepicker>
<div id="OrderDateError"
[style.visibility]='((OrderDate.invalid && (OrderDate.dirty || OrderDate.touched)) || (OrderDate.invalid && submitClicked)) ? "visible": "hidden"'>
<label class="e-error" for="OrderDate" id="OrderDate-info" style="display: block;">*Order
Date is required</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<ejs-dropdownlist id="ShipCountry" formControlName="ShipCountry"
[dataSource]='shipCountryDistinctData'
[fields]="{text: 'ShipCountry', value: 'ShipCountry' }" placeholder="Ship Country"
popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist>
<div id="ShipCountryError"
[style.visibility]='((ShipCountry.invalid && (ShipCountry.dirty || ShipCountry.touched)) || (ShipCountry.invalid && submitClicked)) ? "visible": "hidden"'>
<label class="e-error" for="ShipCountry" id="ShipCountry-info" style="display: block;">*Ship
Country is required</label>
</div>
</div>
<div class="form-group col-md-6">
<ejs-dropdownlist id="ShipCity" formControlName="ShipCity" [dataSource]='shipCityDistinctData'
[fields]="{text: 'ShipCity', value: 'ShipCity' }" placeholder="Ship City"
popupHeight='300px' floatLabelType='Always'></ejs-dropdownlist>
<div id="ShipCityError"
[style.visibility]='((ShipCity.invalid && (ShipCity.dirty || ShipCity.touched)) || (ShipCity.invalid && submitClicked)) ? "visible": "hidden"'>
<label class="e-error" for="ShipCity" id="ShipCity-info" style="display: block;">*Ship City
is required</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<div class="e-float-input e-control-wrapper">
<textarea formControlName="ShipAddress" id="ShipAddress" name="ShipAddress"
type="text"></textarea>
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="ShipAddress">Ship Address</label>
</div>
</div>
</div>
</div>
</ng-template>
</ejs-grid>
</div>import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Using Template-driven Forms
Template-driven forms use HTML with Angular’s two-way data binding and the ngModel directive, making syntax simple and code minimal. This method is best for straightforward forms with simple validation requirements.
In the following example, a FormGroup is created using the ngForm directive. During the save operation, the form group is validated, and the grid is updated with the edited model data.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';
import { GridModule, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids'
import { ReactiveFormsModule, FormsModule } from '@angular/forms'
import { NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { DialogEditEventArgs, SaveEventArgs} from '@syncfusion/ej2-angular-grids';
import { DataUtil } from '@syncfusion/ej2-data';
import { FormGroup } from '@angular/forms';
@Component({
imports: [
GridModule,
NumericTextBoxAllModule, DatePickerAllModule, DropDownListAllModule, BrowserModule,ReactiveFormsModule, FormsModule,CommonModule
],
providers: [EditService, ToolbarService],
standalone: true,
selector: 'app-root',
templateUrl: `template-driven.html`
})
export class AppComponent implements OnInit {
public data?: Object[];
public editSettings?: Object;
public toolbar?: string[];
public pageSettings?: Object;
public shipCityDistinctData?: Object[];
public shipCountryDistinctData?: Object[];
public orderData!: IOrderModel;
@ViewChild('orderForm') public orderForm?: FormGroup|any;
public ngOnInit(): void {
this.data = data;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
this.pageSettings = { pageCount: 5};
this.shipCityDistinctData = DataUtil.distinct(data, 'ShipCity', true);
this.shipCountryDistinctData = DataUtil.distinct(data, 'ShipCountry', true );
}
actionBegin(args: SaveEventArgs): void {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
this.orderData = Object.assign({}, args.rowData);
}
if (args.requestType === 'save') {
if (this.orderForm.valid) {
args.data = this.orderData;
} else {
args.cancel = true;
}
}
}
actionComplete(args: DialogEditEventArgs): void {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
// Set initial focus
if (args.requestType === 'beginEdit') {
((args.form as HTMLFormElement).elements.namedItem('CustomerName') as HTMLInputElement).focus();
} else if (args.requestType === 'add') {
((args.form as HTMLFormElement).elements.namedItem('OrderID') as HTMLInputElement).focus();
}
}
}
public focusIn(event: FocusEvent): void {
((event.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
}
public focusOut(event: FocusEvent): void {
((event.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
}
}
export interface IOrderModel {
OrderID?: number;
CustomerName?: string;
ShipCity?: string;
OrderDate?: Date;
Freight?: number;
ShipCountry?: string;
ShipAddress?: string;
}<div class="control-section">
<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings'
[toolbar]='toolbar' (actionBegin)='actionBegin($event)' (actionComplete)='actionComplete($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'
[isPrimaryKey]='true'></e-column>
<e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
</e-columns>
<ng-template #editSettingsTemplate let-data>
<div ngForm #orderForm="ngForm">
<table class="e-table e-inline-edit" cellspacing="0.25">
<colgroup>
<col style="width: 120px;">
<col style="width: 120px;">
<col style="width: 120px;">
<col style="width: 130px;">
<col style="width: 150px;">
</colgroup>
<tbody>
<tr>
<td style="text-align: right" class='e-rowcell'>
<div class="e-input-group" [ngClass]="{'e-disabled': !data.isAdd}">
<input class="e-input e-field" [(ngModel)]="orderData.OrderID" required
[attr.disabled]="!data.isAdd ? '' : null" name='OrderID' type="text"
(focus)="focusIn($event)" (blur)="focusOut($event)" style="text-align: right"
#OrderID="ngModel" />
</div>
</td>
<td class='e-rowcell'>
<div class="e-input-group">
<input class="e-input e-field" name='CustomerName'
[(ngModel)]="orderData.CustomerName" required type="text"
(focus)="focusIn($event)" (blur)="focusOut($event)" #CustomerName="ngModel" />
</div>
</td>
<td style="text-align: right" class='e-rowcell'>
<ejs-numerictextbox name="Freight" id="Freight" [(ngModel)]="orderData.Freight"
floatLabelType='Never'></ejs-numerictextbox>
</td>
<td style="text-align: right" class='e-rowcell'>
<ejs-datepicker id="OrderDate" name="OrderDate" [(ngModel)]="orderData.OrderDate"
floatLabelType='Never'></ejs-datepicker>
</td>
<td class='e-rowcell'>
<ejs-dropdownlist id="ShipCountry" name="ShipCountry"
[(ngModel)]="orderData.ShipCountry" [dataSource]='shipCountryDistinctData'
[fields]="{text: 'ShipCountry', value: 'ShipCountry' }" popupHeight='300px'
floatLabelType='Never'></ejs-dropdownlist>
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
</ejs-grid>
</div>import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Each form field must have a name attribute.
Using template context
Enhance custom edit forms by accessing the template context: obtain row details, render editors as components, retrieve values from editors, set the initial focus, disable default validation, and add custom validation. These features work for both inline and dialog modes.
The below scenarios are demonstrated in detail with tab component inside the dialog template.
Access row details inside ngTemplate using template context
When utilizing edit templates in the Grid , you can access crucial row information within an ngTemplate when utilizing edit templates. This enables dynamic binding of attributes, values, or elements based on the specific row being edited. This is particularly useful for conditionally rendering or modifying elements in the edit template based on the row’s state.
The following properties will be available at the time of template execution:
| Property Name | Usage |
|---|---|
| isAdd | A Boolean property that defines whether the current row is a new record or not. |
The following code example demonstrates the usage of the isAdd property in an edit template to disable the OrderID textbox when it’s not a new record:
<input id="OrderID" [(ngModel)]="data.OrderID" name="OrderID" type="text" [attr.disabled]="!data.isAdd ? '' : null">
Render editors as components
The Syncfusion Grid provides a powerful feature that allows you to dynamically render Syncfusion EJ2 controls as form editors during the editing process. This functionality is particularly useful when you want to provide feature-rich controls for data entry within the edit form.
To achieve this by utilizing the actionComplete event of the Grid and specifying requestType as beginEdit or add.
The following code example illustrates rendering the DropDownList component in the actionComplete event.
actionComplete(args: DialogEditEventArgs) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
let countryData: {}[] = DataUtil.distinct(data, 'ShipCountry', true) ;
new DropDownList({value: args.rowData.ShipCountry, popupHeight: '200px', floatLabelType: 'Always',
dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'}, args.form.elements.namedItem('ShipCountry') as HTMLInputElement);
}
}Get value from editor
Read, transform, or validate data before it is saved by using the actionBegin event with requestType set to save.
Example formatting Freight value before update:
actionBegin(args: SaveEventArgs) {
if (args.requestType === 'save') {
// cast string to integer value.
(args.data as ColumnDataType).Freight = parseFloat(((args as any).form.querySelector('#Freight').ej2_instances[0] as HTMLInputElement).value);
}
}Set focus to a particular column editor
Use the actionComplete event for precise input focus control, setting the focus to a specific input on dialog open (e.g., focus on CustomerID):
actionComplete(args: DialogEditEventArgs) {
// Set initail Focus
if (args.requestType === 'beginEdit') {
((args.form as HTMLFormElement).elements.namedItem('CustomerID') as HTMLInputElement).focus();
}
}Disable default form validation
Disable built-in Angular form validation if you need custom validation. Use the removeRules method inside the actionComplete event:
actionComplete(args: DialogEditEventArgs) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Disable the Validation Rules
(args.form as HTMLFormElement)['ej2_instances'][0].removeRules();
}
}You can use this method to disable validation rules: args.form.ej2_instances[0].rules = {}.
Add validation rules for custom editors
For fields not present in the column model, attach custom validators using addRules in the actionComplete event.
Example:
actionComplete(args: DialogEditEventArgs) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Add Validation Rules
(args.form as HTMLFormElement)['ej2_instances'][0].addRules('Freight', { max: 500 });
}
}Render tab component inside the dialog template
A Tab component can be embedded within the dialog edit template to organize form content into logical sections, improving usability for larger or more complex edit scenarios.
Enable dialog mode with editSettings.mode set to Dialog. Place the Tab component inside editSettingsTemplate.
In this sample, validation is performed when navigating between tabs and before saving changes.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { GridModule, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids'
import { ReactiveFormsModule, FormsModule } from '@angular/forms'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { TabAllModule,SelectingEventArgs,TabComponent } from '@syncfusion/ej2-angular-navigations'
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DataUtil } from '@syncfusion/ej2-data';
import { data, ColumnDataType } from './datasource';
import { EditSettingsModel, ToolbarItems, GridComponent, DialogEditEventArgs } from '@syncfusion/ej2-angular-grids';
import { CheckBoxAllModule,ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs';
@Component({
imports: [
ButtonModule,
CheckBoxAllModule,
TabAllModule,
GridModule,
DropDownListAllModule, ReactiveFormsModule, FormsModule,CommonModule,NumericTextBoxAllModule
],
providers: [EditService, ToolbarService],
standalone: true,
selector: 'app-root',
templateUrl: `tablikeedit.html`
})
export class AppComponent implements OnInit {
public data?: Object[];
public editSettings?: EditSettingsModel;
public toolbar?: ToolbarItems[];
public shipCountryDistinctData?: { [key: string]: Object }[];
@ViewChild('grid')
grid?: GridComponent;
@ViewChild('orderForm')
orderForm: FormGroup;
@ViewChild('tab')
tabObj: TabComponent;
ngOnInit(): void {
// Initialize component properties
this.data = data;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit', 'Delete'];
this.shipCountryDistinctData = DataUtil.distinct(data, 'ShipCountry', true) as { [key: string]: Object }[];
}
// Handle completion of editing dialog
actionComplete(args: DialogEditEventArgs) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Disable default validation.
(args.form as HTMLFormElement)['ej2_instances'][0].removeRules();
setTimeout(() => {
new DropDownList({
value: (args.rowData as ColumnDataType).ShipCountry!==undefined ?(args.rowData as ColumnDataType).ShipCountry : "Germany" ,
popupHeight: '200px',
floatLabelType: 'Always',
dataSource: this.shipCountryDistinctData,
placeholder:'ShipCountry',
fields: { text: 'ShipCountry', value: 'ShipCountry' }
}, (args.form as HTMLFormElement).elements.namedItem('ShipCountry') as HTMLInputElement);
}, 1);
// hide dialog button
(args.dialog as HTMLFormElement)['element'].querySelector('.e-footer-content').classList.add('e-hide');
// Add validation rules
(args.form as HTMLFormElement)['ej2_instances'][0].addRules('Freight', { max: 500 });
// Set initial focus
if (args.requestType === 'beginEdit') {
setTimeout(() => {
((args.form as HTMLFormElement).elements.namedItem('CustomerID') as HTMLInputElement).focus();
}, 1);
}
if(args.requestType === 'add') {
setTimeout(() => {
((args.form as HTMLFormElement).elements.namedItem('OrderID') as HTMLInputElement).focus();
}, 1);
}
}
}
// Move to the next tab
nextBtn() {
if (this.orderForm.valid)
this.moveNext();
}
// Move to the previous tab
previousBtn() {
this.movePrevious();
}
// Handle tab selection
selecting(e: SelectingEventArgs) {
if (e.isSwiped) e.cancel = true;
e.cancel = !this.orderForm.valid;
}
// Move to the next tab if the form is valid
moveNext() {
if (this.orderForm?.valid )
this.tabObj.select(1);
else
this.tabObj.select(1);
}
// Move to the previous tab if the form is valid
movePrevious() {
if (this.orderForm.valid)
this.tabObj.select(0);
}
// Handle submit button click
submitBtn() {
if (this.orderForm.valid)
(this.grid as GridComponent).endEdit();
}
}<ejs-grid #grid [dataSource]='data' allowPaging='true' [editSettings]='editSettings' [toolbar]='toolbar'
(actionComplete)='actionComplete($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [isPrimaryKey]='true'></e-column>
<e-column field='CustomerID' headerText='Customer Name' width='120'> </e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
<e-column field='Freight' headerText='Freight' width='150'></e-column>
<e-column field='ShipAddress' headerText='Ship Address' width='150'></e-column>
<e-column field='Verified' headerText='Verified' width='100' type='boolean' [displayAsCheckBox]='true'></e-column>
</e-columns>
<ng-template #editSettingsTemplate let-data>
<div ngForm #orderForm="ngForm">
<ejs-tab #tab id="tab_wizard" showCloseButton=false (selecting)='selecting($event)'>
<e-tabitems>
<e-tabitem>
<ng-template #headerText>
<div> Details </div>
</ng-template>
<ng-template #content>
<div id="tab1">
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper"
[ngClass]="{'e-error': OrderID.invalid && (OrderID.touched || OrderID.dirty)}">
<input [(ngModel)]="data.OrderID" required id="OrderID" name="OrderID" type="text"
[disabled]="!data.isAdd" #OrderID="ngModel">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="OrderID"> Order ID</label>
</div>
<div id="OrderIDError" *ngIf='OrderID.invalid && (OrderID.dirty || OrderID.touched)'>
<label class="e-error" for="OrderID" id="OrderID-info" style="display: block;">*Order ID is
required</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper" [ngClass]="{'e-error': CustomerID.invalid && (CustomerID.dirty || CustomerID.touched)}">
<input [(ngModel)]="data.CustomerID" required id="CustomerID" name="CustomerID" type="text"
#CustomerID="ngModel">
<span class="e-float-line"></span>
<label class="e-float-text e-label-top" for="CustomerID">Customer Name</label>
</div>
<div id="CustomerIDError" *ngIf="CustomerID.invalid && (CustomerID.dirty || CustomerID.touched)">
<label class="e-error" for="CustomerID" id="CustomerID-info" style="display: block;">*Customer
Name is required</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input required id="ShipCountry" name="ShipCountry" type="text">
</div>
</div>
<button ejs-button type="button" cssClass="e-info e-btn" style="float: right"
(click)="nextBtn()">next</button>
</div>
</ng-template></e-tabitem>
<e-tabitem>
<ng-template #headerText>
<div> Verify </div>
</ng-template>
<ng-template #content>
<div id="tab2">
<div class="form-row">
<div class="form-group col-md-6">
<div class="e-float-input e-control-wrapper"
[ngClass]="{'e-error': Freight.invalid && (Freight.dirty || Freight.touched)}">
<label class="e-float-text e-label-top" for="Freight">Freight</label>
<ejs-numerictextbox style="margin-top:10px" min='0' [(ngModel)]="data.Freight" required
id="Freight" name="Freight" #Freight="ngModel" floatLabelType='Always'></ejs-numerictextbox>
</div>
<div id="FreightError" *ngIf="Freight.invalid && (Freight.dirty || Freight.touched)">
<label class="e-error" for="Freight" id="Freight-info" style="display: block;">*Freight is
required</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<ejs-checkbox #Verified name="Verified" id="Verified" label="Verified"
[checked]="data.Verified"></ejs-checkbox>
</div>
</div>
<button ejs-button type="button" cssClass="e-info e-btn" style="float: right"
(click)="submitBtn()">Submit</button>
</div>
</ng-template>
</e-tabitem>
</e-tabitems>
</ejs-tab>
</div>
</ng-template>
</ejs-grid>import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));