RadiantQ jQuery Gantt Package
XML Data
Previous Topic  Next Topic 

Using XML Data


XML is another common way web services expose data to the client. Here is some code that shows how the XML data retrieved has to be "massaged" before binding it to the gantt.

In HTML

    $.ajax({

        type: "GET",

        dataType: 'xml text',

        url: 'GanttData.xml',

        converters:

        {

            "xml text": function (data) {

                // We use the xml2json jquery plugin to convert xml to json.

                var json = $.xml2json(data).task;

                return $.parseJSON(window.JSON.stringify(json), true

                /*converts date strings to date objects*/

                , true

                /*converts ISO dates to local dates*/

                );

            }

        },

        success: function (data) {

            self.jsonData = data;

            $.holdReady(false);

        }

    });


And binding the above json list to the Gantt,

In HTML

    $ganttControl.GanttControl({

        ProjectStartDate: anchorTime,

        DataSource: self.jsonData,

        ....

        ....

    });


In ASP.NET MVC

var AjaxSettings =

{

    dataType: 'xml text',

    converters:

    {

        "xml text": function (data) {

            // We use the xml2json jquery plug-in to convert xml to json.

            var json = $.xml2json(data).TaskInfo;

            var str = window.JSON.stringify(json);

            var parse = $.parseJSON(str, true

            /*converts date strings to date objects*/

            , true

            /*converts ISO dates to local dates*/

            );

            return parse;

        }

    }

};


And pass the AjaxSettings to Gantt,

In ASP.NET MVC 

@Html.JQProjectGantt(

            new JQProjectGanttSettings()

            {

                ControlId = "gantt_container",

                AfterGanttWidgetInitializedCallback = "AfterGanttWidgetInitializedCallback",

                DataSourceUrl = new Uri("/Home/GanttControlXMLItemSource", UriKind.RelativeOrAbsolute),

                AjaxSettings = "AjaxSettings",

                Options = new ProjectGanttOptions()

                {

                    IDBinding = new Binding("ID"),

                    NameBinding = new Binding("Name"),

                    IndentLevelBinding = new Binding("IndentLevel"),

                    StartTimeBinding = new Binding("StartTime"),

                    EffortBinding = new Binding("Effort"),

                    PredecessorIndicesBinding = new Binding("PredecessorIndices"),

                    ProgressPercentBinding = new Binding("ProgressPercent"),

                    GanttChartOptions = new GanttChartOptions()

                    {

                        AnchorTime = DateTime.Today

                    }

                }

            })


In ASP.NET

var AjaxSettings =

{

    dataType: 'xml text',

    converters:

    {

        "xml text": function (data) {

            // We use the xml2json jquery plug-in to convert xml to json.

            var json = $.xml2json(data).TaskInfo;

            var str = window.JSON.stringify(json);

            var parse = $.parseJSON(str, true

            /*converts date strings to date objects*/

            , true

            /*converts ISO dates to local dates*/

            );

            return parse;

        }

    }

};


And pass the AjaxSettings to Gantt,

In ASP.NET

<RQ:GanttControl ID="gantt" DataSourceUrl="../../DataSources/GanttDataBoundToXML.ashx"  AjaxSettings = "AjaxSettings"

    AfterGanttWidgetInitializedCallback="AfterGanttWidgetInitializedCallback"

    LocalizationResourceFilePath="~/Src/ResourceStrings/"

    runat="server" />


NOTE: If you are using namespaces in your XML (for example, <ns:StartTime>...</ns:StartTime>), then the above xml2json works slightly differently between browsers.


IE: In IE, the above element is referenced in the containing parent object with a property named "ns:StartTime".

Other browsers: The above element is referenced with a property named "StartTime".


To workaround this issue, you can determine what the property name would be by probing into your first task list item as follows:

    // For eg: Using the namespace "ns" in xml,

    <task Name="Task 1" ID="1" ns:StartTime="2012-02-02T00:00:00Z" Effort="08:00:00" Description="Description of Task1"></task>

    // In Firefox the property ends up being StartTime and in IE it's ns:StartTime;

    var taskStartTimeProperty = self.jsonData[0]["ns:StartTime"] ? "ns:StartTime" : "StartTime";



Here is the resultant gantt:

This is illustrated in this samples:

In HTML                : ..\Samples\GanttBoundToXML.htm.

In ASP.NET MVC     : ..\Views\Home\ProjectGantt\GanttBoundToXML.cshtml.

In ASP.NET            : ..\Samples\ProjectGantt\GanttBoundToXML.aspx.


© RadiantQ 2022. All Rights Reserved.