KendoUI MVC Grid - Addnew or Update record with ajax and server side validation

[Srinivasan]

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

[Petur Subev]

Hello,

I would suggest you to check this code library project which demonstrates how to prevent the Grid from rebinding and keep it in edit mode when there are server side errors.

http://www.kendoui.com/code-library/mvc/grid/handling-server-side-validation-errors-during-pop-up-editing.aspx


Kind Regards,
Petur Subev
the Telerik team

[Srinivasan]

The server side validation code you posted works with add new record, update existing record, but not the deletion (Ajax binding)
I am getting below exception on delete, could you please let me know if i am missing anything?

1. 
   
2. Uncaught TypeError: Cannot read property 'element' of null
   
   1. (anonymous function)
      
   2. ikendo.all.min.js:9
   3. Class.extend.triggerkendo.all.min.js:9
   4. h.extend.refreshkendo.all.min.js:9
   5. gjquery.min.js:2
   6. Class.extend.triggerkendo.all.min.js:9
   7. o.extend._processkendo.all.min.js:9
   8. o.extend._changekendo.all.min.js:9
   9. (anonymous function)kendo.all.min.js:9
   10. njquery.min.js:2
   11. o.fireWithjquery.min.js:2
   12. o.firejquery.min.js:2
   13. g.(anonymous function).call.c.successkendo.all.min.js:9
   14. njquery.min.js:2
   15. o.fireWithjquery.min.js:2
   16. wjquery.min.js:4
   17. d

[Petur Subev]

Hello again Srinivasan,

The JavaScript error which you see is because there is no editing element when editing a record

grid.editable.element

The above is only available when inserting or editing a record. You need to inform the user in a different way that the destroy operation has caused errors.


Kind regards,
Petur Subev
the Telerik team

[Pat]

The problem with the referenced link is that it applies to pop up editting.  It doesn't work for me with inline editting.

[Petur Subev]

Hello Pat,

What do you mean by 'doesn't work'? I tried to change only the following line and the validation seems to be triggered and displayd again.

.Editable(editable => editable.Mode(GridEditMode.InLine))

Regards,
Petur Subev
the Telerik team

[Pat]

It does work for me now.

I initially was getting a javascript error.  But now it works.