Validation Issue

8 posts, 1 answers
  1. Marc Perry
    Marc Perry avatar
    4 posts
    Member since:
    Jul 2016

    Posted 21 Jul Link to this post

    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.

  2. Marc Perry
    Marc Perry avatar
    4 posts
    Member since:
    Jul 2016

    Posted 22 Jul in reply to Marc Perry Link to this post

    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.

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 25 Jul Link to this post

    Hello Marc,

    We are currently investigating your implementation in attempt 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
  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 26 Jul Link to this post

    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
  6. Marc Perry
    Marc Perry avatar
    4 posts
    Member since:
    Jul 2016

    Posted 26 Jul Link to this post

    Hello Nencho,

    Thank you for the reply.

    I have attached a sample project. 

    Hope to hear from you soon.

    Thanks,

    Marc

     

  7. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 28 Jul Link to this post

    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
  8. Answer
    Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 29 Jul Link to this post

    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
  9. Marc Perry
    Marc Perry avatar
    4 posts
    Member since:
    Jul 2016

    Posted 01 Aug in reply to Nencho Link to this post

    Hi Nencho,

    Solution helped. Thanks!

Back to Top
UI for ASP.NET MVC is VS 2017 Ready