Kendo Grid Error Handling (inline and incell)

Kendo Grid Error handling inline

The grid produces an error event if any errors are returned with the datasource operations. The datasource allows a javascript event to be specified for handling the error.

Note: The errors aren't necessary exceptions and such like but could refer to server side validation that can't be handled by client validation.

Example:

//in the Kendo grid definition…
  .DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("KgridA_error_handler"))


function kgridA_error_handler(e) {  
    if (e.errors) {
        var grid = $('#kgridA').data('kendoGrid');

        //prevent the dataBinding from refreshing so the current edit remains
        grid.one("dataBinding", function (x) {
            x.preventDefault();

            var message = "";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            CBmessagebox.Warning(message);
        });
    }
}

The Prevent Default will stop the inline or incell from being removed and leave the display in the same state with all the current edit data as is. Otherwise the display refresh and entered data just entered is lost.

Deletion requests server side failures need to be handled different. The PreventDefault will not stop the item deleted from being removed from the users displayed grid even though the action was aborted server side.
To stop it a cancelChanges needs to be done on the grid. It must not be called for update, create as that will lose all entered data in the same way as not using preventdefault.
However to determine a delete was done and to only call it then need to use the grids RequestEnd event and some Javascript to handle it as follows

//in the Kendo grid definition…
  .Events(events => events.Error("kgridA_error_handler").RequestEnd("kgridA_onRequestEnd"))


function kgridA_onRequestEnd(e) {  
  if (e.type === "destroy" && e.response.Errors) {
    this.cancelChanges();
  }
}

Only done if errors are returned in the response.

References: Hello Kendo UI Part 2–Grid CRUD


Kendo Grid Incell Error handling (Batch mode)

When using the Incell grid mode there was a requirement to show any errors produced server side. Errors could be on an individual field or for the whole edit.
To handle this add the usual error event to the grid's datasource.
The error handler will highlight the border of any cell that has an error along with a popup tooltip explaining the error. If it’s a general error then a pop up message is shown

.DataSource(dataSource => dataSource
             .Ajax()
             .Events(events => events.Error("CBgrid.kgridA_incell_error_handler"))
/*
If error occurs on an inline editing grid then a list of GridInCellValidationErrorViewModel will be returned.  
Highlight and show message against each cell that the error was reported  
An ID of 0 will result in a popupmessage as not linked to any specific cell  
*/
function kgrid_incell_error_handler(e, grid) {  
    if (e.errors) {
        grid.one("dataBinding", function (x) {
            x.preventDefault();   // cancel grid rebind if error occurs
            var popupmessage = "";
            var validationMessageTmpl = kendo.template('<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; "><span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-nw"></div></div>');

            var dataSource = grid.dataSource;
            for (var i = 0; i < e.errors.length; i++) {
                var theerr = e.errors[i];
                if (theerr.Id === 0) {
                    popupmessage += theerr.ErrMsg + "\n";
                } else {
                    var item = dataSource.get(theerr.Id);   //Find the item with the TagId
                    var row = grid.table.find("tr[data-uid='" + item.uid + "']");   //use that to find the row
                    var container = row.find("td:eq(" + theerr.ColNum + ")");   //Then find the column - includes hidden fields (starting at 0)
                    container.css("border", "6px solid red");
                    $(validationMessageTmpl({ message: theerr.ErrMsg })).appendTo(container);
                }
            }
            if (popupmessage !== "") {
                CBmessagebox.Warning(popupmessage);
            }
        });
    }
}
/// <summary>
/// Defines a validation error on a specific cell on a inline edited grid. 
/// Javascript client side will display the message against the cell.
/// An ID of 0 will cause a popup message as not linked to specific cell.
/// </summary>
public class GridInCellValidationErrorViewModel {  
    public int Id { get; set; }
    public int ColNum { get; set; }
    public string ErrMsg { get; set; }
}


///sample controller at its basic
public ActionResult Update(…..) {  
 var errors = new List<GridInCellValidationErrorViewModel>(){
    new GridInCellValidationErrorViewModel() { Id=0, ColNum = 0, ErrMsg="text"} };
 return Json(new { Errors = errors });
}

Above referring to version
Telerik Kendo UI Professional Q1 2015
Telerik UI for ASP.NET MVC Q1 2015


comments powered by Disqus