This is a migrated thread and some comments may be shown as answers.

How to add DropDown to Gantt Chart Toolbar

6 Answers 540 Views

Gantt

This is a migrated thread and some comments may be shown as answers.

Sethilraj asked on 02 Jun 2016, 11:52 AM

q1.png

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

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

answered on 09 Jun 2016, 12:01 PM

gantt.png

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>

answered on 13 Jun 2016, 07:43 AM

Hello,

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

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.

answered on 13 Jun 2016, 12:08 PM

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>