How to programmatically update/refresh the display of a tree widget?

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

How to programmatically update/refresh the display of a tree widget?

唐梓乐
I have dynamically created a tree and connect that to an ItemFileReadStore (which instead of reading a static file, it reads from an object literal with same structure), but the problem is whenever I change anything in object literal or itemfilereadstore I can not find a way to update/refresh tree. So does anyone know how to refresh the tree display?

Here is the code sample:

var jsonData = null;
var json_item_store = null;

function init() {
jsonData = {};
jsonData['identifier'] = "name";
jsonData['label'] = "name";
jsonData['items'] = [];
jsonData['items'].push({name:'Argentina', type:'country'});
jsonData['items'].push({name:'Egypt', type:'country'});
json_item_store = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = new dijit.Tree(
{
id: "dijit_tree_results",
labelAttr: "name",
label: "results",
store: json_item_store,
style: "width:260px;height:300px;margin-top:5px;margin-left:5px;background-color:#ffffff"
},
dojo.byId('tree')
);

tree.startup();
}

function updateTree() {
jsonData['items'][0]['name'] = "Brazil";
var json_item_store2 = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = dijit.byId("dijit_tree_results");
//even create a new store doesn't help
tree.store = json_item_store2;
}

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

ReAsked: How to update/refresh the (display of a) tree widget?

thekryz
I need to reload a tree as well! In my case, the ItemFileReadStore uses server-generated JSON, which changes in time. How can the tree be reloaded / updated / refreshed?

Thanks,
chris

Yingqi wrote
I have dynamically created a tree and connect that to an ItemFileReadStore (which instead of reading a static file, it reads from an object literal with same structure), but the problem is whenever I change anything in object literal or itemfilereadstore I can not find a way to update/refresh tree. So does anyone know how to refresh the tree display?

Here is the code sample:

var jsonData = null;
var json_item_store = null;

function init() {
jsonData = {};
jsonData['identifier'] = "name";
jsonData['label'] = "name";
jsonData['items'] = [];
jsonData['items'].push({name:'Argentina', type:'country'});
jsonData['items'].push({name:'Egypt', type:'country'});
json_item_store = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = new dijit.Tree(
{
id: "dijit_tree_results",
labelAttr: "name",
label: "results",
store: json_item_store,
style: "width:260px;height:300px;margin-top:5px;margin-left:5px;background-color:#ffffff"
},
dojo.byId('tree')
);

tree.startup();
}

function updateTree() {
jsonData['items'][0]['name'] = "Brazil";
var json_item_store2 = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = dijit.byId("dijit_tree_results");
//even create a new store doesn't help
tree.store = json_item_store2;
}
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ReAsked: How to update/refresh the (display of a) tree widget?

lokesh
Hi,
  Basically u need to first destroy the tree and then recreate it.... You need to do something like this:

         var tr = new dojo.data.ItemFileReadStore({data: x});
         var dumm = dijit.byId('sampletree');
          if(dumm)
          {
             dumm.destroy();
          }
          var dummy = dijit.byId('sampletree');
          var newTree = new dijit.Tree( {
                        store:tr,
                        label:"sample message",
                        id:"sampletree" }, document.createElement("div"));
           dojo.byId("treeContainer").appendChild(newTree.domNode);



theKryz wrote
I need to reload a tree as well! In my case, the ItemFileReadStore uses server-generated JSON, which changes in time. How can the tree be reloaded / updated / refreshed?

Thanks,
chris

Yingqi wrote
I have dynamically created a tree and connect that to an ItemFileReadStore (which instead of reading a static file, it reads from an object literal with same structure), but the problem is whenever I change anything in object literal or itemfilereadstore I can not find a way to update/refresh tree. So does anyone know how to refresh the tree display?

Here is the code sample:

var jsonData = null;
var json_item_store = null;

