Solved

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

Posted on 2010-08-19
2
582 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
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 goal of the tutorial is to teach the user how to how to record live broadcast.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

863 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now