Flex binding List selectedItem - actionscript-3

I`m new with flex, and trying to combine data for 2 List selections, (SEE CODE BELOW):
<s:Label x="538" y="130" text="Industry of Interest:"/>
<s:List id="reIndustry" x="538" y="150" width="165" height="122" dataProvider="{recruitIndustries}" labelField="industry"></s:List>
<s:Label x="723" y="130" text="Qualifications:"/>
<s:List id="reQualifications" x="723" y="150" width="165" height="122" selectedItem="reIndustry.selectedItem.qualification" labelField="qualification"></s:List>
What i would like to accomplish is that when you select data from "reIndustry", more data of the selected item will then show in "reQualifications" List.
Here is my Data:
<s:ArrayList id="recruitIndustries">
<fx:Object industry="Admin/PA/Secretary" qualification="Other"/>
<fx:Object industry="Automotive" qualification="Painter"/>
<fx:Object industry="Building/Construct/Mine"/>
<fx:Object industry="Engineering"/>
<fx:Object industry="Finance/Accounting"/>
<fx:Object industry="FMCG"/>
<fx:Object industry="General Employment"/>
<fx:Object industry="Health and Skincare"/>
<fx:Object industry="Insurance"/>
<fx:Object industry="International"/>
<fx:Object industry="IT/Computer"/>
<fx:Object industry="Legal"/>
<fx:Object industry="Logistics"/>
<fx:Object industry="Management"/>
<fx:Object industry="Manufacturing"/>
<fx:Object industry="Medical"/>
<fx:Object industry="Part Time/ Temps"/>
<fx:Object industry="Professions"/>
<fx:Object industry="Retail"/>
<fx:Object industry="Sales and Marketing"/>
<fx:Object industry="Tourism/Hospitality"/>
</s:ArrayList>
If possible, how can I add more values for showing in the second List "reQualifications".

#RIAstar question is Correct.
You can do it by below code:-
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
private var moreDataProvider:ArrayCollection = new ArrayCollection();
private function itemClickHandler(event:IndexChangeEvent):void
{
moreDataProvider.removeAll();
if(Object(reIndustry.selectedItem).hasOwnProperty('qualification'))
moreDataProvider.addItem(reIndustry.selectedItem);
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label x="538" y="130" text="Industry of Interest:"/>
<s:List id="reIndustry" dataProvider="{recruitIndustries}" x="538" y="150" width="165" height="122"
labelField="industry" change="itemClickHandler(event)"/>
<s:Label x="723" y="130" text="Qualifications:"/>
<s:List id="reQualifications" dataProvider="{moreDataProvider}" x="723" y="150" width="165" height="122"
labelField="qualification"/>

Related

Spark Datagrid scrolling

I have a data(say for eg. a million rows) to be displayed in a datagrid in a mobile application. I am trying to figure out a way by which as soon as the scroll reaches the end of page ie. the last row on the grid it requests again to the server for next bunch of records.
Scroll event in MX datagrid (http://blog.tremend.ro/2009/03/02/flex-live-scroll-datagrid/) does it with ease but it's not there in spark datagrid. I want this to be done with spark datagrid.
How can i achieve this.
Require help..!!
Thanks
I have quickly compiled an example that works. You can add the listener to scrollbar of datagrid dg as:
dg.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
private function list_verticalScrollBar_change(evt:Event):void {
var vsb:VScrollBar = evt.currentTarget as VScrollBar;
// Now you can check for scroll position.
}
The complete code is as:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.components.VScrollBar;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
dg.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change)
}
private function list_verticalScrollBar_change(evt:Event):void {
var vsb:VScrollBar = evt.currentTarget as VScrollBar;
if(dg.grid.contentHeight == dg.grid.layout.verticalScrollPosition+dg.grid.height) {
Alert.show("Making service call");
// make some service call.
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:DataGrid id="dg" width="100%" height="100">
<s:dataProvider>
<s:ArrayList>
<fx:Object age="24" sex="f" name="Susan" joinDate="{new Date(2007, 5, 15)}" />
<fx:Object age="36" sex="f" name="Ashley" joinDate="{new Date(1998, 7, 20)}" />
<fx:Object age="24" sex="f" name="Jennifer" joinDate="{new Date(2001, 3, 24)}" />
<fx:Object age="19" sex="f" name="Emma" joinDate="{new Date(2002, 3, 24)}" />
<fx:Object age="44" sex="f" name="Carol" joinDate="{new Date(1999, 9, 16)}" />
<fx:Object age="28" sex="m" name="Peter" joinDate="{new Date(2005, 3, 12)}" />
<fx:Object age="35" sex="m" name="Mike" joinDate="{new Date(2008, 10, 10)}" />
<fx:Object age="26" sex="m" name="Dave" joinDate="{new Date(2008, 10, 10)}" />
<fx:Object age="44" sex="m" name="William" joinDate="{new Date(2004, 9, 16)}" />
<fx:Object age="24" sex="m" name="Sean" joinDate="{new Date(2006, 3, 24)}" />
</s:ArrayList>
</s:dataProvider>
</s:DataGrid>
</s:Application>

Disable unselected items in a List After 5 items are selected

Im new to flex development. I have a dynamically data bound list component. I need to restrict user from selecting more than 5 items.
List is made with checkboxes and labels
getSelectionCount() method returns the number of currently selected items.
Here is my code
<s:VGroup width="100%" height="100%">
<s:List id="chkLst" visible="{isMultipleSelectionAllowed}" width="100%" height="100%" borderVisible="false"
fontFamily="segoeui"
dataProvider="{filteredDataSet}" >
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
//-----------------------------------------------
//
// Checkbox select
//
//-----------------------------------------------
protected function chk_clickHandler(event:MouseEvent):void
{
var selection:Array = new Array();
for each(var item:Object in outerDocument.chkLst.dataProvider)
{
selection.push(item);
}
var count:int = 0;
for each(var sItem:Object in selection)
{
outerDocument.setSelectionCount(0);
if(sItem.selected)
{
count++;
}
outerDocument.setSelectionCount(count);
}
Alert.show(outerDocument.getSelectionCount()+"","test");
if(CheckBox(event.target).selected && outerDocument.getSelectionCount() <= 5){
outerDocument.setSelectionCount(outerDocument.getSelectionCount()+1);
}
if(outerDocument.getSelectionCount() >= 6){
}
}
]]>
</fx:Script>
<s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true">
<s:CheckBox id="chk"
label="{data.label}" change="{data.selected = chk.selected}" selected="{data.selected}"
maxWidth="215" click="chk_clickHandler(event)" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
How can disable the checkboxes which user has not selected when user selection count exceeds 5 ?
2 I also need to enable all check boxes back if user unticks some checks in order that selection count go below 5
Thank You
First you need to add enabled property in your arraycollection like below which also make bindable in itemRenderer enabled="{data.enabled}". If count reach 5 we disable all button except selected one which the help of enabled property and magic here we need to update arraycollection items by using mx.collections.IList.itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void method so that only it will reflect disable the other checkboxes. In our case use outerDocument.chkLst.dataProvider.itemUpdated(item);
Sample arraycollection structure:
<fx:Declarations>
<s:ArrayCollection id="filteredDataSet" >
<fx:Object selected="false" enabled="true" label="one"/>
<fx:Object selected="true" enabled="true" label="two"/>
<fx:Object selected="false" enabled="true" label="three"/>
<fx:Object selected="false" enabled="true" label="four"/>
<fx:Object selected="false" enabled="true" label="five"/>
<fx:Object selected="false" enabled="true" label="six"/>
<fx:Object selected="false" enabled="true" label="seven"/>
<fx:Object selected="false" enabled="true" label="eight"/>
<fx:Object selected="false" enabled="true" label="nine"/>
</s:ArrayCollection>
</fx:Declarations>
<s:List id="chkLst" width="100%" height="100%" borderVisible="false"
fontFamily="segoeui"
dataProvider="{filteredDataSet}" >
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function chk_clickHandler(event:MouseEvent):void
{
data.selected = chk.selected;
var selection:Array = [];
for each(var item:Object in outerDocument.chkLst.dataProvider)
{
if(item.selected)
selection.push(item);
}
if(selection.length>=5)
{
for each(var item:Object in outerDocument.chkLst.dataProvider){
item.enabled = item.selected;
outerDocument.chkLst.dataProvider.itemUpdated(item);
}
}else{
for each(var item:Object in outerDocument.chkLst.dataProvider){
item.enabled = true;
outerDocument.chkLst.dataProvider.itemUpdated(item);
}
}
}
]]>
</fx:Script>
<s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true">
<s:CheckBox id="chk" label="{data.label}" selected="{data.selected}" enabled="{data.enabled}"
maxWidth="215" click="chk_clickHandler(event)" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>

Moving combo box up dynamically when changing combo box?

I'm using Flex builder 4.5. I'm having five combos in my web application.
Combo 1 loads as staff and student.
Combo 2 loads department,
Combo 3 loads staff names,
Combo 4 loads student batch and
Combo 5 loads student names respectively.
When i'm selecting student in 1st combo, combo 4 and combo 5 should move up dynamically. Kindly advise on this...
It is not a good practice to manipulate the coordinates of controls. Instead of it I would use a ViewStack control and change the selected index according to the item of the first combo.
So you have more control over your view representation and less problem with future changes.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:VGroup x="10" y="10">
<s:ComboBox id="cbMain" selectedIndex="0">
<s:ArrayList>
<fx:Object label="Staff"/>
<fx:Object label="Student"/>
</s:ArrayList>
</s:ComboBox>
<mx:ViewStack id="vsMain" width="200" height="200" selectedIndex="{cbMain.selectedIndex}">
<s:NavigatorContent id="ncStaff" width="100%" height="100%">
<s:VGroup>
<s:ComboBox id="cbStaffDep" selectedIndex="0">
<s:ArrayList>
<fx:Object label="Department01"/>
<fx:Object label="Department02"/>
</s:ArrayList>
</s:ComboBox>
<s:ComboBox id="cbStaffName" selectedIndex="0">
<s:ArrayList>
<fx:Object label="StaffName01"/>
<fx:Object label="StaffName02"/>
</s:ArrayList>
</s:ComboBox>
</s:VGroup>
</s:NavigatorContent>
<s:NavigatorContent id="ncStudent" width="100%" height="100%">
<s:VGroup>
<s:ComboBox id="cbStudentBatch" selectedIndex="0">
<s:ArrayList>
<fx:Object label="Batch01"/>
<fx:Object label="Batch02"/>
</s:ArrayList>
</s:ComboBox>
<s:ComboBox id="cbStudentName" selectedIndex="0">
<s:ArrayList>
<fx:Object label="StudentName01"/>
<fx:Object label="StudentName02"/>
</s:ArrayList>
</s:ComboBox>
</s:VGroup>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>
</s:Application>

Checkboxes in a DataGrid get selected after Scrolling down in actionscript 3

i have implemented code, where i put Checkboxes in a DataGrid. The problem is, when a checkbox is checked and i scroll down, other checkboxes are checked as well, without me having checked them. If i scroll up again, the checkbox, which i initially checked, isnt checked anymore. Can anybody help me please.
Here is the Code:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
initialize="main()" textAlign="right" textRotation="rotate270" title="HomeView">
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
import mx.graphics.SolidColorStroke;
import spark.primitives.Rect;
import spark.skins.spark.DefaultComplexItemRenderer;
import spark.skins.spark.DefaultItemRenderer;
private var bL:ArrayList;
public function main():void{
hey.dataProvider=dataprovider;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:ArrayList id="dataprovider">
<fx:Object actName="myact1" actnumber="2" name="1"/>
<fx:Object actName="myact2" actnumber="55" name="2"/>
<fx:Object actName="myact1" actnumber="2" name="3"/>
<fx:Object actName="myact2" actnumber="55" name="4"/>
<fx:Object actName="myact1" actnumber="2"/>
<fx:Object actName="myact2" actnumber="55"/>
<fx:Object actName="myact1" actnumber="2"/>
<fx:Object actName="myact2" actnumber="55"/>
<fx:Object actName="myact1" actnumber="2" name="1"/>
<fx:Object actName="myact2" actnumber="55" name="2"/>
<fx:Object actName="myact1" actnumber="2" name="3"/>
<fx:Object actName="myact2" actnumber="55" name="4"/>
<fx:Object actName="myact1" actnumber="2"/>
<fx:Object actName="myact2" actnumber="55"/>
<fx:Object actName="myact1" actnumber="2"/>
<fx:Object actName="myact2" actnumber="55"/>
<fx:Object actName="myact1" actnumber="2" name="1"/>
<fx:Object actName="myact2" actnumber="55" name="2"/>
<fx:Object actName="myact1" actnumber="2" name="3"/>
<fx:Object actName="myact2" actnumber="55" name="4"/>
<fx:Object actName="myact1" actnumber="2"/>
<fx:Object actName="myact2" actnumber="55"/>
<fx:Object actName="myact1" actnumber="2"/>
<fx:Object actName="myact2" actnumber="55"/>
</s:ArrayList>
</fx:Declarations>
<s:DataGrid id="hey" x="-2" y="-1" width="323" height="415">
<s:columns>
<s:ArrayList>
<s:GridColumn id="my" dataField="wierd">
</s:GridColumn>
<s:GridColumn id="hi" dataField="checkboxes">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
protected function checkbox1_clickHandler(event:MouseEvent):void
{
trace("clicked");
}
]]>
</fx:Script>
<s:CheckBox click="checkbox1_clickHandler(event)">
</s:CheckBox>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:View>
Here is a way to fix this issue. ( a work around )
The reason for this has something to do with the way it is implemented inside the Datagrid.
Eg: When you create 50 rows inside the Datagrid. It does not create 50 different instances of the row.. ( in a scrolling scenario ) rather, as you scroll up or down the same rows are populated with the differing data..( giving you a seamless experience of scrolling and viewing them )
So the trick to solving this problem would be to study the sample found in this link
http://www.actionscript.org/forums/attachment.php3?attachmentid=38409&d=1335099663
You would have to analyse the code in the cell renderer class found in the sample. In your case you would have to modify the DefaultItemRenderer or the DefaultComplexItemRenderer which ever is used by the Datagrid column.

link is not wrapped in spark datagrid column

i am using spark datagrid for my application. i am using one cusomrenderer (contains one link) for my spark datagrid.Text in the columns are truncated with respect to it's column size.but the link is not truncated, it is overlapped to next column ,that is not fair.i want that link column should be truncated within its column.here i have given my sample code.
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_DataGrid_columns_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import spark.components.Grid;
import spark.components.gridClasses.CellPosition;
private function init():void
{
var link:ClassFactory = new ClassFactory(sparkLinkRenderer);
linkColumn.itemRenderer = link;
}
]]>
</fx:Script>
<fx:Declarations>
<s:ArrayList id="TweetersList">
<fx:Object drink="onetqwo three four five six seven eight" name="Dan Florio" twitter="polyGeek polyGeek polyGeek polyGeek polyGeek" />
<fx:Object drink="one" name="David Ortinau" twitter="davidortinau" />
<fx:Object drink="one" name="Simeon Bateman" twitter="simBateman"/>
<fx:Object drink="one" name="Dan Florio" twitter="polyGeek" />
<fx:Object drink="one" name="David Ortinau" twitter="davidortinau" />
<fx:Object drink="one" name="Simeon Bateman" twitter="simBateman" />
<fx:Object drink="one" name="Dan Florio" twitter="polyGeek" />
<fx:Object drink="one" name="David Ortinau" twitter="davidortinau" />
<fx:Object drink="one" name="Simeon Bateman" twitter="simBateman" />
<fx:Object drink="one" name="Dan Florio" twitter="polyGeek" />
<fx:Object drink="one" name="David Ortinau" twitter="davidortinau"/>
<fx:Object drink="one" name="Simeon Bateman" twitter="simBateman"/>
</s:ArrayList>
</fx:Declarations>
<s:DataGrid id="spdg" width="500" height="250" >
<s:columns>
<s:ArrayList>
<s:GridColumn width="100" id="linkColumn" dataField="drink"/>
<s:GridColumn width="100" dataField="name"/>
<s:GridColumn width="100" dataField="twitter"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application>
the link custom renderer code:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" >
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
linkButton.label = value.drink;
}
]]>
</fx:Script>
<mx:LinkButton id="linkButton" color="#170909" textAlign="left" fontWeight="normal" textDecoration="underline">
</mx:LinkButton>
</s:GridItemRenderer>
sample snapshot of my output:
please suggest me on this issue.
thanks in advance,
vengatesh
Well first i posted bounty and then i found a solution...
GridItemRenderer has a property clipAndEnableScrolling which does just that if set to true.
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%"
clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
linkButton.label = value.drink;
}
]]>
</fx:Script>
<mx:LinkButton id="linkButton" color="#170909" textAlign="left" fontWeight="normal" textDecoration="underline">
</mx:LinkButton>