938496 xml import

ej2-asp-core-mvc/code-snippet/gantt/how-to/xmlToData/razor

@@ -0,0 +1,79 @@
+@Html.EJS().Uploader("UploadFiles").AutoUpload(false).Selected("onSelect").AllowedExtensions(".xml").Render()
+
+@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("450px").TaskFields(ts =>
+           ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").ParentID("ParentId")
+       ).Columns(col =>
+        {
+            col.Field("TaskId").HeaderText("Task ID").Add();
+            col.Field("TaskName").HeaderText("Task Name").Width(250).Add();
+            col.Field("StartDate").HeaderText("Start Date").Add();
+            col.Field("Duration").HeaderText("Duration").Add();
+            col.Field("Progress").HeaderText("Progress").Format("C").Add();
+        }).Render()
+
+<script>
+   function transformGanttData(data) {
+      return data.GanttTasks.task.map(task => ({
+        TaskId: task.TaskId ? Number(task.TaskId["#text"]) : null,
+        TaskName: task.TaskName ? task.TaskName["#text"] : null,
+        StartDate: task.StartDate ? task.StartDate["#text"] : null,
+        EndDate: task.EndDate ? task.EndDate["#text"] : null,
+        Duration: task.Duration && "#text" in task.Duration ? Number(task.Duration["#text"]) : null,
+        BaselineStartDate: task.BaselineStartDate ? task.BaselineStartDate["#text"] : null,
+        BaselineEndDate: task.BaselineEndDate ? task.BaselineEndDate["#text"] : null,
+        Progress: task.Progress ? Number(task.Progress["#text"]) : null,
+        ParentId: task.ParentId && "#text" in task.ParentId ? Number(task.ParentId["#text"]) : null,
+        Predecessor: task.Predecessor && "#text" in task.Predecessor ? task.Predecessor["#text"] : null,
+      }));
+   }
+function onSelect(args) {
+      var file = args.filesData[0].rawFile;
+      var reader = new FileReader();
+
+      reader.onload = function(event) {
+        var xmlString = event.target.result;
+        var parser = new DOMParser();
+        var xmlDoc = parser.parseFromString(xmlString, "text/xml");
+
+        var ganttTasks = xmlToJson(xmlDoc);
+        var transformedData = transformGanttData(ganttTasks);
+        var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
+        ganttObj.dataSource = transformedData;
+      };
+   reader.readAsText(file);
+}
+
+function xmlToJson(xml) {
+    var obj = {};
+
+    if (xml.nodeType === 1) { // Element
+        if (xml.attributes.length > 0) {
+            obj["attributes"] = {};
+            for (var j = 0; j < xml.attributes.length; j++) {
+                var attribute = xml.attributes.item(j);
+                obj["attributes"][attribute.nodeName] = attribute.nodeValue;
+            }
+        }
+    } else if (xml.nodeType === 3) { // Text
+        obj = xml.nodeValue.trim();
+    }
+
+    if (xml.hasChildNodes()) {
+        for (var i = 0; i < xml.childNodes.length; i++) {
+            var item = xml.childNodes.item(i);
+            var nodeName = item.nodeName;
+
+            if (typeof obj[nodeName] === "undefined") {
+                obj[nodeName] = xmlToJson(item);
+            } else {
+                if (!Array.isArray(obj[nodeName])) {
+                    obj[nodeName] = [obj[nodeName]];
+                }
+                obj[nodeName].push(xmlToJson(item));
+            }
+        }
+    }
+
+   return obj;
+}
+</script>

ej2-asp-core-mvc/code-snippet/gantt/how-to/xmlToData/tagHelper

