Change appearance of a Dijit Tree item

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

Change appearance of a Dijit Tree item

Harry Devine

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/

[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: Change appearance of a Dijit Tree item

allObjects
...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, 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 <[hidden email]> 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/

[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: Change appearance of a Dijit Tree item

Harry Devine

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 <[hidden email]> 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, 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 <[hidden email]> 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/

[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: Change appearance of a Dijit Tree item

allObjects
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 <[hidden email]> 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 <[hidden email]> 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, 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 <[hidden email]> 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/

[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



--
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: Change appearance of a Dijit Tree item

Harry Devine

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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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, 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 <[hidden email]> 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/

[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


--
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: Change appearance of a Dijit Tree item

Martin Jakobi-3

Hi Harry.

 

I don’t know x._itemNodesMap.

AFAIK domClass#add takes a DomNode.

Your registry.byId() is for a widget not a DomNode.

So, you could use: dojoDom.byId(„dijit__TreeNode_8_label“, …)

 

Or you can use the spans’s data-dojo-attach-points. Something like domClass.add(registry.byId("picksTree"). labelNode, …). But that may be misleading because I can‘t see the widget structure here.

 

 

HTH

Martin

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of Harry Devine
Sent: Thursday, October 27, 2016 2:03 PM
To: [hidden email]
Subject: Re: [Dojo-interest] Change appearance of a Dijit Tree item

 

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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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, 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 <[hidden email]> 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/

[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

 

--
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: Change appearance of a Dijit Tree item

Harry Devine

OK, I got it to work, and your domNode comment was the key.  I printed my widget to the console, then examined the _itemNodesMap and noticed that for each item in the tree, there was a domNode property for it.  So I changed the code as follows and it worked as I wanted/needed:


domClass.add(registry.byId("picksTree")._itemNodesMap["week8"][0].domNode, "currentWeek");


Thanks a ton for the help!!!

Harry

On October 27, 2016 at 11:31 AM Martin Jakobi <[hidden email]> wrote:

Hi Harry.

 

I don’t know x._itemNodesMap.

AFAIK domClass#add takes a DomNode.

Your registry.byId() is for a widget not a DomNode.

So, you could use: dojoDom.byId(„dijit__TreeNode_8_label“, …)

 

Or you can use the spans’s data-dojo-attach-points. Something like domClass.add(registry.byId("picksTree"). labelNode, …). But that may be misleading because I can‘t see the widget structure here.

 

 

HTH

Martin

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of Harry Devine
Sent: Thursday, October 27, 2016 2:03 PM
To: [hidden email]
Subject: Re: [Dojo-interest] Change appearance of a Dijit Tree item

 

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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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, 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 <[hidden email]> 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/

[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

 

--
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: Change appearance of a Dijit Tree item

allObjects

urvw


On Oct 28, 2016 6:07 AM, "Harry Devine" <[hidden email]> wrote:

OK, I got it to work, and your domNode comment was the key.  I printed my widget to the console, then examined the _itemNodesMap and noticed that for each item in the tree, there was a domNode property for it.  So I changed the code as follows and it worked as I wanted/needed:


domClass.add(registry.byId("picksTree")._itemNodesMap["week8"][0].domNode, "currentWeek");


Thanks a ton for the help!!!

Harry

On October 27, 2016 at 11:31 AM Martin Jakobi <[hidden email]> wrote:

Hi Harry.

 

I don’t know x._itemNodesMap.

AFAIK domClass#add takes a DomNode.

Your registry.byId() is for a widget not a DomNode.

So, you could use: dojoDom.byId(„dijit__TreeNode_8_label“, …)

 

Or you can use the spans’s data-dojo-attach-points. Something like domClass.add(registry.byId("picksTree"). labelNode, …). But that may be misleading because I can‘t see the widget structure here.

 

 

HTH

Martin

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of Harry Devine
Sent: Thursday, October 27, 2016 2:03 PM
To: [hidden email]
Subject: Re: [Dojo-interest] Change appearance of a Dijit Tree item

 

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 <[hidden email]> 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 <[hidden email]> 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 <[hidden email]> 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, 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 <[hidden email]> 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/

[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

 

--
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



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

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