Hi,
I have 2 questions.
Q1:
I am trying to add Dropdown to gantt Chart Tollbar, Dropdown is added but it is not working.
In HTML
<div id="example">
<div kendo-gantt k-options="ganttOptions"></div>
<script id="template" type="text/x-kendo-template">
<select kendo-drop-down-list
k-data-text-field="'name'"
k-data-value-field="'id'"
k-data-source="productsDataSource"
style="width: 100%"></select>
</script>
</div>
In Angular Controller
$scope.ganttOptions =
{
toolbar: [
{ template: kendo.template($("#template").html())}
]
}
$scope.productsDataSource =
{
transport: {
read: {
url: "Data/products.json",
dataType:"json"
}
}
};
Q2:
I want to Remove the Add Task Button at the bottom. I have used "gantt.footer.find(".k-button").css("visibility", "hidden");" , that's not working in my case may be due to angular. Can you specify a way to acheive this for angular.
6 Answers, 1 is accepted
The following dojo sample demonstrates how you can hide the bottom AddTask dropdown and add a custom kendo DropDownList widget:
http://dojo.telerik.com/oHIsE
Regards,
Bozhidar
Telerik
Rank 1
hi,
i modified the above code. I have 2 questions
q1) When I add a task value from dropdownlist is not updated in gantt chart ,it shows a null value in task title.how do i fix that?
q2) add task button only adds a child. how do i make it insert a new task always after the current task?
source:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/gantt/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.silver.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.504/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<style>
.k-gantt .k-gantt-toolbar:last-child{
display: none;
}
</style>
</head>
<body>
<div id="gantt">
<div ng-app="KendoDemo" ng-controller="MyCtrl">
<div kendo-gantt="gantt" k-options="ganttOptions"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<select id="dropDownList" style="width: 100%" ng-model="a">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<button style="font-size:16px" class='k-button k-button-icontext k-gantt-create' ng-click="toolbar_click()"data-action="add" role="option" "input data-bind="valu">add</button>
</div>
</script>
</div>
</div>
<script>
angular.module("KendoDemo", ["kendo.directives"])
.controller("MyCtrl", function($scope, $element) {
var serviceRoot = "//demos.telerik.com/kendo-ui/service";
$scope.toolbar_click=function() {
var gantt = $("#gantt").data("kendoGantt");
var dataSource = gantt.dataSource;
var data = dataSource.data();
var combobox = $("#dropDownList").data("kendoDropDownList");
var val = combobox.value();
window.alert(val);
var task = new kendo.data.GanttTask({
"title": val,
"parentId": null,
"start": new Date("2016/1/1 8:00"),
"end": new Date("2016/12/31 5:00"),
"id": data.length + 1,
"expanded" : true,
"orderId": 0,
});
$scope.gantt.dataSource.add(task);
$scope.gantt.dataSource.sync();
$scope.gantt.refresh();
}
var tasksDataSource = new kendo.data.GanttDataSource({
batch: false,
transport: {
read: {
url: serviceRoot + "/GanttTasks",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttTasks/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttTasks/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttTasks/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return { models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "Start", type: "date" },
end: { from: "End", type: "date" },
title: { from: "Title", defaultValue: "", type: "string" },
percentComplete: { from: "PercentComplete", type: "number" },
summary: { from: "Summary", type: "boolean" },
expanded: { from: "Expanded", type: "boolean", defaultValue: true }
}
}
}
});
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: serviceRoot + "/GanttDependencies",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttDependencies/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttDependencies/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttDependencies/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
fields: {
predecessorId: { from: "PredecessorID", type: "number" },
successorId: { from: "SuccessorID", type: "number" },
type: { from: "Type", type: "number" }
}
}
}
});
$scope.ganttOptions = {
dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
views: [
"day",
{ type: "week", selected: true },
"month"
],
columns: [
{ field: "id", title: "ID", width: 60 },
{ field: "title", title: "Title", editable: true },
{ field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100 },
{ field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100 }
],
height: 400,
showWorkHours: false,
showWorkDays: false,
add:
function(e) {
e.task.title=$scope.a
},
toolbar: [
{
template: kendo.template($("#template").html())
}
]
};
var handler = $scope.$watch('gantt', function(newValue, oldValue) {
newValue.toolbar.find('#dropDownList').kendoDropDownList();
handler();
});
});
</script>
</body>
</html>
Here you could find a dojo snippet showing how to overcome the experienced problem related to your first question. The reason for this problem was the fact that the click handler attached the template via the ng-click directive did not call the handler. Such handlers should be attached directly, specifically for the scenarios where the widget with templates is used.
Regarding the second question, this is a custom implementation, which could via the API of the widget.
Regards,
Dimitar Terziev
Telerik
Rank 1
hello,
Could you also tell me how to add a .json file as datasource for the dropdown?also can u tell how to bind values using angular js in kendo gantt.
here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<div id="gantt">
<div ng-app="KendoDemo" ng-controller="MyCtrl">
<div kendo-gantt="gantt" k-options="ganttOptions"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<select id="dropDownList" style="width: 100%"
kendo-drop-down-list
k-ng-model="value"
k-data-text-field="'ProductName'"
k-value-primitive="true"
k-data-value-field="'ProductID'"
k-data-source="productsDataSource"
>
</select>
<button style="font-size:16px" id="AddButton" class='k-button k-button-icontext' ng-click="toolbar_click()" role="option" "input data-bind="valu">add</button>
</div>
</script>
</div>
</div>
<script>
angular.module("KendoDemo", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
$scope.productsDataSource = {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
};
$scope.value = 3;
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
$scope.toolbar_click = function() {
var gantt = $scope.gantt;
var dataSource = gantt.dataSource;
var data = dataSource.data();
var combobox = $("#dropDownList").data("kendoDropDownList");
var val = combobox.value();
var task = new kendo.data.GanttTask({
"title": val,
"parentId": null,
"start": new Date("2016/1/1 8:00"),
"end": new Date("2016/12/31 5:00"),
"expanded": true,
"summary": false
});
$scope.gantt.dataSource.add(task);
$scope.gantt.dataSource.sync();
}
var tasksDataSource = new kendo.data.GanttDataSource({
batch: false,
transport: {
read: {
url: serviceRoot + "/GanttTasks",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttTasks/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttTasks/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttTasks/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return { models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "Start", type: "date" },
end: { from: "End", type: "date" },
title: { from: "Title", defaultValue: "", type: "string" },
percentComplete: { from: "PercentComplete", type: "number" },
summary: { from: "Summary", type: "boolean" },
expanded: { from: "Expanded", type: "boolean", defaultValue: true }
}
}
}
});
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: serviceRoot + "/GanttDependencies",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttDependencies/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttDependencies/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttDependencies/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
fields: {
predecessorId: { from: "PredecessorID", type: "number" },
successorId: { from: "SuccessorID", type: "number" },
type: { from: "Type", type: "number" }
}
}
}
});
$scope.ganttOptions = {
dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
views: [
"day",
{ type: "week", selected: true },
"month"
],
columns: [
{ field: "id", title: "ID", width: 60 },
{ field: "title", title: "Title", editable: true },
{ field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100 },
{ field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100 }
],
height: 400,
showWorkHours: false,
showWorkDays: false,
toolbar: [{
template: kendo.template($("#template").html())
}]
};
var handler = $scope.$watch('gantt', function(newValue, oldValue) {
newValue.toolbar.find('#dropDownList').kendoDropDownList().on('change',$scope.a());
newValue.toolbar.find("#AddButton").on('click', $scope.toolbar_click);
handler();
});
});
</script>
</body>
</html>
Rank 1
I got the solution for my last question.I have a new question to ask.
How can i delete all the added tasks simultaneously.
In order to remove tasks, the API of the Gantt's dataSource should be used.
Regards,
Dimitar Terziev
Telerik