Load On Demand Child tasks

Post by **julianjelfs** » Fri Oct 22, 2010 12:08 pm

Hi,

I am trying to use the TreeGanttPanel to load tasks incrementally. i.e. I load the immediate children of the root first and set them to be collapsed and then when each node is expanded, I want the children to be loaded on demand. This is for performance reasons so that we can support larger trees.

I'm pretty sure everything else is set up correctly because if I have the events stores loaded with all data in one go then everything works correctly.

I have two problems so far.

Firstly, the initial load works correctly and I see the first level nodes collapsed and in the right place. When I expand a node, I can see that the request is being made correctly and that the correct data is being returned. The child nodes are rendered, but they are rendered in the wrong place. They do not come out beneath their parent, they come out at the end of the task list.

Secondly, if I try to expand a child node that has itself been loaded on demand (so two levels deep) I get a javascript error and the child nodes are not loaded at all. Again in this scenario I can see the request being made to the server correctly and the correct response coming back.

I don't know whether this second problem is caused by the first or not.

What can I do to further diagnose this problem? It is not feasible for us to load all of the data at once so we need to get this lazy loading to work.

Thanks in advance,

Julian.

Post by **mats** » Fri Oct 22, 2010 1:17 pm

Are you setting the ParentId correctly for the data you load on demand? Could you please post your server response and your data reader config?

Post by **julianjelfs** » Fri Oct 22, 2010 1:27 pm

I think the ParentIds are all set up correctly.

This is the code for the event store including the reader:

var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
                        proxy : new Ext.data.HttpProxy({
                            url : '/arm/ScheduleGantt.axd',
                            method:'GET'
                        }),
                        baseParams : {
                            type : "tasks",
                            rootId : Parameters.bbsItemID, 
                            psk: window["PageStateKey"] ? PageStateKey : "" 
                        },
                        defaultExpanded : false,
		                reader: new Ext.data.JsonReader({idProperty : 'Id'}, [
     	                        {name:'Id', mapping : 'ItemId'},
                                {name:'Name', type:'string'},
                                {name:'WBSItemName', type:'string'},
                                {name:'TempName', type:'string'},
                                {name:'StartDate',type : 'date', dateFormat : 'c'},
                                {name:'EndDate', type : 'date', dateFormat : 'c' },
                                {name:'RiskAdjustedStartDate', type : 'date', dateFormat : 'c'},
                                {name:'RiskAdjustedEndDate', type : 'date', dateFormat : 'c' },
                                {name:'RiskMitigatedStartDate', type : 'date', dateFormat : 'c'},
                                {name:'RiskMitigatedEndDate', type : 'date', dateFormat : 'c' },
                                {name:'PercentageComplete'},
                                {name:'ParentId',type: 'auto'},
                                {name:'IsLeaf', type: 'bool'}
                                ]
                        )
                    });

Here is the initial request and response:

/arm/ScheduleGantt.axd?_dc=1287746575730&rootId=64&anode=&type=tasks&psk=e526118b-7cfc-49b6-b461-59e1a279abb3

reply:

[{"Id":65,"Name":"Phase 1","WBSItemName":"1","TempName":"Phase 1","StartDate":"2003-02-11T00:00:00","EndDate":"2003-03-25T00:00:00","RiskAdjustedStartDate":null,"RiskAdjustedEndDate":null,"RiskMitigatedStartDate":null,"RiskMitigatedEndDate":null,"PercentageComplete":0.000000,"ParentId":64,"IsLeaf":false},{"Id":68,"Name":"Phase 2","WBSItemName":"2","TempName":"Phase 2","StartDate":"2003-03-26T00:00:00","EndDate":"2003-07-10T00:00:00","RiskAdjustedStartDate":null,"RiskAdjustedEndDate":null,"RiskMitigatedStartDate":null,"RiskMitigatedEndDate":null,"PercentageComplete":0.000000,"ParentId":64,"IsLeaf":false},{"Id":78,"Name":"Phase 3","WBSItemName":"3","TempName":"Phase 3","StartDate":"2003-07-11T00:00:00","EndDate":"2003-07-21T00:00:00","RiskAdjustedStartDate":null,"RiskAdjustedEndDate":null,"RiskMitigatedStartDate":null,"RiskMitigatedEndDate":null,"PercentageComplete":0.000000,"ParentId":64,"IsLeaf":false}]

So far so good. So the first node returned there has id 65 and it's parent is 64. If I expand 65 I get the following request:

/arm/ScheduleGantt.axd?_dc=1287746630460&anode=65&type=tasks&rootId=64&psk=e526118b-7cfc-49b6-b461-59e1a279abb3

which seems correct. And I get the response:

