?
Solved

Need to dynamically filter a 2 level treeview with a filter textbox for each level.....

Posted on 2010-08-19
2
Medium Priority
?
611 Views
Last Modified: 2013-11-11

Have a web page that is showing a treeview in the left pane, and detials about whatever is selected in the right pane.  The treeview is only 2 levels and is for a manufacturing and assembly application, the treeview lists PARTS (at the parent level)  and the CONTRIBUTORS for parts (at the child level...fyi, contributor is synonymous for dimensions if it helps to visualize this)  I need users to be able to quickly filter the treeview to only show nodes that match the filter textbox criteria.  I currently have 1 textbox that users can type in and it filters both levels (with logic that will always show the parent part if a child dimension matches, even if the parent part does not...since we need the parent item to display the children under)  
Anyway, this is not really powerful enough and being able to have 2 separate filter textboxes will be exactly what users need.  I'm managing the development of this and our developer has told me this is too complex to do.  I believe our developer is creating the XML for the treeview dynamically.  so, I'm including some basic requirements for the logic for this functionality below and I'm looking for some guidance on how to execute this...maybe we need to set this up differently.  the data is stored in an ORACLE database and we retrieve the data for the treeview using a query. I included a screenshot of query results.  I also included a screenshot with the interface layout with filter textboxes and a table explaining the logic we are trying to achieve.  I would love a full solution of course but I am looking for guidance on how to properly set this up so that we can deliver this functionality.....how to construct the xml for the treeview, etc..   Also, there is no, "filter" button, the code works dynamically, so we start with the full dataset of parts and contributors from the query, then as users start typing in the filter boxes the view updates character by character    This is the treeview and a table describing the desired behavior This is the treeview and a table describing the desired behavior This is the treeview and a table describing the desired behavior This is the treeview and a table describing the desired behavior an example of the data used to build the treeview
0
Comment
Question by:ohmetw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 9

Accepted Solution

by:
Jakob_E earned 2000 total points
ID: 33607607
Hi,

           If I'm correct what you want is somewhat similar to auto completion.
Here is a very rudimentary solution thought as an inspiration.
The code and comments below is pretty much copy paste ¿



// Sample XML (you would load this from your data base)
var xml:XML=<root>
    <part id="001000" description="fox">
        <cont id="001001" description="foo" />
        <cont id="001002" description="bar" />
        <cont id="001003" description="the" />
        <cont id="001004" description="the quick" />
        <cont id="001005" description="the quick brown" />
        <cont id="001006" description="the quick brown fox" />
    </part>
    <part id="002000" description="dog">
        <cont id="002001" description="foo" />
        <cont id="002002" description="bar" />
        <cont id="002003" description="jumped" />
        <cont id="002004" description="jumped over" />
        <cont id="002005" description="jumped over the" />
        <cont id="002006" description="jumped over the lazy" />
        <cont id="002007" description="jumped over the lazy dog" />
    </part>
</root>;


// XML parser (you would wrap this in a "loadComplete" function)
// The purpose of parsing is converting the xml into an array holding
// an object for each cont-node
// Syndax:   {partId:String, contId:String, partDesc:String, contDesc:String }
// Example: {partId:"001000", contId:"001005", partDesc:"fox", contDesc:"the quick brown" }

var data:Array=[];
var list:XMLList=new XMLList(xml.part.cont)
for(var i:int=0,l:int=list.length();i<l;++i){
    data[i]={
        partId:list[i].parent().@id,
        contId:list[i].@id,
        partDesc:list[i].parent().@description,
        contDesc:list[i].@description
        }
}

// Test trace: 001000 001006 fox the quick brown fox
trace(data[5].partId, data[5].contId, data[5].partDesc, data[5].contDesc)


// Filter Function - returns an array holding the matching data objects
var filterData:Array;
function filterTreeviewData(e:Event):void{
    var i:int, l:int, pArr:Array=[], cArr:Array=[];
    // Part input match
    for (i=0,l=data.length;i<l;++i) {
        if(data[i].partDesc.match(partInput.text)||partInput.text=="") pArr[pArr.length]=data[i];
    }
    // Cont input match  
    for (i=0,l=pArr.length;i<l;++i) {
        if(pArr[i].contDesc.match(contInput.text)||contInput.text=="") cArr[cArr.length]=pArr[i];
    }    
    filterData=cArr

    // Print output
    printFilterData()
}

// Print function that displays the matches (you would use this to handle the treeview)
function printFilterData():void{
    output.text="";
    for(var i:int=0,l:int=filterData.length;i<l;++i){
        output.appendText("Part: " + filterData[i].partDesc + " - Cont: " + filterData[i].contDesc + "\n")  
    }
}


// Input and output fields
var partInput:TextField=new TextField()
    partInput.type=TextFieldType.INPUT;
    partInput.border=true;
    partInput.multiline=false;
    partInput.height=20;
    partInput.width=400;
    partInput.x=50
    partInput.y=50
    partInput.defaultTextFormat=new TextFormat("Verdana",12)
    partInput.addEventListener(Event.CHANGE,filterTreeviewData)

var contInput:TextField=new TextField()
    contInput.type=TextFieldType.INPUT;
    contInput.border=true;
    contInput.multiline=false;
    contInput.height=20;
    contInput.width=400;
    contInput.x=50
    contInput.y=75
    contInput.defaultTextFormat=new TextFormat("Verdana",12)
    contInput.addEventListener(Event.CHANGE,filterTreeviewData)
   
var output:TextField=new TextField()
    output.border=true;
    output.multiline=true;
    output.wordWrap=true;
    output.height=200;
    output.width=400;
    output.x=50
    output.y=100
    output.defaultTextFormat=new TextFormat("Verdana",12)
   
    addChild(contInput)
    addChild(partInput)
    addChild(output)



Hope this gets you closer to a solution

Best,
Jakob E



autocomplete.swf
0
 

Author Closing Comment

by:ohmetw
ID: 33744579
excellent example, thank you for your time!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.
Suggested Courses

649 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