This is a migrated thread and some comments may be shown as answers.
How to add DropDown to Gantt Chart Toolbar
6 Answers 111 Views
This is a migrated thread and some comments may be shown as answers.
Sethilraj
Top achievements
Rank 1
Sethilraj asked on 02 Jun 2016, 11:52 AM

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

Sort by
0
Bozhidar
Telerik team
answered on 06 Jun 2016, 12:32 PM
Hello,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
rajeshraju
Top achievements
Rank 1
answered on 09 Jun 2016, 12:01 PM

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>

0
Dimitar Terziev
Telerik team
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.
 
0
rajeshraju
Top achievements
Rank 1
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>

 

 

0
rajeshraju
Top achievements
Rank 1
answered on 15 Jun 2016, 07:21 AM

I got the solution for my last question.I have a new question to ask.

How can i delete all the added tasks simultaneously.

 

 

 

0
Dimitar Terziev
Telerik team
answered on 15 Jun 2016, 07:43 AM
Hi,

In order to remove tasks, the API of the Gantt's dataSource should be used. 

Regards,
Dimitar Terziev
Telerik
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Gantt
Asked by
Sethilraj
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
rajeshraju
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or