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();
}