Error Handling

[Joel]

I'm failing somewhere in my load of a TreeList.  I added a simple error handler like this:

<script id="icon-template" type="text/x-kendo-template">
    <div class='group-photo'
         style='background-image: url(@Url.Content("~/images/32/neighbourhood.png"));'></div>
    <div class='group-name'>#: Name #</div>
</script>

<div class="demo-section k-content">
    <h4>Customer Groups</h4>
    @(Html.Kendo().TreeList<GsiPortal.Models.Group>()
                  .Name("treelist")
                  .Columns(columns =>
                  {
                      columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
                      columns.Add().Field(e => e.Description);
                      columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
                      columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new {style = "text-align: center;"});
                      columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });
                      columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });
                  })
                  .Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))
                  .Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
                  .DataSource(dataSource => dataSource
                      .ServerOperation(false)
                      .Create(create => create.Action("CreateJson", "Groups"))
                      .Read(read => read.Action("AllJson", "Groups")
                          .Data("groupsRead"))
                      .Update(update => update.Action("UpdateJson", "Groups"))
                      .Destroy(delete => delete.Action("DestroyJson", "Groups"))
                      .Model(m =>
                      {
                          m.Id(f => f.Id);
                          m.ParentId(f => f.ParentId);
                          m.Expanded(true);
                          m.Field(f => f.Name);
                          m.Field(f => f.Description);
                          m.Field(f => f.AddTimestamp).Editable(false);
                      })
                      .Events(x => x.Error("onError"))
                  ))

    <script>
        var groupId = Number(@(ViewBag.GroupId));

        function groupsRead() {
            return { id: groupId };
        }

        function onError(e) {
            alert(e.toString());
        }


    </script>

 

However, this doesn't give me any clue as to what object type is there to pull the message from.  What is the recommended way of doing Error Handling with this control that will give me some actionable information?

Thanks, Joel

[Georgi]

Hello Joel,

Generally speaking the the event object of the error event contains information about the occurred error. The handler is triggered when either the response object contains a populated Errors property or when the response has an error status code (4xx, 5xx). If the Errors property of the response object is populated, the errors property of the event object will contain the error message.

e.g.

// populate errors property on server

  return Json(new { Errors="Some custom error message!" }, JsonRequestBehavior.AllowGet);

// display error message from error event handler

    function onError(e) {
        alert(e.errors) // will alert the custom error message
    }

Regards,
Georgi
Progress Telerik

[TJim]

In Telerik 2019.1.220, the treelist doesn't have an error event: https://i.imgur.com/6Qjgg0N.png

Complete treelist code:

@(Html.Kendo().TreeList<REPO.Data.Models.OrgStructure>()
            .Name("treelist")
            .Toolbar(toolbar => toolbar.Create().Text("Add " + sessionUser.Level1Name))
            .Columns(columns =>
            {
                columns.Add().Field(e => e.LevelName).Width(40);
                columns.Add().Field(e => e.Name).Width(100);
                columns.Add().Field(e => e.Level).Width(26);
                columns.Add().Width(100).Command(c =>
                {
                    c.CreateChild().Text("Add child");
                    c.Edit();
                    c.Destroy();
                })
                        .HtmlAttributes(new {style = "text-align: center;"});
            })
            .Editable()
            .Sortable()
            .Filterable()
            .DataSource(dataSource => dataSource
                .Create(create => create.Action("Create", "OrgStructure"))
                .Read(read => read.Action("All", "OrgStructure").Data("treelistParam"))
                .Update(update => update.Action("Update", "OrgStructure"))
                .Destroy(delete => delete.Action("Destroy", "OrgStructure"))
                .ServerOperation(false)
                .Model(m =>
                {
                    m.Id(f => f.NodeId);
                    m.ParentId(f => f.ParentNodeId).DefaultValue(sessionUser.DepartmentId);
                    m.Field(f => f.FiscalYear).DefaultValue(sessionUser.CurrentFiscalYearId);
                    m.Field(f => f.CreatedDateTime);
                    m.Field(f => f.DepartmentCode);
                    m.Field(f => f.Acronym);
                    m.Field(f => f.DepartmentId).DefaultValue(sessionUser.DepartmentId);
                    m.Field(f => f.RequiresChildSelect);
                    m.Expanded(false);
                    m.Field(f => f.Name);
                    m.Field(f => f.Level).Editable(false);
                    m.Field(f => f.LevelName).Editable(false);
                    m.Field(f => f.ParentNodeId);
                })

            )
            .Height(505)
.Events(events =>
{
    events.FilterMenuOpen("onFilterMenuOpen");
    events.DataBound("dataBound");
    events.DataBinding("dataBinding");
    events.Save("onSave");
    //events.Remove("saveExpandState");
    events.Collapse("saveExpandState");
    events.Expand("saveExpandState");
    events.BeforeEdit("saveExpandState");
    events.Cancel("onCancel");
    events.Error("");
})
)

 

