Kendo Grid Edit mode popup - Error Handling

[Leigh Barratt]

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([DataSourceRequest] DataSourceRequest 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!

[Rosen]

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

[Leigh Barratt]

Thanks Rosen, I will have a go.

[David A.]

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.

[Rosen]

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

[David A.]

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

[Chad]

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?

[Rosen]

Hi Chad,

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

Greetings,
Rosen
the Telerik team

[Chad]

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

[Shravan]

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

[Shravan]

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

[Justin]

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');

...

}

[Justin]

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?

[Rosen]

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

[Dan.A]

Try this:

e.sender.options.table.context.id

[Evgeniy Ovcharenko]

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.

[Rosen]

Hello Evgeniy,

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

Regards,
Rosen
the Telerik team

[Doug]

The CodeLibrary project referenced by Rosen above works great and solved my problem with popup error validations.  Thanks Rosen!