Loading...

RE: Gantt View roll-up

RE: Gantt View roll-up

Home Forums QuickApps Forum Gantt View roll-up RE: Gantt View roll-up

#7032
Anonymous
Anonymous
Participant

Hi,

n

 

n

You can reference to the ‘TaskItem’ interface in jsGantt API to set the data in ‘body’ setting. I follow Curtis’s steps, and I can make it works. I would like to share my steps to you.

n

1. I add a HTML Form web part into the page, set the below HTML code in the Source Editor:

n

                  <link rel="stylesheet" type="text/css" ref="/_Layouts/QuestSoftware/jsgantt.css" />

n

<script language="javascript" src="/_Layouts/QuestSoftware/jsgantt.js"></script>

n

<div style="position:relative" class="gantt" id="GanttChartDIV"></div>

n

<script language="javascript">

n

var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');

n

</script>

n

Of course, I put the jsgantt.css and jsgantt.js files into the /layout/ QuestSoftware folder.

n

 

n

2. Configure qListView to the list, set the ‘Custom Display’ as below:

n

Results Header:

n

<script language="javascript">

n

Result Body:

n

g.AddTaskItem(new JSGantt.TaskItem(<%ID%>, 'Define Chart API', '<%Start Date%>', '<%End Date%>', 'ff0000', 'http://help.com', 0, '<%Resource%>', <%Complete%>, 0, 0, 1));

n

Result Footer:

n

g.Draw();  

n

g.DrawDependencies();

n

</script>

n

3. Save all.

n

 

n

In the step 2, the <%[FIELD]%> will be replace to the real field’s data. After that, the gantt chart should be rendered.

n

n