Kendo Grid Mvc - Cannot be shown custom error message on view page

Question

I am using a Kendo Grid in my MVC project.

My problem is that the error message is not shown on the view page. When I look at the JSON data with developer tools, I can see the error data which is correct:

{
    "Data": null,
    "Total": 0,
    "AggregateResults": null,
    "Errors": [ "There is record(s) with same name.Please review your new records." ]
}

The Exception message has been passed to result parameter in the controller.

Controller:

catch (Exception exp)
{
    var  result = exp.ToDataSourceResult(request);
    // var  result1 = ModelState.ToDataSourceResult();
    //  ModelState.AddModelError("UpdateAmbulance", exp.Message);
    return Json(result, JsonRequestBehavior.AllowGet);
}

This is the Kendo Grid code on the view page:

<!-- Grid  -->
@(Html.Kendo().Grid<AIS.UI.WebService.Proxy.DSrvAllService.AMBULANCEDEFINITIONS>() //Bind the grid to ViewBag.Products
    .Name("grid")
    // .BindTo(Model)
    .Columns(columns =>
    {
        columns.Bound(product => product.DESCRIPTION)
            .Title("<strong>Ambulance Description</strong>")
            .Width("20%");
            //.ClientTemplate("<strong>#:DESCRIPTION#</>strong");

        columns.Bound(product => product.CODE)
            .Title("<strong>Ambulance Description</strong>")
            .Width("20%");

        columns.Command(commands =>
            {
                commands.Destroy().HtmlAttributes(new { id = "buttondelete", style="display:none" }); 
            })
            .Title("Operations")
            .Width("10%");
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create()
            .HtmlAttributes(new { id="addbutton",style = "font-weight:bold;color:blue" })
            .Text("Add Records"); // The "create" command adds new data items
        toolbar.Save(); // The "save" command saves the changed data items
    })
    // Use in-cell editing mode
    .Editable(editable => editable.Mode(GridEditMode.InCell)) 
    .Pageable(pager => pager
        .PageSizes(true)
        .Input(true)
        .Refresh(true)
        // .Messages(messages => messages.Empty("Veri bulunamadı"))
        // .Messages(messages => messages.First("İlk Sayfa"))
        // .Messages(messages => messages.Last("Son Sayfa"))
    )
    .Sortable() // Enable sorting
    .DataSource(dataSource => dataSource
        .Ajax()
        // .Sort(sort => sort.Add("DESCRIPTION").Ascending())
        .ServerOperation(true)
        .Events(events => events.Error("onError"))
        //.AutoSync(true)            
        .Model(model =>
        {
            model.Id(product => product.ID); 
            model.Field(product => product.ID).Editable(false).DefaultValue(Guid.Empty); 
            model.Field(p => p.DESCRIPTION).Editable(false);
            model.Field(product => product.CODE).Editable(false);
        })
        .Events(events => events.Error("onError"))
        .Create(create => create.Action("AmbulanceCreate", "Administrator")) 
        .Read(read => read.Action("AmbulanceRead", "Administrator"))  
        .Update(update => update.Action("AmbulanceUpdate", "Administrator"))  
        .Destroy(destroy => destroy.Action("AmbulanceDelete", "Administrator"))                                      
    )
)

JS

function onError(e, status) {
    if (e.errors) {
        var message = "The following errors have occurred:\n";
        // var message = "Please correct the records that you enter"
        $.each(e.errors, function (key, value) {
            if (value.errors) {
                message += value.errors.join("\n");
            }
        });

        alert(message);
    }
}

Answer 1

Solution:

To pass an error message from controller to view, you need to use ModelState.

if (condition)
{
    throw new Exception("Error msg ");
}
catch (Exception exp)
{
    ModelState.AddModelError("UpdateAmbulance", exp.Message);
    var result = ModelState.ToDataSourceResult();
    return Json(result, JsonRequestBehavior.AllowGet);
}

And I added a line to the JavaScript code that rolls back the last record when an error message appears:

function onError(e, status) {
    if (e.errors) {
        var message = "\n";
        // var message = "Please correct the records that you enter"
        $.each(e.errors, function (key, value) {
            if (value.errors) {
                message += value.errors.join("\n");
            }
        });

        alert(message);
        $("#grid").data("kendoGrid").cancelChanges(); // Remove changes when error occurs.
    }
}