Here is some example code. For this example, my question is: what code do I put in the testStuff()
function to highlight a specific tree node (for example, the tree node corresponding to the data element that has id="track3"), and have the highlighting not be removed if the tree loses focus, or is collapsed and expanded?

    
  
    Dojo Test
    
    
      @import "../js/dojo-release-1.0.1/dijit/themes/tundra/tundra.css";
      @import "../js/dojo-release-1.0.1/dojo/resources/dojo.css";
    
    
    
    
    

    
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dijit.dijit");
      dojo.require("dijit.Tree");    
      dojo.require("dojo.parser");

      var recording = { label: "label", identifier: "id",items: [ {
                          id: "1",
                          label: "Are You Experienced",
                          type: "CD",
                          children: [ {
                                      id: "track1",
                                      label: "Track 1. Purple Haze (2:53)",
                                      begin: "0",
                                      end: "173240",
                                      type: "Track"
                                      },
                                      {
                                      id: "track2",
                                      label: "Track 2. Manic Depression (3:44)",
                                      begin: "173240",
                                      end: "397506",
                                      type: "Track"
				      },
			              {
				      id: "track3",
				      label: "Track 3. Hey Joe (3:31)",
				      begin: "397506",
				      end: "609106",
				      type: "Track"
				      }
                           ]
                        }]
                       }
                             
      var recordingStore = new dojo.data.ItemFileReadStore({data: recording});
      
      function testStuff() {

      }
      
    
      
  
  
  
  
     TEST 

    

        
        

        
  

  

The only recommended way to operate with a tree is via the store it's connected to. To change values in the store you need a store that implements dojo.data.api.Write - so, dojo.data.ItemFileWriteStore, for example. The tree automatically updates itself to reflect changes in the store. While that part is simple, it's bit trickier to highlight the nodes. The following sample builds on Dijit Tree Test, so check it out first. Just remember to change the store into a writable one.

There are two functions that affect tree node layout: getIconClass and setLabelNode. The first one you can pass to the widget constructor (as it's done on the test page). The second one you need to override in dijit._TreeNode somehow, for example like this (in the beginning of the page):

It highlights all the nodes that have type "city". Then you just change some values and it updates automatically:

In your case you would just have one more attribute in your store: "playing", and the node would be highlighted if this is true. Then you set "playing" true when a song starts and so on...

Maine,

Thanks a lot for your help. After reading your reply, I quickly figured out how to get things to work. To get my example to work, I:

• Added some CSS that is used for indicating if a track is playing or not
• Added a "playing" property to my data
• Changed the store to an ItemFileWriteStore
• Set the value of "playing" in my test function
• Modified getLabelClass for the tree to return the appropriate style based on the value of the "playing" property

For others who are interested, below is the complete modified example.

    
  
    Dojo Test
    
    
      @import "../js/dojo-release-1.0.1/dijit/themes/tundra/tundra.css";
      @import "../js/dojo-release-1.0.1/dojo/resources/dojo.css";
    
    
    
        .isNotPlaying {
            color: black;
	    background-color: white;
        }
        .isPlaying {
            color: white;
	    background-color: navy;
        }
    
        
    
    
    

    
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dojo.data.ItemFileWriteStore");
      dojo.require("dijit.dijit");
      dojo.require("dijit.Tree");    
      dojo.require("dojo.parser");
      
      var recording = { label: "label", identifier: "id",items: [ {
                          id: "1",
                          label: "Are You Experienced",
                          type: "CD",
                          children: [ {
                                      id: "track1",
                                      playing: "no",
                                      label: "Track 1. Purple Haze (2:53)",
                                      begin: "0",
                                      end: "173240",
                                      type: "Track"
                                      },
                                      {
                                      id: "track2",
                                      playing: "no",
                                      label: "Track 2. Manic Depression (3:44)",
                                      begin: "173240",
                                      end: "397506",
                                      type: "Track"
		                      },
			              {
			              id: "track3",
			              playing: "no",
			              label: "Track 3. Hey Joe (3:31)",
			              begin: "397506",
			              end: "609106",
			              type: "Track"
			              }
                           ]
                        }]
                       }
                             
      var recordingStore = new dojo.data.ItemFileWriteStore({data: recording});
      
      function testStuff() {
          recordingStore.setValue( recordingStore._itemsByIdentity["track3"], 'playing', 'yes')
      }
      
    
      
  
  
  
  
     TEST 

    

        
        

          
              return(item && item.playing && item.playing == 'yes' ? 'isPlaying' : 'isNotPlaying');