Solved

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

Posted on 2010-08-19
2
592 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 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying 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

Suggested Solutions

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…
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…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
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.

730 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