Inline Editor Error Event

[n/a]

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

[Aleksandar]

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

[n/a]

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.

[Aleksandar]

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

[n/a]

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