Add DatePicker to Gantt Toolbar in AngularJS Applications
Environment
Product | Progress® Kendo UI® Gantt for jQuery |
Description
How can I insert a Kendo UI DatePicker widget into the toolbar of the Kendo UI Gantt in AngularJS scenarios? How can I use the DatePicker to change the visible dates of the Gantt?
Solution
- Pass a template to the Gantt toolbar with a single input element.
- In the
dataBound
event of the Gantt, initialize the DatePicker and assign a handler for itschange
event.
<div ng-app="KendoDemo" ng-controller="MyCtrl">
<div kendo-gantt="theGantt" k-options="ganttOptions"></div>
</div>
<script>
angular.module("KendoDemo", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
var start = new Date();
var end = new Date();
start.setDate(start.getDate() - 30);
end.setDate(end.getDate() + 30);
$scope.ganttOptions = {
toolbar: [{
template: '<input id="picker" />'
}],
dataBound: function(e) {
var gantt = e.sender;
var pickerElement = gantt.element.find('#picker');
var picker = pickerElement.getKendoDatePicker();
if (!picker) {
pickerElement.kendoDatePicker({
change: function(e) {
$scope.theGantt.date(e.sender.value());
}
});
}
},
dataSource: [{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: start,
end: end
}],
views: [
"day",
"week",
{ type: "month", selected: true }
]
};
});
</script>