custom function triggering 4 times

[Mohamed Abdul khader]

component.ts

import { Component, OnInit, NgZone } from '@angular/core';

import { EditService, ToolbarService, PageService } from '@syncfusion/ej2-angular-grids';

import { orderData } from './data';

import { RecipeService } from '../shared/recipe.service';

import { HttpClient } from '@angular/common/http';

import { Ajax } from '@syncfusion/ej2-base';

@Component({

selector: 'app-editproduct',

templateUrl: './editproduct.component.html',

styleUrls: ['./editproduct.component.scss'],

providers: [ToolbarService, EditService, PageService]

})

export class EditproductComponent implements OnInit {

constructor(private recipeService:RecipeService,private ngZone: NgZone,private http:HttpClient,) {

}

ngOnInit() {

this.data=[{

image: [ 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F110.0.jpg?alt=media', 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F110.1.jpg?alt=media' ], _id: 5e861a1a6a38a126ac30fbd4, productId: 121, title: 'ADF FASHION', description: 'Black Printed Kurti', price: 999, discount: 10, ProductDetails: { Fabric: 'Heavy rayon', Color: 'Black', Neck: 'V Neck', Pattern: 'Printed', SleeveLength: '3/4 sleeve', FabricCare: 'gentle machine wash', Description: 'Long frill concept' }, category: 'kurti', size: 'xxl' }, { image: [ 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F112.0.jpg?alt=media' ], _id: 5e861a596a38a126ac30fbd5, productId: 122, title: 'ADF FASHION', description: 'Marroon Printed Kurti', price: 999, discount: 10, ProductDetails: { Fabric: 'Heavy rayon', Color: 'marroon', size: 'xxl', Neck: 'V Neck', Pattern: 'Printed', SleeveLength: '3/4 sleeve', FabricCare: 'gentle machine wash', Description: 'Long frill concept' }, category: 'kurti' }, { image: [ 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F113.0.jpg?alt=media', 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F113.1.jpg?alt=media' ], _id: 5e861ae66a38a126ac30fbd6, productId: 123, title: 'ADF FASHION', description: 'Light Green Printed Kurti', price: 999, discount: 10, ProductDetails: { Fabric: 'Heavy rayon', Color: 'Light Green', size: 'xxl', Neck: 'V Neck', Pattern: 'Printed', SleeveLength: '3/4 sleeve', FabricCare: 'gentle machine wash', Description: 'Long frill concept' }, category: 'kurti' }, { image: [ 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F114.1.jpg?alt=media', 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F114.2.jpg?alt=media' ], _id: 5e861b266a38a126ac30fbd7, productId: 124, title: 'ADF FASHION', description: 'Dark Green Printed Kurti', price: 999, discount: 10, ProductDetails: { Fabric: 'Heavy rayon', Color: 'Dark Green', size: 'xxl', Neck: 'V Neck', Pattern: 'Printed', SleeveLength: '3/4 sleeve', FabricCare: 'gentle machine wash', Description: 'Long frill concept' }, category: 'kurti' }, { image: [ 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F115.jpg?alt=media', 'https://firebasestorage.googleapis.com/v0/b/adfproductimages.appspot.com/o/kurti%2F115.1.jpg?alt=media' ], _id: 5e861b576a38a126ac30fbd8, productId: 125, title: 'ADF FASHION', description: 'Yellow Printed Kurti', price: 999, discount: 10, ProductDetails: { Fabric: 'Heavy rayon', Color: 'Yellow', size: 'xxl', Neck: 'V Neck', Pattern: 'Printed', SleeveLength: '3/4 sleeve', FabricCare: 'gentle machine wash', Description: 'Long frill concept' }, category: 'kurti' }]

this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };

this.toolbar = ['Add', 'Delete', 'Update', 'Cancel'];

this.productidrules = { required: true, number: true, minLength: [this.customFn, 'ProductId Exists...'] };

this.descriptionrules = { required: true };

this.pricerules = { required: true };

this.editparams = { params: { popupHeight: '300px' }};

this.pageSettings = {pageCount: 5};

}

AllProductString:Object[]=[];

public data:Object[];

public editSettings: Object;

public toolbar: string[];

public productidrules: Object;

public descriptionrules: Object;

public pricerules: Object;

public editparams: Object;

public pageSettings: Object;

public value = 'value';

public flag=true;

