Accessing DataGridColumn item renderer variable - apache-flex

Within a DataGrid, I have a DataGridColumn that uses a custom component as the item renderer. Within the component, I have an ArrayCollection that stores a set of value objects. My problem is that I cannot access the ArrayCollection values from outside of the item renderer component. Does anyone know how it would be possible to do this? I have posted a code snippet below.
<mx:Script>
<![CDATA[
// Cannot access arrFiles from here.
]]>
</mx:Script>
<mx:DataGrid editable="true">
<mx:columns>
<mx:DataGridColumn id="dgcUpload" width="130" headerText="Uploaded Files"
editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Script>
<![CDATA[
[Bindable]public var arrFiles:ArrayCollection = new ArrayCollection();
]]>
</mx:Script>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Is this possible?
Thank you in advance for any assistance,
Orville

I would create a custom MXML Box component as the rendered with a label (myLabel) as a child. Set the data provider for the DataGrid to the array. In the custom MXML component override the set data method which is called each time the data is rendered for each row and set the label to the current value passed in:
override public function set data(value:Object):void{
myLabel.text = value.myTextForLabel;
}
If the field in the ArrayCollection (myArrayCollection) is always the same for the label, then just set the DataGrid data provider to the ArrayCollection and the dataField property of the column to the appropriate value (myText):
<mx:DataGrid editable="true" dataProvider="myArrayCollection">
<mx:columns>
<mx:DataGridColumn id="dgcUpload" width="130" dataField="myText" headerText="Uploaded Files"
editable="false">
</mx:columns>
</mx:DataGrid>

It is possible depending on how you want to access it. You can access the property of a specific item being rendered by the itemRenderer by calling the itemToItemRenderer function on the datagrid. That gives you an instance of that specific itemRenderer and you can call the arrFiles variable for that item.
Here's an example
protected function datagrid1_clickHandler(event:MouseEvent):void
{
var obj:Object = dgcUpload.itemToItemRenderer(dgcUpload.selectedItem);
var newArray:ArrayCollection = obj.arrFiles;
}
I call that when something is clicked on the DataGrid and I want to access the arrFiles variable for the selected item.
Is that what you're looking for?
=Ryan

Related

flex return rowIndex from button in datagrid component

Hi I am trying to pass the rowindex when I click on a button in a row, the data value returns the correct information but the rowIndex returns nothing.
<mx:AdvancedDataGridColumn headerText="EDIT" showDataTips="false" editable="true">
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="center" verticalAlign="middle">
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, rowIndex)}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
thanks !
I'm surprised you're provided code does not throw an error.
You need to access listData.rowIndex. listData should be an instance of the AdvancedDataGridListData class.
<s:Button label="Edit" id="editGeo" click="{outerDocument.onClick(data, listData.rowIndex)}"/>
Since the HBox does not have a listData property, you may have to implement it on your own for the data to be passed in. Something like this should suffice:
[Bindable]
public var listData:BaseListData;
It has been a while since I've been deep into an MX component, so my memory is a bit rusty on the last part.
In addition to the first answer, try not to use listData.rowIndex when your datagrid has the vertical scroll bar, because the rowIndex just shows the index of current visible Rows.
Try to use the current object index in the DataProvider of the datagrid instead.

Weird Behaviour-CheckBoxes as ItemRenderer within Flex DataGrid - FLEX 3

I'm having this weird behaviour in a datagridColumn which I've customized to have its cells rendered as checkBoxes rather than the dafault itemRenderer (i.e. strings). The relevant code is as follows:
<mx:DataGridColumn sortable="false" textAlign="center" headerText="" width="20" dataField="colCB">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="true">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function change():void{
//TODO
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Well, what happens is that whenever I check a checkbox, other checkboxes (in other rows) get randomly checked or unchecked, and if I scroll down or up they once again randomly get selected or unselected.
Can anybody help me with this one?
Thanks is advance
PS by the way, I've suppressed the starting "<" in the tags because it was messing with the textEditor, but in my code they're there
My guess is that the issue isn't that the checkboxes are getting randomly checked and unchecked. The DataGrid recycles its itemRenderers for better memory performance. What's likely happening is that you're checking a CheckBox on an itemRenderer and start scrolling, that itemRenderer with the checked box is getting reused to display other records with the selected="true" value still set.
What I would do is create an itemRenderer component and override the set data method to set the checkbox's selected value to what it should be.
Some sample code off the top of my head for the itemRenderer (you'll want to adjust it for your use):
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
if (value["myCheckBoxData"] != null)
{
myCheckBox.selected = Boolean(value["myCheckBoxData"]);
}
validateDisplayList();
}
]]>
</fx:Script>
<mx:CheckBox id="myCheckBox" />
</mx:HBox>

Using validators in DataGrid - Flex

