How to add DropDown to Gantt Chart Toolbar

7 posts, 0 answers
  1. Sethilraj
    Sethilraj avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Jun Link to this post

    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.

     

  2. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 06 Jun Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. rajeshraju
    rajeshraju avatar
    5 posts
    Member since:
    Jun 2016

    Posted 09 Jun in reply to Bozhidar Link to this post

    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>

  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 13 Jun Link to this post

    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 in the template via the ng-click directive did not call the handler. Such handlers should be attached directly, specifically for the scenarios where the gantt widget with templates is used.

    Regarding the second question, this is a custom implementation, which could be achieve via the API of the gantt widget.

    Regards,
    Dimitar Terziev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. rajeshraju
    rajeshraju avatar
    5 posts
    Member since:
    Jun 2016

    Posted 13 Jun in reply to Dimitar Terziev Link to this post

    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>

     

     

  7. rajeshraju
    rajeshraju avatar
    5 posts
    Member since:
    Jun 2016

    Posted 15 Jun in reply to rajeshraju Link to this post

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

    How can i delete all the added tasks simultaneously.

     

     

     

  8. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 15 Jun Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready