Handling Errors on Insert (Pop-up Edit form)

9 posts, 1 answers
  1. AP
    AP avatar
    191 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
    2207 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. AP
    AP avatar
    191 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.
  4. Oliver
    Oliver avatar
    6 posts
    Member since:
    Sep 2014

    Posted 11 Apr 2016 Link to this post

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

    Posted 12 Apr 2016 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
  6. Oliver
    Oliver avatar
    6 posts
    Member since:
    Sep 2014

    Posted 19 Apr 2016 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

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2207 posts

    Posted 19 Apr 2016 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
  8. Graham
    Graham avatar
    6 posts
    Member since:
    Mar 2017

    Posted 05 May Link to this post

    Hi

    I am trying to follow the example Handling server-side validation errors during pop-up editing UI for ASP.NET MVC Resources.

    In the example the error relates to a specific field.  I would like to use a kendo notification in the error style if for example a record has been deleted that another user is trying to edit.  For example "Record no longer exists".  

    I have an example on a change password form but I cannot replicate it on a grid popup editor.

  9. Preslav
    Admin
    Preslav avatar
    123 posts

    Posted 09 May Link to this post

    Hi Graham,

    A possible solution might be using a custom popup editor for the grid.

    http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/custom-popup-editor

    In the popup, based on a condition you could display the notification. I believe that these examples could assist you in implementing this functionality:

    http://demos.telerik.com/aspnet-mvc/notification/templates

    Regards,
    Preslav
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top