3 state item selection.

Hi Alex,

I'm trying to get the tree control to show an item as
1) selected (normal item selection of the tree, blue backgound)
2) unselected AND uncommon (grey backgound)
3) unselected AND common (normal item unselected, white background)

Is there a simple way I can set the style based upon an array with the uncommon states and the current selection?


Thanks

You can add another tree item property and link the css class to it:

tree.defineItemProperty("uncommon", {1: true, 6: true});
tree.getItemTemplate().setClass("uncommon", function(){
    return this.getItemProperty("uncommon");
});

Then add CSS rules which show them in different color:

.aw-uncommon-true {background: #ccc}

Thanks Alex,

That works perfectly.

Once we have defined an item property to be an object list, is it possible to access that list later to be able to delete in item.

I can do this by assigning a local reference by thought it would be neater to reference the original with a get accessor.

var _uncommon = {1: true, 6: true};

tree.defineItemProperty("uncommon", _uncommon); 
tree.getItemTemplate().setClass("uncommon", function(){ 
    return this.getItemProperty("uncommon"); 
});

Later be able to call a function to remove the uncommon status.

function common(index)
{
    delete _uncommon[index];
    tree.refresh();
}

Also,

Is it possible to add a nice header to the Tree object like the grid?

thanks

>> Once we have defined an item property to be an object list, is it possible to access that list later to be able to delete in item.

The defineItemProperty() method creates get and set accessors, so you can use getItemUncommon(index) and setItemUncommon(value, index).

>> Is it possible to add a nice header to the Tree object like the grid?

The tree control does not include built-in header - you have to wrap it to the div or just position another header div on top of the tree.

Alex,

Is also possible to actually delete the Array index for the defined property rather than setting the index value.