Handling Errors on Insert (Pop-up Edit form)

7 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 01 Feb 2013 Link to this post

    I've got a grid, with a pop-up edit form, where there is some controller level validation applied before the record is saved.

    The grid is defined:-
    @(Html.Kendo().Grid<CMS_2013.Models.SeasonalProfile>()
    .Name("Grid")
    .Events(e=>e.Edit("onEdit"))
    .Columns(columns=>
    {
     
        columns.Bound(o => o.ID);
        columns.Bound(o => o.Profile_Code);
        columns.Bound(o => o.ProfileType);
        columns.Bound(o => o.Description);
        columns.Bound(o => o.Site);
        columns.Bound(o => o.PATCLASS);
        columns.Bound(o => o.Specialty);
         
        columns.Command(command => { command.Edit(); command.Destroy(); });
     
          
        })
      .ToolBar(commands=>commands.Create())
       .Editable(editable=>editable
            .Mode(GridEditMode.PopUp))
     
     
        .DataSource(dataSource=>dataSource
            .Ajax()
            .Model(m=>m.Id(p=>p.ID))
            .Events(events => events.Error("error"))
            .PageSize(10)
             
             
            .Read(read=>read.Action("ReadProfiles","Profiles"))
            .Create(create=>create.Action("InsertProfile","Profiles"))
            .Update(update=>update.Action("UpdateProfile","Profiles"))
            .Destroy(delete=>delete.Action("DeleteProfile","Profiles"))
            )
            .Pageable()
            .Sortable()
            .Filterable()
       
           )
    The error handler is:-
    function error(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);
              
           }
     
       }

    This works fine, displaying the error message if the validation fails. However, I have two problems:-

    1. After displaying the alert, the edit form is closed, so the user can't correct their error - they have to start all over again
    2. Even though the record hasn't been saved - a new record is displayed in the grid, and only after refreshing the grid does it disappear.

    How can I solve these two issues?

    Thanks

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 01 Feb 2013 Link to this post

    Hello Andrew,

     
    Please take a look at this code library about Handling server-side validation errors during pop-up editing. It covers a case, similar to yours.

    Let me know if this solves your issue.

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 04 Feb 2013 Link to this post

    Thanks for this.

    Using the error code as per the example, it stopped the edit form closing, but no message was displayed.

    So I just altered my original code to:-

    function error(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";
                       });
                   }
               });
     
               var grid = $("#Grid").data("kendoGrid");
               grid.one("dataBinding", function (e) {
                   e.preventDefault();   // cancel grid rebind if error occurs  
               });
     
     
               alert(message);
              
           }
     
       }
    This works fine now.
  5. Oliver
    Oliver avatar
    6 posts
    Member since:
    Sep 2014

    Posted 11 Apr Link to this post

    This no longer works. It still closes the popup. What can I do to prevent this now?
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 12 Apr Link to this post

    Hello Oliver,

    We are not aware of issues with the mentioned approach. You could find the example with a more recent Kendo UI version on the following documentation page.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Oliver
    Oliver avatar
    6 posts
    Member since:
    Sep 2014

    Posted 19 Apr in reply to Dimiter Madjarov Link to this post

    OK, I figured out the reason. I had this code in addition:

     

    function onGridDataSourceRequestEnd(e) {
        if (e.type == "update" || e.type == "create") {
           // this.read();
        }
    }

     

    Removing it, keeps the popup open

  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 19 Apr Link to this post

    Hello Oliver,

    Thanks for the update.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready