Question

I'm using 2 comboboxes to filter a dataGrid that has been populated via csv file. The first combobox filters the columns and works fine:

//Listener and function for when the Agreement ID is selected
agreement_cb.addEventListener(Event.CHANGE, agreement);
function agreement(event:Event):void 
{
    //get the number of columns 
    var columnCount:Number = myGrid.getColumnCount();

    for (var i:int=0; i<columnCount; i++)
    {
        myGrid.getColumnAt(i).visible = false;
    }
    var columnNumber:Number = agreement_cb.selectedItem.data;
    myGrid.getColumnAt(columnNumber).visible = true;
    myGrid.getColumnAt(0).visible = true;
    myGrid.columns[0].width = 200;
}

But I can't find anything on how to get the same type of function to hide all of the rows except the one they select from the second drop-down (codes_cb).

Any help is appreciated...

UPDATE:

loadedData = myLoader.data.split(/\r\n|\n|\r/);
    loadedData.pop();
    for (var i:int=0; i<loadedData.length; i++)
    {
        var rowArray:Array = loadedData[i].split(",");
        loadedData[i] = {"SelectAgreement":rowArray[0],"KSLTPROF0057":rowArray[1] .........};
    }
    loadedData.shift();
    myGrid.columns = ["SelectAgreement", "KSLTPROF0057", ......];

    import fl.data.DataProvider;
    import fl.controls.dataGridClasses.DataGridColumn;

    myGrid.dataProvider = new DataProvider(loadedData);
Was it helpful?

Solution

A DataGrid always shows all objects in its dataProvider, so to hide rows, you need to hide the data objects. Some classes that work as dataProviders have this functionality built in that makes this really easy (Any Class that implements IList can be operate as a dataProvider), however fl.data.DataProvider is not one of those classes.

So I will provide answers using both, if you can, I highly recommend using mx.collections.ArrayCollection over fl.data.DataProvider.


Section 1: fl.data.DataProvider

For this I'm assuming that your loadedData array is a class property, not declared in a function.

function agreement(event:Event):void 
{
//your existing code here
    var dataProvider:DataProvider = MyGrid.dataProvider as DataProvider;//recover the dataprovider
    dataProvider.removeAll();//remove all rows
    for (var x:int = 0; x<loadedData.length; x++)
    {
        if (loadedData[x] == "SELECTION MATCH") //insert here your selection criteria
        {
           dataProvider.addItem(loadedData[x]); //add it back into the dataProvider
        }
    }
}
function resetFilter():void
{
    var dataProvider:DataProvider = MyGrid.dataProvider as DataProvider;//recover the dataprovider
    dataProvider.removeAll(); //prevent duplication
    dataProvider.addItems(loadedData);//reload all rows
}

Section 2: mx.collections.ArrayCollection

My reasoning for recommending this is because ArrayCollection already has the functions to do this without the risk of data being lost by objects losing scope, it also reduces the amount of code/operations you need to do. To do this we use ArrayCollection.filterFunction & ArrayCollection.refresh() to filter the "visible array" without changing the source.

private var dataProvider:ArrayCollection = new ArrayCollection(loadedData);
MyGrid.dataProvider = dataProvider;
function agreement(event:Event):void
{
    //your existing code here
    dataProvider.filterFunction = myFilterFunction;//use my filter
    dataProvider.refresh();//refresh the visible list using new filter/sort
}
function resetFilter():void
{
    dataProvider.filterFunction = null;//clear filter
    dataProvider.refresh();//refresh the visible list using new filter/sort
}
function myFilterFunction(item:Object):Boolean
{
    if (item == "SELECTION MATCH") return true;//insert your selection criteria here        
    else return false;
}

the filterFunction accepts a function and uses it to test each object in the ArrayCollection, the function has to return a Boolean, true for "Yes, display this object" and false for "Do not diplay".

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top