Flex List limit number of elements - apache-flex

Is it possible to define a property to limit the number of elements which will appear in a mx:List ? I've read about setting the property rowCount, but I don't see any effect.
Can a filter be applied to accomplish this? My intention was to avoid removing the items from the list/array collection, but simply "hide" them. Can this be done?

You can "hide" items from display in a List-based class, without modifying your underlying source data, by using a Collection class, such as an ArrayCollection, and filtering the data.
Read these docs on Collection filtering.
To quote:
You use a filter function to limit the data view in the collection to
a subset of the source data object. The function must take a single
Object parameter, which corresponds to a collection item, and must
return a Boolean value specifying whether to include the item in the
view. As with sorting, when you specify or change the filter function,
you must call the refresh() method on the collection to show the
filtered results. To limit a collection view of an array of strings to
contain only strings starting with M, for example, use the following
filter function:
public function stateFilterFunc(item:Object):Boolean
{
return item >= "M" && item < "N";
}

A different option is to use a new arraycollection and get your limited items from your big arraycollection :
//get first 10 elements
myArrayCollection = new ArrayCollection( myBigArrayCollection.toArray().slice(0,9) );
if you want to work with pagers, you could hold a counter where you keep track of what page the user is on, and get the next elements from you big array collection. example:
//this is just a (very) simple example
//page = integer (counter) for knowing which page the user is on
page = 0;
page_low = page*10;
page_high = page_low + 9;
myArrayCollection = new ArrayCollection( myBigArrayCollection.toArray().slice(page_low,page_high) );
(still using a filter is a more elegant solution)

Related

Flex: Filter HierarchicalData child rows

I have an ArrayCollection of objects used as the source for a HierarchicalData object. My object looks roughly like this:
ObjectName (String)
SubCollection (ArrayCollection)
I am using the HierarchicalData in an AdvancedDataGrid to display the data in a grouped format.
I am able to filter the data in the ArrayCollection using a filterFunction. What I want to do now is also filter the records in the SubCollection as well so that only the items that match the filter are displayed in the AdvancedDataGrid.
Can anyone tell me how I can filter the child rows in a HierarchicalData?
This answer isn't a direct answer to your question, but it should help with some of the background. Essentially I am in the same position as you, where I need to show a specific data set depending on what type of parent node I have.
In this case, starting with an override to HierarchicalData.getChildren(node:Object):Object this will give you access to filter the first level children, and will also give you the ability to call a filtered method for sub-children to any n-th level.
You then use your extended class as the source to the ADG.
A pseudo-code example:
Class MyCollection extends HierarchicalData
override public function getChildren(node:Object):Object
{
if (node is a TopLevelObject)
(node.children as ArrayCollection).filterFunction = filterSub;
node.children.refresh();
else if (node is a SubCollectionObject)
(node.children as ArrayCollection).filterFunction = filterGrandChildren;
node.children.refresh();
// - OR -
//a more complex process of allowing the sub-node to determine it's filter
return node.filterSubCollectionGrandChildren();
return node;
}

Adobe Flex - List Component - How Can You Allow Multiple Selections (allowMultipleSelection) Based Off A Max Number Of Selections Allowed

In a List Component, how can I allow multiple selections, but the max number of selections allowed is based off a predefined number?
What I got so far is... I first define a max number of selections:
private var numberOfYearsCanSelect:int = 3;
I set allowMultipleSelection = true in the List Component.
On change of the List Component I added logic to see if the user selected more than what they are allowed to select, and if so, I set the length of the selectedItems equal to the max number they can select:
if (event.currentTarget.selectedIndices.length > numberOfYearsCanSelect)
{
var arr:Vector.<Object>=event.currentTarget.selectedItems;
arr.length=numberOfYearsCanSelect;
event.currentTarget.selectedItems=arr;
}
The problem with this is that, for some reason the List is not updating when I set the selectedItems. It allows you to select how ever many you want.
What I want to happen is, when the user selects more than what is allowed, we only select that number and the remaining are not selected.
Maybe I need to do some kind of List refresh on the View to get it to work, or should I be creating a custom List by extending the List Class and overriding some methods?
Thanks
Seems to me that subclassing List would be the simplest solution. All you have to do then, is making sure that the user selection is never commited when the number of proposed selected items exceeds the maximum value.
Something like this should do the trick:
use namespace mx_internal;
public class LimitedList extends List {
public var maxSelectedItems:int = 3;
override public function initialize():void {
super.initialize();
allowMultipleSelection = true;
}
override mx_internal function setSelectedIndices(
value:Vector.<int>,
dispatchChangeEvent:Boolean = false,
changeCaret:Boolean = true):void
{
if (!value || value.length <= maxSelectedItems)
super.setSelectedIndices(value, dispatchChangeEvent, changeCaret);
}
}
Of course, some more tweaking needs to be done to make this a fully reusable component, but you can use this as a starting point (or as a one-off).

