Can't get dstore/Tree working

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Can't get dstore/Tree working

Harry Devine

I have recently upgraded my dGrid solutions to version 1.1.0 and implemented dstore for them.  Working great.  However, I'm now trying to implement/backfill a project that uses dGrid/Tree.  I can't get any data to show up.  I've been reading up on it at both dgrid.io and dstorejs.io, but I can't see what I'm doing wrong.  I'm going to put my code below.  Can someone spot what I'm missing?  For the record, Memory and TreeStore are dstore/Memory and dstore/Tree respectively.  Also, the grid shows up, just without any expando icons for the child items to be displayed.


Thanks,

Harry


var StandardGrid = declare([Grid, Tree, Selection, Pagination, ColumnResizer, DijitRegistry]);     

var testData = [       

    {"locid": "ABE", "qa_month": 4, "hasChildren" : true},       

      {"review_date": "04/27/16", "result" : "Pass", "comments" : "Comment 1", "parent": "ABE"},       

      {"review_date": "04/21/15", "result" : "Fail", "comments" : "Comment 2.", "parent": "ABE"},       

      {"review_date": "04/21/15", "result" : "Pass", "comments" : "Comment 3", "parent": "ABE"},       

    {"locid": "ABI", "qa_month": 2},       

    {"locid": "ABQ", "qa_month": 11},       

    {"locid": "ACK", "qa_month": 1},       

    {"locid": "ACT", "qa_month": 3},       

    {"locid": "ACY", "qa_month": 3}     

];
var TreeMemory = declare([Memory, TreeStore]);     

mod.approachStore = new TreeMemory({data: testData, idProperty: 'locid',       

    getChildren: function(object, onComplete) {         

      return onComplete(object.children || []);       

},       

mayHaveChildren: function(item) {

  return 'children' in item;       

},       

getLabel: function(object) {         

    return object.name;

}

});
/* Define the Grid  */     

if (!registry.byId("approachGrid")) {

       mod.msawGrid = new StandardGrid({

          columns: {

            id:     {label: "LOCID", renderExpando: true, field: "locid", width: 100 },

            annual: {label: "QA Annual Month", field: "qa_month", width: 100, renderCell:mod.formatQAMonth }

          },

          loadingMessage: "Loading MSAW Approaches...", 

          errorMessage: "Error loading MSAW Approaches...",

          collection: mod.approachStore,

          sort: [{property: "locid", decending: true}],

          rowsPerPage: 50

        }, "approachGrid");

}


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can't get dstore/Tree working

frode1
First, the collection you provide when you instantiate the Grid/Tree, should be the "root collection", i.e. the items that are shown when nothing is expanded.

