Question

I have implemented inline editing with Knedo UI MVC grid with Ajax binding,
Server side validation handled in controller and sending the error back using –

ModelState.AddModelError(“Error: “, ex.Message);

@(Html.Kendo().Grid<AnalyticsServiceWeb.ViewModel.SomeViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Bound(p => p.Path);
columns.Bound(p => p.Space);
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
)

function error_handler(e) {
    if (e.errors) {
        var message = "Errors:\n";
        $.each(e.errors, function (key, value) {
            if ('errors' in value) {
                $.each(value.errors, function () {
                    message += this + "\n";
                });
            }
        });
        alert(message);
    }
}

The server side error message is getting displayed when there is a server side exception, but it still completes the action in UI, i mean it adds the new record to the grid and update as well even though there is server side exception.

Is there any way to retain the state of UI before the action start?, it supposed to work in that way, not sure if i am missing anything?

Thanks in advance

Answer 1

Kendo UI Supports (Most) Data Annotations in your View Models this will give you client side unobtrusive validation provided by Kedno UI and you can implement server side validation by looking at the ModelState

So doing this in your Controller Action will handle server side validation

If(ModelState.IsValid)
{
   //Write to the Database
}
else
{
   //We Have Validation Error, return the model for correction
}

Here goes some examples

[Required]
[DataType.Currency]
public decimal Currency { get; set; }

This tells the gird the Currency Field is Requried (Obviously) but something even cooler than that is Kendo Grid will render its currency text box automatically when editing

It will do the same for Dates and Times so this will render its Date Picker

[Required]
[DataType.Date]
public decimal Date { get; set; }

To display server side validation errors try this:

The key of the error holds the name of the field. You could use it to generate a message which includes the property names for the errors e.g.

$.each(e.errors, function (key, value) {
    if ('errors' in value) {
        message += key + ":\n";
        $.each(value.errors, function () {
            message += this + "\n";
        });
    }
});