Scheduler Editor Model Valid Is False closes popup rather than keeping it open

[Abby]

Hey, On my schedule editor pop up I'd like to enforce the server side model validation, however currently, if ModelState.IsValid == false, rather than keeping the editor open and showing an error it closes.

Is there a way for the editor to stay open if the model validation returns false?

 

        public async Task<JsonResult> SchedulerCreate([DataSourceRequest] DataSourceRequest request, TaskViewModel task)
        {

            if (ModelState.IsValid)
            {
                await Persist(task);

            }
            return Json(new[] { task }.ToDataSourceResult(request, ModelState));
        }

           

[Alexander]

Hi Abby,

Thank you for taking the time to further explain the currently utilized scenario on you premises. It really helps refine what the desired outcome needs to be achieved on your end.

You are on the right track. Generally, to prevent the popup from closing, a possible recommendation woudl be to obtain the Scheduler instance in the error event handler, prevent the Scheduler from DataBinding, and display the errors as a tooltip.

Here is an example:

Scheduler:

@(Html.Kendo().Scheduler<ReservationViewModel>()
  .Name("scheduler")
  ...
  .DataSource(d => d
    .Events(e => e.Error("onError"))
    ...
  )
)

Error Handler:

<script type="text/javascript">
        function onError(args) { // The event will fire when there are Model State errors.
        var errors = args.errors; // Obtain the received errors.
        var message = "";
        var scheduler = $("#scheduler").data("kendoScheduler");
        if (errors) {
            scheduler.one("dataBinding", function (e) { // Subscribe to the "dataBinding" event of the Scheduler once.
                    e.preventDefault(); // Prevent the default event action.
                    $.each(errors, function (key, value) { // Loop through the errors.
                        if ('errors' in value) {
                            $.each(value.errors, function() {
                                message += this + "\n"; // Store the message in a variable.
                            });
                        }

                        // As long as the key matches the field name, this line of code will be displayed as validation message in the popup.
                    scheduler.editable.element.find("[data-for='" + key + "'].k-invalid-msg").replaceWith('<div class="k-widget k-tooltip k-tooltip-error" style="margin:0.5em"><span class="k-icon k-i-warning"> </span>' + message + '<div class="k-callout k-callout-n"></div></div>').show();
                });
            });
        }
    }
</script>

In addition, if custom popup template is utilized, it is important to ensure that the error messages will be displayed correctly. This can be achieved by adding a "span" element after each editor in the custom editor template:

// CustomEventTemplate.cshtml

<div class="k-edit-label">
    @(Html.LabelFor(model => model.CustomerEmail))
</div>
<div data-container-for="CustomerEmail" class="k-edit-field">
    @(Html.TextBoxFor(model => model.CustomerEmail, new { @class = "k-textbox", style = "width: 300px;", data_bind = "value:CustomerEmail" }))
    <span data-for="CustomerEmail" class="k-invalid-msg"></span>
</div>

An identical guideline is available within the following resource:

• Handling ModelState Errors

Although the article mentioned the Telerik UI for ASP.NET Core Grid, the same approach is also feasible or the incarnation of the Telerik UI for ASP.NET Core Scheduler.

For your convience, I am also attaching a runnable sample for you to review that displays the validation error message based on a invalid "email format":

I hope this helps.

Kind Regards,
Alexander
Progress Telerik