[Solved] Editable grid and asynchronous validation => value disapears

[Dierik Vermeir]

Example containing my problem: 

http://dojo.telerik.com/oMuFE/3

Problem

When editing a grid row, the data from an input field disappears. This only happens when calling the editing row validator from custom code.

Steps to reproduce:

Add new record

Fill in a product name

go to the next field => validation of the productname is triggered and after 1500ms it is found to be OK

Click on the update button

=> The value disappeared!!

 

What am I doing?

The validation function is synchronous.

My call to check the value is asynchronous.

Javascript can't block.. 

I start the async call, set the message to "checking..." and return false => the validation message is shown

When the async call returns, I cache the result (in this example always true) and call the validate function once again.

This second time the function is called I can return synchronous.

This pattern is described in: 

http://blogs.telerik.com/kendoui/posts/13-12-10/extending-the-kendo-ui-validator-with-custom-rules

in the chapter "Advanced Validation"

 

Question:

How can this be solved?

Is there a better way to achieve this?

 

Thanks in advance.

[Rosen]

Hello Dierik,

The value is not set to the model, as the custom rule evaluates to false when the value is trying to be set from the UI to the model. In order to correct this you could re-trigger the input element change event instead of calling the validateInput method. This will both try to re-set the current value to the model and trigger the validation. Similar to the following:

 

wait(1500).then(function(){
  //Let's say the ajax call returned true
  cache.valid = true;
  cache.checking = false;

  input.trigger("change");

  // Revalidate the input field
  //validator.validateInput(input);
});

 

Regards,
Rosen
Telerik