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.