AS3 datagrid - Hide a row - actionscript-3

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);

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".

Related

Trigger UiApp-builder callback within another routine

Serge's solution here seemed like the way to go about this, but I'm a bit afraid that my circumstances may be too different...
I have a button where users can add a new set of rows with controls to a FlexTable, in order to allow them to insert a new member into a record set. After designing and building the app to do this (and despite assurances to the contrary), a requirement was then added for the users to be able to edit the record sets at a later date.
I've finally managed to get the data retrieved and correctly displayed on the Ui - for single member record sets. As a final stage, I am now attempting to extend this to accommodate record sets having more than one member. Obviously this requires determining how many members there are in the record set, and then adding the new rows/control group to the FlexTable, before loading the member into each control group.
So within this routine, (depending on how many members there are) I may need to trigger the same callback, which the user normally does with a button. However, the difference with Serge's fine example, is that his code triggers the checkbox callback at the end of his routine once all the Ui components are in place. My situation needs to do this on the fly - and so far I'm getting 'Unexpected error', which suggests to me that the Ui is not able to update with the added FlexTable controls before my code attempts to assign values to them.
Does anyone have any insight into this problem? Is my only recourse to completely re-build a fixed Ui and dispense with the dynamic rowset model?
Code follows -
1. event for adding controls:
var app = UiApp.getActiveApplication();
var oFlexGrid = app.getElementById('ExpenseDetail');
var oRowCount = app.getElementById('rowCount');
var oScriptDBId = app.getElementById('scriptDBId');
var iRows = parseInt(e.parameter.rowCount);
var sVId = e.parameter.scriptDBId;
var vGridDefs = loadArrayById(sVId); //retrieve upload definition array from ScriptDB
var vControlNames = [];
if (isOdd(iRows)){
var sColour = 'AliceBlue';
} else {
var sColour = 'LavenderBlush';
};
oFlexGrid.insertRow(0);
oFlexGrid.insertRow(0);
oFlexGrid.insertRow(0);
oFlexGrid.insertRow(0);
oFlexGrid.setRowStyleAttributes(0,{'backgroundColor':sColour});
oFlexGrid.setRowStyleAttributes(1,{'backgroundColor':sColour});
oFlexGrid.setRowStyleAttributes(2,{'backgroundColor':sColour});
oFlexGrid.setRowStyleAttributes(3,{'backgroundColor':sColour});
var vExpenseDef = Get_NamedRangeValues_(CONST_SSKEY_APP,'UIAPP_GridExpense');
iRows = iRows+1;
vControlNames = CreateGrid_MixedSet_(iRows, vExpenseDef, oFlexGrid, app);
oRowCount.setText(iRows.toString()).setValue(iRows.toString());
//SOME INCONSEQUENTIAL CODE REMOVED HERE, LET ME KNOW IF YOU NEED IT
vGridDefs = vGridDefs.concat(vControlNames); // unify grid definition arrays
var sAryId = saveArray('expenseFieldDef', vGridDefs);
oScriptDBId.setText(sAryId).setValue(sAryId); //store array and save ScriptDB ID
if (e.parameter.source == 'btnExpenseAdd'){
hideDialog(); //IGNORE CHEKCBOX-DRIVEN CALLS
};
return app;
2. routine that calls the event
var app = UiApp.getActiveApplication();
var oPanelExpense = app.getElementById('mainPanelExpense');
var oPanelIncome = app.getElementById('mainPanelIncome');
var oPanelEdit = app.getElementById('mainPanelEdit');
var chkExpenseAdd= app.getElementById('chkExpenseAdd');
var bExpenseTrigger = e.parameter.chkExpenseAdd;
var sVoucherId = nnGenericFuncLib.cacheLoadObject(CACHE_EDIT_VOUCHERID);
var sVoucher = e.parameter.ListSearch1Vouchers;
var aryVoucherInfo = getVoucherEditDetail(sVoucherId);
//SAVE FOR RECORD MARKING CALLBACK
nnGenericFuncLib.cacheSaveObject(CACHE_EDIT_OLDRECORDS, JSON.stringify(aryVoucherInfo), CACHE_TIMEOUT);
sVoucher = nnGenericFuncLib.textPad(sVoucher, '0', 7);
var bExp = (sVoucher.substring(0,2) == '03')
var oRowCount = app.getElementById('rowCount');
var iRowCount = parseInt(e.parameter.rowCount);
var sControlName = '';
var vControlVal = '';
var iExpIdx = 0;
var sControlType = '';
var oControl = '';
var vSummaryTotal = 0;
for (var iVal in aryVoucherInfo){
sControlName = aryVoucherInfo[iVal][2];
vControlVal = aryVoucherInfo[iVal][3];
switch (sControlName){
case 'ESUM60':
vSummaryTotal = vControlVal;
break;
case 'EXUSRN':
continue; //DON'T OVERWRITE CURRENT USERNAME
break;
};
if (sControlName.indexOf('_')!=-1){ //TEST FOR CONTROL SET MEMBER
var aryControlSet = sControlName.split('_');
if (parseInt(aryControlSet[1])>iRowCount){//*** TRIGGER THE EVENT ***
Logger.log(bExpenseTrigger + ' - ' + !bExpenseTrigger);
chkExpenseAdd.setValue(!bExpenseTrigger, true);
iRowCount = iRowCount +1;
};
};
oControl = app.getElementById(sControlName);
var vCache = cacheSaveReturn(CACHE_UIEX_LISTS,sControlName);
if (typeof vCache == 'undefined'){
oControl.setValue(vControlVal);
oControl.setText(vControlVal);
//controlSetTextBox(oControl,vControlVal);
//controlSetDateBox(oControl,vControlVal);
} else {
if (!(nnGenericFuncLib.arrayIsReal(vCache))){
vCache = JSON.parse(vCache);
};
vCache = vCache.indexOf(vControlVal);
if (vCache != -1){
oControl.setSelectedIndex(vCache);
} else {
controlSetListBox(oControl,vControlVal);
};
};
};
//SOME CODE REMOVED HERE
hideDialog();
return app;
Mogsdad to the rescue!
The answer (see above) for those at the back of the class (with me) is to simply pass the app instance parameter (e) to the event function, calling it directly from the main routine, thus keeping the chronology in step for when it returns the app to complete the routine. No need for the checkbox in this situation.
This only took me all day, but thanks Mogsdad! :)
Snippet below taken from 1/2 way down code sample 2 in the OP:
if (sControlName.indexOf('_')!=-1){ //TEST FOR CONTROL SET MEMBER
var aryControlSet = sControlName.split('_');
if (parseInt(aryControlSet[1])>iRowCount){
eventAddExpense(e); //THAT'S ALL IT TAKES
iRowCount = iRowCount +1;
};
};

