Kendo Grid Validations

[EIMCM]

Hello,

I am having issues trying to get a validation to fire off on one of the fields of my data grid. This is the JSFiddle that is essentially what I've got so far:

https://jsfiddle.net/qct05yvy/24/

The title column has a validation that it is < 50 characters. This is correctly firing if I add that amount of characters.
The Start Date/End Date column have an on change function that gets the time (in days) between the two using momentjs and then it updates the Duration column. The issue is that it allows a negative duration (meaning you set the end date to a date before the start date) and causes some issues with the calculation I do on the backend.

I can prevent the user from submitting it to the backend by changing the update method in the datasource, but then I can't throw an error message like the one that happens when you add > 50 characters in the Title field (no, a Javascript alert will not work in my case unfortunately).

I need to be able to either make this validation actually fire correctly and correctly display the message or be able to prevent the user from selecting a date before the startDate DatePicker (which I spent several hours researching and found no way to do this programatically. I know I can set the Min, but how do I re-set the Min whenever they select a new startDate?).

Can anyone help me out? Thank you for your time!

-Ken

[Georgi]

Hello,

Thank you for the provided sample.

A possible solution is to create a custom validation rule which validates that start date is before due date via the Kendo Validator.

e.g.

$.extend(true, kendo.ui.validator, {
  rules: {
    datesValidation: function (input, params) {

      if (input.is("[id='endDate']") && input.val() != "") {
        input.attr("data-datesValidation-msg", "End should be after Start.");
        var end = kendo.parseDate(input.val());
        var start = kendo.parseDate($('#startDate').val());

        return end.getTime() > start.getTime();

      } else if (input.is("[id='startDate']") && input.val() != "") {
        input.attr("data-datesValidation-msg", "Start should be before End.");
        var start = kendo.parseDate(input.val());
        var end = kendo.parseDate($('#endDate').val());

        return start.getTime() < end.getTime();
      }

      return true;
    }
  },
  messages: {
    datesValidation: function (input) {
      return input.attr("data-val-datesValidation");
    }
  }
});

Below you will find a modified version of the provided sample:

• http://dojo.telerik.com/@joronator/ebeji

Regards,
Georgi
Progress Telerik

[EIMCM]

Thank you for your reply Georgi! That is almost perfect! Is it possible to get the (!) icon to show up in there as well? Otherwise I can probably just remove it from the other validation fields. I'm trying to keep the UX as similar as possible.

Thanks again!

-Ken

[Georgi]

Hello Ken,

I am glad to hear that the provided approach helps you.

By default the warning icon is included within the warning tooltip but it is not displayed. Add the following CSS rules in order to display the warning icon:

display:inline;
left:0;

Below you will find a modified version of the sample:

• http://dojo.telerik.com/@joronator/emopI

Regards,
Georgi
Progress Telerik