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


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
ohmetwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jakob_ECommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ohmetwAuthor Commented:
excellent example, thank you for your time!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.