Custom editor with custom validation

[AKROS]

Hello,

I created a custom editor for my Scheduler, and I now need to add some custom validation.
My goal is to ensure that:

1) The start and end date must be in the same day (cannot spawn multiple days)
2) The smaller possible unit is 15 min. So the valid hours are xx:00, xx:15, xx:30 and xx:45.

A valid Input would for example be:
from 01.01.2000 11:15
to 01.01.2000 22:45

Invalid examples would be:
from 01.01.2000 11:15
to 02.01.2000 08:45 (not the same day)

from 01.01.2000 11:23 (not multiple of 15min)
to 01.01.2000 14:30

How can I achieve this behavior?
Cheers

[Vladimir Iliev]

Hello,

If you would like to have validation on the client side than you can simply extend the Scheduler build-in validation rules with custom ones as demonstrated below:

//place this code before the Scheduler init code, e.g. in header
(function($, kendo) {
    //Extending the Scheduler build in validator:
    $.extend(true, kendo.ui.validator, {
        rules: {
            // Add custom validation rule to validate category field
            category: function(input, params) {

                //note: custom validation rules are executed against all editors in edit template
                if (input.is("[name='category']")) {
                    //Note: You can access the Scheduler object here to search for another events
                    //in same date range with same category selected.
                    //e.g.:
                    //var scheduler = $("#scheduler").getKendoScheduler();
                    //var start = new Date(); //get the event date
                    //var end = kendo.date.addDays(start, 1);
                    //scheduler.occurrencesInRange(start, end);
                    //
                    //then loop throught the events and check for another events with same category


                    //example validation logic - replace the logic with desired one
                    if (input.val() == "morning") {
                        //validation success
                        return true;
                    } else {
                        //validation error
                        return false;
                    }
                }

                return true;
            }
        },
        messages: {
            //custom rules messages
            category: function(input) {
                // return the message text
                return "Category is already reserved for this day.";
            }
        }
    });
})(jQuery, kendo);
//end of custom validation code

Also if you need to adjust the Date / DateTimePicker options that you can either define custom editor template or use the "Edit" event of the Scheduler.

Regards,
Vladimir Iliev
Telerik by Progress

[AKROS]

I managed to make it work by including your code directly in my custom template. The "15min" validation works well...
Now I'm trying to implement the second validation (should be the same day) but for this I need a reference on the other input. How can I do that?

Current code

rules: {
    start: function(input, params) {
        if (input.is("[name='start']")) {
            return isQuarter(input.val());
        }
        return true;
    },
    end: function(input, params) {
        if (input.is("[name='end']")) {
            return isQuarter(input.val());
        }
        return true;
  }
},

 

Thank you for your help

 

[Vladimir Iliev]

Hi,

You can find the other editor using for example jQuery:

start: function(input, params) {
    if (input.is("[name='start']")) {
       input.closest("[data-uid]").find("[name=end]")

Regards,
Vladimir Iliev
Telerik by Progress

[AKROS]

That works, thank you for your help!