fetching data from indexed database in HTML 5 and binding to gridview

I am fetching data from the indexed database in HTML 5, I am able to successfully get the values but I want it to bind it to some data-grid view of ASP.NET
The code which I am using to get the values from the indexed database is
if(currentDatabase) {
var objectStore = currentDatabase.transaction([objStore]).objectStore(objStore);
var traveller = [];
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
var v = cursor.value;
traveller.push("id ="+v.id);
traveller.push("Name ="+v.traveler);
traveller.push("Destination ="+v.destination);
traveller.push("Transportation ="+v.transportation);
cursor.continue();
}
this allows me to store the data in the array, how can I bind it to datagrid view,
I just noticed that you put all objects into the same array without hierarchy, and this will result in array that is long number of properties multiplied by number of records
Instead what you should do is create an array for each object and then push that array into the main array.
var traveller = [];
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
var v = cursor.value;
var obj = {};
obj.push("id ="+v.id);
obj.push("Name ="+v.traveler);
obj.push("Destination ="+v.destination);
obj.push("Transportation ="+v.transportation);
traveller.push(obj);
cursor.continue();
}
}

Collecting and identifying functions within an array in actionscript

So, I want to do something where I collect functions to be invoked later when a certain condition is met. E.g.
function doSomething(someArg:Object):void {
if (conditionIsFalse){
operationsToDoWhenConditionIsTrue.push(function(){
doSomething(someArg);
});
}
}
function onConditionBecomingTrue():void {
while (operationsToDoWhenConditionIsTrue.length > 0){
operationsToDoWhenConditionIsTrue.shift()();
}
}
So far so good. However at some point I want to iterate over the operationsToDoWhenConditionIsTrue and identify and replace a function. In pseudo code inside the doSomething method it would be:
function doSomething(someArg:Object):void {
if (conditionIsFalse){
for (var i:int = 0; i<operationsToDoWhenConditionIsTrue; i++){
// pseudo code here
if (typeof operationsToDoWhenConditionIsTrue[i] == doSomething){
operationsToDoWhenConditionIsTrue[i] = doSomething(someArg);
}
}
}
}
Basically if doSomething is called twice, I only want operationsToDoWhenConditionIsTrue to hold the most recent invocation. Obviously since the invocations are wrapped in function(){} all the functions are the same. Is there any way I can accomplish what I want?
Create an identifier function that can identify the operations you want to detect as the same. Assign the ID as a property of the anonymous function that you add to the queue. When you iterate over the queue, record IDs in a collection. Don't execute the operation if it's already in the collection.
function doSomething(someArg:Object):void {
if (conditionIsFalse){
var operation = function(){
doSomething(someArg);
};
operation.operationID = objID(...);
operationsToDoWhenConditionIsTrue.push(operation);
}
}
function onConditionBecomingTrue():void {
var done = {}, f;
while (operationsToDoWhenConditionIsTrue.length > 0){
f = operationsToDoWhenConditionIsTrue.shift();
if (! f.operationID in done) {
done[f.operationID] = true;
f()
}
}
}
As a more efficient variant of this, you can index the queue by IDs, so that a function can be added only once to the queue. However, you will lose control over the order that operations are executed.
var operationsToDoWhenConditionIsTrue:Object = {};
function doSomething(someArg:Object):void {
if (conditionIsFalse){
operation.operationID = ...;
operationsToDoWhenConditionIsTrue[objID(...)] = function(){
doSomething(someArg);
};
}
}
function onConditionBecomingTrue():void {
for (id in operationsToDoWhenConditionIsTrue){
operationsToDoWhenConditionIsTrue[id]();
}
operationsToDoWhenConditionIsTrue = {};
}
If you need to preserve the sequence (so that operations are executed in order they were first added to the queue, or in the order they were last added), create a queue type that can be indexed by both ID and sequence, which you can do by storing mappings between the index types. Note: the following is untested.
class OperationQueue {
protected var queue:Array = [];
protected var idToSeq:Object = {};
public function push(op:Function):void {
/* Orders by last insertion. To order by first insertion,
simply return if the operation is already in the queue.
*/
if (op.id in this.idToSeq) {
var seq = this.idToSeq[op.id];
delete this.queue[seq];
}
this.queue.push(op);
this.idToSeq[op.id] = this.queue.length-1;
}
public function runAll():void {
var op;
while (this.queue.length > 0) {
if ((op = this.queue.shift())) {
delete this.idToSeq[op.id];
op();
}
}
}
}

