Hi,
I need help to add custom validation to the account textbox inside dialog editor to see if the account exist in the database through API. I tried below code but i can't seem to get it to work.
{ columnKey: "customerAcctNo", editorType: 'text', required: true, editorOptions: { validatorOptions: { custom: { method: function (value, fieldOps) { me._sharedService.validateAccount(value) .subscribe(data => { if (data) {return true;} else {return false;}}) }, errorMessage: "Account doesn't exist" } }, width: "100%" } },
SERVICE:
public validateAccount(account: string): Observable<IUser[]> { let params: URLSearchParams = new URLSearchParams(); if (account) { params.set('customerAcctNo', account); }
let requestOptions = new RequestOptions(); requestOptions.withCredentials = true; requestOptions.search = params;
return this._http.get(this._accountUrl, requestOptions) .map((response: Response) => { if (response) { return true; } else { return false } }) .do(data => console.log('account: ' + JSON.stringify(data))) .catch(this.handleError); }
I still receive below error when I open the dialog and validate the second time.
Error:
ERROR TypeError: Cannot read property '_currentText' of undefined
In my code i use custom dialog below.
TS:
rowEditDialogOptions: { showEditorsForHiddenColumns: true, showReadonlyEditors: false, dialogTemplateSelector: "#dialogtemp" },
HTML: The code attached below
Hello evan,
It seems that in the rowEditDialogContentsRendered event the editors are not yet available in the DOM so the additional validation that was added is not triggered since the input is not added as a validation field.
So the validation defined in the column settings is triggered instead but the timing is off.
You can remove the validation defined in the column settings and leave in just the custom logic in the valueChanged event that triggers the validation of the separate editor.
columnSettings: [ { columnKey: "id", readOnly: true, editorType: 'text' }, { columnKey: "userId", editorType: 'text', required: true, editorOptions: { valueChanged: function(e, ui){ me._homeService.validateUser(ui.newValue) .subscribe(data => { if (data) { me.validationRes = true; } else { me.validationRes = false; } jQuery("#customValidator").igValidator("validate"); }, error => { me.validationRes = false; jQuery("#customValidator").igValidator("validate"); }); } }
} ]
And to make sure the validation field is added only once when it’s available in the DOM you can use the rowEditDialogAfterOpen and add a check for the fields length:
rowEditDialogAfterOpen: function (e, ui) {
if( $("#customValidator").data("igValidator").options.fields.length === 0 ){
$("#customValidator").igValidator("addField", { selector: $("input[data-editor-for-userId]") });
}
I’ve attached a sample for you reference.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://es.infragistics.com/support
it's seems to work but it validate only when i tab out the textbox. my validation api takes half a second to return value so it won't validate if i tab out faster than the api return.
I also need to add error message in the column settings below if not it display "This field needs attention"
columnKey: "customerAcctNo", editorType: "text", required: true, editorOptions: { validatorOptions: { custom: function () { return me.validationRes; }, errorMessage: "User doesn't exist" },
It’s probably due to the validator being hooked multiple times to the editor.
You can move the logic that adds the field for validation to the rowEditDialogContentsRendered event instead:
rowEditDialogContentsRendered: function (e, ui) {
In that case it will only be hooked once when the dialog is initially rendered. Let me know if that solves your issue.
I encounter another issues when i combine "dialogTemplateSelector: "#dialogtemp" with the validation you provided above.
Reproduce = Click at a row --> update data --> click done --> open another row --> click done and you will receive below error.
attached is my updated code with the custom dialog.
Error: ERROR TypeError: Cannot read property '_currentText' of undefined