This is a migrated thread and some comments may be shown as answers.

Kendo Grid Edit mode popup - Error Handling

17 Answers 2142 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Leigh Barratt
Top achievements
Rank 1
Leigh Barratt asked on 17 Sep 2012, 12:00 AM
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!

17 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 18 Sep 2012, 08:30 AM
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!
0
Leigh Barratt
Top achievements
Rank 1
answered on 18 Sep 2012, 11:25 PM
Thanks Rosen, I will have a go.
0
David A.
Top achievements
Rank 1
answered on 21 Sep 2012, 06:07 AM
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.
0
Rosen
Telerik team
answered on 21 Sep 2012, 06:49 AM
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!
0
David A.
Top achievements
Rank 1
answered on 21 Sep 2012, 08:39 PM
Thanks Rosen.  Worked perfectly!  Good call on the $proxy.
0
Chad
Top achievements
Rank 1
answered on 02 Oct 2012, 02:47 PM
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?
0
Rosen
Telerik team
answered on 02 Oct 2012, 03:22 PM
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!
0
Chad
Top achievements
Rank 1
answered on 02 Oct 2012, 03:39 PM
I've updated and that fixed it. Thank you for your quick response.
0
Shravan
Top achievements
Rank 1
answered on 16 Oct 2012, 05:19 PM
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
0
Shravan
Top achievements
Rank 1
answered on 24 Oct 2012, 08:30 PM

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

0
Justin
Top achievements
Rank 1
answered on 06 Nov 2012, 07:48 PM
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');
...
}
0
Justin
Top achievements
Rank 1
answered on 18 Jan 2013, 02:47 PM
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?
0
Rosen
Telerik team
answered on 21 Jan 2013, 11:51 AM
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!
0
Dan.A
Top achievements
Rank 1
answered on 27 Mar 2013, 01:01 PM
Try this:
e.sender.options.table.context.id


0
Evgeniy Ovcharenko
Top achievements
Rank 1
answered on 17 Apr 2013, 08:16 PM
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.
0
Rosen
Telerik team
answered on 22 Apr 2013, 07:12 AM
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!
0
Doug
Top achievements
Rank 1
Veteran
answered on 01 Jul 2017, 03:13 PM
The CodeLibrary project referenced by Rosen above works great and solved my problem with popup error validations.  Thanks Rosen!
Tags
Grid
Asked by
Leigh Barratt
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Leigh Barratt
Top achievements
Rank 1
David A.
Top achievements
Rank 1
Chad
Top achievements
Rank 1
Shravan
Top achievements
Rank 1
Justin
Top achievements
Rank 1
Justin
Top achievements
Rank 1
Dan.A
Top achievements
Rank 1
Evgeniy Ovcharenko
Top achievements
Rank 1
Doug
Top achievements
Rank 1
Veteran
Share this question
or