In your case, anything without a "parent" attribute seems to be the root collection, so you can do:

    mod.msawGrid = new StandardGrid({
      .....
      collection: mod.approachStore.filter( o => o.parent == undefined ),

Second, the store should provide getChildren and mayHaveChildren. If you look at the source for dstore/Tree, you can see how they've done it: https://github.com/SitePen/dstore/blob/master/Tree.js

In your case, you've overriden both. Your mayHaveChildren function looks for a "children" attribute, but none of the items in your dstore has that. Similarly, your getChildren function seems unfinished. I've modified your code a bit in the following jsbin, see if that helps: https://jsbin.com/bonehomoke/1/edit?html,js,output

Note that when you provide getChildren and mayHaveChildren yourself, your store doesn't have to extent dstore/Tree (look at its source, it doesn't do much, more like an example to follow).

--
Frode

On Tue, Apr 04, 2017 at 09:27:55AM -0400, Harry Devine wrote:

> I have recently upgraded my dGrid solutions to version 1.1.0 and implemented
> dstore for them.  Working great.  However, I'm now trying to implement/backfill
> a project that uses dGrid/Tree.  I can't get any data to show up.  I've been
> reading up on it at both dgrid.io and dstorejs.io, but I can't see what I'm
> doing wrong.  I'm going to put my code below.  Can someone spot what I'm
> missing?  For the record, Memory and TreeStore are dstore/Memory and dstore/
> Tree respectively.  Also, the grid shows up, just without any expando icons for
> the child items to be displayed.
>
>
> Thanks,
>
> Harry
>
>
> var StandardGrid = declare([Grid, Tree, Selection, Pagination, ColumnResizer,
> DijitRegistry]);    
>
> var testData = [      
>
>     {"locid": "ABE", "qa_month": 4, "hasChildren" : true},      
>
>       {"review_date": "04/27/16", "result" : "Pass", "comments" : "Comment 1",
> "parent": "ABE"},      
>
>       {"review_date": "04/21/15", "result" : "Fail", "comments" : "Comment 2.",
> "parent": "ABE"},      
>
>       {"review_date": "04/21/15", "result" : "Pass", "comments" : "Comment 3",
> "parent": "ABE"},      
>
>     {"locid": "ABI", "qa_month": 2},      
>
>     {"locid": "ABQ", "qa_month": 11},      
>
>     {"locid": "ACK", "qa_month": 1},      
>
>     {"locid": "ACT", "qa_month": 3},      
>
>     {"locid": "ACY", "qa_month": 3}    
>
> ];
> var TreeMemory = declare([Memory, TreeStore]);    
>
> mod.approachStore = new TreeMemory({data: testData, idProperty: 'locid',      
>
>     getChildren: function(object, onComplete) {        
>
>       return onComplete(object.children || []);      
>
> },      
>
> mayHaveChildren: function(item) {
>
>   return 'children' in item;      
>
> },      
>
> getLabel: function(object) {        
>
>     return object.name;
>
> }
>
> });
> /* Define the Grid  */    
>
> if (!registry.byId("approachGrid")) {
>
>        mod.msawGrid = new StandardGrid({
>
>           columns: {
>
>             id:     {label: "LOCID", renderExpando: true, field: "locid",
> width: 100 },
>
>             annual: {label: "QA Annual Month", field: "qa_month", width: 100,
> renderCell:mod.formatQAMonth }
>
>           },
>
>           loadingMessage: "Loading MSAW Approaches...",
>
>           errorMessage: "Error loading MSAW Approaches...",
>
>           collection: mod.approachStore,
>
>           sort: [{property: "locid", decending: true}],
>
>           rowsPerPage: 50
>
>         }, "approachGrid");
>
> }
>

> --
> Dojo Toolkit: http://dojotoolkit.org/
> Tutorials: http://dojotoolkit.org/documentation/
>
> [hidden email]
> To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can't get dstore/Tree working

Harry Devine

Thanks!  That worked great and really cleared things up.  I was really wrapping myself around the axle with the examples and docs.  Just seemed to confuse me more than help me.  The main part that I wasn't understanding (I understood the theory but not the implementation) was the  collection needing to filter to a root item.  All good now!


Very much appreciated!

Harry

On April 4, 2017 at 3:46 PM Frode Nilsen <[hidden email]> wrote:

First, the collection you provide when you instantiate the Grid/Tree, should be the "root collection", i.e. the items that are shown when nothing is expanded.

In your case, anything without a "parent" attribute seems to be the root collection, so you can do:

mod.msawGrid = new StandardGrid({
.....
collection: mod.approachStore.filter( o => o.parent == undefined ),

Second, the store should provide getChildren and mayHaveChildren. If you look at the source for dstore/Tree, you can see how they've done it: https://github.com/SitePen/dstore/blob/master/Tree.js

In your case, you've overriden both. Your mayHaveChildren function looks for a "children" attribute, but none of the items in your dstore has that. Similarly, your getChildren function seems unfinished. I've modified your code a bit in the following jsbin, see if that helps: https://jsbin.com/bonehomoke/1/edit?html,js,output

Note that when you provide getChildren and mayHaveChildren yourself, your store doesn't have to extent dstore/Tree (look at its source, it doesn't do much, more like an example to follow).

--
Frode

On Tue, Apr 04, 2017 at 09:27:55AM -0400, Harry Devine wrote:

I have recently upgraded my dGrid solutions to version 1.1.0 and implemented
dstore for them. Working great. However, I'm now trying to implement/backfill
a project that uses dGrid/Tree. I can't get any data to show up. I've been
reading up on it at both dgrid.io and dstorejs.io, but I can't see what I'm
doing wrong. I'm going to put my code below. Can someone spot what I'm
missing? For the record, Memory and TreeStore are dstore/Memory and dstore/
Tree respectively. Also, the grid shows up, just without any expando icons for
the child items to be displayed.

Thanks,

Harry

var StandardGrid = declare([Grid, Tree, Selection, Pagination, ColumnResizer,
DijitRegistry]);

var testData = [

{"locid": "ABE", "qa_month": 4, "hasChildren" : true},

{"review_date": "04/27/16", "result" : "Pass", "comments" : "Comment 1",
"parent": "ABE"},

{"review_date": "04/21/15", "result" : "Fail", "comments" : "Comment 2.",
"parent": "ABE"},

{"review_date": "04/21/15", "result" : "Pass", "comments" : "Comment 3",
"parent": "ABE"},

{"locid": "ABI", "qa_month": 2},

{"locid": "ABQ", "qa_month": 11},

{"locid": "ACK", "qa_month": 1},

{"locid": "ACT", "qa_month": 3},

{"locid": "ACY", "qa_month": 3}

];
var TreeMemory = declare([Memory, TreeStore]);

mod.approachStore = new TreeMemory({data: testData, idProperty: 'locid',

getChildren: function(object, onComplete) {

return onComplete(object.children || []);

},

mayHaveChildren: function(item) {

return 'children' in item;

},

getLabel: function(object) {

return object.name;

}

});
/* Define the Grid */

if (!registry.byId("approachGrid")) {

mod.msawGrid = new StandardGrid({

columns: {

id: {label: "LOCID", renderExpando: true, field: "locid",
width: 100 },

annual: {label: "QA Annual Month", field: "qa_month", width: 100,
renderCell:mod.formatQAMonth }

},

loadingMessage: "Loading MSAW Approaches...",

errorMessage: "Error loading MSAW Approaches...",

collection: mod.approachStore,

sort: [{property: "locid", decending: true}],

rowsPerPage: 50

}, "approachGrid");

}

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can't get dstore/Tree working

Jean-Claude Hujeux
In reply to this post by Harry Devine

Hi Harry,

Maybe the problem is your function mayHaveChildren() :

mayHaveChildren: function(item) {

  return 'children' in item;       

},  


that always returns false,


should be (?):

mayHaveChildren: function(item) {

  return 'hasChildren' in item && item.hasChildren;       

},  

or maybe simply:

mayHaveChildren: function(item) {

  return item.hasChildren;       

},  

jc
Le 04/04/2017 à 15:27, Harry Devine a écrit :

I have recently upgraded my dGrid solutions to version 1.1.0 and implemented dstore for them.  Working great.  However, I'm now trying to implement/backfill a project that uses dGrid/Tree.  I can't get any data to show up.  I've been reading up on it at both dgrid.io and dstorejs.io, but I can't see what I'm doing wrong.  I'm going to put my code below.  Can someone spot what I'm missing?  For the record, Memory and TreeStore are dstore/Memory and dstore/Tree respectively.  Also, the grid shows up, just without any expando icons for the child items to be displayed.


Thanks,

Harry


var StandardGrid = declare([Grid, Tree, Selection, Pagination, ColumnResizer, DijitRegistry]);     

var testData = [       

    {"locid": "ABE", "qa_month": 4, "hasChildren" : true},       

      {"review_date": "04/27/16", "result" : "Pass", "comments" : "Comment 1", "parent": "ABE"},       

      {"review_date": "04/21/15", "result" : "Fail", "comments" : "Comment 2.", "parent": "ABE"},       

      {"review_date": "04/21/15", "result" : "Pass", "comments" : "Comment 3", "parent": "ABE"},       

    {"locid": "ABI", "qa_month": 2},       

    {"locid": "ABQ", "qa_month": 11},       

    {"locid": "ACK", "qa_month": 1},       

    {"locid": "ACT", "qa_month": 3},       

    {"locid": "ACY", "qa_month": 3}     

];
var TreeMemory = declare([Memory, TreeStore]);     

mod.approachStore = new TreeMemory({data: testData, idProperty: 'locid',       

    getChildren: function(object, onComplete) {         

      return onComplete(object.children || []);       

},       

mayHaveChildren: function(item) {

  return 'children' in item;       

},       

getLabel: function(object) {         

    return object.name;

}

});
/* Define the Grid  */     

if (!registry.byId("approachGrid")) {

       mod.msawGrid = new StandardGrid({

          columns: {

            id:     {label: "LOCID", renderExpando: true, field: "locid", width: 100 },

            annual: {label: "QA Annual Month", field: "qa_month", width: 100, renderCell:mod.formatQAMonth }

          },

          loadingMessage: "Loading MSAW Approaches...", 

          errorMessage: "Error loading MSAW Approaches...",

          collection: mod.approachStore,

          sort: [{property: "locid", decending: true}],

          rowsPerPage: 50

        }, "approachGrid");

}





--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Loading...