Integrating Ext Gantt with SharePoint

Post by **sonisick** » Wed Dec 29, 2010 5:17 pm

How should the data look for it to parse it correctly?

"["rows":{"Id":1, "Name":"Planning" ,"StartDate": "2010-12-20T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""}, {"Id":2, "Name":"Investigate" ,"StartDate": "2010-12-27T00:00:00", "EndDate": "2011-01-01T00:00:00", "PercentDone": 30, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""}, {"Id":3, "Name":"Assign Resources" ,"StartDate": "2011-01-03T00:00:00", "EndDate": "2011-01-06T00:00:00", "PercentDone": 0, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""}, {"Id":4, "Name":"Gather Documents" ,"StartDate": "2011-01-10T00:00:00", "EndDate": "2011-01-14T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""}, {"Id":5, "Name":"Report to Management" ,"StartDate": "2011-01-28T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 0, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""}, {"Id":6, "Name":"Implementation Phase 1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-03-01T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""}, {"Id":7, "Name":"Preparation Work" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": NaN, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""}, {"Id":8, "Name":"Build Prototype" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-02-24T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""}, {"Id":9, "Name":"Step1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": 30, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""}, {"Id":10, "Name":"Step 2" ,"StartDate": "2011-01-31T00:00:00", "EndDate": "2011-02-10T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "user trusted", "Duration":""}, {"Id":11, "Name":"Step 3" ,"StartDate": "2011-02-08T00:00:00", "EndDate": "2011-02-16T00:00:00", "PercentDone": 90, "ParentId": null, "IsLeaf": true, "Responsible": "user trusted", "Duration":""}, {"Id":12, "Name":"FollowUp with User" ,"StartDate": "2011-02-22T00:00:00", "EndDate": "2011-02-28T00:00:00", "PercentDone": NaN, "ParentId": null, "IsLeaf": true, "Responsible": "user trusted", "Duration":""}]"

Post by **mats** » Wed Dec 29, 2010 5:48 pm

Almost correct

. It should be an object containing an array, instead of the whole thing being an array. The shouldn't be there either.

Something like:

{ 
     "rows" : [{"Id":1, "Name":"Planning" ,"StartDate": "2010-12-20T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},<br />{"Id":2, "Name":"Investigate" ,"StartDate": "2010-12-27T00:00:00", "EndDate": "2011-01-01T00:00:00", "PercentDone": 30, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},<br />{"Id":3, "Name":"Assign Resources" ,"StartDate": "2011-01-03T00:00:00", "EndDate": "2011-01-06T00:00:00", "PercentDone": 0, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},<br />{"Id":4, "Name":"Gather Documents" ,"StartDate": "2011-01-10T00:00:00", "EndDate": "2011-01-14T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},<br />{"Id":5, "Name":"Report to Management" ,"StartDate": "2011-01-28T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 0, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},<br />{"Id":6, "Name":"Implementation Phase 1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-03-01T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""},<br />{"Id":7, "Name":"Preparation Work" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": NaN, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""},<br />{"Id":8, "Name":"Build Prototype" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-02-24T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""},<br />{"Id":9, "Name":"Step1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": 30, "ParentId": null, "IsLeaf": true, "Responsible": "test user", "Duration":""},<br />{"Id":10, "Name":"Step 2" ,"StartDate": "2011-01-31T00:00:00", "EndDate": "2011-02-10T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "user trusted", "Duration":""},<br />{"Id":11, "Name":"Step 3" ,"StartDate": "2011-02-08T00:00:00", "EndDate": "2011-02-16T00:00:00", "PercentDone": 90, "ParentId": null, "IsLeaf": true, "Responsible": "user trusted", "Duration":""},<br />{"Id":12, "Name":"FollowUp with User" ,"StartDate": "2011-02-22T00:00:00", "EndDate": "2011-02-28T00:00:00", "PercentDone": NaN, "ParentId": null, "IsLeaf": true, "Responsible": "user trusted", "Duration":""}]
}

Your reader is already configured the right way, using 'rows' as its root.

Post by **sonisick** » Wed Dec 29, 2010 7:25 pm

data looks better but still doesn't load.

{"rows": [{"Id":1, "Name":"Planning" ,"StartDate": "2010-12-20T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":2, "Name":"Investigate" ,"StartDate": "2010-12-27T00:00:00", "EndDate": "2011-01-01T00:00:00", "PercentDone": 30, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":3, "Name":"Assign Resources" ,"StartDate": "2011-01-03T00:00:00", "EndDate": "2011-01-06T00:00:00", "PercentDone": 0, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":4, "Name":"Gather Documents" ,"StartDate": "2011-01-10T00:00:00", "EndDate": "2011-01-14T00:00:00", "PercentDone": 40, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":5, "Name":"Report to Management" ,"StartDate": "2011-01-28T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 0, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":6, "Name":"Implementation Phase 1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-03-01T00:00:00", "PercentDone": 40, "ParentId": 1, "IsLeaf": true, "Responsible": "test user", "Duration":""},{"Id":7, "Name":"Preparation Work" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": NaN, "ParentId": 6, "IsLeaf": true, "Responsible": "test user", "Duration":""},{"Id":8, "Name":"Build Prototype" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-02-24T00:00:00", "PercentDone": 40, "ParentId": 6, "IsLeaf": true, "Responsible": "test user", "Duration":""},{"Id":9, "Name":"Step1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": 30, "ParentId": 8, "IsLeaf": true, "Responsible": "test user", "Duration":""},{"Id":10, "Name":"Step 2" ,"StartDate": "2011-01-31T00:00:00", "EndDate": "2011-02-10T00:00:00", "PercentDone": 40, "ParentId": 8, "IsLeaf": true, "Responsible": "user trusted", "Duration":""},{"Id":11, "Name":"Step 3" ,"StartDate": "2011-02-08T00:00:00", "EndDate": "2011-02-16T00:00:00", "PercentDone": 90, "ParentId": 8, "IsLeaf": true, "Responsible": "user trusted", "Duration":""},{"Id":12, "Name":"FollowUp with User" ,"StartDate": "2011-02-22T00:00:00", "EndDate": "2011-02-28T00:00:00", "PercentDone": NaN, "ParentId": 8, "IsLeaf": true, "Responsible": "user trusted", "Duration":""}]}

Post by **mats** » Wed Dec 29, 2010 7:28 pm

You can use JsonLint to validate your data. It just told me that the error is your 'NaN' which is not valid. Your server should output a valid number for PercentDone.

https://www.jsonlint.com/

Post by **sonisick** » Wed Dec 29, 2010 7:44 pm

Thanks Mats,
we corrected the "NaN" problem--Now we get 0 for NaN. Corrected an "IsLeaf" problem --all were returning true and validated the output with JSLint.

Still No Cigar!!

Any other suggestions?

"{"rows": [{"Id":1, "Name":"Planning" ,"StartDate": "2010-12-20T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 40, "ParentId": null, "IsLeaf": false, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":2, "Name":"Investigate" ,"StartDate": "2010-12-27T00:00:00", "EndDate": "2011-01-01T00:00:00", "PercentDone": 30, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":3, "Name":"Assign Resources" ,"StartDate": "2011-01-03T00:00:00", "EndDate": "2011-01-06T00:00:00", "PercentDone": 0, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":4, "Name":"Gather Documents" ,"StartDate": "2011-01-10T00:00:00", "EndDate": "2011-01-14T00:00:00", "PercentDone": 40, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":5, "Name":"Report to Management" ,"StartDate": "2011-01-28T00:00:00", "EndDate": "2011-02-04T00:00:00", "PercentDone": 0, "ParentId": 1, "IsLeaf": true, "Responsible": "Stephan A. Onisick", "Duration":""},{"Id":6, "Name":"Implementation Phase 1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-03-01T00:00:00", "PercentDone": 40, "ParentId": 1, "IsLeaf": false, "Responsible": "test user", "Duration":""},{"Id":7, "Name":"Preparation Work" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": 0, "ParentId": 6, "IsLeaf": true, "Responsible": "test user", "Duration":""},{"Id":8, "Name":"Build Prototype" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-02-24T00:00:00", "PercentDone": 40, "ParentId": 6, "IsLeaf": true, "Responsible": "test user", "Duration":""},{"Id":9, "Name":"Step1" ,"StartDate": "2011-01-21T00:00:00", "EndDate": "2011-01-28T00:00:00", "PercentDone": 30, "ParentId": 8, "IsLeaf": true, "Responsible": "test user", "Duration":""},{"Id":10, "Name":"Step 2" ,"StartDate": "2011-01-31T00:00:00", "EndDate": "2011-02-10T00:00:00", "PercentDone": 40, "ParentId": 8, "IsLeaf": true, "Responsible": "user trusted", "Duration":""},{"Id":11, "Name":"Step 3" ,"StartDate": "2011-02-08T00:00:00", "EndDate": "2011-02-16T00:00:00", "PercentDone": 90, "ParentId": 8, "IsLeaf": true, "Responsible": "user trusted", "Duration":""},{"Id":12, "Name":"FollowUp with User" ,"StartDate": "2011-02-22T00:00:00", "EndDate": "2011-02-28T00:00:00", "PercentDone": 0, "ParentId": 8, "IsLeaf": true, "Responsible": "user trusted", "Duration":""}]}"

Post by **mats** » Wed Dec 29, 2010 7:52 pm

Darn! Does anything show up? Try attaching a listener to the store exception event and see if it fires. Remove autoLoad : true too for this to work:

var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
      leaf_field_name: "IsLeaf",
      parent_id_field_name: "ParentId",      
      proxy: new Ext.data.MemoryProxy(data),
      reader: new Ext.data.JsonReader({
            idProperty: 'Id',
            root: 'rows',
            fields: fields
      })
});

