It seems array-selector can be used only for selecting / deslecting individual items. Can we do a select all / deselect all in single shot ? It would be great if have that feature. Thanks !
https://www.polymer-project.org/1.0/docs/devguide/templates
You can set multi as true to select multiple items
When multi is false, selected is a property representing the last selected item. When multi is true, selected is an array of selected items.
Here's the reference API for array-selector
It appears that there isn't currently any progress being made on a select/deselect all function for array-selector.
In the interim, here's some quick and dirty code that will get the job done.
// deselect all
selected = this.$.{{array-selector-element-id}}.selected.slice(0);
for (i = 0, len = selected.length; i < len; i++) {
item = selected[i];
this.$.selector.deselect(item);
}
// select all
items = this.$.{{array-selector-element-id}}.items;
for (i = 0, len = items.length; i < len; i++) {
item = item[i];
this.$.selector.select(item);
}
Probably wouldn't be too hard to do a pull request on this.
Related
That's a pretty long winded statement.
I'm building a faceted search which implements WebAPI in .Net and utilizes Knockout on the front end. My search response includes two lists of objects, the Resources (object with data for presentation) and Resource Facets (array of strings).
\"ResourceFacets\": [\r\n \"Book\",\r\n \"Video\",\r\n \"DVD\",\r\n \"eBook\",\r\n \"Audio\"\r\n ]\r\n}"
My ViewModel contains both the facets and the resources along with a presentation object to handle a custom row count:
function ViewModel() {
this.facets = ko.observableArray(results.ResourceFacets);
this.resources = ko.observableArray(results.ResourceResults);
this.resourceRows = ko.computed(function() {
var rows = [],
rowIndex = 0,
itemsPerRow = 2;
var resourceList = this.resources();
for (var index = 0; index < resourceList.length; index++) {
if (!rows[rowIndex]) {
rows[rowIndex] = [];
}
rows[rowIndex].push(resourceList[index]);
if (rows[rowIndex].length == itemsPerRow) {
rowIndex++;
}
}
return rows;
});
};
This allowed me to create a dynamic list of checkboxes to handle the facets and also display the resource results. What I'm trying to do now is add a Select All checkbox which will, by default, select all the boxes. From other examples I've seen, my understanding is that I need an observable property, something like "Selected", on that ResourceFacet. I just feel like that is too much that the API needs to know about my presentation.
So my question is how can I avoid having to add a "selected" bool value to the ResourceFacets but still be able to select all checkboxes or deselect the "All" checkbox when a user deselects a facet?
You can keep the list of booleans necessary to track the selection on a separate member of your view model, in addition to facets and resources. Just create a new observableArray of booleans of the same size of facets and bind those values to the checkboxes.
Another solution is to create the objects necessary to bind the checkboxes on the fly, based on results.ResourceFacets, keeping your API clean. For example:
var realModel = [];
for (var i = 0; i < results.ResourceFacets; i++) {
realModel.push({ name: results.ResourceFacets[i], chkBoxVal: ko.observable(false) });
}
this.facets = ko.observableArray(realModel);
I have some drag and drop function where there are 8 items (dragArray) that can be dropped onto 2 big 'landing zones' (matchArray). But since I don't want them lie on top of each other, I've made an array where they are given positions (posArray).
var dragArray:Array = [drag_1, drag_2, drag_3, drag_4, drag_5, drag_6, drag_7, drag_8];
var matchArray:Array = [drop_1, drop_1, drop_1, drop_1, drop_2, drop_2, drop_2, drop_2];
var posArray:Array = [{x:412,y:246},{x:530,y:218},{x:431,y:186},{x:470,y:152},{x:140,y:111},{x:108,y:162},{x:179,y:210},{x:113,y:254}];
When all 8 items are dropped, a check button appears and I want to check if they are dropped onto the correct big landing zone. I tried using the following:
if (posArray[i].x != dragArray[i].x || dragArray[i].y != posArray[i].y )
But then, not only the landing zone must match, but the positions must also match.
When I use
if (matchArray[i].x != dragArray[i].x || dragArray[i].y != matchArray[i].y )
it doesn't work, because the positions of the (dragArray) items don't match with the registration points of the (matchArray) landing zones.
Is there any way of checking if the first 4 (drag_1, drag_2, drag_3, drag_4) items match with ANY of the first 4 posArray positions and the last 4 (drag_5, drag_6, drag_7, drag_8) match with ANY of the last 4 posArray positions?
If the goal is to check each element of one set against all elements of another set then you'll need to have two loops, one "nested" within the other. The general form of this algorithm in AS3 looks like
var allMatched:Boolean = true;
for(var i:Number=0; i<array1.length; i++)
{
var matchFound:Boolean = false;
for(var j:Number=0; j<array2.length; j++)
{
if(array1[i]==array2[j])
{
matchFound=true;
break; //exit the inner loop we found a match
}
}
if(!matchFound)
{
allMatched=false;
break; //we found an element in one set not present in the other, we can stop searching
}
}
if(allMatched)
trace("Everything from array1 was found somewhere in array2"); //For an element a in the set A there exists an element b in set B such that a = b
Let me know if this helps
I've a Tree with checkbox with dataprovider as an xmlList. Now I need to get the item renderer of the list item without click on item and by search the from outside.
protected function btnSearch_clickHandler():void
{
var searchString:String = txtInputSearch.text;
if(searchString != "")
{
StyleItemsArray.removeAll();
var conaintList:XMLList = (treeSource.node.(#label.search(searchString) > -1) as XMLList);
for each(var xmlItem:XML in conaintList)
{
// trigger the checkbox click event here
}
}
}
Sorry for delayed:
I tried the solution given but it seems datagroup is used in Flex 4 but I'm still in flex 3 version.
I tried couple of other way (e.g. itemToItemRenderer())but no luck.
Could someone please help me out?
you can retrieve all item-render of list by just using for getElementAt.
for(var i:int=0; i < youListVariable.dataProvider.length; i++)
{
var render:CustomFieldRenderer = youListVariable.dataGroup.getElementAt(i) as CustomFieldRenderer
//put Your comparison condition and if condition matched then break
}
CustomFieldRenderer is your itemRender.
youListVariable is your list's id i.e. list's variable.
this will random my numPool and push the random three numbers to my array called pickNum. I need that pickeNum to be just one index instead of three indexes. Thanks and i will appreciate any help thanks.
var numPool:Array = [1,2,3];
var pickNum:Array = [];
var randomCount:Number = 3;
var r:Number;
for (var i = 0; i < randomCount; i++)
{
r = Math.floor(Math.random() * numPool.length);
pickNum[pickNum.length] = numPool.splice(r,1);
}
trace("Number Picked " + pickNum);
Can't say I completely understand what you are saying, but the issue with the code above is that splice returns an Array containing the values that were spliced from the array. Also, would be easiest to just do a push. So the proper line for getting that value and pushing it into the pickNum array would be :
pickNum.push(numPool.splice(r,1).pop());
And if you are saying that you want only 1 random number from the pool, then why do you need a loop ?
I have a movieclip called Tab that has two text-fields: named toptxt and bottomtxt. When I create new instances of Tab in a for loop and change the text, only the first instance's text is changed. The rest is the default text in the movieclip.
Here is the code I am using:
for(var i = 0; i < 5; i++){
var newTab = new Tab();
newTab.toptxt.text = nameArray[i]; //nameArray is fine
trace(newTab.toptxt.text); //returns expected value, textfield isn't
newTab.bottomtxt.text = jobs[i];
bottom.addChild(newTab); //bottom is a class var.
newTab.x = i * (newTab.width + 3);
}
Even if I change nameArray[i] to "Test", only the first one works.
This problem does not occur if I don't do it in for loops, however I'd like to do it in a for loop.
Here is a screenshot of the problem: http://i.imgur.com/hgPZ5.png
Pull your declaration of var newTab = new Tab(); outside of the for loop, so your code looks like this:
var newTab:Tab;
for(var i:int = 0; i < 5; i++){
newTab = new Tab();
newTab.toptxt.text = nameArray[i]; //nameArray is fine
trace(newTab.toptxt.text); //returns expected value, textfield isn't
newTab.bottomtxt.text = jobs[i];
bottom.addChild(newTab); //bottom is a class var.
newTab.x = i * (newTab.width + 3);
}
Actionscript is becoming confused when you create an instance and assign newTab as a pointer to it, instead of creating a pointer or reference initially, and then creating new instances and adding them to your displayList.
Also, trace your output of nameArray[i] and confirm that those values are correct (i.e. trace(nameArray[i]);. It's possible the data isn't set properly earlier in your code.