This is a migrated thread and some comments may be shown as answers.
Inline Editor Error Event
4 Answers 4 Views
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 24 Mar 2021, 06:49 PM

Is there anyway to stop the inline editor from closing if there are errors? It currently closes the editor after clicking ok on the alert.

Here is my error event handler: 

function errorHandler(e) {
    if (e.errors) {
        var message = "There are some errors:\n";
        // Create a message containing all errors.
        $.each(e.errors, function (key, value) {
            if ('errors' in value) {
                $.each(value.errors, function () {
                    message += this + "\n";
                });
            }
        });
 
        alert(message);
    }

4 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 29 Mar 2021, 01:57 PM

Hello,

The Grid documentation on handling ModelState Errors with Inline Editing demonstrates a possible approach to handle this:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/editing/inline#handling-modelstate-errors

function grid_error(e) {
      if (e.errors) {
          var message = "There are some errors:\n";
          // Create a message containing all errors.
          $.each(e.errors, function (key, value) {
              if ('errors' in value) {
                  $.each(value.errors, function () {
                      message += this + "\n";
                  });
              }
          });
          // Display the message.
          alert(message);
          // Cancel the changes.
          var grid = $("#grid").data("kendoGrid");
          grid.cancelChanges();
      }
  }

 

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
n/a
Top achievements
Rank 1
answered on 30 Mar 2021, 12:24 PM

Hi Aleksandar,

I saw that in the Grid docs, but that still closes/cancels the inline editor. I was looking for a way to keep the inline editor open.

0
Aleksandar
Telerik team
answered on 02 Apr 2021, 10:06 AM

Hi Spencer,

I checked and you are indeed correct - the example provided will indeed alert the errors but will also close the edited row. In order to prevent the edited line from closing and display the ModelState error you can update the error handler the following way:

function onError(e) {
      var errors = e.errors;
      if (errors) {
          var grid = $("#grid").data("kendoGrid");
          grid.one("dataBinding", function (e) {
              e.preventDefault();
              $.each(errors, function (key, value) {
                  var message = "";
                  if ('errors' in value) {
                      $.each(value.errors, function () {
                          message += this + "\n";
                      });
                  }

                  // As long as the key matches the field name, this line of code will display a tooltip with the error message for the field name.
                  grid.editable.element.find("[data-valmsg-for='" + key + "']").replaceWith('<div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error"><span class="k-tooltip-icon k-icon k-i-warning"></span><span class="k-tooltip-content">' + message + '</span><span class="k-callout k-callout-n"></span></div>').show();
              });
          });
      }
  }

I hope this helps.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
n/a
Top achievements
Rank 1
answered on 02 Apr 2021, 03:38 PM

Hi Aleksandar,

That worked great for the first error, but since it was replacing the data-valmsg-for element, it did not work on further errors. I ended up changing it to first remove all existing tooltips and then append the tooltip after the data-valmsg-for element.

function errorHandler(e) {
    var errors = e.errors;
    if (errors) {
        var grid = $('#grid').data('kendoGrid');
        grid.one("dataBinding", function (e) {
            e.preventDefault();
 
            $.each(errors, function (key, value) {
                var message = '';
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + '\n';
                    });
                }
 
                grid.editable.element.find('div.k-tooltip.k-tooltip-error.k-validator-tooltip.k-invalid-msg.field-validation-error').remove();
 
                grid.editable.element.find("[data-valmsg-for='" + key + "']").after('<div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error"><span class="k-tooltip-icon k-icon k-i-warning"></span><span class="k-tooltip-content">' + message + '</span><span class="k-callout k-callout-n"></span></div>').show();
            });
        });
    }
}

 

It works great now, thank you for the help.

-Spencer

Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
n/a
Top achievements
Rank 1
Share this question
or