store.on('exception', function() { alert('error'); });
store.load();

Post by **sonisick** » Wed Dec 29, 2010 8:15 pm

I get back an alert of "error"--what then?

Post by **mats** » Wed Dec 29, 2010 8:20 pm

That means the reader is having trouble parsing the data. I think I know why, the object you pass to the memory proxy should be a plain JS object. In your case I suspect the 'data' variable is a JSON string? In that case try:

var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
      autoLoad : true,
      leaf_field_name: "IsLeaf",
      parent_id_field_name: "ParentId",      
      proxy: new Ext.data.MemoryProxy(Ext.decode(data)),
      reader: new Ext.data.JsonReader({
            idProperty: 'Id',
            root: 'rows',
            fields: fields
      })
      
});

Post by **sonisick** » Wed Dec 29, 2010 9:17 pm

Ext.decode worked to get data into store.
New message:

A Runtime Error has occurred.
Do you whish to Debug?

Line: 47296
Error: Object doesn't support this property or method

Post by **mats** » Wed Dec 29, 2010 9:21 pm

Can you debug what's in the store? Try:

store.each(function(record) {
    console.log(record.get('Name') + ' ' + record.get('StartDate') + ' ' record.get('EndDate'));
});

just to make sure there's valid data in the store.

Support Forum

Integrating Ext Gantt with SharePoint