[Dojo-interest] Change appearance of a Dijit Tree item

Harry Devine lifter89 at comcast.net
Thu Oct 27 08:03:18 EDT 2016


I'm using 1.11.2.  Trying to set the css class like this: domClass.add(registry.byId("picksTree")._itemNodesMap["week8"][0], "currentWeek");


When I inspect the element in Firebug (I'm using Firefox), it shows up like this:

<span id="dijit__TreeNode_8_label" class="dijitTreeLabel" data-dojo-attach-point="labelNode,focusNode" role="treeitem" tabindex="-1" aria-selected="false" aria-expanded="false">Week 8 </span>


I don't get any errors in Firebug at all (that I can tell anyway).


Thanks,

Harry

> On October 26, 2016 at 11:54 PM Markus Muetschard <markus at muet.com> wrote:
> 
>     Harry,
> 
>     do you get javascript error in the console when inspecting, for example, in chrome browser?
> 
>     I'm not sure what version you use... I tested in 1.10, where the tree's item node map property is _itemNodesMap[] (note the underscore). What version are you using?
> 
>      
> 
>     On Tue, Oct 25, 2016 at 6:55 AM, Harry Devine <lifter89 at comcast.net mailto:lifter89 at comcast.net > wrote:
> 
>         > > 
> >         OK, I see what you're saying, and I can manipulate it manually as you suggested, but trying to make it happen in my javascript module has no effect.  Here's what I'm trying:
> > 
> > 
> >         in my CSS, I make a property:
> > 
> >         .currentWeek {
> > 
> >           border: 1px red solid;
> > 
> >           font-weight: bold;
> > 
> >         }
> > 
> > 
> >         In my javascript, I'm trying to assign it.  The tree ID is "picksTree" and the node I'm testing with is named "week8":
> > 
> >         domClass.add(registry.byId("picksTree").itemNodesMap["week8"][0], "currentWeek");
> > 
> > 
> >         I see no difference in the node's appearance.  Any ideas on what I'm missing?
> > 
> > 
> >         Thanks for the help!
> > 
> >         Harry
> > 
> > 
> >             > > > On October 24, 2016 at 11:48 PM Markus Muetschard <markus at muet.com mailto:markus at muet.com > wrote:
> > > 
> > >             ...how about adding a class / style to the dijit__TreeNode_6 (after tree loaded)? (For tree loaded event see examples in doc). 
> > > 
> > >             To get the the idea, run programmatic example in doc at https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html , then inspect Europe... from the inspect's ItemNode find the TreeNode up the DOM hierarchy. There you apply the style (edit DOM node in browser), for example, 'style="border: 1px red solid;".
> > > 
> > >             In your html you then define the a class in styles.
> > > 
> > >             .thisWeek { border: 1px red solid; }
> > > 
> > >             In JS you apply:
> > > 
> > >             domClass.add("dijit__TreeNode_6","thisWeek");
> > > 
> > >             Doing it with hard-coded or sequence derived id may not be the smartest way... therefore:
> > > 
> > >             domClass.add(dijit.byId(treeId)._itemNodesMap[itemId],"thisWeek");
> > > 
> > >             ...with treeId being the id you give to the tree and nodeId, and itemId the week id (week object's id). 
> > > 
> > > 
> > > 
> > >             On Mon, Oct 24, 2016 at 1:23 PM, Harry Devine <lifter89 at comcast.net mailto:lifter89 at comcast.net > wrote:
> > > 
> > >                 > > > >                  
> > > > 
> > > >                 I have a site that manages an office football pool, and it uses a Dijit Tree to show the different weeks of the season.  I'd like to have the current week (i.e Week 6) to either be a different color or font so that it stands out to the user which week the season is on.  I can't seem to find a way to do that as I'm assigning the ObjectStoreModel object a Dojo Memory Store that I create that has each week in the store.
> > > > 
> > > > 
> > > >                 I can create a JSFiddle to illustrate what I'm doing if that will help, just let me know.  But how can I change the appearance of a tree node at run time, or dynamically?
> > > > 
> > > > 
> > > >                 Thanks!
> > > > 
> > > >                 Harry
> > > > 
> > > > 
> > > >                 --
> > > >                 Dojo Toolkit: http://dojotoolkit.org/
> > > >                 Tutorials: http://dojotoolkit.org/documentation/ http://dojotoolkit.org/documentation/
> > > > 
> > > >                 Dojo-interest at mail.dojotoolkit.org mailto:Dojo-interest at mail.dojotoolkit.org
> > > >                 To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
> > > > 
> > > > 
> > > >             > > > 
> > >             --
> > >             Dojo Toolkit: http://dojotoolkit.org/
> > >             Tutorials: http://dojotoolkit.org/documentation/ http://dojotoolkit.org/documentation/
> > > 
> > >             Dojo-interest at mail.dojotoolkit.org mailto:Dojo-interest at mail.dojotoolkit.org
> > >             To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
> > > 
> > >         > > 
> >         --
> >         Dojo Toolkit: http://dojotoolkit.org/
> >         Tutorials: http://dojotoolkit.org/documentation/ http://dojotoolkit.org/documentation/
> > 
> >         Dojo-interest at mail.dojotoolkit.org mailto:Dojo-interest at mail.dojotoolkit.org
> >         To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
> > 
> > 
> >     > 
>     --
>     Dojo Toolkit: http://dojotoolkit.org/
>     Tutorials: http://dojotoolkit.org/documentation/
> 
>     Dojo-interest at mail.dojotoolkit.org
>     To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
> 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-interest/attachments/20161027/9d6adb4d/attachment.htm 


More information about the Dojo-interest mailing list