Using Microsoft Project Files with Syncfusion JavaScript Gantt Chart: A Beginner’s Guide
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (186)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (199)File Formats  (63)Flutter  (129)JavaScript  (218)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (871)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (155)Xamarin  (160)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (145)Chart  (123)Cloud  (14)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (608)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (479)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (39)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (29)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (361)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (572)What's new  (311)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Using Microsoft Project Files with Syncfusion JavaScript Gantt Chart A Beginner’s Guide

Using Microsoft Project Files with Syncfusion JavaScript Gantt Chart: A Beginner’s Guide

Microsoft Project is a project management tool that eases the process of scheduling tasks, allocating resources, managing projects, and more. However, transferring data back and forth when working with people who use Microsoft Projects can be challenging. For instance, the saved files of Microsoft Project cannot be opened by Mac users.

This is where the ability to import and export Microsoft Project XML files in the Syncfusion JavaScript Gantt Chart comes in handy. Since our Gantt Chart is a web component, it can be opened by any user. This enables users to collaborate with project managers with ease.

This beginner’s guide will walk you through importing and exporting Microsoft Project XML files in the Syncfusion JavaScript Gantt Chart.

Understanding XML files in Microsoft Project

Microsoft Project reads and saves files in XML format, which contains all the information related to a project, including tasks, resources, timelines, and dependencies.

The advantage of using XML files in Microsoft Projects is that they provide a standardized format for sharing data among different project management tools.

This means that users can import and export project data to and from Microsoft Project using XML files, regardless of the project management tool they are using.

Configuring Syncfusion JavaScript Gantt Chart for importing and exporting

Before proceeding, first, refer to the getting started with JavaScript Gantt Chart documentation.

You can achieve the import and export actions using the toolbar functionality of the Gantt Chart. Let’s create custom toolbar buttons for export and import actions and bind the toolbar click event to them.

Refer to the following code example.

var ganttChart = new ej.gantt.Gantt({
  …
  toolbar: [{ text: 'Import', tooltipText: 'Import', id: 'ImportGantt', prefixIcon: 'e-import-icon tb-icons' },
            { text: 'Export', tooltipText: 'Export', id: 'ExportGantt', prefixIcon: 'e-export-icon tb-icons' }],
toolbarClick: toolbarClick,
});

function toolbarClick(args) {
  …
};

Implementing import and export actions

I have written a JS helper file for import and export actions. It converts Syncfusion JavaScript Gantt Chart properties to Microsoft Project XML file schema and vice versa. Refer to this helper script file: XMLImportExporthelper.js.

In the toolbar click event, I have called the xmlExport method from the helper file for the export action. This method receives the remote service URL parameter, which is needed to download the data as a file. We will discuss remote servers later in this blog.

Refer to the following code example.

function toolbarClick(args) {
   if (args.item.id === 'ImportGantt') {
      document.getElementById("fileupload").click(); // Trigger Syncfusion Uploader
   }
   else if (args.item.id == "ExportGantt") {
      xmlExport("https://localhost:7281/api/XMLImport/ExportToXML");
   }
};

For the import action, I have used the Syncfusion JavaScript Uploader control to upload the XML file. I passed that file to the remote service for the file-handling process (read and convert XML schema to Syncfusion JavaScript Gantt Chart properties) using the xmlImport method of the helper file.

Refer to the following code example.

var uploadObj = new ej.inputs.Uploader({
     autoUpload: false,
     allowedExtensions: ".xml",
     multiple: false,
     showFileList: false,
     selected: function (args) {
         ej.popups.showSpinner(document.getElementById('Default'));
         xmlImport({ file: args.filesData[0].rawFile }, "https://localhost:7281/api/XmlImport/Import" );
     }
});

Remote service configuration

We need a remote service to handle the file read and write operations, as discussed. A remote service has been created and hosted on the following GitHub repository path.

Once you’ve cloned the repository, you can run the service and provide the API service URL in the xmlImport and xmlExport methods on the app page.

To run the service, we need to install the following NuGet packages:

Once these packages are installed, you can build and run the service.

Refer to the following output images, where the data is exported from the Syncfusion JavaScript Gantt Chart and imported into Microsoft Project.

Exporting Syncfusion JavaScript Gantt Chart to XML format
Exporting Syncfusion JavaScript Gantt Chart to XML format
Importing Syncfusion JavaScript Gantt Chart data (XML file) in Microsoft Project
Importing Syncfusion JavaScript Gantt Chart data (XML file) in Microsoft Project

Like this, you can also import Microsoft Project XML files in the JavaScript Gantt Chart control with ease.

GitHub reference

For more details, refer to the demo in this GitHub repository.

Conclusion

Thanks for reading! In this blog, we guided you through importing and exporting Microsoft Project XML files in the Syncfusion JavaScript Gantt Chart. Try out the steps and share your feedback in the comments section below.

Are you already a Syncfusion user? You can download the product setup here. If you’re not a Syncfusion user, you can download a free 30-day trial here.

If you have any questions, you can contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top