Scroll to alphabet in a List (ArrayCollection dataProvider) (Alphabet Jump)

Hopefully this is easy but that sometimes means its impossible in flex and I have searched quite a bit to no avail.
Say I have a list (LIST#1) of artists:
2Pac
Adele
Amerie
Beyonce
Jason Aldean
Shakira
The Trews
I also have a list (LIST#2) that has the values #,A-Z - how would I create an alphabet jump?
So If a user clicked on "A" in LIST#2 that would automatically scroll to "Adele" at the top of LIST#1 - not filter so he/she could scroll up to view 2Pac or down to view The Tews if they were not in the view yet.
Its a standard Flex Spark List with an ArrayCollection as the dataProvider - the artist field is called: "title" along with a unique id field that is not visible to the user.
Thanks!
Please see comments on marker answer for discussion on Dictionary that may be faster in some cases. See below for code (HAVE NOT CONFIRMED ITS FASTER! PLEASE TEST):
private function alphabet_listChange(evt:IndexChangeEvent) : void {
var letter:String;
letter = evt.currentTarget.selectedItems[0].toString();
trace(currentDictionary[letter]);
ui_lstLibraryList.ensureIndexIsVisible(currentDictionary[letter]);
}
public function createAlphabetJumpDictionary() : Dictionary {
//alphabetArray is a class level array containing, A-Z;
//alphabetDictionary is a class level dictionary that indexes A-z so alphabetDictionary["A"] = 0 and ["X"] = 25
var currentIndexDict:Dictionary = new Dictionary; //Dictionary is like an array - just indexed for quick searches - limited to key & element
var searchArray:Array = new Array;
searchArray = currentArrayCollection.source; //currentArrayCollection is the main array of objects that contains the titles.
var currentIndex:Number; //Current index of interation
var currentAlphabetIndex:Number = 0; //Current index of alphabet
for (currentIndex = 0; currentIndex < searchArray.length; currentIndex++) {
var titleFirstLetter:String = searchArray[currentIndex].title.toString().toUpperCase().charAt(0);
if (titleFirstLetter == alphabetArray[currentAlphabetIndex]) {
currentIndexDict[titleFirstLetter] = currentIndex;
trace(titleFirstLetter + " - " + currentIndex);
currentAlphabetIndex++;
} else if (alphabetDictionary[titleFirstLetter] > alphabetDictionary[alphabetArray[currentAlphabetIndex]]) {
trace(titleFirstLetter + " - " + currentIndex);
currentIndexDict[titleFirstLetter] = currentIndex;
currentAlphabetIndex = Number(alphabetDictionary[titleFirstLetter] + 1);
}
}
return currentIndexDict;
}
private function build_alphabeticalArray() : Array {
var alphabetList:String;
alphabetList = "A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z";
alphabetArray = new Array;
alphabetArray = alphabetList.split(".");
return alphabetArray;
}
private function build_alphabetDictionary() : Dictionary {
var tmpAlphabetDictionary:Dictionary = new Dictionary;
for (var i:int=0; i < alphabetArray.length; i++) {
tmpAlphabetDictionary[alphabetArray[i]] = i;
trace(alphabetArray[i] + " - " + i);
}
return tmpAlphabetDictionary;
}
private function buildCurrentDictionary() : void {
trace("Collection Changed");
currentDictionary = new Dictionary;
currentDictionary = createAlphabetJumpDictionary();
}
The Flex Spark list has a very convenient method called ensureIndexIsVisible(index). Check the Flex reference documentation. All you have to do is to find the index of the first artist for the corresponding selected alphabet letter:
public function findAlphabetJumpIndex():Number
{
var jumpToIndex:Number;
var selectedLetter:String = alphabethList.selectedItem;
for (var i:int=0; i < artists.length; i++)
{
var artistName:String = artists.getItemAt(i);
var artistFirstLetter:String = artistName.toUpperCase().charAt(0);
if (artistFirstLetter == selectedLetter)
{
jumpToIndex = i;
break;
}
}
return jumpToIndex;
}
You can iterate your artist list data provider and check if artist name starts with selected alphabet from list two. When corresponding artist is found, set artist list selected index a value what you get from iterating data.

how to compare two array collection using action script

how to compare two arraycollection
collectionArray1 = ({first: 'Dave', last: 'Matthews'},...........n values
collectionArray = ({first: 'Dave', last: 'Matthews'},...........n values
how to compare..if equal just alert nochange if not alert chaged
If you just want to know if they are different from each other, meaning by length, order or individual items, you can do the following, which first checks to see if the lengths are different, then checks to see if the individual elements are different. This isn't terribly reusable, it's left as an exercise for the reader to split this apart into cleaner chunks :)
public function foo(coll1:ArrayCollection, coll2:ArrayCollection):void {
if (coll1.length == coll2.length) {
for (var i:int = 0; i < coll1.length; i++) {
if (coll1[i].first != coll2[i].first || coll1[i].last != coll2[i].last) {
Alert.show("Different");
return;
}
}
}
Alert.show("Same");
}
/* elements need to implement valueOf
public function valueOf():Object{}
*/
public static function equalsByValueOf(
first:ArrayCollection,
seconde:ArrayCollection):Boolean{
if((first==null) != (seconde==null) ){
return false;
}else if(!first && !seconde){
return false;
}
if(first.length!=seconde.length){
return false;
}
var commonLength:int = first.length;
var dictionary:Dictionary = new Dictionary();
for(var i:int=0;i<commonLength;i++){
var item1:Object = first.getItemAt(i);
var item2:Object = seconde.getItemAt(i);
dictionary[item1.valueOf()]=i;
dictionary[item2.valueOf()]=i;
}
var count:int = 0;
for (var key:Object in dictionary)
{
count++;
}
return count==commonLength;
}
/* valueOf sample
* something like javaObject.hashCode()
* use non changing fields(recommended)
*/
public function valueOf():Object{
return "_"+nonChangeField1+"_"+nonChangeField2+"...";
}
I was going to say this.
if(collectionArray === collectionArray1)
But that wont work (not triple = signs). As === is used to see classes.
I would write a function called check if object exists in array.
Create an array to hold elements that are not found. eg notFound
in Collection1 go through all the element and see if they exist in Collection2, if an element does not exist, add it to the notFound array. Use the function your created in step1
Now check Collection2, if an element is not found add it to the notFound array.
There is no 5.
Dude, use the mx.utils.ObjectUtil... the creators of actionscript have already thought about this.
ObjectUtil.compare(collection1, collection2) == 0;