function init() {
jsonData = {};
jsonData['identifier'] = "name";
jsonData['label'] = "name";
jsonData['items'] = [];
jsonData['items'].push({name:'Argentina', type:'country'});
jsonData['items'].push({name:'Egypt', type:'country'});
json_item_store = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = new dijit.Tree(
{
id: "dijit_tree_results",
labelAttr: "name",
label: "results",
store: json_item_store,
style: "width:260px;height:300px;margin-top:5px;margin-left:5px;background-color:#ffffff"
},
dojo.byId('tree')
);

tree.startup();
}

function updateTree() {
jsonData['items'][0]['name'] = "Brazil";
var json_item_store2 = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = dijit.byId("dijit_tree_results");
//even create a new store doesn't help
tree.store = json_item_store2;
}
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Re Asked: How to update/refresh the (display of a) tree widget?

Anthony Fryer
In reply to this post by thekryz
I added a refresh function to the dijit.Tree....

dojo.extend(dijit.Tree, {
    refresh: function() {
        this._itemNodeMap = {};
        this.model.root = null;
        if (this.rootNode) {
            this.rootNode.destroyRecursive();
        }
        this._load();
    }
});


Then you can just call tree.refresh() to do a complete refresh of the tree from server-side data.


> Date: Tue, 26 Aug 2008 06:36:01 -0700
> From: [hidden email]
> To: [hidden email]
> Subject: [Dojo-interest] Re Asked: How to update/refresh the (display of a) tree widget?
>
>
> I need to reload a tree as well! In my case, the ItemFileReadStore uses
> server-generated JSON, which changes in time. How can the tree be reloaded /
> updated / refreshed?
>
> Thanks,
> chris
>
>
> Yingqi wrote:
> >
> > I have dynamically created a tree and connect that to an ItemFileReadStore
> > (which instead of reading a static file, it reads from an object literal
> > with same structure), but the problem is whenever I change anything in
> > object literal or itemfilereadstore I can not find a way to update/refresh
> > tree. So does anyone know how to refresh the tree display?
> >
> > Here is the code sample:
> >
> > var jsonData = null;
> > var json_item_store = null;
> >
> > function init() {
> > jsonData = {};
> > jsonData['identifier'] = "name";
> > jsonData['label'] = "name";
> > jsonData['items'] = [];
> > jsonData['items'].push({name:'Argentina', type:'country'});
> > jsonData['items'].push({name:'Egypt', type:'country'});
> > json_item_store = new dojo.data.ItemFileReadStore({data:jsonData});
> >
> > var tree = new dijit.Tree(
> > {
> > id: "dijit_tree_results",
> > labelAttr: "name",
> > label: "results",
> > store: json_item_store,
> > style:
> > "width:260px;height:300px;margin-top:5px;margin-left:5px;background-color:#ffffff"
> > },
> > dojo.byId('tree')
> > );
> >
> > tree.startup();
> > }
> >
> > function updateTree() {
> > jsonData['items'][0]['name'] = "Brazil";
> > var json_item_store2 = new dojo.data.ItemFileReadStore({data:jsonData});
> >
> > var tree = dijit.byId("dijit_tree_results");
> > //even create a new store doesn't help
> > tree.store = json_item_store2;
> > }
> >
> >
> >
>
> --
> View this message in context: http://www.nabble.com/How-to-programmatically-update-refresh-the-display-of-a-tree-widget--tp17873425p19162212.html
> Sent from the Dojo mailing list archive at Nabble.com.
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> [hidden email]
> http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest


Find out: SEEK Salary Centre Are you paid what you're worth?
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
[hidden email]
http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Re Asked: How to update/refresh the (display of a) tree widget?

thekryz
Hi Anthony,

that looks like something that should be built into the tree!
When I call it however, I get an error: <'query' is undefined>
Must be something that happens in the "this._load()".
BTW - don't I have to care for the ItemFileReadStore being refreshed as well?

Thanks!
chris

Anthony Fryer wrote
I added a refresh function to the dijit.Tree....

