Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
145320 | Jun 17,2019 02:54 PM UTC | Jun 26,2019 02:05 PM UTC | React - EJ 2 | 9 |
![]() |
Tags: Grid |
<ColumnDirective field='FrontEndCategoryId' headerText="Category" width='250px' allowFiltering={false} dataSource={this.FrontEndCatData} foreignKeyValue='ResourcesItalianText' validationRules={{ required: true }} />
[index.js]
export class DialogTemplate extends SampleBase {
constructor() {
super(...arguments);
. . . .
this.customValidate = { required: [this.customFn.bind(this), "Please select ShipCountry"] };
}
customFn(args) {
return args['value'] == "" ? false : true;
};
<GridComponent dataSource={orderData} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionComplete={this.actionComplete.bind(this)}>
<ColumnsDirective>
. . . .
<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='170'></ColumnDirective>
<ColumnDirective field='ShipCountry' headerText='Ship Country' validationRules={this.customValidate} width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Toolbar, Edit]} />
</GridComponent>
|
Hi Matteo,
As per your query we have modified teh sample with custom validation on dialog template editing in EJ2 Grid. please refer the below code example and sample for more information.
[index.js]
export class DialogTemplate extends SampleBase {constructor() {super(...arguments);. . . .this.customValidate = { required: [this.customFn.bind(this), "Please select ShipCountry"] };}customFn(args) {return args['value'] == "" ? false : true;};<GridComponent dataSource={orderData} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionComplete={this.actionComplete.bind(this)}><ColumnsDirective>. . . .<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='170'></ColumnDirective><ColumnDirective field='ShipCountry' headerText='Ship Country' validationRules={this.customValidate} width='150'></ColumnDirective></ColumnsDirective><Inject services={[Page, Toolbar, Edit]} /></GridComponent>
Regards,Thavasianand S.
[index.js]
<GridComponent dataSource={this.data} toolbar={this.toolbarOptions} allowPaging={true} editSettings={this.editSettings} pageSettings={this.pageSettings} actionComplete={this.actionComplete.bind(this)}>
<ColumnsDirective>
. . .
<ColumnDirective field='ShipCountry' headerText='Ship Country' foreignKeyField="ShipCountry" foreignKeyValue="City" dataSource={this.fkDataSource} validationRules={{required:true}} width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Toolbar, Edit, ForeignKey]} />
</GridComponent> |
[index.js]
actionComplete(args) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
args.form.addEventListener("focusout", function (e) {
this.ej2_instances[0].validate(); //validate required input elements
});
if (Browser.isDevice) {
args.dialog.height = window.innerHeight - 90 + 'px';
args.dialog.dataBind();
}
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.