I have an itemRenderer inside a dataGrid, cant access to a method
<s:Module>
<fx:Script>
<![CDATA[
public function mysort():void{
}
]]>
...<s:panel>...
<s:GridColumn headerText="Service Type" dataField="ServiceType" width="130" labelFunction="labelServicePriority">
<s:headerRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Button label="sort" click="parentDocument.mysort()"/>
</s:GridItemRenderer>
</fx:Component>
</s:headerRenderer>
</s:GridColumn>
...</s:panel>...
</s:Module>
the module is within an application with a iframe
Here is the solution for your problem:
I am using following way to call the method. Hope it will help you:
<s:DataGrid id="gridTest" width="90%" height="100%" dataProvider="{tempList}" horizontalScrollPolicy="auto" >
<s:columns>
<mx:ArrayList>
<mx:source>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer width="100%" height="100%">
<s:Image source="imageIcon" horizontalCenter="0" verticalCenter="0" buttonMode="true"
click="{outerDocument.onAddIconClick(data)}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</mx:source>
</mx:ArrayList>
</s:columns>
</s:DataGrid>
Here is the function:
public function onAddIconClick(item:Object):void
{
//
}
Related
I have this code. I need change variable DiagnosIsWritten=true, when input_diagnos (TextInput) is written something. Can you help me to say all ways, how i can do it.
<fx:Script>
<![CDATA[
public var DiagnosIsWritten:Boolean;
</fx:Script>
<s:DataGrid id="examsDG" >
<s:columns>
<s:ArrayList>
<s:GridColumn editable="true" headerText=" width="156"
itemRenderer="modules.PatientCardModule.moduls.ToothModule.renderers.examsDG_BiteRenderer"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
examsDG_BiteRenderer.mxml :
<s:TextInput id="input_diagnos" text="test" width="100%" height="100%" />
Add a change listener:
either inline:
<s:TextInput id="input_diagnos" text="test" width="100%" height="100%" change="onChange(event)" />
or in as3:
input_diagnos.addEventListener(spark.events.TextOperationEvent.CHANGE, onChange);
protected function onChange(event:TextOperationEvent):void {
DiagnosIsWritten = true;
}
I have a datagrid in flex with an itemrenderer and a dataprovider.
The problem is when I edit a datagrid, the provider don't get updated with the edited value.
Here is my datagrid:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
<mx:Script>
<![CDATA[
import mx.core.Application;
[Bindable]
private var provider:ArrayCollection = new ArrayCollection([
{data:'1'},
{data:'2"}]);
]]>
</mx:Script>
<!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
<mx:DataGrid id="myGrid" width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" >
<mx:itemRenderer>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
Now after editing the cell ( dataFiel="data" ) and printing the dataprovider, nothing changes in it.
Have not used Flex 3 since long but can you once check that whether ItemRenderer supports boolean property rendererIsEditor? If yes then set it to true then your renderer will also work as editor.
EDIT: I tried your code now and there seems to be some compiler error with delcaration of items in ArrayCollection. You seem to mix " and ' for items. I corrected it and now verified it in the below example which works. You can click the button to check before and after scenarios. I am pasting the complete code for your convenience just paste and run:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
protected function button1_clickHandler(event:MouseEvent):void
{
for(var i:int = 0; i<provider.length; i++) {
Alert.show(provider.getItemAt(i).data);
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.Application;
[Bindable]
private var provider:ArrayCollection = new ArrayCollection([
{data:'1'},
{data:'2'}]);
]]>
</mx:Script>
<!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
<mx:DataGrid id="myGrid" width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" >
<mx:itemRenderer>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
<mx:Button label="Check DP" click="button1_clickHandler(event)"/>
</mx:VBox>
</mx:Application>
You can use itemEditor instead of itemRenderer, itemRenderer only show your values if you want edit the data at runtime we have set value manually by using
data.propertyname = value;
Try this code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.Application;
[Bindable]
private var provider:ArrayCollection = new ArrayCollection([
{data:'1'},
{data:'2'}]);
]]>
</mx:Script>
<mx:VBox>
<!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
<mx:DataGrid id="myGrid" width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" >
<mx:itemRenderer>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Canvas>
I'm beginner in Flex . my issue when to add button to list , i put the button in the itemrender but the action of navigator.pushView(views.Listde,ProblemsList.selectedItem);
make an error "Acess of undefined property navigator .
Code :
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
if any solution to resolve it by list or any component instead of list then i want button to navigate to view with the selected item and the change of the list to navigate to another view with the selected item also , then the change of list work success but the button action cannot defined with the navigator.
Thanks in advance for any help .
Create a custom event with data property and dispatch the event from item renderer or dispatch the list change event from the item renderer when clicking the button.
package myEvents
{
import flash.events.Event;
public class CustomEvent extends Event
{
public function CustomEvent(type:String,
data:Object=null) {
// Call the constructor of the superclass.
super(type);
// Set the new property.
this.data = data;
}
// Define static constant.
public static const MY_BUTTON_CLICKED:String = "myButtonClicked";
// Define a public variable to hold the state of the enable property.
public var data:Object;
// Override the inherited clone() method.
override public function clone():Event {
return new CustomEvent(type, data);
}
}
}
MyItemRenderer.mxml
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// dispatch a custom
(this.owner as List).dispatchEvent(new CustomEvent(CustomEvent.MY_BUTTON_CLICKED, data));
//navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
Your view class
<?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"
title="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
private function onListCreationComplete_Handler():void
{
myList.addEventListener(CustomEvent.MY_BUTTON_CLICKED, onItemRendererButtonClicked);
}
protected function onItemRendererButtonClicked(event:CustomEvent):void {
var data:Object = event.data;
navigator.pushView(views.Listde,data);//myList.selectedItem
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)" creationComplete="onListCreationComplete_Handler()">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>
I hope this might help u. There are tons of examples out there for list and item renderer for mobile.
Based on your ItemRenderer, you can simply listen to the IndexChangeEvent in your View. In this case, you don't need a separate button at all - the whole ItemRenderer can act as the button.
<?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"
title="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import views.ButList;
protected function myList_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.Listde,myList.selectedItem);
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>
I use a fileReference.browse() to select an image file from the harddrive.
How can I load the selected image on DataGrid column?
Thanks
Edit:
My coding is here:
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var loadFile:FileReference;
[Bindable]
private var arrayCollection : ArrayCollection = new ArrayCollection ();
private function onBrowseButtonClicked(event : MouseEvent) : void
{
loadFile = new FileReference();
loadFile.addEventListener(Event.SELECT, selectHandler);
var fileFilter:FileFilter = new FileFilter("Images: (*.jpeg, *.jpg, *.gif, *.png)", "*.jpeg; *.jpg; *.gif; *.png");
loadFile.browse([fileFilter]);
}
private function selectHandler(event:Event):void
{
loadFile.addEventListener(Event.COMPLETE, loadCompleteHandler);
loadFile.load();
employeeImageName.text =event.target.name;
}
private var data:ByteArray;
private function loadCompleteHandler(event:Event):void
{
var fileReference:FileReference=event.target as FileReference;
data=fileReference["data"];
employeeImage.source = data;
}
private function storeInputs(event:MouseEvent) : void
{
arrayCollection.addItem({
name : employeeName.text,
id : employeeID.text,
email : employeeEmail.text,
gender : genderOption.selectedValue,
address : employeeAddress.text,
img : data
});
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="genderOption"/>
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<mx:HDividedBox width="100%" height="100%">
<s:Panel id="mainPanel" title="Employee Details" height="100%" width="50%">
<s:Form id="mainForm" height="100%" width="100%" left="10%" right="10%" top="10%">
<s:FormItem id="nameLabel" label="Employee Name">
<s:TextInput id="employeeName" />
</s:FormItem>
<s:FormItem id="idLabel" label="Embloyee ID">
<s:TextInput id="employeeID" maxChars="6"/>
</s:FormItem>
<s:FormItem id="emailLabel" label="Email">
<s:TextInput id="employeeEmail" />
</s:FormItem>
<s:FormItem id="genderLabel" label="Gender">
<s:HGroup>
<s:RadioButton group="{genderOption}" label="Male" id="male" />
<s:RadioButton group="{genderOption}" label="Female" id="female"/>
</s:HGroup>
</s:FormItem>
<s:FormItem id="addressLabel" label="Address">
<s:TextArea id="employeeAddress"/>
</s:FormItem>
<s:FormItem id="imageLabel" label="Image">
<mx:HBox>
<s:TextInput id="employeeImageName"/>
<s:Image id="employeeImage" height="100" width="100"/>
<s:Button id="imageButton" label="Browse" click="onBrowseButtonClicked(event)"/>
</mx:HBox>
</s:FormItem>
<s:FormItem>
<s:layout>
<s:HorizontalLayout gap="10"/>
</s:layout>
<s:Button id="submitButton" label="Submit" click="storeInputs(event)"/>
</s:FormItem>
</s:Form>
</s:Panel>
<s:DataGrid width="100%" height="100%" dataProvider="{arrayCollection}" id="employeeGrid" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Name" dataField="name" />
<s:GridColumn headerText="ID" dataField="id"/>
<s:GridColumn headerText="Email" dataField="email"/>
<s:GridColumn headerText="Gender" dataField="gender" />
<s:GridColumn headerText="Address" dataField="address" itemEditor="mx.controls.TextArea"/>
<s:GridColumn headerText="Employee" dataField="img">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<mx:HBox>
<s:Image id="image" source="outerDocument.data" />
</mx:HBox>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</mx:HDividedBox>
Here, all the controls are worked well in form. I could get the image and i could load the selected image on the image control. But I couldn't display the image in the DataGrid column when the submit button was clicked. This is my problem.
It can be done using flex custom itemrenderer. I've found a tutorial for you here . Gives a detailed explanation.
I did It
arrayCollection.addItem({
name : employeeName.text,
id : employeeID.text,
email : employeeEmail.text,
gender : genderOption.selectedValue,
qual : getCheckBoxexValues(),
address : employeeAddress.text,
imageData: loadFile.data
});
In grid
<s:GridColumn headerText="Employee" id="imageColumn" dataField="imageData" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Image id="image" width="120" height="80" source="{data.imageData}" visible="true" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Thank you
I create a datagrid with inline itemrenderer.
The renderer is a dropdownlist.
When dropdowlist value change, I'd like to update dataprovider but I didn't found how to do that.
Can you help me?
Thanks
[Bindable] private var DP_PRAT_INIT:ArrayCollection;
<s:DataGrid id="dgTuVous" fontWeight="normal"
dataProvider="{DP_PRAT_INIT}"
width="100%" height="100%"
horizontalScrollPolicy="on"
fontSize="10"
>
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="prInitiales" width="40" headerText="Prat" />
<s:GridColumn width="75" dataField="prTuVous"
headerText="Tu/Vous" editable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function ddlTuVous_changeHandler(event:IndexChangeEvent):void
{
DP_PRAT_INIT[ddlTuVous.selectedIndex].prTuVous=ddlTuVous.selectedItem;
trace ("ddlTuVous.selectedItem" +ddlTuVous.selectedItem) ;
}
]]>
</fx:Script>
<s:DropDownList width="100%" selectedIndex="1" id="ddlTuVous"
change="ddlTuVous_changeHandler(event)">
<s:dataProvider>
<s:ArrayList>
<fx:String>Tu</fx:String>
<fx:String>Vous</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
You reference the host control with the outerDocument property... so you would call outerDocument.DP_PRAT_INIT if you want to access that array. BUT, that array is private, so you have to make it public. Or, you can make a public function that you can call on outerDocument but ... yuck.
If I am understanding your code properly, you should access the data property of the GridItemRenderer which is the same as outerDocument.DP_PRAT_INIT[ddlTuVous.selectedIndex] except that it is better because you don't have possible index mismatches...
So, what you really want is:
data.prTuVous = ddlTuVous.selectedItem;