Grid looks like accepted an update even on model errors

[Daniel]

Hi,

I've posted this on wrong forum, so I'm re-posting here.

A field of my Kendo UI Grid cannot be duplicated. On Telerik Extensions for ASP .NET MVC I was using Remote validation and it was ok.
Now, using KendoUI, this field is not validated on client, just on server. The problem is that, after clicking Update button, grid looks like changes were accepted, but if you see the response of ajax call, you realize that the error message is there, but it isn't displayed because it's no more on edit mode.

Something similar occurs on the example provided with Wrappers for KendoUI, Collumn Settings (http://localhost:53702/razor/web/grid/columnsettings). If I edit a row, change any field's value and click on Update, it looks like changes where accepted, but an alert is showed: "Errors: The value '1/17/2012 12:00:00 AM' is not valid for Last supply". I know I can fix it refering the right culture file, but it's not the main problem.
The problem is that it should display this error during edit mode, using Kendo Validation, to be clear for the user that this data was not updated.

How to achieve this behavior?

Tks

[Adam]

Handle the "error" event of the datasource as seen here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-editing 

Then to revert your grid back you want to do this in that function:

if (e.errors) {

    this.cancelChanges();

...

}

[Daniel]

Hi, Adam

Thanks for your quick reply!
It didn't fix the problem, since the user doesn't have the opportunity to change what's wrong... He/she has to click on Edit button again, make the same changes, correct the wrong information and try again.
The desired behavior is to keep on edit mode until that ajax call completes without error. If I put a breakpoint on Products_Update and go back to browser window, grid looks like changes were accepted even before trying to validate the model on server.
My model has a Remote Attribute on MetaData class and it was working as expected on Telerik Extensions for ASP .NET MVC. Now, trying to convert to KendoUI, I can't get it working...

Tks

[Adam]

I see what you mean. Kendo doesn't support remote attribute. I wish it did. I added a request for it a while back so feel free to vote it up: http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/3041812-mvc-remoteattribute-support-for-remote-validation

What you could do is handle the grid edit event, then attach an event handler to your control you want to validate:

function grid_edit(e) {

   e.container.find("#Name").change(remoteValidateName);

}

 

function remoteValidateName()

{

 // do ajax call

 // handle enabling/disabling of the k-grid-update button when call completes

}

Not ideal maybe, but I think it could work.

[Daniel]

Thank you, Adam!

I voted on your request!
I tried to disable this button, but it's an "a" element. I thought that adding "k-state-disabled" class could work, but it's not enough to prevent the default behavior of it. I saw a suggestion to implement this (http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2607322-add-the-ability-to-disable-buttons), but before it's implemented, how can I simulate it?

[Adam]

David,

I think you could remove the "k-grid-update" class from that button, because I believe the grid looks for a click event "a.k-grid-update"
Then it would not attempt the update. It may still be clickable but it shouldn't do anything. You would also probably want to add a "temp" class so you can modify it when validation passes.

In the grid "edit" event do this:

e.container.find("a.k-grid-update").removeClass("k-grid-update").addClass("k-state-disabled k-grid-update-temp")

When validation passes do this (you may need to save a reference to the button depending on where you check validation):

$(theButton).removeClass("k-grid-update-temp k-state-disabled").addClass("k-grid-update") 

Or you could hide/show the button:

e.container.find("a.k-grid-update").hide(); // grid "edit" event

$(theButton).show(); // when validation passes

[Daniel]

Adam,

Thank you!
It works perfectly.