@@ -0,0 +1,73 @@
+<ejs-uploader id="UploadFiles" selected="onSelect" allowedextensions=".xml" autoUpload="false"></ejs-uploader>
+
+<ejs-gantt id='Gantt' dataSource="ViewBag.DataSource" height="450px">
+    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
+                        endDate="EndDate" duration="Duration" progress="Progress" parentID="ParentId">
+    </e-gantt-taskfields>
+</ejs-gantt>
+
+<script>
+    function transformGanttData(data) {
+        return data.GanttTasks.task.map(task => ({
+            TaskId: task.TaskId ? Number(task.TaskId["#text"]) : null,
+            TaskName: task.TaskName ? task.TaskName["#text"] : null,
+            StartDate: task.StartDate ? task.StartDate["#text"] : null,
+            EndDate: task.EndDate ? task.EndDate["#text"] : null,
+            Duration: task.Duration && "#text" in task.Duration ? Number(task.Duration["#text"]) : null,
+            BaselineStartDate: task.BaselineStartDate ? task.BaselineStartDate["#text"] : null,
+            BaselineEndDate: task.BaselineEndDate ? task.BaselineEndDate["#text"] : null,
+            Progress: task.Progress ? Number(task.Progress["#text"]) : null,
+            ParentId: task.ParentId && "#text" in task.ParentId ? Number(task.ParentId["#text"]) : null,
+            Predecessor: task.Predecessor && "#text" in task.Predecessor ? task.Predecessor["#text"] : null,
+        }));
+    }
+    function onSelect(args) {
+        var file = args.filesData[0].rawFile;
+        var reader = new FileReader();
+
+        reader.onload = function(event) {
+            var xmlString = event.target.result;
+            var parser = new DOMParser();
+            var xmlDoc = parser.parseFromString(xmlString, "text/xml");
+
+            var ganttTasks = xmlToJson(xmlDoc);
+            var transformedData = transformGanttData(ganttTasks);
+            var ganttObj = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
+            ganttObj.dataSource = transformedData;
+        };
+        reader.readAsText(file);
+    }
+
+    function xmlToJson(xml) {
+        var obj = {};
+
+        if (xml.nodeType === 1) { // Element
+            if (xml.attributes.length > 0) {
+                obj["attributes"] = {};
+                for (var j = 0; j < xml.attributes.length; j++) {
+                    var attribute = xml.attributes.item(j);
+                    obj["attributes"][attribute.nodeName] = attribute.nodeValue;
+                }
+            }
+        } else if (xml.nodeType === 3) { // Text
+            obj = xml.nodeValue.trim();
+        }
+
+        if (xml.hasChildNodes()) {
+            for (var i = 0; i < xml.childNodes.length; i++) {
+                var item = xml.childNodes.item(i);
+                var nodeName = item.nodeName;
+
+                if (typeof obj[nodeName] === "undefined") {
+                    obj[nodeName] = xmlToJson(item);
+                } else {
+                    if (!Array.isArray(obj[nodeName])) {
+                        obj[nodeName] = [obj[nodeName]];
+                    }
+                    obj[nodeName].push(xmlToJson(item));
+                }
+            }
+        }
+        return obj;
+    }
+</script>

ej2-asp-core-mvc/code-snippet/gantt/how-to/xmlToData/xmlToData.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = GanttData.ProjectNewData();
+    return View();
+}

ej2-asp-core-mvc/gantt/how-to/xml-to-data.md

@@ -0,0 +1,49 @@
+---
+layout: post
+title: Import Microsoft Project XML into ##Platform_Name## Gantt Component| Syncfusion
+description: Learn here to import microsoft project XML into Syncfusion ##Platform_Name## Gantt component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Xml to data
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Import Microsoft Project XML into Gantt Chart
+
+In this guide, we'll explore how to import task data from an XML file into a Gantt Chart. This example assumes you have an XML file conforming to the Microsoft Project XML schema, containing task-related information.
+
+## Steps
+
+* Add a file upload component to your application using Syncfusion's `Uploader` component. This allows users to upload XML files easily.
+* Implement the `Selected` method in the Uploader. This method reads the uploaded XML file, converts it into a list of GanttDataSource objects, and updates the Gantt Chart's data source.
+* Use the xmlToJson method to parse the XML content and convert it into JSON format.
+* Implement additional utility methods, such as `transformGanttData`, to handle specific data transformations required for the Gantt Chart.
+* Ensure that your Gantt Chart component is initialized with the appropriate task fields and edit settings.
+
+With these steps, you'll be able to seamlessly import task data from XML files and display it in the Gantt Chart.
+
+The following code snippet demonstrates how to import a Microsoft Project XML file into the Gantt Chart control.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/gantt/how-to/xmlToData/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="xmlToData.cs" %}
+{% include code-snippet/gantt/how-to/xmlToData/xmlToData.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/gantt/how-to/xmlToData/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="xmlToData.cs" %}
+{% include code-snippet/gantt/how-to/xmlToData/xmlToData.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+

ej2-asp-core-toc.html

@@ -1284,6 +1284,7 @@
 			<li><a href="/ej2-asp-core/gantt/how-to/drag-and-drop">Drag and drop from another component</a></li>
 			<li><a href="/ej2-asp-core/gantt/how-to/new-row-position">Add new row position while adding</a></li>
 			<li><a href="/ej2-asp-core/gantt/how-to/restrict-collapse-chart-rows">Restrict collapsing of records when clicking on Gantt chart rows</a></li>
+			<li><a href="/ej2-asp-core/gantt/how-to/xml-to-data">Import microsoft project XML into Gantt chart</a></li>
 			</ul>
 			</li>
 			<li>

ej2-asp-mvc-toc.html

@@ -1232,6 +1232,7 @@
 			<li><a href="/ej2-asp-mvc/gantt/how-to/drag-and-drop">Drag and drop from another component</a></li>
 			<li><a href="/ej2-asp-mvc/gantt/how-to/new-row-position">Add new row position while adding</a></li>
 			<li><a href="/ej2-asp-mvc/gantt/how-to/restrict-collapse-chart-rows">Restrict collapsing of records when clicking on Gantt chart rows</a></li>
+			<li><a href="/ej2-asp-mvc/gantt/how-to/xml-to-data">Import microsoft project XML into Gantt chart</a></li>
 			</ul>
 			</li>
 			<li>