Hi All,
I am using AdvanceDataGrid to display data in hierarchical fashion.The data is
in the form of XML as follows.
<data id="leafNode" name="WS"/>
<data id="parentB" name="WW">
<data id="loading"/>
</data>
<data id="parentC" name="SS">
<data id="loading"/>
</data>
<data id="parentD" name="CS">
<data id="loading"/>
</data>
I am using lazy loading concept in which I only load one level of hierarchy at
a time.I insert the <data id="loading"/> tag as a child tag for row which has
children.This makes sure that the expand/collapse icon appears for this row.
I then use the itemOpen event of the advancedatagrid to fetch the children of
the clicked item and replace the <data id="loading"/> with the children fetched
for the clicked item.
I see that the icons displayed next to each expand/collapse are the same
irrespective of hierarchy.
My requirement is that I want to set the icon (instead of folder and file which
are show by default) depending on the data.The icon needs to be different for
each row whether child or parent and will be governed by the data for that row.
I have tried using itemrenderer which shows the icon properly as follows.
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider columnIndex="1">
<mx:renderer>
<mx:Component>
<mx:HBox>
<mx:Text id="albumName"
width="100%"
selectable="false"
text="{da...@name}"/>
<mx:Image id="albumImage"
height="45"
source="{da...@iconpath}"/>
</mx:HBox>
</mx:Component>
</mx:renderer>
</mx:AdvancedDataGridRendererProvider>
</mx:rendererProviders>
But the lazy loading of hierarchy no more works i.e. The itemOpen events just
hangs and i dont know why it happens.
The following is the sample src -
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="400" height="300"
creationComplete="loadData()">
<mx:Script>
<![CDATA[
import mx.events.AdvancedDataGridEvent;
import mx.collections.HierarchicalData;
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var _data : XMLList;
[Bindable]
private var _xml : XML = <datum/>;
private static var _loadingIndicator:XML = <data/>;
private var _clickedNode:XML;
public function loadData() : void {
var test: testCommand = new testCommand();
test.setCallbacks(getEventsHandleResult,
getEventsHandleFault);
test.getData();
}
private function getEventsHandleFault(e:FaultEvent):void {
}
private function getEventsHandleResult(res:ResultEvent):void {
var ac:ArrayCollection = ArrayCollection(res.result);
_loadingindicat...@id = 'Loading...';
_loadingindicat...@loaddata = 'true';
for each (var foo:Test in ac) {
var _newNode:XML = <data/>;
_newno...@id = foo.eventHandle.toString();
_newno...@name = foo.cellName.toString();
_newno...@iconpath = foo.iconPath.toString();
if (foo.hasChildren.toString() == "true") {
_newNode.appendChild(_loadingIndicator);
}
_xml.appendChild(_newNode);
}
_data = new XMLList(_xml.data);
adg.dataProvider = new HierarchicalData(_data);
}
private function fetchChildren(res:ResultEvent):void {
var ac:ArrayCollection = ArrayCollection(res.result);
_xml = <datum/>
_loadingindicat...@id = 'Loading...';
_loadingindicat...@loaddata = 'true';
for each (var foo:NGPEventVO in ac) {
var _newNode:XML = <data/>;
_newno...@id = foo.eventHandle.toString();
_newno...@name = foo.cellName.toString();
_newno...@iconpath = foo.iconPath.toString();
if (foo.hasChildren.toString() == "true") {
_newNode.appendChild(_loadingIndicator);
}
_xml.appendChild(_newNode);
}
_clickedNode.replace("data", _xml.data);
}
private function onItemOpen(event : AdvancedDataGridEvent):void
{
var children : XMLList =
XML( event.itemRenderer.data).children();
if ( children.length() == 1
&& children[...@loaddata == "true" ) {
_clickedNode = XML(event.itemRenderer.data);
var test : Test = new Test();
test.setCallbacks(fetchChildren,getEventsHandleFault);
test.getData();
}
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="adg"
dataProvider="{new HierarchicalData(_data)}"
width="100%" height="100%" itemOpen="onItemOpen(event)">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="@id"/>
<mx:AdvancedDataGridColumn dataField="@name"/>
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider columnIndex="1">
<mx:renderer>
<mx:Component>
<mx:HBox>
<mx:Text id="albumName"
width="100%"
selectable="false"
text="{da...@name}"/>
<mx:Image id="albumImage"
height="45"
source="{da...@iconpath}"/>
</mx:HBox>
</mx:Component>
</mx:renderer>
</mx:AdvancedDataGridRendererProvider>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Canvas>
