This is a migrated thread and some comments may be shown as answers.

Validation Issue

7 Answers 187 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Marc Perry
Top achievements
Rank 1
Marc Perry asked on 21 Jul 2016, 10:56 AM

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.

7 Answers, 1 is accepted

Sort by
0
Marc Perry
Top achievements
Rank 1
answered on 22 Jul 2016, 12:47 PM

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.

0
Nencho
Telerik team
answered on 25 Jul 2016, 11:04 AM
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
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
0
Nencho
Telerik team
answered on 26 Jul 2016, 02:29 PM
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
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
0
Marc Perry
Top achievements
Rank 1
answered on 27 Jul 2016, 03:12 AM

Hello Nencho,

Thank you for the reply.

I have attached a sample project. 

Hope to hear from you soon.

Thanks,

Marc

 

0
Nencho
Telerik team
answered on 28 Jul 2016, 03:02 PM
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
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
0
Accepted
Nencho
Telerik team
answered on 29 Jul 2016, 01:39 PM
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
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
0
Marc Perry
Top achievements
Rank 1
answered on 01 Aug 2016, 03:43 PM

Hi Nencho,

Solution helped. Thanks!

Tags
General Discussions
Asked by
Marc Perry
Top achievements
Rank 1
Answers by
Marc Perry
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or