Validation event handler e.errors is undefined

3 posts, 0 answers
  1. Matt
    Matt avatar
    14 posts
    Member since:
    Oct 2013

    Posted 31 Oct 2013 Link to this post

    I have a kendo grid with two sub grids.  The last subgrid has inline edit. (See code below for grids)

    I have the following error method.  The first error message displays: "In the error handler method."  The second alert says "object [Object]" and the third message says "undefined." Since its undefined the  
    if(e.errors) statement is not run and no errors are displayed.

    I break on the controller and the ModelState.IsValid = false and I see two items that have Errors Count = 1.  I have even hardcoded an error like: ModelState.AddModelError("From", "From is required");.

    function error_handler(e) {
        alert("In the error handler method.");
        alert(e);
        alert(e.errors);
        if (e.errors) {
            alert("Has errors.");
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                alert("Errors:" + key + value);
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    Here is the code for the grids:

    @(Html.Kendo().Grid<HtramDivision>()
        .Name("grid")
        .Columns(columns => columns.Bound(d => d.Name).Title("Divisions"))
        .ClientDetailTemplateId("templateSub")
        .HtmlAttributes(new { style = "height:800px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Divisions", "Division", new { projectID = Model.ProjectID }))
        )
            .Scrollable()
    )
     
    <script id="templateSub" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<HtramSubDivision>()
                .Name("grid_#=DivisionID#")
                .Columns(columns =>
                {
                    columns.Bound(s => s.Name).Title("SubDivisions");
     
                })
                .ClientDetailTemplateId("templateCat")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("SubDivisions", "SubDivision", new { projectID = Model.ProjectID, divisionID = "#=DivisionID#" }))
                )
                .Sortable()
                .Scrollable(sc=>sc.Height(""))
                .ToClientTemplate()
        )
    </script>
        <script id="templateCat" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<HtramProjectCategoryResults>()
              .Name("grid_#=SubDivisionID#")
              .Columns(columns =>
              {
                  columns.Bound(pcr => pcr.From).Width(80);
                  columns.Bound(pcr => pcr.To).Width(80);
     
                  columns.ForeignKey(pcr => pcr.CategoryID, (System.Collections.IEnumerable)ViewData["categories"],
                      "CategoryID", "Name").EditorTemplateName("CategoriesDropDownList").Width(300);
                     
                  columns.ForeignKey(pcr => pcr.CategoryValueID, (System.Collections.IEnumerable)ViewData["categoryValues"],
                      "CategoryValueID", "Name").EditorTemplateName("CategoryValueDropDownList").Width(300);
                     
                  columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
              })
              .ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { @title = "Add" }))
              .Editable(editable => editable.Mode(GridEditMode.InLine)) 
              .DataSource(dataSource => dataSource
                  .Ajax()       
                  .PageSize(20)
                  .Events(events => events.Error("error_handler"))
                  .Model(model =>
                  {
                      model.Id(pcr => pcr.ProjectsCategoryResultsID);
                      model.Field(pcr => pcr.ProjectsCategoryResultsID).Editable(false);
                  })
                  .Read(read => read.Action("CategoryResultsRead", "Category", new { projectID = Model.ProjectID, subDivisionID = "#=SubDivisionID#" }))
                  .Create(create => create.Action("CategoryResultsCreate", "Category"))
                  .Update(update => update.Action("CategoryResultsUpdate", "Category"))
                  .Destroy(destroy => destroy.Action("CategoryResultsDestroy", "Category"))
              )
              .Sortable()
              .Scrollable(sc=>sc.Height(""))
              .ToClientTemplate()
              )
    </script>






  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 01 Nov 2013 Link to this post

    ModelState Errors on MVC usually means a validation error on your viewmodel.
    So if I fail to send a Name value to a POST action that expects a product which definition  is
    public class Product
        {
            public int Id { get; set; }
            [Required]
            public string Name { get; set; }
        }
    then the modelstate will have an error.
    If you are getting an error on the client it means that your controller action is handling that correctly.

    Try using your F12 tools to examine the POST request to see what data you are sending to the server and what exactly is it responding with.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 04 Nov 2013 Link to this post

    Hello Matt,

    As Niko mentioned if there are ModelState errors and you are returning the DataSourceResult that accepts the ModelState dictionary then they should be serialized and send to the client (and you should be able to see them in the network tab of your browser), then the error event of the dataSource should be triggered.

    If still struggling please send us a sample project that demonstrates the case, you can use the following project as a base point instead of building it from the ground.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top