dojo.extend(dijit.Tree, {
    refresh: function() {
        this._itemNodeMap = {};
        this.model.root = null;
        if (this.rootNode) {
            this.rootNode.destroyRecursive();
        }
        this._load();
    }
});


Then you can just call tree.refresh() to do a complete refresh of the tree from server-side data.


> Date: Tue, 26 Aug 2008 06:36:01 -0700
> From: Treschklingen@gmail.com
> To: dojo-interest@dojotoolkit.org
> Subject: [Dojo-interest] Re Asked: How to update/refresh the (display of a) tree widget?
>
>
> I need to reload a tree as well! In my case, the ItemFileReadStore uses
> server-generated JSON, which changes in time. How can the tree be reloaded /
> updated / refreshed?
>
> Thanks,
> chris
>
>
> Yingqi wrote:
> >
> > I have dynamically created a tree and connect that to an ItemFileReadStore
> > (which instead of reading a static file, it reads from an object literal
> > with same structure), but the problem is whenever I change anything in
> > object literal or itemfilereadstore I can not find a way to update/refresh
> > tree. So does anyone know how to refresh the tree display?
> >
> > Here is the code sample:
> >
> > var jsonData = null;
> > var json_item_store = null;
> >
> > function init() {
> > jsonData = {};
> > jsonData['identifier'] = "name";
> > jsonData['label'] = "name";
> > jsonData['items'] = [];
> > jsonData['items'].push({name:'Argentina', type:'country'});
> > jsonData['items'].push({name:'Egypt', type:'country'});
> > json_item_store = new dojo.data.ItemFileReadStore({data:jsonData});
> >
> > var tree = new dijit.Tree(
> > {
> > id: "dijit_tree_results",
> > labelAttr: "name",
> > label: "results",
> > store: json_item_store,
> > style:
> > "width:260px;height:300px;margin-top:5px;margin-left:5px;background-color:#ffffff"
> > },
> > dojo.byId('tree')
> > );
> >
> > tree.startup();
> > }
> >
> > function updateTree() {
> > jsonData['items'][0]['name'] = "Brazil";
> > var json_item_store2 = new dojo.data.ItemFileReadStore({data:jsonData});
> >
> > var tree = dijit.byId("dijit_tree_results");
> > //even create a new store doesn't help
> > tree.store = json_item_store2;
> > }
> >
> >
> >
>
> --
> View this message in context: http://www.nabble.com/How-to-programmatically-update-refresh-the-display-of-a-tree-widget--tp17873425p19162212.html
> Sent from the Dojo mailing list archive at Nabble.com.
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest@dojotoolkit.org
> http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest

_________________________________________________________________
Are you paid what you're worth? Find out: SEEK Salary Centre
http://a.ninemsn.com.au/b.aspx?URL=http%3A%2F%2Fninemsn%2Eseek%2Ecom%2Eau%2Fcareer%2Dresources%2Fsalary%2Dcentre%2F%3Ftracking%3Dsk%3Ahet%3Asc%3Anine%3A0%3Ahot%3Atext&_t=764565661&_r=OCT07_endtext_salary&_m=EXT
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
Dojo-interest@dojotoolkit.org
http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

tree that copies the root node instead of moving it

oximoron
In reply to this post by Anthony Fryer
Anyone has idea how to refresh a tree (ForestModelStore) when I drop a root node into a sublevel node to remove my root node?
 
I don't understand why for the nodes, it moves them but  for the root nodes it copies them although my 'type' property changed and I shouldn't see my root node at root level.
 
 
Do I have to destroy the root node myself, like in the function onLeaveRoot?
Or can I use a refresh/re-query function on the tree?
 
Thanks
Kenny

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
[hidden email]
http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: ReAsked: How to update/refresh the (display of a) tree widget?

thekryz
In reply to this post by lokesh
This is how I finally did it (maybe it helps someone?):

