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);
    }
}

I'm glad you found a solution to your problem. However, it's best to answer your own question by actually using the "post your answer" section below (i.e. not editing your question with the answer). This way it is no longer listed as unanswered. Thanks. — Brett, Mar 25 '15 at 15:54

score 4 · Accepted Answer · edited Mar 02 '22 at 06:44

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.
    }
}

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

1 Answers1