Ajax validation with grid

[trang]

Hi,

I have a grid which has a column for email. So I want to check if the email exists before edit or create a new one. I found that Kendo supports the ajax validation for the object Validator. But for the grid, do you have this functionality? For example, my datasource is :

var dataSource = new kendo.data.DataSource({
                        transport: {
                           ...
                        },
                        batch: true,
                        pageSize: 5,
                        schema: {
                            model: {
                                id: "id_user",
                                fields: {
                                    id_user: { editable: false },
                                    email: {
                                        editable: true,
                                        validation: {
                                            email: { message: "Email invalid" },
                                            required: true,

                                        }
                                    }
                                }
                            }
                        }
                    });


Thanks for your support

Regards

[Vladimir Iliev]

Hi,

Basically better approach would be to validate the data on the server side when the record is posted, however you can achieve the desired behavior by defining custom validation rule and use the jQuery ajax method inside it with "async" option set to false. That way inside the validation function you will be able to make request to server, wait for the response and based on it to show validation error. 

Regards,
Vladimir Iliev
Telerik

 

 

[Oscar]

Hello Vladimir,
Could you please provide any sample of using Ajax validation with kendo grid?

Kind regards,
Oscar

[Oscar]

Burke Holland wrote a blog about asynchronous ajax validation, but he didn't use a kendo grid to show how it works. Here is the article
Extending The Kendo UI Validator With Custom Rules

Does anybody use ajax validation (synchronous or asynchronous) with Kendo Grid. How do you validate unique items or existing values in the database?

Any help will be appreciated.

Kind regards
Oscar

[Oscar]

I've been searching ajax validation for incell batch editing kendo grid, but I haven't been able to find any sample.

[Vladimir Iliev]

Hi Oscar,

For convenience I created small example of client-side validation using Ajax request which you can use as a baseline to achieve the desired behavior:

• Grid: client validation using Ajax request

Regards,
Vladimir Iliev
Telerik

 

 

[Oscar]

Hello Vladimir,
Thank you very much for your help.

I've updated your example to make it as close as possible to my scenario. That is navigatable grid with locked columns and a kendoComboBox custom cell editor. I've used ProductID field to simulate custom editing with kendoComboBox categories.

All Works fine in IE 11 and Chrome but Firefox (version 32.0.3.)
If you click ProductName in second row and tab next twice to go to Unit Price cell, the grid has problems with Category cell ; the grid doesn't close this cell and doesn't edit Unit Price. It seems that (simulated) Category cell remains invalid and the focus is surprisingly in the Delete input in the first row.
I've attached a picture to show this effect.
Would you please take a look at this?

Kind regards
Oscar

[Vladimir Iliev]

Hello,

The reason for the ComboBox not being closed is that there is validation error when you try to close the ComboBox cell before the remote data is being loaded. Possible solution is to use local data for the ComboBox or manually focus the editor after the first cell validation is completed:

• http://dojo.telerik.com/OSOL/3

Regards,
Vladimir Iliev
Telerik

 

 

[Oscar]

Hello Vladimir,
if the grid has a checkbox column, it doesn't work (Firefox, of course).
Enter first cell and then tab. The last checkbox cell in the last row gets the focus.

I've updated your sample and now Discontinued column has a checkbox template.

http://dojo.telerik.com/OSOL/5

Kind regards,
Oscar.

[Oscar]

If the pageable's grid setting is {input: true, numeric: false},   the input in the pager gets the focus when you press tab key - while editing first cell- insted of editing its sibling cell.

[Vladimir Iliev]

Hi Oscar,

In order to support current scenario you should modify the previous validation function to use global flags to track if there is ongoing validation - for more detailed information about this approach you can check this blog post.
Also for convenience I updated previous example to use the above solution:

• Grid: Ajax validation

Regards,
Vladimir Iliev
Telerik

 

 

[Oscar]

Hi Vladimir,
Thank you for your help.
This async validation makes the user to tab twice to leave the validating cell. In your sample, change any product or simply focus on any product cell and press right tab key to leave the edition cell. The close cell doesn't work until you press right tab key again. If the cell doesn't have an Ajax validation, you leave the cell edition the first time you press tab key, as normally.

[Oscar]

Hi Vladimir,
My post on September 22 also had a link to Burk Holland's blog about Extending the Kendo UI Validator with Custom Rules.
Do you have any workaround so as the user must not press tab twice to leave the edition of a cell with async Ajax validation?
Kind regards,
Oscar.

[Vladimir Iliev]

Hi Oscar,

Current implementation of the ajax validation doesn't support moving the navigation position automatically to the next cell when the request from the server is completed. If you need this behavior you should implement it using custom code. 

Regards,
Vladimir Iliev
Telerik

 

 

[Oscar]

Hi Vladimir,
This is very bad news.
I'm using kendo grid keyboard navigation functionality and Ajax validation. Is it a so strange combination? I don't mind if Ajax validation is async or sync. You said at the begining of this thread "..use the jQuery Ajax method inside it with async option set to false." Perhaps this is the problem. Mr. Burke's sample uses async Ajax validation but it seems it doesn't work when applied to kendo grid wiht navigatable set to true and batch editing. Mr.Burke, Don't you have anything to say about this?
I don't think I need custom code. I need kendo ui does what it's expected to do. If navigatable is true, tab navigates to next cell; shift + tab navigates to previous cell, If there is a custom validation, then Validate. That's all.
All of we want kendo ui to be a first class software. Maybe Q3 2014?

Kind regards
Oscar.

[Vladimir Iliev]

Hi Oscar,

If you believe that this should be supported out of the box I would suggest to share your idea at Kendo UI UserVoice to allow other users vote for it.  We are very open minded and carefully listen to our community's feedback - that why most voted ideas are included in next KendoUI releases. 

Regards,
Vladimir Iliev
Telerik