[TJim]

(btw I made this same statement in premium support but I think many solutions need to be public so we don't wait an entire day for an answer)

[Georgi]

Hi,

The Error event is an event of the DataSource - not the TreeList. Therefore you should change the configuration as follows:

.DataSource(dataSource => dataSource
    .Events(e=> e.Error("onError"))
    .Create(create => create.Action("Create", "OrgStructure"))
    .Read(read => read.Action("All", "OrgStructure").Data("treelistParam"))
    .Update(update => update.Action("Update", "OrgStructure"))
    .Destroy(delete => delete.Action("Destroy", "OrgStructure"))
    .ServerOperation(false)
    .Model(m =>
    {
        m.Id(f => f.NodeId);
        m.ParentId(f => f.ParentNodeId).DefaultValue(sessionUser.DepartmentId);
        m.Field(f => f.FiscalYear).DefaultValue(sessionUser.CurrentFiscalYearId);
        m.Field(f => f.CreatedDateTime);
        m.Field(f => f.DepartmentCode);
        m.Field(f => f.Acronym);
        m.Field(f => f.DepartmentId).DefaultValue(sessionUser.DepartmentId);
        m.Field(f => f.RequiresChildSelect);
        m.Expanded(false);
        m.Field(f => f.Name);
        m.Field(f => f.Level).Editable(false);
        m.Field(f => f.LevelName).Editable(false);
        m.Field(f => f.ParentNodeId);
    })

)

Regards,
Georgi
Progress Telerik

[Marconi]

Hello,

I try to send to the view a database related error from the data source of a Grid. I am using this code in the controller:

  public ActionResult Create_Employee(EmployeeViewModel employee)
        {
            try
            {
                if (employee != null && ModelState.IsValid)
                {
                    var target = new Employees();
                    target.FirstName = employee.FirstName;
                    target.LastName = employee.LastName;
                    target.Title = employee.Title;
                    target.Country = employee.Country;
                    target.City = employee.City;
                    context.Employees.Add(target);
                    context.SaveChanges();

                    employee.EmployeeID = target.EmployeeId;
                }

                return Json(new[] { employee }.ToDataSourceResult(new DataSourceRequest(), ModelState));
            }
            catch(Exception e)
            {
                return Json(new { Errors = "Employee has not been saved in the database due to errors" });
            }
        }

 

and this code in the view:

 

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

 

The issue is that the Grid keeps waiting when an error happens but it doesn't show any alert errors.

Hope much appreciated.

[Georgi]

Hello Marconi,

The current script does not alert the error message as it expects the Errors property of the response to be a collection of objects with an `errors` field which is a collection of error messages.

If you modify the controller as shown below, the script will alert the error message:

  return Json(new { Errors =  new[] { new { errors = new[] { "Employee has not been saved in the database due to errors" } } }  });

Regards,
Georgi
Progress Telerik