Export and Import from DHTMLX Gantt Chart to MS Project

DHTMLX Gantt is a Gantt chart JS library that allows building feature-rich applications for project management and task tracking. One of the dhtmlxGantt great features is the ability to export files to Microsoft Project, a software product designed to help project managers in their day-to-day responsibilities.

DHTMLX library provides 2 ways to export your Gantt chart project. Firstly, you can get your own export local module. It’s a Gantt add-on that is built with ASP.NET and runs on Windows and IIS. This method is the safest one since all data will be stored on your own server where the export module is deployed.

Secondly, you can use an online export service (the sample is available on our website). In this article, we’ll show you how to use DHTMLX online service to export files from your Gantt chart into MS Project and vice versa. Let’s get started!

Export to MS Project

To successfully export data into the XML file, you have to follow the steps mentioned below.

First of all, to enable the online export service, you have to include the https://export.dhtmlx.com/gantt/api.js file on the page:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>  
<link rel="stylesheet" href="codebase/dhtmlxgantt.css" type="text/css">

And then call the exportToMSProject method to export data from your Gantt chart. This method is responsible for sending a request to the remote service, which in turn generates an XML file. Otherwise, the service will return an URL to download generated data.

The exportToMSProject method allows you to specify the file name, set auto-scheduling parameters for tasks, set custom properties to the exported project entity or tasks items. You can also specify the list of resources to export into an MS Project file:

gantt.exportToMSProject({
    name:'custom.xml'
    auto_scheduling: false
    project: {
        'Author': 'I am!',
        'MinutesPerDay': function () {
            return gantt.config.hours_per_day * 60;
        }
    }
   tasks: {
       'StartVariance': function (task) {
           if (task.startVariance)
               return task.startVariance;
           else
               return 0;
       },
       'PercentWorkComplete': function (task) {
           return (task.progress + 0.1);
       },
       'Custom': function (task) {
           return 'Custom value';
       },
       'Custom 2': 'My Custom value'
   }
  resources: [
    {"id":"1","name":"John","type":"work"},
    {"id":"2","name":"Mike","type":"work"},
    {"id":"3","name":"Anna","type":"work"}
  ]
});

Finally, you have to specify the server property. You can use it with the local install of the export service:

gantt.exportToMSProject({
   server:"https://myapp.com/myexport/gantt"
});

Import from MS Project

If you want to convert an XML or MPP MS Project file, you have to send the following request to the export service:

<form action="https://export.dhtmlx.com/gantt" method="POST" 
    enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="hidden" name="type" value="msproject-parse">
    <button type="submit">Get</button>
</form>

Alternatively, you can use the client-side API, where the file property should contain either an XML or MPP Project file:

gantt.importFromMSProject({
    data: file,
    taskProperties: ["Notes", "Name"],
    callback: function (project) {
        if (project) {
            gantt.clearAll();
            if (project.config.duration_unit) {
                gantt.config.duration_unit = project.config.duration_unit;
            }                    
            gantt.parse(project.data);
        }
     }
});

You can set the duration unit (“minute”, “hour”, “day”, “week”, “month”, or “year”) to the server, get project and tasks properties to be imported.

Limits on MS Project Importing/Exporting

There are two API endpoints for the MS Project export and import services. The first one is the default endpoint which serves all export methods. The maximum request size is 10 MB. The second one is dedicated to MS Project services and comes with a maximum request size of 40 MB.

The API endpoint can be specified by the server property of the export configuration object:

gantt.importFromMSProject({
    server:"https://export.dhtmlx.com/gantt",
    data: file,
    callback: function(project){
       // some logic
    }
});

---

Now you know how to import and export a JS Gantt chart from MS Project and can put your knowledge into practice. Besides, all the attendant configurations you will find in the Export and Import from MS Project section in our docs.

If you're a newbie in DHTMLX Gantt chart library, we suggest you to try a free 30-day trial version with official technical support.