Cancel Gantt Task Move If the New Start and End Do Not Pass Server Validation
Environment
| Product | Progress® Kendo UI® Gantt for jQuery |
Description
On moving (drag and drop) a Gantt task and based on server validation logic, I want to validate if the new start and end dates are valid.
How can I call the validation an AJAX request and, if the validation fails, to keep the initial start and end date for that task?
Solution
Perform a custom check on the server in the moveEnd event of the Gantt. As a result, the default change is prevented and if the validation passes, the new start and end dates are saved for that task.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [
{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}
],
moveEnd: function(e) {
e.preventDefault();
var gantt = e.sender;
var task = e.task;
var start = e.start;
var end = e.end;
$.get("https://demos.telerik.com/kendo-ui/service/GanttTasks", function(data) {
var randomNumber = Math.floor(Math.random() * 2) + 1;
// If validation passes save the updated task
if (randomNumber === 1) {
task.set('start', start);
task.set('end', end);
gantt.dataSource.sync();
}
}, "jsonp");
}
});
</script>