i have an editable DataGrid, something like:
<mx:Datagrid editable="true" dataProvider="{arrayListPreferences}" id="preferencesGrid">
<mx:columns>
<mx:DataGridColumn header="col1" dataField="preference" editable="false"/>
<mx:DataGridColumn header="col2" dataField="value" editable="true"/>
</mx:columns>
</mx:Datagrid>
When the user edits the data there's a button that he clicks and calls a function that saves the data to a database, and in this function i have to validate the data before sending it. I want to use simple validators (NumberValidator, StringValidator, etc) but i don't know how to set the source of this validators to the specified rows in the second column.
<mx:NumberValidator source="{preferencesGrid.selectedItem}" property="value"
integerError="Enter Integer value"
minValue="18" maxValue="50" domain="int"
trigger="{saveButton}" triggerEvent="click"
valid="saveData();"/>
Set the property of validator to the dataField of the desired column.
<mx:DataGridColumn editable="true" itemRenderer="MyTextInputItemRenderer"/>
public class MyTextInputItemRenderer extends TextInput{
private var validator:StringValidator;
public function MyTextInputItemRenderer(){
validator = new StringValidator;
validator.minLength=0;
validator.property = "text";
validator.source = this;
}
override public function set data(value:Object):void{
super.data = value;
validator.validate();
}
}

Is it possible to store an array in a DataGridColumn in Flex?

I have a datagrid column with a button that opens a modal dialog box allowing the user to upload multiple files. In the code below, the browseAndUpload() method does that. When the user finished uploading files and closes the upload box the closeUpload() method is called. I know for a fact that the uploaded files are being copied into arrFiles.
The problem I am having is that the repeater will not show the files in arrFiles. Here is the code:
<mx:DataGridColumn id="dgcUpload" width="42" headerText="Uploaded Files"
editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Script>
<![CDATA[
[Bindable]public var arrFiles:ArrayCollection = new ArrayCollection();
public var fileUpload:FileUpload = new FileUpload();
private function browseAndUpload(event:MouseEvent):void
{
fileUpload = FileUpload(PopUpManager.createPopUp(this, FileUpload, true));
fileUpload.addEventListener(CloseEvent.CLOSE, closeUpload);
fileUpload["btnClose"].addEventListener("click", closeUpload);
}
private function closeUpload(event:Event):void
{
arrFiles = fileUpload.arrFiles;
}
]]>
</mx:Script>
<mx:HBox paddingLeft="3" paddingRight="3">
<mx:Button width="36" label="..." click="browseAndUpload(event)"/>
</mx:HBox>
<mx:Repeater id="rpFiles" dataProvider="{arrFiles}">
<mx:Label text="{FileVO(rpFiles.currentItem).name}"/>
</mx:Repeater>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Thank you in advance for any insight,
Orville
Got it! I made the following changes:
private function closeUpload(event:Event):void
{
arrFiles = fileUpload.arrFiles;
rpFiles.dataProvider = arrFiles;
}
<mx:Repeater id="rpFiles">
<mx:Label text="{FileVO(rpFiles.currentItem).name}"/>
</mx:Repeater>
You are assigning fileUpload.arrFiles directly to arrFiles. Is the former an Array or ArrayCollection? You might need to do arrFiles = new ArrayCollection(fileUpload.arrFiles);
That being said, I hate flex binding and generally avoid it because it can be unreliable. In your case, I'd write my own AS3 component that implements the ItemRenderer and then assign the repeater's dataprovider manually when it changes. You will have more control over the behavior if you do it that way. And a much easier time debugging.

How to reload checkbox in itemrenderer

I am having a problem with a checkbox in my datagrid. It pulls in a dataprovider (xml file) and I am using it to set the checkbox selection with a custom itemrenderer. I then save the datagrid, when updated, back to the xml file.
The checkbox, when clicked, saves to the xml fine.. I know this because when I reload the application it shows the correct result. However, when I just refresh the dataprovider without closing out the flex application then the checkboxes revert back to what they were before the change.
So here is the custom checkbox:
<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
override public function set data( value:Object ):void{
super.data = value;
trace("data = " + data.#hidden);
if(data.#hidden == "true")
{
this.selected = true;
}else
{
this.selected = false;
}
}
]]>
</mx:Script>
</mx:CheckBox>
And here is where I am calling it:
<mx:DataGridColumn width="75" headerText="hide?" dataField="#hidden">
<mx:itemRenderer>
<mx:Component>
<local:itemRendCheckBox />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
I imagine what is happening is that everything is updating except the custome itemrenderer. Is there something I can do to tell the checkbox to refresh with the dataprovider?
I think I figured it out, I was calling the datagrid to refresh, which is different then refreshing the actual dataprovider. So instead of myDataGrid.send() I called dataProv.dataprovider.refresh();

Resources