Question

I'm looking for a way to apply a certain style to dynatree nodes that have a certain property on them when the tree builds. For instance: I have a tree of items that I want a light-blue background color on if they have certain data tied to it. I want this color to be present regardless if the user clicks on the nodes. This would be a style applied dynamically to the node that is different from the click event. The code below i'm using marionette.

Here is my tree:

            this.ui.treediv.dynatree({
                children: this.collection.models[0].attributes,
                checkbox: false,
                selectMode: 1, // 1:single, 2:multi, 3:multi-hier
                clickFolderMode: 1, // 1:activate, 2:expand, 3:activate and expand
                onClick: function (node, e) {
                    // key is ShiftID - trigger event on the TaskSetup collection
                    if (!node.childList) {
                        App.vent.trigger("clicked:shiftassignment", node.data.key);
                    }
                }
            });

This is what I tried to do to apply the style but noticed the key of the node isn't anywhere in the DOM for each li tag so i really don't know what #id attribute to apply a style too.

            // Expand tree so we can apply the proper style below.
            this.ui.treediv.dynatree("getRoot").visit(function (node) {
                node.expand(true);
            });

            // Not a real good way to traverse the tree and highlight the nodes that have a shift set with dynatree, the below will work though.
            var tree = this.ui.treediv.dynatree("getTree");
            _.each(this.collection.models[0].attributes.children, function (child) {
                _.each(child.children, function (lastChild) {
                    if (lastChild.hasShiftSet) {
                        $("#" + lastChild.key).toggleClass("ui-state-highlight", true);
                    }
                });
            });

I also tried the following which should work but the class and title don't seem to get applied to the element when its rendered.

               onPostInit: function(isReloading, isError) {
                    this.$tree.dynatree("getRoot").visit(function (node) {
                        node.expand(true);
                        if (node.data.hasShiftSet) {
                            node.data.addClass = "dynatree-changed";
                            node.data.title = "NEW TITLE";
                        }
                    });
                    this.reactivate();
                }

No correct solution

OTHER TIPS

Found the issue and now it will dynamically change the color. The code needs to go in the onRender of the dynatree to propertly add the class in for that node.

                onRender: function(isReloading, isError) {
                    this.$tree.dynatree("getRoot").visit(function (node) {
                        node.expand(true);
                        if (node.data.hasShiftSet) {
                            node.data.addClass = "dynatree-highlight";
                        }
                    });
                }

Here is a screenshot of the dynatree rendering with a "dynatree-highlight" custom css attribute applied to the item that matches the condition.

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top