How to determine if there were validation errors after calling (Kendo) grid.SaveChanges() in javascript

Question

I call grid.SaveChanges() in my javascript function. The grid is using inline editing mode.

My problem is if there were some client side validation errors for example invalid date format, then I must not execute some DOM operations. Unfortunately grid.SaveChanges() has no return value and searching for keyword 'valid' in grid documentation page has no result. (Teleport to Kendo Grid API documentation)

So: How can I determine if there was validation errors after SaveChanges() or the data was successfully sync-ed with the persistent store?

Thx in advance

Answer 1

I'm assuming that you are using the MVC wrappers but calling grid.SaveChanges() as part of your script. Since you're using inline editing mode, that means you're using Ajax. If those assumptions are correct, then when you call SaveChanges() your controller action specified in the wrapper is executed. If you hook into the .Error event you can execute whatever script needs to be executed (even if that's just setting a variable that you check in the other parts of your script). Have a look at the Ajax Editing portion of Getting Started on Kendo's website. Your Razor code will look similar to the following (some of this is extraneous, I pulled it out of production code and modified slightly):

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(cols =>
    {
        cols.Bound(p => p.ColumnA);

    })
.Editable(edit => edit.Enabled(true).Mode(GridEditMode.InCell))
.DataSource(ds => ds
            .Ajax()
            .AutoSync(false)
            .Model(model => 
                {
                    model.Id(p => p.ColumnId);                   
                })
            // Configure RU -->
                .Read(read => read.Action("_MyRead", "MyController").Data("additionalData"))
                .Update(update => update.Action("_MyUpdate", "MyController").Data("additionalData"))
                //.ServerOperation(false)
                .Batch(true)
                .Events(events => events
                    .Error("onError")            
                    )
                )
            // <-- Configure RU
        .Pageable(page => page.PageSizes(new int[] { 10, 25, 50, 100 }).Enabled(true))
        .Groupable(group => group.Enabled(true))
        .Filterable(filter => filter.Enabled(true).Extra(false))
        .Sortable(sort => sort.Enabled(true).SortMode(GridSortMode.SingleColumn).AllowUnsort(true))
        .Navigatable(nav => nav.Enabled(true))
        .Resizable(resizing => resizing.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
            )

Then your onError script will look like this:

function onError(e, status) {
    if (e.errors) {
        var message = "The following errors have occurred and changes will be discarded:\n";

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

        alert(message);
        var grid = $("#Grid").data("kendoGrid");
        grid.cancelChanges();
    }
}