function reloadTree(tree){
   
    // Rebuild store
    var storeurl = tree.store._jsonFileUrl;
    var newStore = new dojo.data.ItemFileReadStore({url: storeurl});
   
    // Destroy and rebuild tree
    var treeLabel = tree.label;
    var treeId = tree.id;
    var containerID = tree.domNode.parentNode.id;
    var treeClass = tree["class"];
    var treeQuery = tree["query"];
    var treeLabelAttr = tree["labelAttr"];
    var customIconMethod = tree.getIconClass
    tree.destroyRecursive(true);
   
    var newTree = new dijit.Tree(
        {
            "store":        newStore,
            "label":        treeLabel,
            "id":           treeId,
            "class":        treeClass,
            "query":        treeQuery,
            "labelAttr":    treeLabelAttr,
            "getIconClass": customIconMethod
        },
        document.createElement(treeId) );
   
    dojo.byId(containerID).appendChild(newTree.domNode);
}



lukess wrote
Hi,
  Basically u need to first destroy the tree and then recreate it.... You need to do something like this:

         var tr = new dojo.data.ItemFileReadStore({data: x});
         var dumm = dijit.byId('sampletree');
          if(dumm)
          {
             dumm.destroy();
          }
          var dummy = dijit.byId('sampletree');
          var newTree = new dijit.Tree( {
                        store:tr,
                        label:"sample message",
                        id:"sampletree" }, document.createElement("div"));
           dojo.byId("treeContainer").appendChild(newTree.domNode);



theKryz wrote
I need to reload a tree as well! In my case, the ItemFileReadStore uses server-generated JSON, which changes in time. How can the tree be reloaded / updated / refreshed?

Thanks,
chris

Yingqi wrote
I have dynamically created a tree and connect that to an ItemFileReadStore (which instead of reading a static file, it reads from an object literal with same structure), but the problem is whenever I change anything in object literal or itemfilereadstore I can not find a way to update/refresh tree. So does anyone know how to refresh the tree display?

Here is the code sample:

var jsonData = null;
var json_item_store = null;

function init() {
jsonData = {};
jsonData['identifier'] = "name";
jsonData['label'] = "name";
jsonData['items'] = [];
jsonData['items'].push({name:'Argentina', type:'country'});
jsonData['items'].push({name:'Egypt', type:'country'});
json_item_store = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = new dijit.Tree(
{
id: "dijit_tree_results",
labelAttr: "name",
label: "results",
store: json_item_store,
style: "width:260px;height:300px;margin-top:5px;margin-left:5px;background-color:#ffffff"
},
dojo.byId('tree')
);

tree.startup();
}

function updateTree() {
jsonData['items'][0]['name'] = "Brazil";
var json_item_store2 = new dojo.data.ItemFileReadStore({data:jsonData});

var tree = dijit.byId("dijit_tree_results");
//even create a new store doesn't help
tree.store = json_item_store2;
}
GK
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Re Asked: How to update/refresh the (display of a) tree widget?

GK
In reply to this post by thekryz
Hi Everyone,

               This is how i finally was able to refresh the tree for a forest store model.

Code:
-----

    function refreshTree() {
      if(dijit.byId("tree")){
        alert("Element deleted");
       dijit.byId("tree").destroyRecursive();//Enter the tree widget ID
      }
      var myStore = new dojo.data.ItemFileWriteStore({url:'Please enter the store url here'});
      //To create a forest store model
      var myModel = new dijit.tree.ForestStoreModel({
          store: myStore,
          query: {is_top:true},//You might have to specify your custom query parameter here
          rootId: "root",
          rootLabel: "Categories",
          childrenAttr: "children"
      });
      //To create a tree widget again with model properties and a new widget id
      var tree = new dijit.Tree({
          id:'tree',
          model: myModel,
          childrenAttr: "children"
      },dojo.byId("tree"));
     
      //This is the target div element under which you want to add the entire tree      
      var block = document.getElementById('target');
      block.appendChild(tree.domNode);
      tree.startup();

  }

This function will recreate the store based on current data from the store URL.

Regards,

