Custom editor with custom validation

5 posts, 0 answers
  1. AKROS
    AKROS avatar
    68 posts
    Member since:
    Oct 2011

    Posted 18 Jul Link to this post

    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

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 19 Jul Link to this post

    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
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AKROS
    AKROS avatar
    68 posts
    Member since:
    Oct 2011

    Posted 20 Jul in reply to Vladimir Iliev Link to this post

    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

     


  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 20 Jul Link to this post

    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
    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. AKROS
    AKROS avatar
    68 posts
    Member since:
    Oct 2011

    Posted 20 Jul in reply to Vladimir Iliev Link to this post

    That works, thank you for your help!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready