Solved

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

Posted on 2010-08-19
2
589 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
2 Comments
 
LVL 9

Accepted Solution

by:
Jakob_E earned 500 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
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…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

856 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