datagrid inline itemrender change dataprovider value - actionscript-3

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;

Related

Flex/AS3 Change a variable

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

Flex - Set Editable propertie programmatically for a GridColumn

Is it possible to dynamically change the property "Editable" of a GridColumn regarding the value of an another Column.
Once I have filled my dataProvider I would like to loop ont he dataGrid rows, but I can't find how to it ?
Thanks.
I tried
editable="{if (data['Type']=='foo'){return true;} else {return false;}}"
but build failed.
How about to use itemRenderer?
<s:GridColumn dataField="Type" width="100" editable="false"/>
<s:GridColumn dataField="Name" width="100" editable="false"/>
<s:GridColumn dataField="Score" width="100" editable="true" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
if (value != null && value != "") {
super.data = value;
if (super.data["Type"] == "foo"){
somefield.editable = true;
}
else{
somefield.editable = false;
}
}
}
]]>
</fx:Script>
<s:TextInput id="somefield" text="{data.Score}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Run example on wonderfl
Thanks. In fact I use ItemEditor and/or ItemRenderer for some columns.
In my case I have
<s:GridColumn id="gcAmountEUR" labelFunction="amountFormat" dataField="AmountEUR" headerText="AMOUNT EUR" width="80" itemEditor="components.gieOrderAmount">
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer textAlign="right" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="CurrencyCode" headerText="CURRENCY" width="50" itemEditor="components.gieOrderCurrency" >
</s:GridColumn>
<s:GridColumn id="gcAmount" labelFunction="amountFormat" dataField="Amount" headerText="AMOUNT" width="120" itemEditor="components.gieOrderAmount">
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer textAlign="right" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
The datagrig has the property editable="true".
By default the column AmountEUR is Editable an the column Amount is not.
But if for a row the value of Currency is not "" so I want AmountEUR to be not Editable and Amount to be Editable. So I would like to programmatically change the property Editable of the column for each row.
So I would like to parse the datagrid to change, for each row, the property value "Editable" of AmountEUR and Amount if Currency is not Empty.
But perhaps it is not the good way to do it ?
I hope I made myself clear.
Antoine.

Cannot access a method through itemRenderer using parentDocument

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
{
//
}

flex spark list Drag and drop an item on a spark canvas component

i have a spark list that displays a list of images that represent products. i am trying to implement a drag and drop functionality that allows the user to drag the products he wants to buy from the list to canvas area where he can see the products he choose before buying them. i am using the code below but i cannot figure out what is wrong with it , it seems that i am unable to use the list item as a draginitiator, can any one help please:
private function onMouseDown( event : MouseEvent ) : void
{
var list:List = List(event.currentTarget);
var dragInitiator:Image = Image (list.selectedItem);
var source : DragSource = new DragSource();
source.addData(dragInitiator, "img");
DragManager.doDrag(dragInitiator, source, event);
}
protected function canvas1_dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
protected function canvas1_dragDropHandler(event:DragEvent):void
{
Image(event.dragInitiator).x =
Canvas(event.currentTarget).mouseX;
Image(event.dragInitiator).y =
Canvas(event.currentTarget).mouseY; }
<fx:Model id="categoriesModel" source="Data/Categories.xml"/>
<s:ArrayList id="CategoriesCollection" source="{categoriesModel.Category}"/>
<fx:Model id="productsModel" source="Data/Products.xml"/>
<s:ArrayList id="ProductsCollection" source="{productsModel.Product}" />
</fx:Declarations>
<s:VGroup gap="5" horizontalAlign="center">
<s:HGroup gap="5">
<Components:PROExpressLogo/>
<s:List id="categoryList" scroller="{null}" visible="true"
itemRenderer="Renderers.categoryItemRenderer" width="700" borderAlpha="0"
change="categoryList_changeHandler(event)">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
</s:HGroup>
<s:List id="productList" scroller="{null}" contentBackgroundAlpha="0.4" contentBackgroundColor="0xabcdef"
itemRenderer="Renderers.productItemRenderer" width="880" borderAlpha="0" visible="true" horizontalCenter="0"
dragEnabled="false" mouseDown="onMouseDown(event)"
>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
<s:HGroup gap="20">
<s:Group>
<s:Image id="planImage" width="500" height="300" horizontalCenter="0"
toolTip="Drag your items on your Plan and drop them were you plan to install them"
/>
<mx:Canvas width="500" height="300" backgroundAlpha="0.1"
backgroundColor="#abcdef" borderColor="#abcdef" borderStyle="inset"
contentBackgroundColor="#abcdef" cornerRadius="10"
dragDrop="canvas1_dragDropHandler(event)"
dragEnter="canvas1_dragEnterHandler(event)" dropShadowVisible="true"
horizontalCenter="0"/>
</s:Group>
<s:List id="cart" width="200" height="300"/>
</s:HGroup>
I 'm thinking you need add drag initiator should be the item renderer that you are dragging rather than the entire List control.
Not list.selectedItem that simple object that is not like UIComponent or VisualElement you have to point some ui component like group.

How to get selectedItem from comboBox itemrenderer in datagrid and display value in another column

I am having an issue with itemRender in a datagrid. Actually I have a dataProvider which populates 2 columns in my datagrid. The first column data is rendered in a TextInput and the second column data is rendered in a comboBox. What I want now is that when I selected an element from the comboBox of a row in the grid. I want to show the selectedItem value in the corresponding TextInput on the same row of the first column.
I want to know if there is any datagrid property that can help me do this? Or if someone can guide me what to code in the change handler of the comboBox? See my codes below.
I need help. Pls sort this out for me someone.
<mx:DataGrid id="myDG" rowHeight="25" dataProvider="{my_arrayColl}" width="100%" height="205" chromeColor="#D0CCAF" headerHeight="0" showHeaders="false">
<mx:columns>
<mx:DataGridColumn headerText="My Header 1"
editable="true"
dataField="LBL"
>
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="left" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Text;
import spark.events.TextOperationEvent;
protected function label_txt_changeHandler(event:TextOperationEvent):void
{
data.LBL = label_txt.text;
}
]]>
</fx:Script>
<s:TextInput id="label_txt" change="label_txt_changeHandler(event)" text="{data.LBL}" width="98%"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="My Header 2"
editable="true"
rendererIsEditor="true"
dataField="ALIAS"
>
<mx:itemRenderer>
<fx:Component>
<mx:ComboBox height="80%" change="mycb_changeHandler(event)" labelField="ALIAS" dataProvider="{outerDocument.mycb_array}">
<fx:Script>
<![CDATA[
import mx.events.ListEvent;
protected function mycb_changeHandler(event:ListEvent):void
{
}
]]>
</fx:Script>
</mx:ComboBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
If I understand it correctly, you want to update the dataprovider of DataGrid, based on selection in your ComboBox component in itemRenderer. You can do that by going to the owner object and updating the respective object in data. Just keep itemRenderer in a separate mxml and put your debug pointer in label_txt_changeHandler method.
Hope it helps..