Anyone successfully mapped MPXJ data to Syncfusion Gantt?

[Osama Mohamed]

Hi everyone,

I’m currently working on a project where I’m using the MPXJ library to read schedules from Microsoft Project (.MPP) and Primavera P6 (.XER) files. I want to display these schedules in the Syncfusion Gantt component (React/Blazor applies).

I’ve managed to extract tasks from MPXJ, but I’m a bit stuck on how to best map the data so that:

• Summary tasks are properly displayed as parents (with indenting/child tasks underneath)
• Links/dependencies (predecessors and successors) are properly shown between tasks

I’m wondering if anyone here has experience with this? Specifically:

• Which MPXJ Task object properties should be passed to Syncfusion Gantt to represent:
  
• Task ID
• Task Name
• Start Date
• End/Finish Date
• Duration (if needed)
• Parent/Child relationship (Summary and WBS structure)
• Predecessor Links (to render dependencies visually)

Right now, I’m looking at fields like:

• task.getID()
• task.getName()
• task.getStart()
• task.getFinish()
• task.getWBS()
• task.getPredecessors()

But not sure if getWBS() is enough to map hierarchy, or if I should manually build the parent/child relationship?

Also, when passing predecessors to Syncfusion Gantt, does it expect task IDs or WBS codes? (MPXJ gives both.)

Any guidance, tips, or even a sample mapping would be hugely appreciated!

Thanks in advance!

[Ajithkumar Gopalakrishnan]

Hi Osama,

Greetings from Syncfusion Support,

Currently, we do not have support for import .MPP file in our Gantt Chart. We have already logged this requirement “Need to provide support to import .mpp files into Gantt Chart” as uncertain feature at our end. Therefore, the reported case cannot be achieved at this time. Once the feature is properly implemented, the reported case will also be resolved.

We will plan to implement this feature in any of our upcoming release. You can now track the current status of request, review the proposed resolution timeline, and contact us for any further inquiries through the below feedback link,

Feedback link: https://www.syncfusion.com/feedback/41088/need-to-provide-support-to-import-mpp-files-into-gantt-chart

However, your requirement can be achieved by first converting the .MPP file to an .XLS file using an online tool, and then converting the .XLS file to .XML format using the website linked below:

MPP to XML conversion:

https://www.zamzar.com/converters/document/mpp/

After conversion, you can bind the generated XML data to the Gantt chart. This can be accomplished using the XLSX library to import and parse the XML file.

• Add a file upload input in your template to allow users to upload XML files.
• Use the change event to trigger a method when a file is selected.
• Read the selected XML file and convert its data to JSON format.
• Populate the Gantt chart with the converted JSON data.

We have provided a code snippet and sample for your reference:

<input type="file" onChange={onFileChange} />

<GanttComponent

        id="GanttExport"

        dataSource={[]}

        ref={ganttInstance}

        taskFields={taskFields}

        height="450px"

      >

</GanttComponent>

  const onFileChange = async (e) => {

  const file = e.target.files[0];

  if (!file) return;

 

  const reader = new FileReader();

  reader.onload = (evt) => {

    const bstr = evt.target.result;

    const workbook = XLSX.read(bstr, { type: 'binary' });

 

    // Find the worksheet named "Task_Table"

    const worksheet = workbook.Sheets["Task_Table"] || workbook.Sheets[workbook.SheetNames[0]];

    const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: "" });

 

    // Optional: Format dates

    const formatted = jsonData.map((item) => ({

      ...item,

      StartDate: new Date(item.Start),

      EndDate: new Date(item.Start),

      Duration: parseInt(item.Duration),

       

    }));

    ganttInstance.current.dataSource = formatted;

  };

  reader.readAsBinaryString(file);

};

Behavior:

• The Gantt chart initially renders with an empty data source.
• When an XML file is uploaded, it is converted to JSON.
• The converted data is then used to populate the Gantt chart.

Sample link: https://stackblitz.com/edit/react-efhizc7x-5p3f5a7p?file=index.js

Example of XML: https://www.syncfusion.com/downloads/support/directtrac/general/ze/xml

Example of MPP: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MSGantt

Initial load Gantt chart empty:



After XML upload:



If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G