Kendo Grid Edit mode popup - Error Handling

17 posts, 1 answers
  1. Leigh Barratt
    Leigh Barratt avatar
    3 posts
    Member since:
    Jun 2012

    Posted 16 Sep 2012 Link to this post

    Hi All,

    I am having issues with kendo grid in popup mode. When it submits the create/update request via ajax and if there is any error occurs I don't want to loose changes in the popup edit window that user has entered.  But it just closes the popup window on click of Update button.

    Is there a way to not to close the popup window on press of update button in case of any error occurs on the server side.

    Client side Code

        //show server errors if any
        function error_handler(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);
            }
        }


    @(Html.Kendo().Grid(Model)
        .Name("SchoolGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.SchoolID).Width("80px");
            columns.Bound(p => p.Name);
            columns.Bound(p => p.Campus).Width("90px");
            columns.Bound(p => p.StateCode).Width("90px");
            columns.Bound(p => p.SectorCode).Width("95px");
            columns.Bound(p => p.MDISurveyStartDate).ClientTemplate("#= (MDISurveyStartDate == null) ? 'Not Set' : kendo.toString(MDISurveyStartDate, 'dd/MM/yyyy') #").Width("90px");
            columns.Bound(p => p.MDISurveyEndDate).ClientTemplate("#= (MDISurveyEndDate == null) ? 'Not Set' : kendo.toString(MDISurveyEndDate, 'dd/MM/yyyy') #").Width("90px");
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width("190px").HtmlAttributes(new { style = "text-align:center" });
        })
        .ToolBar(tb => tb.Create().Text("Add New School"))
        .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditSchool").Window(w => w.Title("Add/Edit School Details").Name("editWindow").Width(600)))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.ClientID))
            .Events(e => e.Error("error_handler"))
            .Read("Read_Schools""School")
            .Update("Update""School")
            .Create("Create""School")
            .Destroy("Destroy""School")
        )
    )


    Server Side Code:-

            [HttpPost]
            public ActionResult Update([DataSourceRequestDataSourceRequest request, School school)
            {
                try
                {
                    if (ModelState.IsValid)
                    {
                        string errMsg = "";
                        if (!_Service.UpdateSchool(school, out errMsg))
                            ModelState.AddModelError("UpdateSchool", errMsg);
                    }
                }
                catch (Exception ex)
                {
                    ModelState.AddModelError("UpdateSchool", ex.Message);
                }
     
                return Json(ModelState.ToDataSourceResult());
            }

    Thanks!

  2. Answer
    Rosen
    Admin
    Rosen avatar
    2570 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2012 Link to this post

    Hi Leigh,

    Please refer to this CodeLibrary project for a demonstration of how to handle the server-side validation errors. Note that in order this approach to work Q2 2012 SP1 version of KendoUI should be used.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. Leigh Barratt
    Leigh Barratt avatar
    3 posts
    Member since:
    Jun 2012

    Posted 18 Sep 2012 Link to this post

    Thanks Rosen, I will have a go.

  4. David A.
    David A. avatar
    120 posts
    Member since:
    Aug 2008

    Posted 21 Sep 2012 Link to this post

    Rosen,

    Is it possible to get a reference to the grid itself from args.sender as per the sample project you have?  I would like to make this a global function so I dont have to wire it up for every grid.

    Thanks,
    David A.

  5. Rosen
    Admin
    Rosen avatar
    2570 posts
    Member since:
    Sep 2012

    Posted 21 Sep 2012 Link to this post

    Hello David,

    I'm afraid that this is not possible. The error event is a DataSource event, thus it "sender" is the DataSource component. 

    However, you could call the error function from within the error handler and change its arguments or context to be the grid:

    .DataSource(dataSource => dataSource
           .Ajax()
           //...
           .Events(events => events.Error(
               @<text>
                function(e) {                
                    $.proxy(error, $("#Grid").data("kendoGrid"))(e);
                }
            </text>))
       )

    function error(args) {       
        if (args.errors) {
            var grid = this; // this is the Grid widget
            grid.one("dataBinding", function (e) {  
               //...                  
            });
        }
    }


    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  6. David A.
    David A. avatar
    120 posts
    Member since:
    Aug 2008

    Posted 21 Sep 2012 Link to this post

    Thanks Rosen.  Worked perfectly!  Good call on the $proxy.

  7. Chad
    Chad avatar
    15 posts
    Member since:
    May 2011

    Posted 02 Oct 2012 Link to this post

    I have looked through the sample that is recommended and have my own demo that, as far as I can tell, is set up in the same way, but my pop-up dialog closes before the error event even gets hit. Is there something specific I need to do to prevent the pop-up from closing before the error handler gets triggered?

  8. Rosen
    Admin
    Rosen avatar
    2570 posts
    Member since:
    Sep 2012

    Posted 02 Oct 2012 Link to this post

    Hi Chad,

    You should make sure that Q2 2012 SP1 version of KendoUI is used.

    Greetings,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  9. Chad
    Chad avatar
    15 posts
    Member since:
    May 2011

    Posted 02 Oct 2012 Link to this post

    I've updated and that fixed it. Thank you for your quick response.

  10. Shravan
    Shravan avatar
    5 posts
    Member since:
    Feb 2012

    Posted 16 Oct 2012 Link to this post

    Hi,
    This solution is not working if pop up is a Edittemplate, can you please suggest or help on how can this be fixed.

    Thanks

  11. Shravan
    Shravan avatar
    5 posts
    Member since:
    Feb 2012

    Posted 24 Oct 2012 Link to this post

    Hi,
    This solution is not working if pop up is a Edittemplate, can you please suggest or help on how can this be fixed.

    Thanks

  12. Justin
    Justin avatar
    4 posts
    Member since:
    Mar 2012

    Posted 06 Nov 2012 Link to this post

    Replying to David A.'s post above on how to get the grid's id attribute when you are at an onError event handler:

    You can apparently get it from the e.sender.options.table.parent() selector. At least this worked for my case.

    Something similar to this:

    function onError(e) {
        var gridId = $(e.sender.options.table.parent()).attr('id');
    ...
    }

  13. Justin
    Justin avatar
    17 posts
    Member since:
    May 2012

    Posted 18 Jan 2013 Link to this post

    i am using the latest version and cannot get this to work. I am using an EditTemplate like Shravan.

    Here is my event declaration

    .Events(events => events.Error(@<text>
            function(e) {               
                   $.proxy(fieldError, $("#Field").data("kendoGrid"))(e);
           }
    </text>))
    And my javascript function.
    fieldError: function (args) {
        alert(args.errors);
        var grid = this;
     
        var message = "<ul>";
     
        grid.one("dataBinding", function (e) {
            e.preventDefault(); // cancel grid rebind if error occurs                           
     
            for (var error in e.errors) {
                alert(error);
                message += "<li>" + error + "</li>";
            }
        });
        message += "</ul>";
     
    }
    The fieldError function is getting called but args.errors is undefined and the dataBinding event never fires. The "grid" variable is set correctly so the grid is getting proxy'd correctly.

    Anyone else have similiar issues?

  14. Rosen
    Admin
    Rosen avatar
    2570 posts
    Member since:
    Sep 2012

    Posted 21 Jan 2013 Link to this post

    Hello Justin,

    You should verify that you have Html.ValidationMessageFor set in the EditorTemplate as well as your controller does return the ModelState errors, as shown in the CodeLibrary I have referred to.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  15. Dan.A
    Dan.A avatar
    1 posts
    Member since:
    Apr 2012

    Posted 27 Mar 2013 Link to this post

    Try this:

    e.sender.options.table.context.id


  16. Evgeniy Ovcharenko
    Evgeniy Ovcharenko avatar
    3 posts
    Member since:
    Sep 2004

    Posted 17 Apr 2013 Link to this post

    Hello Rosen,

    I have the same issue as Justin has.
    I double checked that Html.ValidationMessageFor set in the EditorTemplate and the controller returns the ModelState error. I have the following javascript error:
    "Error: Syntax error, unrecognized expression: <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="Name" data-valmsg-for="Name" id="Name_validationMessage">
                <span class="k-icon k-warning"> </span>Password and Compare Password must match!<div class="k-callout k-callout-n"></div></div>"

    Please advice how to fix it.

  17. Rosen
    Admin
    Rosen avatar
    2570 posts
    Member since:
    Sep 2012

    Posted 22 Apr 2013 Link to this post

    Hello Evgeniy,

    Could you please provide a small sample in which this error can be observed locally?

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Back to Top