enabling/disabling checkbox according to some condition - apache-flex

I have a chechbox in a gridview. i need it disabled for some condition and enabled for other.
Problem is how to fetch check box id out side the grid.
Please help ....

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:pw="http://intelligentpathways.com.au/Flex/v2">
<mx:ArrayCollection id="ac">
<mx:Object name="Alpha" enabled="{true}"/>
<mx:Object name="Bravo" enabled="{true}"/>
<mx:Object name="Charlie" enabled="{false}"/>
<mx:Object name="Delta" enabled="{false}"/>
<mx:Object name="Echo" enabled="{true}"/>
</mx:ArrayCollection>
<mx:Panel horizontalCenter="0" verticalCenter="0" title="Renderer Demo">
<mx:DataGrid width="500" height="300" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Enabled?" dataField="enabled"/>
<mx:DataGridColumn headerText="Checkbox">
<mx:itemRenderer>
<mx:Component>
<mx:Box paddingLeft="3">
<mx:CheckBox label="Foxtrot" enabled="{data.enabled}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>

By giving you're check box an ID you should be able to reference it no matter what container objects it's it.
<mx:CheckBox id=myCheckbox ... />
can then be referenced in any script in that file like this:
private function toggleCheckBoxEnabled():void{
if(some condition){
myCheckBox.enabled = true;
}else{
myCheckBox.enabled = false;
}
}

Related

Flex 3: Getting error of "Parse error at '<mx:ComboBox>'>." What does it mean?

<mx:List columnCount="5" rowCount="11" width="100%" height="100%" dataProvider="{parentDocument.crewPositionsAC}" useRollOver="false" alternatingItemColors="[0xffffff, 0xe5e5e5]" borderStyle="none">
<mx:itemRenderer>
<mx:Component>
<mx:Text text="{data}" color="#840021" selectable="false" />
<mx:ComboBox id="studentType">
<mx:ArrayCollection>
<mx:String>BFA1</mx:String>
<mx:String>BFA2</mx:String>
<mx:String>BFA3</mx:String>
<mx:String>MFA1</mx:String>
<mx:String>MFA2</mx:String>
<mx:String>MFA3</mx:String>
<mx:String>MFAw1</mx:String>
<mx:String>MFAw2</mx:String>
<mx:String>MFAw3</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
When I try to save it, I get the error:
Parse error at '<mx:ComboBox>'.
Anybody able to see what's causing the error?
You can only have a single component defined as an in-line itemRenderer. You have two defined, a Text and a ComboBox. The solution is to wrap them up in a container. I used an HBox for the purposes of demonstration.
<mx:List columnCount="5" rowCount="11" width="100%" height="100%" dataProvider="{parentDocument.crewPositionsAC}" useRollOver="false" alternatingItemColors="[0xffffff, 0xe5e5e5]" borderStyle="none">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Text text="{data}" color="#840021" selectable="false" />
<mx:ComboBox id="studentType">
<mx:ArrayCollection>
<mx:String>BFA1</mx:String>
<mx:String>BFA2</mx:String>
<mx:String>BFA3</mx:String>
<mx:String>MFA1</mx:String>
<mx:String>MFA2</mx:String>
<mx:String>MFA3</mx:String>
<mx:String>MFAw1</mx:String>
<mx:String>MFAw2</mx:String>
<mx:String>MFAw3</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>

flex - access linkbutton outside the datagrid

I am using this code:
<mx:DataGridColumn id="test" headerText="Case ID" width="80">
<mx:itemRenderer>
<fx:Component>
<mx:Canvas>
<mx:LinkButton id="lnkCaseId" click="lnkCaseId.dispatchEvent(new MouseEvent(MouseEvent.CLICK,true,false))" label="{data.caseId}" textDecoration="underline" color="#0052A5">
</mx:LinkButton>
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
How can I access lnkCaseId outside the datagrid?
You can add external-document event-listener to Inline renderers using outerdocument method
<mx:LinkButton label="Buy" click="{outerDocument.outerFileMethod(data)}" />
Another way of getting rendrer is by event bubbling please see sample below
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
click="{clicked(event)}">
<mx:Script>
<![CDATA[
import mx.controls.LinkButton;
import mx.core.UIComponent;
import mx.controls.Alert;
public function clicked(event:MouseEvent):void
{
if (event.target is LinkButton)
{
var innerLinkButon:LinkButton = event.target as LinkButton;
Alert.show("Application : "+innerLinkButon.label);
}
}
]]>
</mx:Script>
<mx:DataGrid id="grid">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Array>
<mx:Object label="AAAA"/>
<mx:Object label="BBBB"/>
<mx:Object label="CCCC"/>
<mx:Object label="DDDD"/>
</mx:Array>
</mx:ArrayCollection>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn id="columnA" headerText="columnA" dataField="#label">
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton click="{clicked(event)}" label="{data.label.toString()}">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function clicked(event:MouseEvent):void
{
Alert.show("linkButton");
}
]]>
</mx:Script>
</mx:LinkButton>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Hopes that helps

