Search code examples
javascriptkendo-uikendo-gridkendo-asp.net-mvc

How to compare dates in 2 columns of a row in Kendo UI Grid?


I have a kendo UI Grid, in that I have 2 columns StartDate and EndDate. While doing inline editing, I want to compare that StartDate should not be greater than EndDate. I am doing this below in the custom validation of the StartDate Field. But the var StartDate is getting null value assigned.

model: {
                id: "BusinessAreaDivisionMappingId",
                fields: {
                    BusinessAreaDivisionMappingId: { type: "number", editable: false, nullable: false },

                    StartDate: {
                        from: "BusinessAreaDivisionMappingEntity.StartDate", type: "date",
                        validation:
                            {
                                required: true,
                                dateComparisonValidation: function (input) {
                                    debugger;
                                    if (input && (input.attr("name") == "StartDate"|| input.attr("name") == "EndDate")) {
                                        input.attr("data-dateComparisonValidation-msg", "Start Date cannot be more than End Date");
                                        var startDate = input.closest(".k-edit-form-container").find("[name='StartDate']").data("kendoDatePicker");
                                        var endDate = input.closest(".k-edit-form-container").find("[name='EndDate']").data("kendoDatePicker");
                                        if (Date(startDate) > Date(endDate)) {
                                            return false;
                                        }
                                    }
                                    return true;
                                }
                            }
                    },
                    EndDate: { from: "BusinessAreaDivisionMappingEntity.EndDate", type: "date" }
                }
            }

Solution

  • UPDATE

    Here fully working example:

    http://dojo.telerik.com/IqeNA


    I think it's really better for user expirience to not be able to select invalid values compare to see that those values not valid an reselect them.

    If you agree with that that add custom editor for your columns with dates:

    var dateEditor = function (container, options) {
    var input = $('<input />');
    
    input.appendTo(container)
      .kendoDatePicker({
        format: "dd.MM.yyyy"
      });
    var datePicker = input.data("kendoDatePicker");
      switch (options.field) {
        case "startDate":
          if (options.model.finishDate) {
            datePicker.max(options.model.finishDate);
          }
          break;
    
        case "finishDate":
          if (options.model.startDate) {
            datePicker.min(options.model.startDate);
          }
          break;
      }
    };
    

    Read about custom editors here

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor

    If you have troubles with adding editors for inline editor read that article

    Kendo Grid using inline editing and custom editor dropdown control