Krishnan G






theKryz wrote
Hi Anthony,

that looks like something that should be built into the tree!
When I call it however, I get an error: <'query' is undefined>
Must be something that happens in the "this._load()".
BTW - don't I have to care for the ItemFileReadStore being refreshed as well?

Thanks!
chris

Anthony Fryer wrote
I added a refresh function to the dijit.Tree....

dojo.extend(dijit.Tree, {
    refresh: function() {
        this._itemNodeMap = {};
        this.model.root = null;
        if (this.rootNode) {
            this.rootNode.destroyRecursive();
        }
        this._load();
    }
});


Then you can just call tree.refresh() to do a complete refresh of the tree from server-side data.


> Date: Tue, 26 Aug 2008 06:36:01 -0700
> From: Treschklingen@gmail.com
> To: dojo-interest@dojotoolkit.org
> Subject: [Dojo-interest] Re Asked: How to update/refresh the (display of a) tree widget?
>
>
> I need to reload a tree as well! In my case, the ItemFileReadStore uses
> server-generated JSON, which changes in time. How can the tree be reloaded /
> updated / refreshed?
>
> Thanks,
> chris
>
>
> Yingqi wrote:
> >
> > I have dynamically created a tree and connect that to an ItemFileReadStore
> > (which instead of reading a static file, it reads from an object literal
> > with same structure), but the problem is whenever I change anything in
> > object literal or itemfilereadstore I can not find a way to update/refresh
> > tree. So does anyone know how to refresh the tree display?
> >
> > Here is the code sample:
> >
> > var jsonData = null;
> > var json_item_store = null;
> >
> > function init() {
> > jsonData = {};
> > jsonData['identifier'] = "name";
> > jsonData['label'] = "name";
> > jsonData['items'] = [];
> > jsonData['items'].push({name:'Argentina', type:'country'});
> > jsonData['items'].push({name:'Egypt', type:'country'});
> > json_item_store = new dojo.data.ItemFileReadStore({data:jsonData});
> >
> > var tree = new dijit.Tree(
> > {
> > id: "dijit_tree_results",
> > labelAttr: "name",
> > label: "results",
> > store: json_item_store,
> > style:
> > "width:260px;height:300px;margin-top:5px;margin-left:5px;background-color:#ffffff"
> > },
> > dojo.byId('tree')
> > );
> >
> > tree.startup();
> > }
> >
> > function updateTree() {
> > jsonData['items'][0]['name'] = "Brazil";
> > var json_item_store2 = new dojo.data.ItemFileReadStore({data:jsonData});
> >
> > var tree = dijit.byId("dijit_tree_results");
> > //even create a new store doesn't help
> > tree.store = json_item_store2;
> > }
> >
> >
> >
>
> --
> View this message in context: http://www.nabble.com/How-to-programmatically-update-refresh-the-display-of-a-tree-widget--tp17873425p19162212.html
> Sent from the Dojo mailing list archive at Nabble.com.
>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest@dojotoolkit.org
> http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest

_________________________________________________________________
Are you paid what you're worth? Find out: SEEK Salary Centre
http://a.ninemsn.com.au/b.aspx?URL=http%3A%2F%2Fninemsn%2Eseek%2Ecom%2Eau%2Fcareer%2Dresources%2Fsalary%2Dcentre%2F%3Ftracking%3Dsk%3Ahet%3Asc%3Anine%3A0%3Ahot%3Atext&_t=764565661&_r=OCT07_endtext_salary&_m=EXT
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
Dojo-interest@dojotoolkit.org
http://turtle.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to programmatically update/refresh the display of a tree widget?

Aram
This post has NOT been accepted by the mailing list yet.
In reply to this post by 唐梓乐
This may be a very old thread, but I used this project:

https://github.com/pjekel/cbtree/blob/master/documentation/CheckBoxTree.md#checkbox-tree-properties

And set checkBoxes: false. It appears to refresh the contents from a store update fine.
Loading...