flex, AdvancedDataGrid, custom itemrenderer

I seem to be missing some key concept(s) when it comes to flex itemrenderers, particularly as it applies to an AdvancedDataGrid. I'm doing what a lot of other people are trying to do: change the bg color of a field based on data from the row. My problem seems to be in accessing data fields? Basically, when this loads, nothing appears. If I remove the parts from the renderer where I try to access field data, it works, but kind of defeats the purpose.
Here's what I've got:
<mx:AdvancedDataGrid width="100%" height="100%"
id="topAccountsGrid"
borderStyle="solid" dropShadowEnabled="true" treeColumn="{list_name}" editable="false" selectionMode="singleRow"
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" dragDrop="topAccountsGrid_dragDropHandler(event)"
doubleClickEnabled="true" itemDoubleClick="topAccountsGrid_itemDoubleClickHandler(event)"
sort="topAccountsGrid_sortHandler(event)" backgroundColor="#ffffff">
<mx:dataProvider>
<mx:HierarchicalData source="{filteredList}"
childrenField="children" />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn id="colRank" headerText="Rank" dataField="Rank__c" width="60">
<mx:itemRenderer>
<fx:Component>
<mx:HBox paddingLeft="2">
<s:Label id="tempLabel" text="{data.Rank__c}" />
<fx:Script>
<![CDATA[
override public function set data(value:Object) : void{
super.data = value;
if(data.Health__c == 0){
setStyle("backgroundColor",0xFF5050);
} else if(data.Health__c == 50){
setStyle("backgroundColor",0xFFFF99);
} else if(data.Health__c == 100){
setStyle("backgroundColor",0x66FF66);
}
}
]]>
</fx:Script>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="list_name" headerText="Name" dataField="Name" />
<mx:AdvancedDataGridColumn id="colPrevRank" headerText="Previous Rank" dataField="Previous_Rank__c" />
<mx:AdvancedDataGridColumn id="colType" headerText="Type" dataField="Type" />
<mx:AdvancedDataGridColumn id="colContacts" headerText="# Contacts" dataField="Contacts__c" />
<mx:AdvancedDataGridColumn id="colDeals" headerText="# Deals" dataField="Deals__c" />
</mx:columns>
</mx:AdvancedDataGrid>
I've had a similar issue in the past when using HierarchicalData. The way I got around it was to use an AdvancedDataGridRendererProvider.
Here's some sample code:
<mx:AdvancedDataGrid width="100%" height="100%"
id="topAccountsGrid"
backgroundColor="#ffffff">
<mx:dataProvider>
<mx:HierarchicalData source="{filteredList}"
childrenField="children" />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn id="colRank" headerText="Rank" dataField="Rank__c" width="60" />
<mx:AdvancedDataGridColumn id="list_name" headerText="Name" dataField="Name" />
<mx:AdvancedDataGridColumn id="colPrevRank" headerText="Previous Rank" dataField="Previous_Rank__c" />
<mx:AdvancedDataGridColumn id="colType" headerText="Type" dataField="Type" />
<mx:AdvancedDataGridColumn id="colContacts" headerText="# Contacts" dataField="Contacts__c" />
<mx:AdvancedDataGridColumn id="colDeals" headerText="# Deals" dataField="Deals__c" />
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider column="{colRank}" depth="1" dataField="Rank__c" renderer="AdvancedDataGridRankCRenderer" />
</mx:rendererProviders>
</mx:AdvancedDataGrid>
And the AdvancedDataGridRendererProvider:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
backgroundColor="{SetBackgroundColor(data)}"
paddingLeft="2" paddingRight="2" paddingTop="2"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
height="22">
<fx:Script>
<![CDATA[
[Bindable] private var bgColor:uint = 0xD6E5FF;
private function SetBackgroundColor(obj:Object):uint
{
var returnColor:uint = 0xFF5050;
if (obj["Rank__c"] != null)
{
switch (obj["Rank__c"].toString().toUpperCase())
{
case "0":
returnColor = 0xFF5050;
break;
case "50":
returnColor = 0xFFFF99;
break;
case "100":
returnColor = 0x66FF66;
break;
default:
returnColor = 0xFF5050;
break;
}
}
return returnColor;
}
override public function set data(value:Object):void
{
super.data = value;
rankLabel.text = value["Rank__c"].toString();
validateDisplayList();
}
]]>
</fx:Script>
<mx:Label id="rankLabel" />
</mx:HBox>

Flex: Error on Scrolling Vertically in a DataGrid

