Kendo Grid Mvc - Unable to display custom error message on watch page

Question

I am using kendo grid in my MVC project. The problem is that the error message cannot be displayed on the watch page. When I track JSON data using the Google developer tools, I can view the error data correctly:

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

The error message is passed to the result parameter on 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 watch 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);
     }
 }

----- SOLVED -----

solved. To send an error message from the controller for viewing, you must 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 js 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.
     }
 }