I'd like to put a TreeGrid in my application so that the columns can be sorted. If you refer to this sample application, you'll notice that if you
Open a branch node
Sort by one of the columns
Close that branch node
then the TreeGrid starts to get out of wack and duplicate columns start appearing and other columns start disappearing. What I would like is to have the columns sorted only by the outermost nodes.
One attempt I had was to run treeGrid.closeAllItems() before the sort occurred. However, this does not work, because a Sort Column event gets dispatched while closeAllItems is running, so the list gets messed up and listOutOfBounds exceptions get thrown.
Has anyone had any success with this, or have any ideas?
Here is a piece of working code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
]]>
</mx:Script>
<mx:XMLList id="dataProviderXMLList">
<node id="1" name="Companies" type="COMPANIES" desc="All Companies" statusIcon="statusIcon">
<node id="2" name="Adobe" type="COMPANY" desc="Adobe inc." statusIcon="statusIcon">
<node id="5" name="Adobe Consulting" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" />
<node id="6" name="EDBU" type="COMPANY" desc="Database company" statusIcon="statusIcon" />
</node>
<node id="3" name="Macromedia" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" />
<node id="4" name="Oracle" type="COMPANY" desc="Database company" statusIcon="statusIcon" />
</node>
</mx:XMLList>
<mx:AdvancedDataGrid width="100%" height="100%" sortExpertMode="true" id="adg1" designViewDataType="tree" dataProvider="{new HierarchicalData(dataProviderXMLList)}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Companies" dataField="#name"/>
<mx:AdvancedDataGridColumn headerText="COMPANIES" dataField="#type"/>
<mx:AdvancedDataGridColumn headerText="All Companies" dataField="#desc"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>
Bu this is using AdvancedDataGrid and it works perfectly fine.
Related
I'd like to change icon of the node according to the attribute automatically/dynamically in Flex.
Bellow are my codes:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="540" height="610" chromeColor="#E8E50A">
<fx:Declarations>
<fx:XMLList id="user_list">
<node user="Running Center">
<node user="System Administrator">
<node icon="admin" user="admin" type="admin"/>
<node icon="home" user="root" type="home"/>
</node>
<node user="Common User">
<node icon="user" user="Udo" type="user"/>
<node icon="user" user="Steven" type="user"/>
<node icon="user" user="Peter" type="user"/>
</node>
</node>
</fx:XMLList>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/admin.png")]
public var admin:Class;
[Bindable]
[Embed(source="assets/home.png")]
public var home:Class;
[Bindable]
[Embed(source="assets/user.png")]
public var user:Class;
]]>
</fx:Script>
<mx:Tree id="user_tree"
x="10" y="51" width="206"
height="207" dataProvider="{user_list}"
iconField="#icon" labelField="#user" showRoot="true" />
</s:Application>
Here is the effect image:
I'm sorry for I can't post an image.
Bellow is the link.
http://i.stack.imgur.com/oZG6v.jpg
For example,maybe I should change the code like this?
<node icon="{...}" user="admin" type="admin"/>
Any help is greetful. Thanks in advance.
Here are some Google results for: "Flex tree iconFunction"
http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/
http://blog.flexexamples.com/2007/11/15/setting-a-custom-icon-field-in-a-flex-tree-control/
This is my XML data in a file named nodesAndStuff.xml.
<?xml version="1.0" encoding="utf-8"?>
<root>
<node label="One" />
<node label="Two" />
<node label="Three" />
<node label="Four" />
<node label="Five" />
<node label="Six" />
<node label="Seven" />
<node label="Eight" />
<node label="Nine" />
</root>
The component using this data source is an XMLListCollection which is bound to a spark List and the code for that is:
<s:Application name="Spark_List_dataProvider_XML_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
initialize="init();">
<fx:Script>
<![CDATA[
private function init():void {
xmlListColl.source = nodes.children();
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="nodes" source="nodesAndStuff.xml" />
</fx:Declarations>
<s:List id="lst"
labelField="#label"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:XMLListCollection id="xmlListColl" />
</s:dataProvider>
</s:List>
Now I have added my tree just below the list and I have saved counting from 10 to 19 in one.xml, 20 to 29 in two.xml and so on in different XML file. I have no clue how to connect the XML containing counting from 10 to 19 as the single node in tree at the selection of label one in list.
There are all sorts of ways to do what you want to do. Keeping in the spirit of your example, I have modified it to do what I think you are asking:
<fx:Script>
<![CDATA[
private function init():void {
processXML(one);
}
private function processXML(nodes:XML):void {
xmlListColl.removeAll();
xmlListColl.source = nodes.children();
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XML id="one" source="one.xml" />
<fx:XML id="two" source="two.xml" />
</fx:Declarations>
<s:List id="lst"
labelField="#label"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:XMLListCollection id="xmlListColl" />
</s:dataProvider>
</s:List>
<s:Button label="Change" click="processXML(two)" />
<s:List id="lst"
labelField="#label"
change="lst_changeHandler(event)"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:XMLListCollection>
<fx:XMLList xmlns="">
<node label="One" />
<node label="Two" />
<node label="Three" />
<node label="Four" />
<node label="Five" />
<node label="Six" />
<node label="Seven" />
<node label="Eight" />
<node label="Nine" />
</fx:XMLList>
</s:XMLListCollection>
</s:dataProvider>
</s:List>
protected function lst_changeHandler(event:IndexChangeEvent):void
{
Alert.show(event.target.selectedItem);
}
I want to extend the list with hyperlinks. For example in every node I should have an href attribute also. Then I need to redirect users to the selected item. I know Flash has the URLRequest class.
The little problem I have now is to get the selected item. It propably is because of the dataprovider is xml and I haven't done the correct casting. Or maybe some more enlightened than me can help me.
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
import spark.events.IndexChangeEvent;
protected function lst_changeHandler(event:IndexChangeEvent):void
{
navigateToURL(new URLRequest(lst.selectedItem.#url));
}
]]>
</fx:Script>
<s:List id="lst"
labelField="#label"
change="lst_changeHandler(event)"
horizontalCenter="0" verticalCenter="0"
>
<s:dataProvider>
<s:XMLListCollection>
<fx:XMLList xmlns="">
<node label="One" url="www.internet.com" />
<node label="Two" url="www.internet2.com" />
<node label="Three" url="www.internet3.com" />
<node label="Four" url="www.bla.com" />
</fx:XMLList>
</s:XMLListCollection>
</s:dataProvider>
</s:List>
var item:XML = event.target.selectedItem as XML;
var label:String = item.#label;
var url:String = item.#url;
if(url != null) {
var ur:URLRequest = new URLRequest(url);
navigateToURL(ur);
}
It was really real simple!
I'm using the iconField property of the Flex Tree to dynamically set the icon that a node should use. This works fine for leaf nodes but for branch nodes it doesn't seem to respect my iconField and instead just shows the default folder node.
Here's a simple repro:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Embed("assets/icon1.png")]
public var icon1:Class;
[Embed("assets/icon2.png")]
public var icon2:Class;
]]>
</mx:Script>
<mx:XML id="dp">
<node label="Sales" icon="icon1">
<node label="East" icon="icon2"/>
<node label="West" icon="icon2"/>
</node>
</mx:XML>
<mx:Tree dataProvider="{dp}" labelField="#label" iconField="#icon"
width="100%" height="100%" />
</mx:Application>
What happens is that icon2 shows for the East and West nodes but icon1 doesn't show for the Sales node. How can I get this to work?
I think it can be done with an iconFunction... This looks like it does what you want:
http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/
I see. susichan was right with iconFunction:
<mx:Script>
<![CDATA[
[Embed("icon1.png")]
public var icon1:Class;
[Embed("icon2.png")]
public var icon2:Class;
[Embed("icon3.png")]
public var icon3:Class;
private function setIcons(item:Object):Class {
var iconClass:Class;
var classType:String = XML(item).attribute("icon");
if(classType!="")
return this[classType];
else
return null;
}
]]>
</mx:Script>
<mx:XML id="dp">
<root>
<node label="Sales" icon="icon1">
<node label="East" icon="icon3"/>
<node label="West" icon="icon3"/>
</node>
<node label="Non-Sales" icon="icon2">
<node label="East" icon="icon3"/>
<node label="West" icon="icon3"/>
</node>
</root>
</mx:XML>
<mx:Tree dataProvider="{dp.node}" labelField="#label" iconField="#icon"
iconFunction="setIcons" showRoot="true"
width="100%" height="100%" />
Almost!
You need to set the folderOpenIcon and folderClosedIcon like so:
<mx:Tree dataProvider="{dp}" labelField="#label" iconField="#icon"
folderOpenIcon="{icon3}"
folderClosedIcon="{icon4}"
width="100%" height="100%" />
<mx:Script>
<![CDATA[
private function openAllNodes():void {
tree.openItems = dp..node;
}
private function closeAllNodes():void {
tree.openItems = [];
}
]]>
</mx:Script>
<mx:XML id="dp">
<root>
<node label="Parent 1">
<node label="Child 1" />
<node label="Child 2">
<node label="Grandchild 1" />
<node label="Grandchild 2" />
</node>
<node label="Child 3" />
<node label="Child 4" />
</node>
</root>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Open all nodes" click="openAllNodes();" />
<mx:Button label="Close all nodes" click="closeAllNodes();" />
</mx:ApplicationControlBar>
<mx:Tree id="tree"
dataProvider="{dp}"
showRoot="false"
labelField="#label"
width="200" />
Unless or other wise i click my parent list, the child or the next list must be in a disabled state.
I click on Child 1, then only Child 2 Must be able to select.
Please Help Me.
It sounds like you might want to extend the tree class and override some of the methods to implement your special functionality. Look at overriding the drawItem, mouseClickHandler, and possibly the expandItem functions.