[{"Id":66,"Name":"Design","WBSItemName":"1.1","TempName":"Design","StartDate":"2003-02-11T00:00:00","EndDate":"2003-03-11T00:00:00","RiskAdjustedStartDate":null,"RiskAdjustedEndDate":null,"RiskMitigatedStartDate":null,"RiskMitigatedEndDate":null,"PercentageComplete":0.000000,"ParentId":65,"IsLeaf":true},{"Id":67,"Name":"Issue Permit to Work","WBSItemName":"1.2","TempName":"Issue Permit to Work","StartDate":"2003-03-12T00:00:00","EndDate":"2003-03-25T00:00:00","RiskAdjustedStartDate":null,"RiskAdjustedEndDate":null,"RiskMitigatedStartDate":null,"RiskMitigatedEndDate":null,"PercentageComplete":0.000000,"ParentId":65,"IsLeaf":true}]

which again seems correct i.e. the ParentId for each of these is set to 65.

However they do not come out in the right place.

Please let me know if there is any more information I can provide to help work out what's wrong.

Thanks,

Julian.

Post by **mats** » Fri Oct 22, 2010 1:33 pm

Just a guess, try specifing the true type of your Id and ParentId fields, instead of setting one of them to 'auto'. Eg

reader: new Ext.data.JsonReader({idProperty : 'Id'}, [
                                {name:'Id', mapping : 'ItemId', type:'int'},
                                {name:'Name', type:'string'},
                                {name:'WBSItemName', type:'string'},
                                {name:'TempName', type:'string'},
                                {name:'StartDate',type : 'date', dateFormat : 'c'},
                                {name:'EndDate', type : 'date', dateFormat : 'c' },
                                {name:'RiskAdjustedStartDate', type : 'date', dateFormat : 'c'},
                                {name:'RiskAdjustedEndDate', type : 'date', dateFormat : 'c' },
                                {name:'RiskMitigatedStartDate', type : 'date', dateFormat : 'c'},
                                {name:'RiskMitigatedEndDate', type : 'date', dateFormat : 'c' },
                                {name:'PercentageComplete'},
                                {name:'ParentId',type: 'int'},
                                {name:'IsLeaf', type: 'bool'}
                                ]
                        )
                    });

Post by **julianjelfs** » Fri Oct 22, 2010 1:36 pm

Same result I'm afraid ...

Post by **mats** » Fri Oct 22, 2010 1:40 pm

Hm, this looks odd:

{name:'Id', mapping : 'ItemId'},

Why are you mapping to a field that doesn't exist? Try removing the mapping.

Post by **julianjelfs** » Fri Oct 22, 2010 1:50 pm

Agreed that does look odd. Can't believe I didn't notice that. Unfortunately I removed it and it doesn't help. Code now looks like this:

reader: new Ext.data.JsonReader({idProperty : 'Id'}, [
     	                        {name:'Id', type: 'int'},
                                {name:'Name', type:'string'},
                                {name:'WBSItemName', type:'string'},
                                {name:'TempName', type:'string'},
                                {name:'StartDate',type : 'date', dateFormat : 'c'},
                                {name:'EndDate', type : 'date', dateFormat : 'c' },
                                {name:'RiskAdjustedStartDate', type : 'date', dateFormat : 'c'},
                                {name:'RiskAdjustedEndDate', type : 'date', dateFormat : 'c' },
                                {name:'RiskMitigatedStartDate', type : 'date', dateFormat : 'c'},
                                {name:'RiskMitigatedEndDate', type : 'date', dateFormat : 'c' },
                                {name:'PercentageComplete'},
                                {name:'ParentId',type: 'int'},
                                {name:'IsLeaf', type: 'bool'}
                                ]
                        )

But still the same problems...

Post by **mats** » Fri Oct 22, 2010 1:55 pm

Weird, your code/data looks ok to me. Could you setup an online test environment that I could check out?

Post by **julianjelfs** » Fri Oct 22, 2010 2:24 pm

That might be tricky. Let me see if I can isolate the behaviour in a sample project using the same data. If I can do that I'm sure we can find a way to get it to you. Thanks.

Post by **mats** » Mon Oct 25, 2010 9:58 am

The gantt task store assumes the root level tasks will have a ParentId of null or "". Your setup fails since this is not the case, and the following method on the store fails:

Ext.ux.maximgb.tg.AdjacencyListStore = Ext.extend(Ext.ux.maximgb.tg.AbstractTreeStore,
{
    getRootNodes : function()
    {
        var pField = this.parent_id_field_name;
        return this.queryBy(function(r) { 
            return r.data[pField] === null || r.data[pField] === ""; 
        }).items;
    },

Easiest way is just to change your backend to return

ParentId: null

for the top level tasks. You could probably override that method if you want to keep working with ParentId:s set for the top level root nodes (though I haven't done that before myself).

Support Forum

Load On Demand Child tasks