How to apply just css(for each leaf node with different backgroung color) and not actual icon

[Manish Arote]

Hi,

[Ivan Bozhanov]

Well, simply inspect the structure and apply:

#your-tree .jstree-leaf > .jstree-anchor > .jstree-themeicon { background-color:red; }

Best regards,
Ivan

14 април 2014, понеделник, 13:53:53 UTC+3, Manish Arote написа:

Hi,

[Manish Arote]

        Hi,
Sorry to bother you again, first thing I am new to javascript (just 4 months) and just started with jquery with your jstree before that i was using dojo library there dojo tree is third class, that's why i used yours  and is awesome, I will just explain you what I am trying to do here first thing everything is dynamic here noting is static
I am using your jstree with arcgis server javascript api, I am populating some point data on the map and some combination of points represents a territory with a color(so the number of territories depends upon user login means each user have different number and color territories) so every thing here is dynamic.
Before using your jstree what i was doing:-
I was you simple using css3 to populate legend for the map because before each user was having less than 3 territories so max three legend easily manageble
So my code was
My css:-
1)  #legend { left: 5px;  bottom: 5px;  position: absolute;  height: 125px; width: 125px; background-color: #FFFFFF; opacity: 0.85;border-radius: 7px; z-index: 50; padding: 1em; font-size: 0.85em; }
2)  #circle3 { height: 20px; position: relative; width: 20px;}
3)  .circle { border-radius: 50%; display: inline-block;  margin-right:5px;}
My JS Code:-
var classbreaks = [{r:143, g:30, b:5, legendLabel:"Winston Salem"}, {r:160, g:25, b:92, legendLabel:"Charlotte"}, {r:28, g:19, b:24, legendLabel:"Fayetteville"}] //here this json us generated dynamically while generating random colors for territories(I have a code for generaring random colors)  but for now i am showing you as a static joson
    function generatelegend(classbreak) {
         classbreaks.forEach( function (classbreak, i) {
                domConstruct.create("div", {
                    innerHTML:'<table><tr><td> <div id="circle3" class="circle"  style="background: rgb(' + classbreak.r + ',' +  classbreak.g + ',' + classbreak.b + ');") ></div></td>' +
                            '<td><span style="vertical-align: top;"><b>' + classbreak.legendLabel + '</b></span></td></tr></table>'
                }, 'legend');              
    }}
HTML Code
  <div id="legend" style="position: relative;float: left;margin-bottom: -45%;margin-top: 32%;">
        <div id="header">Legends</div>
        <hr/>
    </div>
I have attached a .jpg for above thing

But now I have more than 25 territories for a user and it is not possible to show legend so big that's why i have used your jstree as a Table of content and I am almost successful with it. Just that dynamic legend generation thing is not working your tree 'icon :' attribute thing.
here i am making dynamic json for your tree to populate according to the no of territories using parent and child thing

      now my css:-
      1)  #circle3 { height: 20px; position: relative; width: 20px;}
      2)  .circle { border-radius: 50%; display: inline-block;  margin-right:5px;}
      Now my JS:-
       var treejson = [];
       function CreateTree(classbreaks) {
           var parrent =  {
               id          : "Terr",
               parent      : "#" ,
               text        : "Territories", // node text
               state       : {
                  opened    : true,//is the node open
                  disabled  : false, // is the node disabled
                  selected  : false // is the node selected
               },
         }
           treejson.push(parrent);
           classbreaks.forEach( function (classbreak, i) {
              var child = {
                  id          : classbreaks[i].id,
                  parent      : "Terr",
                  text        : classbreaks[i].legendLabel,
                  icon        :  I don't Know What to do here to get the same dynamic ccs different dynamic color circle legend for each different node
                  state       : {
                    opened    : true,
                    disabled  : false,
                    selected  : true
                  },
              }
              treejson.push(child)
            });
           $('#jstree').jstree({
                  "core" : {
                    "theme" : {
                      "variant" : "large"
                        },
                    "data" : treejson
                      },
                  "checkbox" : {
                    "keep_selected_style" : false
                  },
                  contextmenu: {
                    items: function ($node) {
                    return {
                        zoomtoTerr: {
                            "label": "Zoom to territory",
                            "action": some function ,
                            "_class": "class"
                        }
                    };
                    }
                  },
                  "plugins" : ["wholerow", "checkbox", "contextmenu"]
                });
               };
I have attached a .jpg for this also please have a look.
I am only stuck with this, Please help i desperately need this to be working I know this will work but how i don't know , It may be a simple solution.

Regards
Manish Arote

 

 

 

[Ivan Bozhanov]

icon expects a class (or classes) or a path to a file (image) - obviously you need the first one, but you cannot set the ID - just use two classes - cirle and circle3, and pass "icon" as "circle circle3" and from then on - tweak your CSS until it looks right.

Best regards,
Ivan

[Manish Arote]

hi, 

thanks for the help, I am partially successful, I was able to get the apply circle css to get a perfect circle, but i was not able to set the background color for if what ever background color I am assigning in circle or circle3 css is not applied to that  <i></i> element, but it is taking some default color, Please any thing on this 

Regards

Manish arote 

[Manish Arote]

hi, 

thanks for the help, I am partially successful, I was able to get the apply circle css to get a perfect circle, but i was not able to set the background color for if what ever background color I am assigning in circle or circle3 css is not applied to that  <i></i> element, but it is taking some default color, Please any thing on this 

Regards

Manish arote 

[Ivan Bozhanov]

Sorry, but this is not in any way related to jstree - just inspect your selectors and see why the class is not applied - I can only help you with a demo.