Flex : How to hide a row in AdvancedDataGrid?

I have an AdvancedDataGrid with a ArrayCollection as its dataProvider. For instance i have a CheckBox that allows me to show or hide certain rows in the AdvancedDataGrid.
Any idea how i could do that?
My suggestion would be to use your data provider's filterFunction property. Basically, you can give your data provider a function that will determine whether a given item in the ArrayCollection is excluded or not (if an item is excluded, it won't be displayed in the AdvancedDataGrid, in essence making it "invisible"). The docs for filterFunction can be found here.
What I'd suggest then is that checking the checkbox sets a property on the object in your data provider, which is then used by your filter function to include/exclude rows. Some (very rough) pseudocode follows:
private function checkboxClickHandler( event:MouseEvent ):void
{
/*
Based on the MouseEvent, determine the row
in the data grid you're dealing with
*/
myDataProvider[someIndex].checkboxFlag = myCheckBox.selected;
myDataProvider.refresh(); // calling refresh() re-applies the filter to
// account for changes.
}
private function myDataProviderFilterFunction( item:Object ):Boolean
{
// assuming we want the item to be filtered if checkboxFlag is true
return !item["checkboxFlag"];
}

Flex Dictionary Sorting

I have the following dictionary in flex, and i d like to sort it by value. Couldn't find any resource.
'1'=>2, '0' =>1, '3'=>4 ..
Any ideas ? How can i sort this by value ?
I searched around for a similar solution, except that I needed to sort the dictionary map and return a sorted collection relating key value pairs. After failing to find a published solution I put together the approach below. This method takes a dictionary as input, creates an array maintaining the association then sorts the resultant array using array.sortOn() and returns the sorted results back as an array. "key" and "value" fields in the array in the example below are used for clarity, but any field name could be used.
This example assumes a string object as a key and a numeric object as a value, though of course any object type could be used, and field parameters adjusted.
The approach below could also be used for sorting by key instead of value by using "key" as the sort field for the sortOn method, and you could use different sort options than the descending numeric sort I used here( AS3 SortOn() documentation) Code below is intentionally non-generic to simplify it for example purposes.
public static function sortDictionaryByValue(d:Dictionary):Array
{
var a:Array = new Array();
for (var dictionaryKey:Object in d)
{
a.push({key:dictionaryKey,value:d[dictionaryKey]});
}
a.sortOn("value",[Array.NUMERIC|Array.DESCENDING]);
return a;
}
Probably not the best way to do it but it works:
var a:Array = new Array();
for each (var v:Number in dict)
{
a.push(v);
}
a.sort();

flex 3 and using name/value pairs

Does anyone have any recommendations for working with name/value pairs in Flex?
Context:
I want to create a Flex UI for updating a database table. I want the UI to contain the field name(read only) and current field value (which will be editable). Im using the WebService component to retrieve the field value and then asssigning it to an object with the field name hardcoded e.g.
private function resultHandler(event:ResultEvent):Object
{
var resultsObj:Object;
resultsObj = {
name:event.result.name as String,
This approach however is adding the dependency that the table structure/field names will never change. Using the object type also requries that i write my own algorithm to sort the output.
I'm not sure I understand the issue.
If you want to avoid dependency of the properties returned from the event at this point, simply use the event.result object, which is already an associative array.
As for sorting, we would need more context on what you are attempting to sort.
That's pretty simple. Don't use for each in loop. Use For-In Loop
Demo is shown below.
var dicEntry:Object = new Object();
dicEntry["Name"] = "Raj";
dicEntry["sal"] = 10000;
dicEntry["age"] = 33;
for(var key:Object in dicEntry)
{
trace("Object Key: "+key+" Object Value: +dicEntry[key]);
}
That's it.

Resources