i have this code
<mx:DataGrid id="tempListDG" itemDoubleClick="doubleClickHandler(event)" width="100%" height="100%" rowHeight="110"
draggableColumns="false" sortableColumns="false" allowMultipleSelection="false">
<mx:columns>
<mx:DataGridColumn id="chkSel" headerText=" " width="15" sortable="false">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingLeft="3">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:CheckBox name="chkSel" selected="false" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn id="sum" dataField="#summary" headerText="Summary Description" width="280" >
<mx:itemRenderer>
<mx:Component>
<mx:HBox name="thumbs" creationComplete="setThumbnailImage(event)" verticalAlign="top" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.controls.Text;
import com.azaaza.containers.HBox;
import com.azaaza.controls.Image;
import com.hwakin.tavi.model.ModelLocator;
import mx.controls.DataGrid;
private function setThumbnailImage(e:Event):void{
var dg:DataGrid = DataGrid(e.target.parent.parent);
var dCounter:int = TemplateOpenPanel(dg.parent.parent).dCount;
if (dCounter+1 > XMLList(dg.dataProvider).length()){
dg.validateDisplayList();
return;
}
img.load(ModelLocator.getInstance().StringToBitmap(XMLList(dg.dataProvider)[dCounter].#thumbStr));
img.width = 80;
img.height = 110;
txt.htmlText = XMLList(dg.dataProvider)[dCounter].#summary;
txt.maxHeight = 110;
dCounter++;
TemplateOpenPanel(dg.parent.parent).dCount = dCounter;
}
]]>
</mx:Script>
<mx:Image id="img">
</mx:Image>
<mx:Text id="txt">
</mx:Text>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="#dateCreated" headerText="Date Created" width="100" />
<mx:DataGridColumn dataField="#dateModified" headerText="Date Modified" width="100"/>
<mx:DataGridColumn dataField="#guid" headerText="guid" visible="false"/>
<mx:DataGridColumn dataField="#fileName" headerText="File Name" visible="false"/>
<mx:DataGridColumn dataField="#tempXml" headerText="tempXml" visible="false"/>
</mx:columns>
</mx:DataGrid>
the datagridcolumn id named "sum" creates images and text given by the XML i loaded
but i got error when i use the scroll of the datagrid. and the images get disaligned and all of the data like the dateCreated and dateModified are shuffled or something.
please help me with this one.. thanks
If you are still looking for answer add this into your code.
1)
protected function dgtempListDG_scrollHandler(event:ScrollEvent):void
{
// TODO Auto-generated method stub
tempListDG.invalidateDisplayList();
}
2)
scroll = "dgtempListDG_scrollHandler(event)"
Add this in mx:datagrid.
remember that item renderers are recycled and reused, so you should not use creationCompelte events, (if only 5 item renderers are visible, only 7 are created and then they are reused, but they are created only once so creation complete only fires once)
I like to use dataChange events, they work upon creation and each time the data of the itemRenderer changes.

TextArea being used as an itemEditor misbehaves when the enter key is pressed

I have a TextArea inside an itemEditor component, the problem is that when typing in the TextArea if the enter key is pressed the itemEditor resets itself rather moving the caret to the next line as expected:
<mx:List width="100%" editable="true" >
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Array>
<mx:Object title="Stairway to Heaven" />
</mx:Array>
</mx:ArrayCollection>
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Text height="100" text="{data.title}"/>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextArea height="100" text="{data.title}"/>
</mx:Component>
</mx:itemEditor>
</mx:List>
</mx:Application>
Could anyone advise how I can get around this strange behaviour and make the enter key behave as expected?
Thanks,
Chris
The trick is to listen for the ITEM_EDIT_END event and prevent the default list behaviour if the reason is NEW_ROW. See example below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="onComplete();">
<mx:Script><![CDATA[
import mx.events.ListEvent;
import mx.events.ListEventReason;
import mx.controls.TextArea;
private function onComplete():void
{
list.addEventListener(ListEvent.ITEM_EDIT_END, onEndEdit);
}
private function onEndEdit(e:ListEvent):void
{
if (e.reason == ListEventReason.NEW_ROW)
e.preventDefault();
else
list.editedItemRenderer.data.title = TextArea(e.currentTarget.itemEditorInstance).text;
}
]]></mx:Script>
<mx:List width="100%" editable="true" id="list">
<mx:dataProvider>
<mx:Object title="Stairway to Heaven" />
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Text height="100" text="{data.title}"/>
</mx:Component>
</mx:itemRenderer>
<mx:itemEditor>
<mx:Component>
<mx:TextArea height="100" text="{data.title}"/>
</mx:Component>
</mx:itemEditor>
</mx:List>
</mx:Application>
Looks like the keypress of [enter] is being handled by your lists default function rather than your item renderers. Not sure what the exact code to fix that is, but I would think you would need to extend the list control that would nix the function when the user presses [enter]
Think you can use the "editorUsesEnterKey" of List.as (line 544 Flex3.5)
A flag that indicates whether the item editor uses Enter key.

Resources