[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to display HierarchicalData in flex AdvancedDataGrid based on XMLLIST

Posted on 2011-04-30
15
Medium Priority
?
1,785 Views
Last Modified: 2012-08-13

Greetings,

I have XMLLIST and I would like to have the option to show all items as HierarchicalData in AdvancedDataGrid and other option to show important items based on attribute important and it should be as HierarchicalData and the default view is showing important items (important =='X').



The source code is here :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="onCreationComplete()">

      <mx:Script>
            <![CDATA[
                  import mx.collections.HierarchicalData;
                  import mx.collections.XMLListCollection;

                  [Bindable]
                  private var xmlListCol:XMLListCollection=new XMLListCollection();

                  private function onCreationComplete():void
                  {
                        xmlListCol=new XMLListCollection(xmlList.Category);
                        myAD.dataProvider=new HierarchicalData(xmlListCol);
                  }


                  private function showAllItemsClick():void
                  {
                        
                  }      
                  
                  private function showImportantItemsClick():void
                  {
                        
                  }      
      
            ]]>
      </mx:Script>
      
      <mx:XMLList id="xmlList" xmlns="">
            <root>
                  <Category label="Category1" >
                        <item label="item11" Title="item11 ABC" important="X"/>
                        <item label="item12" Title="item12 ABC" important=""/>
                        <item label="item13" Title="item13 ABC" important=""/>
                        <item label="item14" Title="item14 ABC" important="X"/>
                        <item label="item15" Title="item15 ABC" important=""/>
                  </Category>
                  <Category label="Category2" >
                        <item label="item21" Title="item21 ABC" important="X"/>
                        <item label="item22" Title="item22 ABC" important=""/>
                        <item label="item23" Title="item23 ABC" important="X"/>
                        <item label="item24" Title="item24 ABC" important="X"/>
                  </Category>
                  <Category label="Category3" >
                        <item label="item31" Title="item31 ABC" important=""/>
                        <item label="item32" Title="item32 ABC" important=""/>
                        <item label="item33" Title="item33 ABC" important=""/>
                        <item label="item34" Title="item34 ABC" important="X"/>
                        <item label="item35" Title="item35 ABC" important=""/>
                  </Category>
            </root>
</mx:XMLList>
      
      <mx:Panel width="75%" height="75%">

            <mx:AdvancedDataGrid id="myAD" width="100%" height="100%">
                  <mx:columns>
                        <mx:AdvancedDataGridColumn dataField="@label" headerText="Category"/>                                      
                        <mx:AdvancedDataGridColumn dataField="@Title" headerText="Title"/>
                  </mx:columns>
            </mx:AdvancedDataGrid>
            
            <mx:ControlBar>
                  <mx:Button label="Show All items" click="showAllItemsClick()"/>
                  <mx:Button label="Show important items" click="showImportantItemsClick()"/>
            </mx:ControlBar>

      </mx:Panel>      

</mx:Application>
0
Comment
Question by:myBlueSky
  • 7
  • 6
14 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 35497779
Do you want expandAll?
0
 
LVL 1

Author Comment

by:myBlueSky
ID: 35498137
Do you want expandAll? No..

do we have the option to do so?
0
 
LVL 1

Author Comment

by:myBlueSky
ID: 35498152
What we are looking for is :
1- when you click on show all --> we can see all items which displayed as HierarchicalData in AdvancedDataGrid .

2- when you click on show important items --> we can see all items that have attribute important = "X" and displayed as HierarchicalData in AdvancedDataGrid.

The default display is showing important items as HierarchicalData in AdvancedDataGrid.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 29

Expert Comment

by:dgofman
ID: 35499349
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35499350
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35499356
In my project I am customizing dataDescriptor here is another example close to my implementation:

http://www.richardleggett.co.uk/blog/index.php/2009/05/11/filtering-hierachical-data-in-flex-itree
0
 
LVL 1

Author Comment

by:myBlueSky
ID: 35499389
I'm using AdvancedDataGrid and what is needed:

                private function showAllItemsClick():void
                  {
                       
                  }      
                 
                  private function showImportantItemsClick():void
                  {
                       
                  }
0
 
LVL 1

Author Comment

by:myBlueSky
ID: 35499548
dgofman.

I'm able to resolve it using filterFunction.

here is the solution.
__________


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="onCreationComplete()">

      <mx:Script>
            <![CDATA[
                  import mx.collections.IHierarchicalCollectionView;
                  import mx.collections.HierarchicalData;
                  import mx.collections.XMLListCollection;

                  [Bindable]
                  private var xmlListCol:XMLListCollection=new XMLListCollection();

                  private function onCreationComplete():void
                  {
                        xmlListCol=new XMLListCollection(xmlList.Category);
                        myAD.dataProvider=new HierarchicalData(xmlListCol);
                  }


                  private function showAllItemsClick():void
                  {
                        IHierarchicalCollectionView(myAD.dataProvider).filterFunction = null;;
                        IHierarchicalCollectionView(myAD.dataProvider).refresh();                        
                  }      
                  
                  private function showImportantItemsClick():void
                  {
                        IHierarchicalCollectionView(myAD.dataProvider).filterFunction = myFilterFunc;
                        IHierarchicalCollectionView(myAD.dataProvider).refresh();                        
                  }      

        private function myFilterFunc(item:Object):Boolean {
                  var xml:XML = XML(item);

                  if(xml.children().length() > 0){
                        var hasValidChildren:Boolean = false;
                        for each(var node:XML in xml.item){
                              if(myFilterFunc(node)){
                                    hasValidChildren = true;
                                    break;
                              }
                        }
                        return hasValidChildren;
                  }
                  else {
                        return String(xml["@important"].toString())=='X';
                  }
            }
                  
            ]]>
      </mx:Script>
      
      <mx:XMLList id="xmlList" xmlns="">
            <root>
                  <Category label="Category1" >
                        <item label="item11" Title="item11 ABC" important="X"/>
                        <item label="item12" Title="item12 ABC" important=""/>
                        <item label="item13" Title="item13 ABC" important=""/>
                        <item label="item14" Title="item14 ABC" important="X"/>
                        <item label="item15" Title="item15 ABC" important=""/>
                  </Category>
                  <Category label="Category2" >
                        <item label="item21" Title="item21 ABC" important="X"/>
                        <item label="item22" Title="item22 ABC" important=""/>
                        <item label="item23" Title="item23 ABC" important="X"/>
                        <item label="item24" Title="item24 ABC" important="X"/>
                  </Category>
                  <Category label="Category3" >
                        <item label="item31" Title="item31 ABC" important=""/>
                        <item label="item32" Title="item32 ABC" important=""/>
                        <item label="item33" Title="item33 ABC" important=""/>
                        <item label="item34" Title="item34 ABC" important="X"/>
                        <item label="item35" Title="item35 ABC" important=""/>
                  </Category>
            </root>
</mx:XMLList>
      
      <mx:Panel width="75%" height="75%">

            <mx:AdvancedDataGrid id="myAD" width="100%" height="100%">
                  <mx:columns>
                        <mx:AdvancedDataGridColumn dataField="@label" headerText="Category"/>                                      
                        <mx:AdvancedDataGridColumn dataField="@Title" headerText="Title"/>
                        <mx:AdvancedDataGridColumn dataField="@important" headerText="Important"/>
                  </mx:columns>
            </mx:AdvancedDataGrid>
            
            <mx:ControlBar>
                  <mx:Button label="Show important items" click="showImportantItemsClick()"/>
                  <mx:Button label="Show All items" click="showAllItemsClick()"/>
            </mx:ControlBar>

      </mx:Panel>      

</mx:Application>
0
 
LVL 1

Author Comment

by:myBlueSky
ID: 35499550
I would share it with others
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35499810
Your solution is invalid, your filterFunction removing "important" items, but when you click "Show All items" you will not get old items back.

Plus in my links you can find implementation of filterFunction as well, but you need to use dataDescriptor as well.

I will glad if you will accept implementation from  ID: 35499350
0
 
LVL 1

Author Comment

by:myBlueSky
ID: 35500604
I have tried the solution and it is functioning very well as I expected. Can you please post your solution post your solution on the same example.

Thanks.
0
 
LVL 29

Accepted Solution

by:
dgofman earned 2000 total points
ID: 35503224
If you want to share nice example of the filtering DataGrid let me modify your logic:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="onCreationComplete()">
      
      <mx:Script>
            <![CDATA[
                  import mx.collections.HierarchicalCollectionView;
                  import mx.collections.HierarchicalData;
                  import mx.collections.ICollectionView;
                  import mx.collections.IHierarchicalCollectionView;
                  import mx.collections.XMLListCollection;

                  [Bindable]
                  private var hcv:HierarchicalCollectionView;

                  private var filterKey:String;
      
                  private function onCreationComplete():void
                  {
                        var xmlListCol:XMLListCollection = new XMLListCollection(xmlList.Category);
                        hcv = new HierarchicalCollectionView(new HierarchicalData(xmlListCol));
                  }

                  private function findKey(key:String):void
                  {
                        filterKey = key;
                        if(hcv.length > 0){
                              var firstNode:XML = xmlList[0] as XML;
                              refreshRecursiveChildren(firstNode);
                              myAD.invalidateList();
                        }
                  }
                  
                  private function refreshRecursiveChildren(node:XML):void{
                        var children:ICollectionView = IHierarchicalCollectionView(hcv).getChildren(node);
                        if(children){
                              for each(var item:XML in children){
                                    refreshRecursiveChildren(item);
                              }
                              children.filterFunction = filterData;
                              children.refresh();
                        }
                  }

                  public function filterData(item:Object):Boolean{
                        return (filterKey == null || (item as XML && item.@important == filterKey));
                  }
            ]]>
      </mx:Script>
      
      <mx:XMLList id="xmlList" xmlns="">
            <root>
                  <Category label="Category1" >
                        <item label="item11" Title="item11 ABC" important="X"/>
                        <item label="item12" Title="item12 ABC" important=""/>
                        <item label="item13" Title="item13 ABC" important=""/>
                        <item label="item14" Title="item14 ABC" important="X"/>
                        <item label="item15" Title="item15 ABC" important=""/>
                  </Category>
                  <Category label="Category2" >
                        <item label="item21" Title="item21 ABC" important="X"/>
                        <item label="item22" Title="item22 ABC" important=""/>
                        <item label="item23" Title="item23 ABC" important="X"/>
                        <item label="item24" Title="item24 ABC" important="X"/>
                  </Category>
                  <Category label="Category3" >
                        <item label="item31" Title="item31 ABC" important=""/>
                        <item label="item32" Title="item32 ABC" important=""/>
                        <item label="item33" Title="item33 ABC" important=""/>
                        <item label="item34" Title="item34 ABC" important="X"/>
                        <item label="item35" Title="item35 ABC" important=""/>
                  </Category>
            </root>
      </mx:XMLList>
      
      <mx:Panel width="75%" height="75%">
            <mx:AdvancedDataGrid id="myAD" dataProvider="{hcv}" width="100%" height="100%">
                  <mx:columns>
                        <mx:AdvancedDataGridColumn dataField="@label" headerText="Category"/>
                        <mx:AdvancedDataGridColumn dataField="@Title" headerText="Title"/>
                        <mx:AdvancedDataGridColumn dataField="@important" headerText="Important"/>
                  </mx:columns>
            </mx:AdvancedDataGrid>
            
            <mx:ControlBar>
                  <mx:Button label="Show important items" click="findKey('X')"/>
                  <mx:Button label="Show All items" click="findKey(null)"/>
            </mx:ControlBar>
      </mx:Panel>
</mx:Application>
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35700807
Hi myBlueSky,
Did you try my solution?
0
 

Expert Comment

by:_alias99
ID: 35735977
All,
 
Following an 'Objection' by dgofman (at http://www.experts-exchange.com/Q_26987409.html) to the intended closure of this question, it has been reviewed by at least one Moderator and is being closed as recommended by the Expert.
 
At this point I am going to re-start the auto-close procedure.
 
Thank you,
 
_alias99
Community Support Moderator
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month19 days, 7 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question