CheckBox header renderer with HierarchicalCollectionView

Question

I've gotten a checkbox header renderer to work well with flat DPs, but a hierarchical collection view is another story. On click, I want it to select all checkboxes in a given column. Here is my code:

var dp:HierarchicalCollectionView = _dataGrid.dataProvider as HierarchicalCollectionView; var testDp:GroupingCollection = dp.source as GroupingCollection; var rawDp:ArrayCollection = testDp.source as ArrayCollection;

for(var i:int=0 ; i < rawDp.length ; i++){ rawDp[i][_dataField] = cb.selected; }

It selects all checkboxes on the 2nd level of data, but doesn't select the top level of data. What am I missing here? I can't seem to find it.

Any tips are greatly appreciated. Thank you.

Answer 1

For hierarchical data you have to use a cursor which iterates over all levels of the hierarchical data.

var dp:IHierarchicalCollectionView = _dataGrid.hierarchicalCollectionView;
var cursor:IViewCursor= dp.createCursor();

while (!cursor.afterLast)
{
    cursor.current[_dataField] = cb.selected;
    cursor.moveNext();
}

Howerver, this works only with nodes that have previously been opened. So either expand all nodes with _dataGrid.expandAll() (you can collapse them afterwards since the nodes only have to be opened once) or iterate your hierarchical data manually:

function setCheckBoxValue(children:ArrayCollection, value:Boolean):void
{
    for each (var child:Object in children)
    {
        if (child.hasOwnProperty("children") && child["children"])
            setCheckBoxValue(child["children"], value);

        child[_dataField] = value;
    }
}

var myDataProvider:HierarchicalData = /* your data provider */;

// Call it like this...
setCheckBoxValue(myDataProvider.source, cb.selected);

Update: To answer your second question...

1. Create a new CheckBoxColumn which extends AdvancedDataGridColumn. You can use it to preconfigure your headerRenderer and itemRenderer.
2. In your custom item renderer you get hold of your column like this:

   grid = AdvancedDataGrid(listData.owner);
   column = grid.columns[listData.columnIndex] as CheckBoxColumn;

3. Do the same in your header renderer.
4. Whenever the CheckBox value in one of your item renderers changes dispatch a event through your column. Something like: column.dispatchEvent(new Event("checkBoxValueChanged"));
5. Your header render should add an event listener to the column for the "checkBoxValueChanged" event (or whatever you call it). Whenever that event is fired loop through your data provider and update the headers CheckBox accordingly.

In theory that should work. HTH