public customFn: (args) => boolean = (args) => {

let ajax = new Ajax("/api/products/checkProduct", "POST", true);

ajax.send(JSON.stringify({ Id : "111" })).then( //

(value) => {

this.flag = false;

});

return true;

};

}

}

[Mohamed Abdul khader]

component.html

<div class="control-section">

    <ejs-grid #batchgrid id='Batchgrid'(actionComplete)="actionComplete($event)" [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [allowFiltering]='true'>

        <e-columns>

            <e-column field='productId' headerText='Product ID'  width='110' textAlign='Right' isPrimaryKey='true' [validationRules]='productidrules'></e-column>

            <e-column field='description' headerText='Description' width='180' [validationRules]='descriptionrules'></e-column>

            <e-column field='price' headerText='Price' width='100' format='###.##' textAlign='Right' editType='numericedit' [validationRules]='pricerules'></e-column>

            <e-column field='discount' headerText='Discount' width='100'  textAlign='Right' editType='numericedit' [validationRules]='pricerules'></e-column>

            <e-column field='image.0' headerText='Image1' width='160' default=""></e-column>

            <e-column field=image.1 headerText='Image2' width='160' default=""></e-column>

            <e-column field='image.2' headerText='Image3' width='160' default=""></e-column>

            <e-column field='image.3' headerText='Image4' width='160' default=""></e-column>

            <e-column field='category' headerText='Category' width='120' editType='dropdownedit' [edit]='editparams'></e-column>

            <e-column field='ProductDetails.Fabric' headerText='Fabric' width='180' ></e-column>

            <e-column field='ProductDetails.Color' headerText='Color' width='120' ></e-column>

            <e-column field='ProductDetails.size' headerText='Size' width='60' ></e-column>

            <e-column field='ProductDetails.Neck' headerText='Neck' width='120' ></e-column>

            <e-column field='ProductDetails.Pattern' headerText='Pattern' width='120' ></e-column>

            <e-column field='ProductDetails.SleeveLength' headerText='Sleeve Len' width='120' ></e-column>

            <e-column field='ProductDetails.FabricCare' headerText='Fabric Care' width='180' ></e-column>

            <e-column field='ProductDetails.Description' headerText='Prod Desc' width='270' ></e-column>

            <!-- <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit' textAlign='Right'></e-column> -->

            <!-- <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> -->

        </e-columns>

    </ejs-grid>

</div>

[Mohamed Abdul khader]

Hi team,

Am getting below two errors:

1. when i click on add button, new row is added to the grid, but for image 1 and image 2 column, default value is [object object].

2. whenever i enter/fill values in product id column while adding data, custom function is triggered 4 times when i blur out. in my custom function there is a server call to check for duplicate entries while adding data for productId.

[Mohamed Abdul khader]

hi team,

i opened the code in stackbliz after going to the following link.

even there i found the same issue for the demo code provided in your website.

issue: when adding a new row, default value for one column is [object object].

https://ej2.syncfusion.com/angular/demos/#/material/grid/batch-editing

[NOTE]: if you are asked to  download core-js dependencies in the stackbliz code editor, please navigate to package.json and change core-js version to 2.6.5.

Attached screenshot of the error from your demo code.

Attachment: Capture123_3b8bd935.zip

[Mohamed Abdul khader]

hi team, 

issue no 2 fixed, [object object].

after refering to  thread 141773 . 

but issue 1 persists.

[Thiyagu Subramani]

Hi Mohamed, 

 

Thanks for contacting Syncfusion forum. 

 

Query #1: custom-function-triggering-4-times.  

By default custom validation function is trigger when blur the edited cell or keypressing on focusing edit cell. it is trigger the following cases,  

1. Blur the edited cell.
2. Once validation is fail on the edited cell after that custom function is trigger for every key pressing (many times).

So we suspect your reported issue may occurs in above cases only. Its default behavior of current grid architecture. 

For your more reference, we have shared a workable sample as given below.   

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ASP-Core-angular-server-validation-78144328-762890420.zip 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Mohamed Abdul khader]

Yeah.. exactly...

When validation fails it triggers for each keyup.

But in my case, on blur my custom validation function is triggered four times.

[Thiyagu Subramani]

Hi Mohamed, 

Thanks for update. 

By default in batch edit mode we have added value as 0  in number column. So as per your code, if we focus the required validation column  automatically “required true” and “number true”  validation cases are succeed so its goes automatically  to the custom function and now its validation as failed respective to your condition(Once validation is fail on the edited cell after that custom function is trigger many times ). So only its triggered many time while blur the required input. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.