Change DatePicker Value from Another DatePicker in the Grid
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | Windows 10 64bit |
| Preferred Language | JavaScript |
Description
How can I change the value of one editor based on the value of another editor when working with the Kendo UI Grid?
Solution
The following example demonstrates how to change a Kendo UI DatePicker value based on the modified value of another DatePicker by using the inline edit mode of the Kendo UI Grid. When the user selects a date from the first DatePicker, the following date is programmatically set to the second DatePicker.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
data: [
{ Date1: '2017-8-5', Date2: '2017-8-6' }
],
schema: {
model: {
fields: {
Date1: { type: "date" },
Date2: { type: "date" }
}
}
}
},
columns: [{
field: "Date1",
format: "{0: yyyy-MM-dd}"
},{
field: "Date2",
title: "Date1 + 1 day",
format: "{0: yyyy-MM-dd}",
},{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}],
editable: "inline",
edit: onEdit
});
function onEdit(e){
var dp1 = e.container.find("[name='Date1']").data("kendoDatePicker");
var dp2 = e.container.find("[name='Date2']").data("kendoDatePicker");
dp1.bind("change", function(e){
var nextDay = new Date(dp1.value());
nextDay.setDate(nextDay.getDate()+1);
dp2.value(nextDay);
dp2.trigger("change");
})
}
</script>