This is a migrated thread and some comments may be shown as answers.

Editable grid and asynchronous validation => value disapears

1 Answer 69 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dierik Vermeir
Top achievements
Rank 1
Dierik Vermeir asked on 29 May 2015, 09:35 AM

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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 02 Jun 2015, 08:27 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Dierik Vermeir
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or