Grid events - errors

[Frederick]

I'm attempting to add a handler for errors to an MVC grid wrapper.  My grid gets its data and does editing via AJAX.  That is working properly.  I'm now trying to add support for authorization/roles so I want to be able to show the user a message when they don't have access and, for example, click on the Edit button.

All the samples I've seen use events.error.  So I created a grid as below with a javascript function as below.  However, when trying to show the view in the browser I get a compilation error in the browser "'Kendo.Mvc.UI.Fluent.GridEventBuilder' does not contain a definition for 'Error' and no extension method 'Error' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.GridEventBuilder' could be found (are you missing a using directive or an assembly reference?)"

I'm sure I must be missing something simple.  Can anyone offer assistance in where I've gone off the tracks?  At least as helpful, can you point me to the correct spot in the documentation to find this information?

@(Html.Kendo().Grid<KendoMVC4.Models.Power>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
                    .Ajax() // Specify that ajax binding is used
                    .Read(read => read.Action("ExecutedPowers_Index", "Powers")) // Set the action method which will return the data in JSON format
                    .PageSize(10)
                    .Model(model => model.Id(p => p.ID))
                    .Create(update => update.Action("Power_Create", "Powers"))
                    .Update(update => update.Action("Power_Update", "Powers"))
                    .Destroy(update => update.Action("Delete", "Powers"))
                 )
                .Columns(columns =>
                {
                    columns.Bound(p => p.PowerNumber);
                    columns.Bound(p => p.Status);
                    columns.Command(command => { command.Edit(); command.Destroy();  }).Width(200);
                    columns.Command(command => { command.Custom("Forfeit").Click("showForfeit"); });

                })
                .Pageable()
                .Sortable()
                .ToolBar(toolbar => toolbar.Create())
                                .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("PowerEditor")
                                    .Enabled(User.IsInRole("PowerEditor"))
                                    .Window(w => w.Title("Edit Power Details"))
                                    .Window(w => w.Width(560))
                                    .Window(w => w.Height(750))
                                 )
                .ClientDetailTemplateId("client-powerDetails")
                .Events(events => events.Error(@<text>function(e) { $.proxy(error, $("#Grid").data("kendoGrid"))(e); }</text>))
    
                )

<script type="text/javascript">
function grid_errorHandler(e) {
        if (e.errors) {
            var message = "Errors:\n\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n\n";
                    });
                }
            });
            alert(message);
        }
        else if (e.xhr.status == 401) {
            //show message
            var grid = $("#grid").data("kendoGrid");
            grid.table.on("click", "tbody > tr", function (e) {
                e.stopPropagation();
            });
            grid.element.find("> .k-grid-toolbar").hide();
        }
    }
</script>

[Daniel]

Hello Frederick,

error is a dataSource event so you should use the DataSource Events configuration method to specify the handler.

.DataSource(dataSource => dataSource // Configure the grid data source
    .Ajax() // Specify that ajax binding is used
    .Events(events => events.Error("grid_errorHandler"))
    .Read(read => read.Action("ExecutedPowers_Index", "Powers")) // Set the action method which will return the data in JSON format
    .PageSize(10)
    .Model(model => model.Id(p => p.ID))
    .Create(update => update.Action("Power_Create", "Powers"))
    .Update(update => update.Action("Power_Update", "Powers"))
    .Destroy(update => update.Action("Delete", "Powers"))
)

Regards,
Daniel
Telerik

[Thottempudi]

i am not receiving the errors Messages.....
View code....
 @(Html.Kendo().Grid<PeopleTray.Models.Admin.CorporateWorkgroupModel>()
                .Name("gridWorkgroup")
                .Columns(columns =>
                {
                    columns.Command(command => { command.Edit().Text("Edit").HtmlAttributes(new { title = "Edit" });  command.Destroy().Text("Delete").HtmlAttributes(new { title = "Delete" }); }).Width(160);
                    columns.Bound(p => p.Name).HtmlAttributes(new {required="true"});
                    columns.Bound(p => p.Description);
                    columns.Bound(w => w.Id).Hidden();                
                })
                .ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { title="Add" }))
                .Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))               
                .Pageable(pager => pager.Refresh(true))
                .Sortable(sortable => sortable.AllowUnsort(true))
                .Events(e => e.Edit("onEdit")) 
                .Events(e => e.Save("onSave"))                                                  
                .HtmlAttributes(new { style = "width: 70%;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                            .Events(events => events.Error("grid_errorHandler")) // Handle the "error" event
                    .PageSize(10)
                    .Model(model =>
                    {
                        model.Id(ds => ds.Id);
                    })
                    .Create(create => create.Action("Workgroup_Insert", "CorporateAdmin", new { companyId = Model.CompanyId }))
                    .Read(read => read.Action("Workgroups_Read", "CorporateAdmin", new { companyId = Model.CompanyId }))
                    .Update(update => update.Action("Workgroup_Update", "CorporateAdmin"))
                    .Destroy(destroy => destroy.Action("Workgroup_Delete", "CorporateAdmin"))
                )
            )
 function grid_errorHandler(e) {
        if (e.errors) {
            alert("Error");
            var message = "Errors:\n\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n\n";
                    });
                }
            });
            alert(message);
        }
        else if (e.xhr.status == 401) {
            //show message
            //var grid = $("#grid").data("kendoGrid");
            var grid = $("#gridWorkgroup").data("kendoGrid");
            grid.table.on("click", "tbody > tr", function (e) {
                e.stopPropagation();
            });
            grid.element.find("> .k-grid-toolbar").hide();
        }
    }
controller code...
model.ChangedBy = Request.UserHostName;
            if (model.Name != null)
            {
                try
                {
                    var workgroups = AdminService.GetCorporateWorkgroupsModel(model.CompanyId);
                    for (int r = 0; r < workgroups.Count; r++)
                    {
                        if (workgroups[r].Name.ToLower() == model.Name.Trim().ToLower() && workgroups[r].Id.ToString() != model.Id.ToString())
                        {
                            ModelState.AddModelError("grid_error", "The workgroup already exists. Please modify or delete your entry.");
                            return Json(new[] { model }.ToDataSourceResult(request, ModelState));
                        }
                    }
                    AdminService.UpdateCorporateWorkgroup(model);
                    return Json(new[] { model }.ToDataSourceResult(request, null), JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    return null;
                }
            }
            return null;

[Daniel]

Hello,

If the following result is returned from the action method then the message should be shown as expected:

return Json(new[] { model }.ToDataSourceResult(request, ModelState));

and at least when I tested with the provided code on my side, the error event was triggered and the message was shown. Could you check what is the response from the server in the network traffic in this case? It should indicate what is causing the problem.

Regards,
Daniel
Telerik