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" }
}
}
UPDATE
Here fully working example:
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