dhtmlxgantt doesn't display in Ruby on Rails app

Gantt
#1

Good Morning …

I’ve been attempting to integrate dhtmlxgantt in to a RoR application that I’m writing to assist us with portfolio management and can not get the Gantt chart to display on the screen. I’m hoping someone can see something that is not setup correctly.

Here are the locations of the dhtmlxgantt files within the overall RoR file structure:

dhtmlxgantt files copied to the following locations:
… dhtmlxgantt.css -> public/stylesheets/dhtmlx/dhtmlxgantt.css
… dhtmlxcommon.js -> public/javascripts/dhtmlx/dhtmlxcommon.css
… dhtmlxgantt.js -> public/javascripts/dhtmlx/dhtmlxgantt.css
… image files -> public/images/dhtmlx/imgs/.

I’ve validated that I can get to the image files by displaying them on the screen. I’ve validated that I can get to the stylesheets - by using the stylesheet classes successfully.

Below are the Ruby on Rails template files:

– app/views/layouts/dhtmlx_application.html.erb —

<%= $applicationName %>: [<%= controller.controller_name %>][<%= controller.action_name %>] <%= stylesheet_link_tag 'scaffold' %> <%= stylesheet_link_tag 'calendar_date_select/default.css' %> <%= stylesheet_link_tag 'dhtmlx/dhtmlxgantt.css' %> <%= javascript_include_tag :defaults %> <%= javascript_include_tag 'calendar_date_select/calendar_date_select.js' %> <%= javascript_include_tag 'dhtmlx/dhtmlxcommon.js' %> <%= javascript_include_tag 'dhtmlx/dhtmlxgantt.js' %> function createChartControl(htmlDiv1) { 
      var loGanttControl = new GanttChart();
      var loProject = new GanttProjectInfo(1, 'Project Milestones', new Date('02/24/2011'));
      
      loGanttControl.setImagePath('/images/dhtmlx/imgs/');
      loGanttControl.setEditable(true);
      loGanttControl.setTreePanel(true);
      loGanttControl.setContextMenu(true);
      loGanttControl.showDescTask(true, 'd,s-f');
      loGanttControl.showDescProject(true, 'n,d');
    
      loGanttControl.addProject(loProject);
      loGanttControl.loadData("/working_tasks/showGantt.xml?id=068CB82E-7700-4574-B689-034854FD57F8", true, true);
      loGanttControl.create(htmlDiv1);

    }
  </script>
</head>

<body>
	
  <div id='frame'>
	
    <div id='pageheader'>
      <table class='application'>
        <colgroup>
          <col width='30%' />
          <col width='40%' />
          <col width='30%' />
        </colgroup>
        <tr>
          <th class='app_left'><img alt="Shazam_logo_transparent" src="/images/logos/shazam_logo_transparent.png?1287086549" title="Portfolio Tracker - DEV Home" /></th>
          <th class='app_center'>Portfolio Tracker - DEV<br></th>
          <th class='app_right'>ITS, Inc. / SHAZAM<br/><br/>Version: 2.21</th>
        </tr>
        <tr>
          <td colspan="3" class='horiz_menu'>
            <div>
              <ul class='menu'>
                <!-- menu inserted here - removed for posting purposes. -->
              </ul>
            </div>
          </td>
        </tr>
      </table>
    </div>
		
    <div id='pagebody'>
      <div id='appbody'>
      
        <b>Hello - gantt chart to be displayed!</b>
        <hr />

        <div style="width:98%; height:500px; position:relative;" id="GanttDiv">
          <b>Inside the div markers!</b>
        </div>

        <script type="text/javascript">
          //<![CDATA[
          createChartControl('GanttDiv');
          //]]>
        </script>

        <hr />

       <b>Below the div markers!</b>

      </div>
    </div>
  
  </div>

</body>

— rails generated xml: <>/working_tasks/showGantt.xml?id=068CB82E-7700-4574-B689-034854FD57F8

COLLABORATION AND BUSINESS REQUIREMENTS REVIEW 2011,11,25 520 100 IT TASK 1 2011,11,25 1944 0 PROJECT PHASE III - BUSINESS CASE 2011,11,25 968 0

I would appreciate any insight that folks have that would allow me to display the gantt chart on the screen.

Thanks in advance …

David L. Collison

#2

you did a number of mistakes:

  1. in your XML: startdate=“2011,01,17” - please remove leading zero, should be startdate=“2011,1,17”

  2. in javascript - function createChartControl(htmlDiv1) is wrong, you do not need to create a project and then load xml, rather load xm ldirectly, and after the create() call:

function createChartControl(htmlDiv1)
{

var loGanttControl = new GanttChart();
///////var loProject = new GanttProjectInfo(1, ‘Project Milestones’, new Date(‘02/24/2011’));

loGanttControl.setImagePath(’/images/dhtmlx/imgs/’);
loGanttControl.setEditable(true);
loGanttControl.setTreePanel(true);
loGanttControl.setContextMenu(true);
loGanttControl.showDescTask(true, ‘d,s-f’);
loGanttControl.showDescProject(true, ‘n,d’);

loGanttControl.create(htmlDiv1);

///////loGanttControl.addProject(loProject);
loGanttControl.loadData("/working_tasks/showGantt.xml?id=068CB82E-7700-4574-B689-034854FD57F8", true, true);
///////loGanttControl.create(htmlDiv1);

}

#3

Hi,
currently we don’t have such a tutorial
I’ll check if we could make a demo, but i can’t guarantee that it will be ready soon

The instructions from the previous posts refers to gantt of versions 1.x and are no actual for dhtmlxGantt 2.0+