This is a migrated thread and some comments may be shown as answers.
Multiple tasks on a row - Gantt
3 Answers 60 Views
This is a migrated thread and some comments may be shown as answers.
Tore
Top achievements
Rank 1
Tore asked on 14 Feb 2017, 11:33 AM

Hello, I am using the Telerik  Kendo UI MVC Gantt control and want to display multiple tasks on one row.

As far as I know, this is not supported in Gantt control without doing some hacking in css and javascript. 

What I am currently trying out is to use UnderScore.Js to group my data and then adjust the vertical

displacement by setting the css top property. I am loading multiple tasks for each employee into the Gantt and 

I want to get these tasks on one line. In addition, I have to hide the rows that then will not show any data anymore.

My business requirement is to make the Gantt display more compact.

 

I am hooking into the OnDataBound client-side event of Gantt control and the code below contains commented code 
to try to patch the Gantt view. Problem now is that the adjustment does not look good aligned. The data is not aligned well,
trying to hide the rows in the Gantt control does not help. In addition, the code is way to slow as the jQuery code is far too slow. 

I got about 4-500 rows in my Gantt control. The javascript code below contains the commented code where I have tried to adjust 
the Gantt control to support Multiple tasks on a row. 

Is there any elegant and easy way to do this?

function onDataBound() {
    //debugger;
  
    var gantt = this;

    // var ganttasks = [];

    // gantt.element.find(".k-task").each(function (e) {
    //     //debugger;
    //     var taskuid = $(this).attr("data-uid");
    //     var dataItem = gantt.dataSource.getByUid(taskuid);
    //     ganttasks.push({ uid: taskuid, ganttask: dataItem });
    // });

    ////underscore js used below
    // var that = this;
    // var gantt = that;
    var ganttdatasource = $("#gantt").data('kendoGantt').dataSource.data();
    _.chain(ganttdatasource).sortBy('EmployeeName').groupBy('PrsPersonId').sortBy('start').each(function (g) {
        var gindxgantt = 0;
        var isBigona = false;
        _.each(g, function (gi) {

            if (gi.PrsPersonId === 9050) {
                //debugger;
                isBigona = true;
            }

            //debugger;
            if (_.first(g).uid === gi.uid) {
                //this is the first row in the group, start a runner indexing variable
            }
            if (_.first(g).uid !== gi.uid) {
                //This is not the first item, hide the row itself and move task in the gantt up a given set of pixels
                //debugger;
                //var ganttselector = "div[data-uid=" + gi.uid + "]:first";

                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("display", "block");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("height", "1px");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().first().css("background", "yellow");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("padding", "0px");
                //$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("margin", "0px");

                //var ganttverticaldisplacement = (-32 * gindxgantt) + "px";
                //$(ganttselector).css("top", ganttverticaldisplacement);
                //if (isBigona) {
                //    $(ganttselector).css("background-color", "red");
                //}
                //var ganttrowselector = "tr[data-uid=" + gi.uid + "]";
                //if (gindxgantt >= 1) {
                //    $(ganttrowselector).remove();
                //}
            }
            gindxgantt++;
        });
    });
}

3 Answers, 1 is accepted

Sort by
0
Accepted
Nencho
Telerik team
answered on 16 Feb 2017, 11:46 AM
Hello Tore,

Indeed the Gantt widget does not support multiple tasks on the same row. I am afraid that such implementation would be a complex one, especially when a third part software is involved.

If you wish to benefit from our technical support on this matter, I can suggest our Professional Services, that are specialized in consulting, development assistance and custom feature implementation.

Regards,
Nencho
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
R
Top achievements
Rank 1
answered on 15 May 2020, 12:08 PM

Hi,

I am implementing Gantt Chart using Kendo in Angular. I am going through the demo sites and trying to understand how can we display the all tasks in the same row. All demos are having each task in each row. Below is my example code and I am trying to display all tasks in each row for a building. I appreciate your help if get any.

 

/*

<div id="gantt"></div>
<script>
//https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt/methods/setdependenciesdatasource
$("#gantt").kendoGantt({
 toolbar: [
    //{ name: "pdf" }
  ],
  dataSource: [
  {
    "id": 11,
    "title": "Building 1",
    "parentId": null,
    "orderId": 0,
    "start": new Date("2014/6/12 8:00"),
    "end": new Date("2014/6/20 12:00"),
    "percentageComplete": 0.43,
    "summary": true,
    "expanded": true
  },
    {
      id: 1,
      orderId: 0,
      parentId: 11,
      title: "1st room",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 21:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: 11,
      title: "2nd room",
      start: new Date("2014/6/18 3:00"),
      end: new Date("2014/6/18 20:00")
    },
     {
      id: 3,
      orderId: 3,
      parentId: 11,
      title: "3rd room",
      start: new Date("2014/6/18 8:45"),
      end: new Date("2014/6/19 12:00")
    },
    {
      id: 4,
      orderId: 4,
      parentId: 11,
      title: "4th room",
      start: new Date("2014/6/20 10:00"),
      end: new Date("2014/6/20 17:00")
    }    
  ],
  //views: [{ type: "week", selected: false }],
  views: [
          {
              type: "week", selected: true,
              range: {
    "start": new Date("2014/6/12 2:00"),
    "end": new Date("2014/6/20 24:00"),
              },
          },
        ],
 height: 500,
});
var gantt = $("#gantt").data("kendoGantt");
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
  data: [
    {
      predecessorId: 1,
      successorId: 2,
      type:1
    },
    {
      predecessorId: 2,
      successorId: 3,
      type: 1
    },
    {
      predecessorId:3,
      successorId: 4,
      type: 1
    }
  ]
});
gantt.setDependenciesDataSource(dependenciesDataSource);
gantt.setOptions({ listWidth: "20%" });
</script>

 

 

*/

0
Veselin Tsvetanov
Telerik team
answered on 19 May 2020, 08:47 AM

Hello,

As stated previously in the current thread, each Task in the Gantt chart will be displayed on a separate row. It is not possible to configure the widget to display multiple (or all) Tasks on a single row.

Regards,
Veselin Tsvetanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Gantt
Asked by
Tore
Top achievements
Rank 1
Answers by
Nencho
Telerik team
R
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or