Validation Issue

[Marc Perry]

Hi,

Trying out scheduler with custom editor. Looked and tried out examples provided, works great. But when I tried creating my own, with dropDownList, numericTextBox, etc.

Somehow validation errors shows up (which are blank) at custom editor. 

I already looked up TroubleShooting> Validation.

Below is my code based on custom-editor scheduler example:

View:

01.@using TelerikDemo2.Models;
02.@(
03.    Html.Kendo().Scheduler<SchedulerViewModel>()
04.        .Name("scheduler")
05.        .Date(DateTime.Now)
06.        .StartTime(DateTime.Now)
07.        .Height(600)
08.        .Views(
09.            views =>
10.            {
11.                views.DayView(a => a.Selected(true));
12.                views.WeekView();
13.                views.MonthView();
14.            }
15.        )
16.        .Editable(e =>
17.        {
18.            e.TemplateName("CustomEditorTemplate");
19.        })
20.        .Timezone("Etc/UTC")
21.        .DataSource(d=>d
22.            .Model(m=> {
23.                m.Id(f => f.TaskID);
24.                m.Field(f => f.Title).DefaultValue("No title");
25.                m.RecurrenceId(f => f.RecurrenceID);
26.            })
27.            .Events(e => e.Error("error_handler"))
28.            .Read("Read", "Home")
29.            .Create("Create", "Home")
30.        )
31.)
32.
33.<script type="text/javascript">
34.    $.validator.setDefaults({
35.        ignore: ""
36.    });
37.
38.    kendo.ui.validator.rules.mvcdate = function (input) {
39.        return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") != null
40.    }
41.
42.    function error_handler(e) {
43.        if (e.errors) {
44.            var message = "Errors:\n";
45.            $.each(e.errors, function (key, value) {
46.                if ('errors' in value) {
47.                    $.each(value.errors, function () {
48.                        message += this + "\n";
49.                    });
50.                }
51.            });
52.            alert(message);
53.
54.            var scheduler = $("#scheduler").data("kendoScheduler");
55.            scheduler.one("dataBinding", function (e) {
56.                //prevent saving if server error is thrown
57.                e.preventDefault();
58.            })
59.        }
60.    }
61.</script>

CustomEditorTemplate:

001.@model TelerikDemo2.Models.SchedulerViewModel
002.
003.@{
004.    ViewContext.FormContext = new FormContext();
005.}
006.
007.@functions{
008.    public Dictionary<string, object> generateDatePickerAttributes(
009.           string elementId,
010.           string fieldName,
011.           string dataBindAttribute,
012.           Dictionary<string, object> additionalAttributes = null)
013.    {
014.
015.        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();
016.
017.        datePickerAttributes["id"] = elementId;
018.        datePickerAttributes["name"] = fieldName;
019.        datePickerAttributes["data-bind"] = dataBindAttribute;
020.        datePickerAttributes["required"] = "required";
021.        datePickerAttributes["style"] = "z-index: inherit;";
022.
023.        return datePickerAttributes;
024.    }
025.}
026.
027.<div class="k-edit-label">
028.    @(Html.LabelFor(m=>m.PatientName))
029.</div>
030.<div data-container-for="patientName" class="k-edit-field">
031.    @(
032.        Html.Kendo().DropDownListFor(model=>model.PatientName)
033.            .OptionLabel("Select a Person")
034.            .DataTextField("PatientName")
035.            .DataValueField("PatientId")
036.            .DataSource(s =>
037.            {
038.                s.Read(r =>
039.                {
040.                    r.Action("GetPatients", "Home");
041.                })
042.                .ServerFiltering(true);
043.            })
044.            .HtmlAttributes(new { style = "width:100%" })
045.    )
046.    @Html.ValidationMessageFor(m=>m.PatientName)
047.</div>
048.
049.<div class="k-edit-label">
050.    @(Html.LabelFor(model => model.Attendance))
051.</div>
052.<div data-container-for="attendance" class="k-edit-field">
053.    @(Html.Kendo().DropDownListFor(model => model.Attendance)
054.        .OptionLabel("Select Attendance Type")
055.        .DataTextField("Text")
056.        .DataValueField("Value")
057.        .BindTo(new List<SelectListItem>()
058.        {
059.            new SelectListItem()
060.            {
061.                Text = "OK",
062.                Value = "1"
063.            },
064.            new SelectListItem()
065.            {
066.                Text = "NS",
067.                Value = "2"
068.            },
069.            new SelectListItem()
070.            {
071.                Text = "CX",
072.                Value = "3"
073.            }
074.        })
075.        .HtmlAttributes(new { style = "width:100%" })
076.    )
077.    @Html.ValidationMessageFor(m=>m.Attendance)
078.</div>
079.
080.<div class="k-edit-label">
081.    @Html.LabelFor(model=>model.Today)
082.</div>
083.<div data-container-for="today" class="k-edit-field">
084.    @(Html.Kendo().NumericTextBoxFor(m=>m.Today)
085.        .Min(0)
086.        .Max(100)
087.        .Value(0)
088.        .HtmlAttributes(new { style="width:100%" })
089.    )
090.    @Html.ValidationMessageFor(m => m.Today)
091.</div>
092.
093.<div class="k-edit-label">
094.    @Html.LabelFor(model => model.Copay)
095.</div>
096.<div data-container-for="copay" class="k-edit-field">
097.    @(Html.Kendo().NumericTextBoxFor(m => m.Copay)
098.        .Min(0)
099.        .Max(100)
100.        .Value(0)
101.        .HtmlAttributes(new { style = "width:100%" })
102.    )
103.    @Html.ValidationMessageFor(m => m.Copay)
104.</div>
105.
106.<div class="k-edit-label">
107.    @Html.LabelFor(model => model.ExtraService)
108.</div>
109.<div data-container-for="extraService" class="k-edit-field">
110.    @(Html.Kendo().NumericTextBoxFor(m => m.ExtraService)
111.        .Min(0)
112.        .Max(100)
113.        .Value(0)
114.        .HtmlAttributes(new { style = "width:100%" })
115.    )
116.    @Html.ValidationMessageFor(m => m.ExtraService)
117.</div>
118.
119.<div class="k-edit-label">
120.    @(Html.LabelFor(model => model.Start))
121.</div>
122.<div data-container-for="start" class="k-edit-field">
123.    @(Html.Kendo().DateTimePickerFor(model => model.Start)
124.        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))
125.
126.    @(Html.Kendo().DatePickerFor(model => model.Start)
127.        .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))
128.    @Html.ValidationMessageFor(m => m.Start)
129.</div>
130.
131.<div class="k-edit-label">
132.    @(Html.LabelFor(model => model.End))
133.</div>
134.<div data-container-for="end" class="k-edit-field">
135.    @(Html.Kendo().DateTimePickerFor(model => model.End)
136.        .HtmlAttributes(generateDatePickerAttributes(
137.            "endDateTime",
138.            "end",
139.            "value:end,invisible:isAllDay",
140.            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
141.
142.    @(Html.Kendo().DatePickerFor(model => model.End)
143.        .HtmlAttributes(generateDatePickerAttributes(
144.            "endDate",
145.            "end",
146.            "value:end,visible:isAllDay",
147.            new Dictionary<string, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
148.    @Html.ValidationMessageFor(m => m.End)
149.</div>
150.
151.<div class="k-edit-label">
152.    @(Html.LabelFor(model => model.IsAllDay))
153.</div>
154.<div data-container-for="isAllDay" class="k-edit-field">
155.    <input data-bind="checked: isAllDay" data-val="true" id="isAllDay" name="isAllDay" type="checkbox" />
156.    @Html.ValidationMessageFor(m => m.IsAllDay)
157.</div>
158.
159.<div class="k-edit-label">
160.    @(Html.LabelFor(model => model.RecurrenceRule))
161.</div>
162.<div data-container-for="recurrenceRule" class="k-edit-field">
163.    @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
164.        .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
165.    @Html.ValidationMessageFor(m => m.RecurrenceRule)
166.</div>

 

Model:

01.public class SchedulerViewModel : ISchedulerEvent
02.    {
03.        public int TaskID { get; set; }
04.        public string Title { get; set; }
05.        public string Description { get; set; }
06.
07.        private DateTime start;
08.        [Required]
09.        public DateTime Start
10.        {
11.            get
12.            {
13.                return start;
14.            }
15.            set
16.            {
17.                start = value.ToUniversalTime();
18.            }
19.        }
20.
21.        public string StartTimezone { get; set; }
22.
23.        private DateTime end;
24.        [Required]
25.        public DateTime End
26.        {
27.            get
28.            {
29.                return end;
30.            }
31.            set
32.            {
33.                end = value.ToUniversalTime();
34.            }
35.        }
36.
37.        public string EndTimezone { get; set; }
38.
39.        [Display(Name ="Recurrence")]
40.        public string RecurrenceRule { get; set; }
41.
42.        public int? RecurrenceID { get; set; }
43.        public string RecurrenceException { get; set; }
44.        public bool IsAllDay { get; set; }
45.        public int? OwnerID { get; set; }
46.
47.        [Required]
48.        [Display(Name ="Person")]
49.        public string PatientName { get; set; }
50.
51.        public string Attendance { get; set; }
52.        public int Today { get; set; }
53.        public int Copay { get; set; }
54.        public int ExtraService { get; set; }
55.
56.        public Task ToEntity()
57.        {
58.            return new Task
59.            {
60.                TaskID = TaskID,
61.                Title = Title,
62.                Start = Start,
63.                StartTimezone = StartTimezone,
64.                End = End,
65.                EndTimezone = EndTimezone,
66.                Description = Description,
67.                RecurrenceRule = RecurrenceRule,
68.                RecurrenceException = RecurrenceException,
69.                RecurrenceID = RecurrenceID,
70.                IsAllDay = IsAllDay,
71.                OwnerID = OwnerID,
72.                PatientName = PatientName,
73.                Attendance = Attendance,
74.                Copay = Copay,
75.                ExtraService = ExtraService,
76.                TodayCopay = Today
77.            };
78.        }
79.    }

What did I do wrong? Help please? Thanks.

[Marc Perry]

To make it simple, i isolated DropDownList (retained datasource, etc) and ran the project. Still a small validation baloon with exclamation mark (without message) shows up at DropDownList when i try to select one of the options.

 

Am i missing some configuration in CustomEditorTemplate? Please help. Thanks.

[Nencho]

Hello Marc,

We are currently investigating your implementation in to pin down the reason for the experienced issue. I am afraid, however, that we will need some more time. Once we have further information on the matter, I will immediately update you in this thread.

Regards,
Nencho
Telerik by Progress

[Nencho]

Hello Marc,

I am afraid that after further investigation and attempt to replicate the described issue, base on the provided information and code snippet, I was unable to locally replicate the problem. I assume that you had followed the approach demonstrated in [this code library]

Could you please submit a runnable sample, demonstrating the behavior at your end, so we could locally investigate it and troubleshoot it for you.

Regards,
Nencho
Telerik by Progress

[Marc Perry]

Hello Nencho,

Thank you for the reply.

I have attached a sample project. 

Hope to hear from you soon.

Thanks,

Marc

 

[Nencho]

Hello Marc,

Indeed the demonstrated behavior was locally replicated and we are still investigating it. Once we have further information on the matter, I will immediately update you in this thread.

Regards,
Nencho
Telerik by Progress

[Nencho]

Hello Marc,

Due to the complexity of the CustomEditor for the Scheduler, indeed there is a problem with the validation for the DataPickers, when implementing it in the following manner:

kendo.ui.validator.rules.mvcdate = function (input) {
    return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") != null
}

The above validates all widgets on the form and causes the inability to submit the form.

This is why, I would suggest you to use the following for the datepickers validation:

<script type="text/javascript">
    kendo.ui.validator.rules.mvcdate = function (input) {
        if (input.attr("data-role") == "datepicker" || input.attr("data-role") == "datetimepicker") {
            return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") !== null;
        }
        return true;
    };

    kendo.ui.validator.messages.mvcdate = function (input) {
        return "Enter a valid date!";
    };
</script>

Hope this would help.

Regards,
Nencho
Telerik by Progress

[Marc Perry]

Hi Nencho,

Solution helped. Thanks!