Skip to Content
Author's profile photo Former Member

Gantt Chart in SAP UI5 – Drag and Drop functionality between 2 Charts

“sap.gantt” is the new library introduced recently to create a Gantt Chart control in SAP UI5. This control is basically used to represent our data in graphical form and we can further perform other operations on it.

In this document , in Part I , we will see how to get started with the Gantt control. We will be creating a Gantt Chart with Table control.

In Part II ,  we will further create another chart and see how we can implement drag and drop functionality across the 2 charts.

Here is a screenshot of how the output will look like for Part I.


Here is a screenshot of how the output will look like for Part II.


Now let’s start with the coding part.

Part I :

First of all we need to include the library “sap.gantt”.


In the view we first create a GanttChartContainer and add GanttChartWithTable as it’s aggregation. The table used in this control is a “sap.ui.table.Table” which is inbuilt. So inside the columns aggregation of GanttChartWithTable, we refer to “sap.ui.table” library controls like ‘Column’ and ‘template’. Here is a screenshot of the xml view code.


Note : I observed that it’s better to mention the height of GanttChartContainer, otherwise sometimes the output behaves differently.


Inside the controller we will now refer to our Gantt chart and create data and shapes for it. Here we do this in the onInit function.

Note that the data structure used for the chart is of the format :

               var oData1 = {

                                     “root”: {

                                                    “id”: “root”,

                                                    “level”: “root”,

                                                    “children”: []



Inside the children array you can add the main data. Here is the sample data we used to create our chart :


Now we assign this data to a json model and set it our control. The method used to add rows is “bindRows”. We also set shapeDataNames and set the shapes to our chart. Here we will be creating rectangle shape.


Note : The parameter of setShapeDataNames should be an array. If you miss this, then no output will be seen.

For creating shapes, sap.gantt has provided “sap.gantt.shape” class. You can explore it further. Here is the code for configShape function which sets the shapes to our gantt control :


The key and the shapeDataName is kept as “order”. This is what used while creating out data in the variable “oData1”.

time and endTime specify the shape’s start and end points.

enableDnD property enables the shape to be draggable and droppable.

So this is how you can create a basic Gantt chart. You can also refer to the snippix link:

Part II :

Once the first chart is created we will move further towards drag and drop functionality. We will create 2 charts for this. And we will make use of the event “shapeDragEnd”. This event is triggered when the shape drag ends.


In the previous view, we will simply add a new GanttChartWithTable control. in the code we will add the events as follows :

               <GanttChartWithTable id=”GanttChartWithTable1″ shapeDragEnd=”shapeDragEnd1″>

               <GanttChartWithTable id=”GanttChartWithTable2″ shapeDragEnd=”shapeDragEnd2″>

Here, shapeDragEnd1 event is triggered when the shape is dropped on 1st chart while shapeDragEnd2 event is triggered when the shape is dropped on 2nd chart.


Inside the controller we will now write the code to implement these 2 functions in addition to the previous code.

Also, don’t forget to create data and shape for the second chart.

First we’ll understand the code of shapeDragEnd1 function :


First of all when we drag the shape from 2nd to 1st chart, this ‘shapeDragEnd1‘ event gets triggered. So we will read the source and target of the event. An if condition if added to rule out the condition if the user drags and drops into the same chart. After this we need to add the dragged order data into the model of first chart and remove the same from the model of the second chart.

     var data = this.oGanttChartWithTable2.getSelectedShapes().order[0];

This variable ‘data’ holds the data of the selected shape.

While removing we use the variable flag to know the position of the selected data in the model.

Similarly the code of shapeDragEnd2 function :


So this is how we can implement drag and drop in between 2 Gantt charts. You can also refer to the snippix link:

in this example , you can drag a single order from any chart to the other one.

Note : This snippix is implemented for drag and drop of a single order only. As a further research, you can try implementing it for multiple orders.

Hint : getSelectedShapes() function returns all the selected shapes.

Thanks for reading , hope it helped.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Dear Former Member,

      I want to use the Gantt chart of SAPUI5. I found an example of Gantt Chart in the following link:

      While the example works fine in their official website, I downloaded it and run inside of the WebIDE. But it throws the following error and its features like magnifier does not work.

      Uncaught (in promise) Error: "-Infinity%" is of type string, expected sap.ui.core.CSSSize for property "selectionPanelSize" of Element sap.gantt.GanttChartWithTable#__xmlview0--ganttView(…)

      As I understood this problem is not related to the controller. And even when I just load the XML view this error appears.

      Thanks in advance

      Author's profile photo Gregory Doukas
      Gregory Doukas

      I wonder if we will see 'drag-and-drop' type functionality on relationships for the Gantt?!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Gregory,

      Currently we don’t drag-and-drop functionality for relationships provided by the standard control. However, you may try using ‘sap.ui.thirdparty.jqueryui’ libraries to explicitly set a draggable option for any control.


      Author's profile photo Former Member
      Former Member

      Dear Former Member,

      Thank you for this blog. I have tried this one but unable to see my charts. Table data are visible but charts are not. written the same code for configShape. Do i need to change some thing. i didn't get any error.

      And i was wondering how can we make charts to appear in same row for single set. For example

      I have 2 types of job and time duration or start date end date for work in specific month so that I see charts for JAN ,Feb, and march duration against particular job in single row:

      JOB       JAN    FEB   MARCH



      could you please give your inputs on this.

      Thank you

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Former Member,

      If you are trying to run the snippix link specified in part I : , it displays the tree table data but not the shapes in the chart. The reason being, gantt chart by default considers a time axis for displaying the data on chart if you don’t do it explicitly. This default time axis is from 1 year before today’s date to 1 year after today’s date. So in order to solve this, you need to change the start and end time for order array object to 2017.

      To make charts to appear in same row for single set:

      In the data for the chart, “order” is an array of objects and the data inside order is set to the chart. Currently we have only 1 object in each order array. To make multiple shapes appear in the same row, you just need to add more objects to this order array. Refer to the screenshot attached.

      Author's profile photo Former Member
      Former Member

      Hi Former Member

      Is it possible to mark weekends or holidays in gantt chart time axis? and if yes? how to do this?



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Former Member,

      It's not possible to mark weekends or holidays in the chart's time axis. However you can add 'calendarDefs' to the ganttChartWithTable control which adds calendar definition to the chart. You need to create the relevant data as well. You can refer to the below snippix link:

      Author's profile photo Former Member
      Former Member

      Hello Former Member

      I am unable to open the snippix link. Seems it is only accessible to people from SAP.

      Will it be possible for you to provide the snippix or the code snippet here itself. That way it will help us in enabling the Calendar defaults.

      Any other info to realize this functionality will also be of great help.

      Many Thanks,



      Author's profile photo Ritushree Saha
      Ritushree Saha

      Hi Former Member ,


      It is a nice blog .

      Also ,in the screen shot that you have attached , I see the table is not a tree table. It would be of great help if you can share the sample code with me.

      The links that are mentioned in the blog are now not working . Could you please share them again.


      Thanks again Bhoomika.


      Author's profile photo Daniel Spiess
      Daniel Spiess

      I would like to add to this request @Former Member

      Author's profile photo Tripti Singh
      Tripti Singh

      Hello Bhoomika,

      Nice blog!!

      My requirement is to mark the current time in the gantt chart. With the default library settings, the time marked is UTC. Is it possible to mark the current time of different Timezone depending on users selection.