[Manish Arote]

Sorry I was busy with some other things today only i started with this tree again, I already inspected in firebug, if I Change the default css  .jstree-themeicon-custom {  background-color: rgba(34, 12, 42,4);  background-image: none;  } in firebug it gets some color but by default it is  background-color: rgba(0, 0, 0,0); now I dont't know how to override this css class

regards

[Ivan Bozhanov]

Just make your selector (or rule) stronger - either use:
#tree .your-class { background:....; }
or probably:
.jstree-node > .jstree-anchor > .your-class { background: ... }

Or use important:
.your-class { background: ... !important; }

Best regards,
Ivan

[Manish Arote]

Hi,

Thanks a lot for your help .your-class { background: ... !important; }, worked for me I was able to archive the thing and it is looking beautiful. One more thing i want to ask is while dynamically making the tree json data can i store some metadata about that node, and on any event like hover or check or on context menu action I want to retrieve that metadata  of that node.

Regards

[Ivan Bozhanov]

Use the "data" property. Add anything you want to it, then when you need to retrieve it use:
$("#your-tree").jstree(true).get_node(YOUR_DOM_NODE / ID STRING / SELECTOR).data;

Best regards,
Ivan

[Manish Arote]

Hi,

I stored as data, and on hover I retrieved it as function (e, data ){ var data = data.node.data}, but on node right click context menu if I click on one of the option of context menu(to which I have attached a function)I want same data , but I was not able to get it.

Regards

[Ivan Bozhanov]

Your function is in the action property of the contexmenu, so use this:
                            "action"            : function (data) {
                                var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                                obj.data; // this is what you need

Best regards,
Ivan

[Manish Arote]

Hi,
thanks it worked, I have two more things to ask first if i click any where on the node it gets checked or unchecked I just want if I click the check-box then only it should get checked or unchecked, and second some times i don't want children should have checkbox, only parent should have checkbox.

Regards

[Ivan Bozhanov]

Тhere is a setting called "whole_node" in the "checkbox" settings - set it to false - that would cause only clicking the checkbox to select multiple nodes. If you click on the node, its checkbox will be checked and all other nodes will be deselected. Maybe that is what you need. There is no differentiation between "selected" and "checked" - they are both the same thing - keep that in mind - the checkbox only shows if a node is selected. Tell me if you need further help with this if whole node is not what you need.

To hide checkboxes on a set of nodes use CSS (for example set a class on their parent using "li_attr", for exmaple "no-checkbox"), and then add this CSS:
li.no-checkbox ul .jstree-checkbox { display:none !important; }

Best regards,
Ivan

[Manish Arote]

Hi,

Sorry for late reply some time I need to go the client side, yes before I used-ed "whole_node" in the "checkbox" settings, and it was giving the same behavior. and actually I want  "selected" and "checked" as two different events. I think In coming release you have as a setting to get from user that he want "selected" and "checked" as same event or different event. I don't want when we select a node the other node to be unchecked. Tell me if it can be achieved.

Regards

[Ivan Bozhanov]

No, sorry, in 3.0.0 there is no checked and selected - only selected, and a single collection of selected nodes. The checkboxes are simply a way of visualizing the selection and making selection easier (they also help with inheriting selection - ther tri-state mode). You can easily react on checkbox clicks because in the select_node.jstree event you can see what was clicked - the text or the checkbox and perform different actions, but there is one single collection of selected nodes.

Best regards,
Ivan

[Manish Arote]

Only thing I want is to perform different action on node select and node uncheck.

Regards

[Ivan Bozhanov]

Use the "select_node.jstree" and "deselect_node.jstree" events
When binding check the data param, and there you can see if the action was triggered by clicking the checkbox or elsewhere:
.on("select_node.jstree", function (e, data) {
  if(data.event && $(data.event.target).is(".jstree-checkbox")) { /* the checkbox was clicked */ }
  else { ... }
})

Best regards,
Ivan

[Manish Arote]

Regarding hiding ckeckbox on child nodes as you suggested I am using css

CSS:  .nocheckbox { display:none !important; }

 var parrent =  {
               id          : "Terr",
               parent      : "#" ,

               text        : '{!$user.firstname}' + "'s Territories",// node text
               data        : extent1,
              // icon        : "no-checkbox",

               state       : {
                  opened    : true,//is the node open
                  disabled  : false, // is the node disabled
                  selected  : false // is the node selected
               },

                  // attributes for the generated LI node
                li_attr     : "nocheckbox"
           }

This is not working, when i inspect in firebug I am getting for a child node is below, so it <li> or <i> is not assigning that css

<li id="30HAAA01" class="jstree-node jstree-leaf" role="treeitem" aria-selected="false">
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor jstree-clicked" href="#">
<i class="jstree-icon jstree-checkbox"></i>
<i class="jstree-icon jstree-themeicon circle _30HAAA01 jstree-themeicon-custom"></i>
Albany, NY 1
</a>
</li>

regards

[Ivan Bozhanov]

Why would you expect a class to be assigned when you specify this: li_attr     : "nocheckbox" (which means absolutely nothing)
Try: li_attr     : { "class" : "nocheckbox" }

Best regards,
Ivan

[Manish Arote]

Thanks the class is applying but if i apply to parent, the tree doesn't appears and if i apply to children the children doesn't appears  
regards

[Ivan Bozhanov]

Then inspect the CSS and fix it - you must have gotten something wrong. You should have this:

.nocheckbox > .jstee-anchor > ,jstree-checkbox { display:none; }