Tree and AdvancedDataGrid components for Flex 4.5 and 4.6:
SparkTree4.5.swc - Flex 4.5, 4.5.1, 4.6
Tree component for Flex 4.0 and 4.1:
SparkTree4.0.swc - Flex 4.0, 4.1
Spark Tree and AdvancedDataGrid
Home Page: http://kachurovskiy.com/2010/spark-tree/
Tree and AdvancedDataGrid components for Flex 4.5 and 4.6:
SparkTree4.5.swc - Flex 4.5, 4.5.1, 4.6
Tree component for Flex 4.0 and 4.1:
SparkTree4.0.swc - Flex 4.0, 4.1
Hi,
I noticed that that the disclosure icon doesn't update when removing all the children of a closed item.
Example on http://kachurovskiy.com/f/ria/10/sparkTree/SparkTreeApp.html :
After selecting an item, click 'Add children to selected item', then, without opening it, 'Empty children collection of selected item'. The disclosure icon is still the plus [+].
I found the issue, and try to give my solution, detail: http://www.smithfox.com/?e=155
I tried vertical layout for the tree and nested multiple children. expanded the nesting to see horizontal scroll bar. when I collapsed them back, horizontal scroll bar is still visible
The component should support a filter function which would be assigned to the internal TreeDataProvider to allow custom item visibility.
Hello!
First of all, thanks for a very useful component.
I have run into one minor issue. I use dragEnabled, dropEnabled and dragMoveEnabled with the sample to be able to reorder items, but if I want to move the 'Element 0' -> 'Element 2' child item to a place before the toplevel 'Element 1' item, this doesn't seem to work. Is there any way to fix this? Right now, I have to move the 'Element 2' item to the top level, close the 'Element 0' item and then move 'Element 2' below the 'Element 0' item.
I resolved the exception by adding
if(branch == null)
return;
to the beginning of the removeBranch method. This seems to be a simple fix, albeit it may not be the best solution.
This occurs when I try to filter the tree's dataprovider
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.sparkTree::TreeDataProvider/removeBranch()[D:\Flex Projects\sparkTree\src\com\sparkTree\TreeDataProvider.as:644]
at com.sparkTree::TreeDataProvider/removeLostBranches()[D:\Flex Projects\sparkTree\src\com\sparkTree\TreeDataProvider.as:768]
at com.sparkTree::TreeDataProvider/branch_collectionChangeHandler()[D:\Flex Projects\sparkTree\src\com\sparkTree\TreeDataProvider.as:821]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.collections::ListCollectionView/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1024]
at mx.collections::ListCollectionView/internalRefresh()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:1558]
at mx.collections::ListCollectionView/refresh()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:477]
at com.pearson.cpt.views.components::GradeRangeFilter/doFilter()[D:\wwwroot\PearsonCPT\CPTClient\src\com\pearson\cpt\views\components\GradeRangeFilter.mxml:50]
at com.pearson.cpt.views.components::GradeRangeFilter/onFilterItemSelect()[D:\wwwroot\PearsonCPT\CPTClient\src\com\pearson\cpt\views\components\GradeRangeFilter.mxml:60]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]
at spark.components::List/commitSelection()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\List.as:1205]
at spark.components::List/commitProperties()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\List.as:1078]
at mx.core::UIComponent/validateProperties()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:8209]
at spark.components::List/item_mouseDownHandler()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\List.as:1842]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]
at mx.managers::SystemManager/mouseEventHandler()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\SystemManager.as:2924]
The TreeDataProvider class uses item selection by index feature of an array with brackets, on line 709 & 728:
if (branch[i] == item)
It can cause some issue when using custom IList implementation that are not arrays.
I suggest replacing the above code with this:
if (branch.getItemAt(i) == item)
added spark tree namespace to flex 4 css stylesheet... styles such as color, backgroundColor, etc, map fine... disclosureIconClosed and disclosureIconOpen do not. I think this has to do with the if-else statement in the constructor. It checks for mx Tree styles and applies them, otherwise it initializes to defaults, when it should check its own style declaration or apply its own styles after constructor.
Removing item makes tree state invalid. Details are described below
[example]
assume that we have a tree-structured data below:
First, expand all branches and then remove Branch1_1 from Branch1 .
as we expected :
but actually :
example code here (https://github.com/kazup0n/Spark-Tree/tree/empty_branch_issue/test/empty_branch_issue/src)
Scrollbars on the tree will disappear when resizing the tree beyond a specific point. If I have time, I will investigate further and hopefully submit a fix
Hi,
The default behavior or left arrow is bit different in windows and mx tree component.
below is the code I change to make it behave like the mx counterpart.
I am new to github, let me know how do I make these changes to the code in repo if I am allowed to do so.
override protected function adjustSelectionAndCaretUponNavigation(event:KeyboardEvent):void
{
super.adjustSelectionAndCaretUponNavigation(event);
var navigationUnit:uint = mapKeycodeForLayoutDirection(event);
if (navigationUnit == Keyboard.LEFT && selectedItem)
{
var parent:Object = _dataProvider.getItemParent(selectedItem);
if ( _dataProvider.isOpen(selectedItem) ) {
expandItem(selectedItem, false);
}else if (parent) {
selectedItem = parent;
}
}
else if (navigationUnit == Keyboard.RIGHT && selectedItem)
{
expandItem(selectedItem);
}
}
<sparkTree:Tree id="tree" dataProvider="{dataProvider}"
labelField="{dataProvider is XMLListCollection ? '@Label' : 'label'}"
width="100%" height="100%" textRollOverColor="yellow"
textSelectedColor="0xFFFFFF" dragEnabled="false" dropEnabled="false"
dragMoveEnabled="true" doubleClick="tree_doubleClickHandler(event)">
protected function tree_doubleClickHandler(event:MouseEvent):void
{
// do something
}
when i doubleClick one item ' tree_doubleClickHandler ' method not exec;
<sparkTree:Tree id="tree" dataProvider="{dataProvider}"
labelField="{dataProvider is XMLListCollection ? '@Label' : 'label'}"
width="100%" height="100%" textRollOverColor="yellow"
textSelectedColor="0xFFFFFF" dragEnabled="false" dropEnabled="false"
dragMoveEnabled="true" doubleClick="tree_doubleClickHandler(event)">
protected function tree_doubleClickHandler(event:MouseEvent):void
{
// do something
}
when i doubleClick one item ' tree_doubleClickHandler ' method not exec;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.