Custom itemRenderer in a F3 ComboBox on specific list items after combobox creation
Hi,
I'm trying to set a specific list item in a mx combobox to have a custom item renderer, the problem is that I cannot do this via mxml, it needs to be done via actionscript at a later stage, eg: combobox gets created, combobox gets populated, user does other tasks, combobox needs to set one or more items in the combobox to have icons (via item renderer)..
I can do this via the onChange event, but it only applies the icon when the combobox is opened and there is a slight delay so you can see the icon being added.
Thanks in advance for any help
J
Hi,
If I understand correctly, you can create you comboBox with all items at the begining:
http://blog.flexexamples.com/2007/08/18/displaying-icons-in-a-flex-combobox-control/
After that, base on user task, you can filter you comboBox:
http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in- flex/
In this way you don't see the delay.
Johnny
Please rate answers.
Similar Messages
-
ComboBox with custom ItemRenderer
This is my combobox where I am trying to have a custom renderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
public var datas:XML;
[Bindable]
var ItemRenderer:ClassFactory;
override public function set data(value:Object):void
dataProvider = datas["sku" + value.sku];
ItemRenderer = new ClassFactory(comboBoxCheckBoxItemRenderer);
itemRenderer = ItemRenderer;
public function saveCheckState(evt:Event):void
var dataProviderItem:Object = dataProvider.getItemAt(dataProvider.getItemIndex(selectedItem));
dataProviderItem.selected = CheckBox(evt.currentTarget).selected;
dataProvider.setItemAt(dataProviderItem, dataProvider.getItemIndex(selectedItem));
]]>
</fx:Script>
</mx:ComboBox>
This combobox is used as a custom itemrenderer in datagrid.
Here is code for comboBoxCheckBoxItemRenderer:
package modulecode
import mx.containers.HBox;
import mx.controls.CheckBox;
import mx.controls.Label;
import mx.controls.Spacer;
public class comboBoxCheckBoxItemRenderer extends HBox
private var action:Label;
private var spacer:Spacer;
private var checkBox:CheckBox;
public function comboBoxCheckBoxItemRenderer()
super();
override protected function createChildren():void {
// Call the createChildren() method of the superclass.
super.createChildren();
action = new Label();
// Add the child component to the custom component.
addChild(action);
spacer = new Spacer();
spacer.percentWidth = 100;
// Add the child component to the custom component.
addChild(spacer);
checkBox = new CheckBox();
// Add the child component to the custom component.
addChild(checkBox);
override public function set data(value:Object):void
action.text = value.action;
checkBox.selected = value.selected;
What's happening is that nothing is happening untill I drop combobox down in the grids. As the result checkboxes are not selected properly.
Any help?How would I set up a custom itemrenderer to use data binding but properly have selected property in the following code:
<<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%">
<mx:Label text="{XML(data).action}"/>
<mx:Spacer width="100%"/>
<mx:CheckBox id="check" selected="{XML(data).selected}"
change="outerDocument.saveCheckState(event);"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer> -
Setting a DataProvider to a custom itemRenderer in a DataGrid
Hi,
I've got a DataGrid, with one column using a custom AS itemRenderer to display a ComboBox. Everything works, but there are various "wierd" behaviors occuring (when I remove a row, the ComboBox of the next row in line resets to it's label, but none of the others do... When I add a row, various apparently random comboboxes change their selectedItem, etc...)
Anyways, I had some luck isolating each of these individual bugs and squashing them, but each time I do, others seem to pop up. I suspect the main issue is the way I'm setting the ComboBox's dataProvider. The dataProvider is dynamic - an XML file generated from a MySQL table using PHP. Knowing no other way to do so, I'm overriding the set data method and explicitly setting it there, like so:
override public function set data(value:Object):void{
super.data = value;
dataProvider = value.uom; // value.uom is the XML
Is there a better way to set the data provider - an approach where I can set it once and therefor avoid the override entirely? Again, the itemRenderer is an ActionScript class, and not implemented with XML...
<mx:DataGridColumn itemRenderer="renderers.UOMBox" dataField="uom" headerText="UOM" />
and...
package renderers{
public class UOMBox extends ComboBox{
... etc ...
Thanks in advance.How does this code work for you:
override public function set data(value:Object):void{
if(value != null) {
super.data = value;
dataProvider = value.uom; // value.uom is the XML
super.invalidateDisplayList();
The missing invalidateDisplayList in your code might be what will help with your problems.
Chris -
Mobile custom itemRenderer adivce: grouping of elements
Hello,
I am building a custom itemRenderer for a Flex Mobile app.
It will be like 3 columns, first 2 with 2 StyleableTextField stacked vertically and the 3rd with just one StyleableTextField.
I've uploaded a symbolic image of what I mean. (symbolic = fields depicted in image are imaginary - so you know if it doesn't make sense)
I have all in place and was wondering if I should:
A) Position all elements based on X and Y with setElementPosition()
B) Create 2 VGroups for the first 4 StyleableTextFields and position them.
Worried about speed.
Thank you.Yes A is faster because it has less DisplayObjects, but also Group uses the spark layout system which is a very general layout system capable of handling many use cases. When you layout elements using setElementSize()/setElementPosition() you are laying things out specific to only your renderer's use case which means less code needs to run and the renderer will be faster.
You could start with B if you find it easier to code. Just be sure to test the performance of your application. If your scenario feels good on your target devices then you probably don't need to optimize any further. If it's not fast enough then you might want to try A and see how it compares. -
Custom ItemRenderer with dynamic field associations?
Hi All,
I'm trying to create a custom itemrender control that isn't tied to a specific type of data input. I'm creating a thumbnail itemrenderer to be used with the Sparks List control:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="
http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" autoDrawBackground="
true"
>
<s:layout>
<s:BasicLayout/>
</s:layout>
<mx:Image left="
5" right="
5" bottom="
25" top="
5" id="
img_thumbnail"source="
{data.image}"
/>
<s:Label
left="
5" right="
5" bottom="
5" verticalAlign="
middle" textAlign="
center" id="
lbl_label" fontWeight="
bold" fontSize="
10"text="
{data.label}"
/></s:ItemRenderer>
However, as you can see, the image source and label text properties are tied to specific fields in the data collection (image and label). I would like to provide a way to figure out what the label and icon fields are set to in the parent control, and set them accordingly in the itemrenderer. This should allow me to use the same itemrenderer with different objects, as long as they have a text and image property.
Any ideas? ThanksAfter doing some research, I found my answer:
1) The data object is the current item which the List component is populated with. You can access any properties of the object using it. (Not what I'm looking for here.)
2) You can access the label property set by the labelField or labelFunction properties of the list control in the item renderer simply using this.label. This is exactly what I was looking for. -
Hi all,
Please let me know the process to track or find all the SAP Standard and custom objects. that got changed from a specific point of time.
Is there any function module or any table where this change log is maintained.?
I just only need the details ,wheather that SAP standard or Custom object has got changed or not.
Thanks in advanceHi RK v ,
I really don't know what your actual requirement is , but if you want to know the objects as per the modification , then transport request will be much help to you .
Have a look into table E070 and E071 .
Regards ,
Yogendra Bhaskar -
Items in Tree control move around when data is submitted using custom ItemRenderer
I'm working on a Tree control with an XMLListCollection as
its dataProvider.
The dataProvider has information looking like this :
quote:
<?xml version='1.0' encoding='utf-8'?>
<INFO>
<FIELD label="STR_USER_NAME"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_USER_EMAIL"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_OPTIONAL"
type="branch"
value="0"
>
<FIELD label="STR_USER_ADDRESS"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_USER_POSTAL_CODE"
type="text"
value=""
>
</FIELD>
</FIELD>
</INFO>
So in the Tree control I'd like the information to show up
with a label and
an
editable textbox for each item :
[Label] [textbox]
To do this I made a tree like this :
quote:
<mx:Tree id="userTree"
editable="true"
rendererIsEditor="true"
editorDataField="curVal"
itemRenderer="{new ClassFactory(ItemRendererUser)}"
itemEditEnd="e_ProcessData(event);"
dataDescriptor="{new DataDescriptorUsers()}"
showRoot="false"
verticalScrollPolicy="{ScrollPolicy.AUTO}"
/>
where the e_ProcessData() function looks like this (I used
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=c
elleditor_073_16.html#202105 as a guide) :
quote:
public function e_ProcessData(event:ListEvent):void
event.preventDefault();
userTree.editedItemRenderer.data.@value =
ItemRendererUsers(event.currentTarget.itemEditorInstance).curVal;
userTree.destroyItemEditor();
userTree.dataProvider.notifyItemUpdate(userTree.editedItemRenderer);
} // END OF e_ProcessData()
I attached the rest of the files because they're a little
bit longer.
When I run the program, the data shows up fine when it is
initialized the
very
first time, and I made a test button that just dumps the
contents of the
dataProvider in a trace statement to verify that the data has
been set
properly.
The problem I've run into is whenever the textfield is
edited, the item
that
I've selected jumps around the list.
For example, if I edit the item "STR_USER_NAME" after I
finish the edit, it
will move from the very first position in the Tree to the
bottom of the
Tree.
I traced the contents of the dataProvider and the
dataProvider structure
stays
the same, with the "STR_USER_NAME" at the top, but if I look
at the flex app
in
the web browser, its position is at the bottom of the Tree.
This happens for every other item I try to edit... I read in
the
documentation
that the ItemRenderers are recycled, so it means I should be
checking to
make
sure the initial states are covered, but I'm not sure how
this affects my
application.
Can anyone help me out with this ? Its very confusing - I've
tried making
an
ItemRenderer using pure actionscript, mxml and the
combination you see in
this
example and I always end up with the same behaviour - So I
must be missing
something critical...
// ItemRendererUsers.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
verticalScrollPolicy="{ScrollPolicy.OFF}"
horizontalScrollPolicy="{ScrollPolicy.OFF}"
creationComplete="initItemRendererUsers();"
>
From my FAQ:
Q: I've created a custom itemRenderer component to use in a
List
based component (Datagrid, TileList, HorizontalList, etc.).
When my List
first displays, everything looks fine, but when I scroll it
or change the
dataProvider, some of the itemRenderers show values or
formatting that
aren't right. How do I fix this?
A: List-based components don't draw a renderer for every item
in the
dataProvider. Instead, they create enough to display what is
on screen now,
plus one or two more waiting in the wings. This means they
recycle the
renderers rather than creating new ones when you change
dataProvider or
scroll up and down. When you use a creationComplete event to
set up the
itemRenderer, that event doesn't happen again when the
renderer is used for
a different set of data. The solution to this is to override
the set data
protected function that most components have.
For more information, check out the following resources:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html?devcon=f1
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
Please note, I post this FAQ weekly, and you can find a
permanent copy of it
here
http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf"peterh8234" <[email protected]> wrote in
message
news:gaqttd$kft$[email protected]..
> Yes - the set and get functions are listed down below.
But the quirky
> behaviour
> is the same regardless of whether I override the set and
get functions or
> not.
>
> I noticed there was another variable called listData -
should I be using
> that
> one or the data variable to read and write to the
dataProvider ?
>
> // _data
> [Bindable] public var _data:Object;
> [Bindable("dataChange")]
> //
> override public function get data():Object
> {
> trace('[ItemRendererDefault.GET data()] called for {' +
> _data.attribute("label") + '}.');
> return _data;
> } // END OF get data()
>
> //
> override public function set data(value:Object):void
> {
> _data.@value = inputText.text;
> trace('[ItemRendererDefault.SET data()] called for {' +
> _data.attribute("label") + '}.');
>
> invalidateProperties();
> } // END OF set data()
Your set data needs to set a flag that gets picked up in
commitProperties()
and does your thing that you were doing before in
creationComplete. You
should see examples of this in the links I posted. Instead of
this:
_data.@value = inputText.text;
you should look at implementing IDropInListItemRenderer,
which will allow
you to dynamically determine which field to look at, instead
of hardcoding
it. You also might wind up overwriting the stored value with
a null value
when the List passes the stored value in. I'd encourage you
to really go
through those links I posted and make sure you understand
what they're
saying. The itemRenderer life cycle is one of the hardest
things to
understand, but once you understand it, it makes many things
in Flex much
easier. It's worth investing the time. -
How do I make a Custom DataTip with Custom ItemRenderer
I can't seem to find any documentation or examples of
displaying a dataTip (similar to those used with charting) with my
custom itemRenderer (mxml component). This is for use in a
dataGridColumn. I Could someone give me an example? The closest
I've been able to find is
http://www.mail-archive.com/[email protected]/msg61624.html,
which doesn't say how to do it.
Thanks!http://blog.bigfatstogie.com/?p=42
run the example towards the end of the page -
Can't focus on custom itemRenderer?
I have made a custom itemRenderer doubling as an itemEditor
following the guidelines in the documentation.
However, even though I have set the rendererIsEditor="true",
when tabbing amongst other editable fields, the controls inside the
itemRenderer do not receive focus. I can't help but think this is
an oversight/bug but is there any way to jury-rig the itemRenderer
to focus properly? At the moment my component is simply a CheckBox
inside an HBox.
Anyway, here is my code so you can see for yourself (I have
included a CheckBox as itemRenderer so you can see the *desired*
effect.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.Alert;
[Bindable]
public var dp:Array = [{num:2, bool:true}, {num:3,
bool:false}];
]]>
</mx:Script>
<mx:DataGrid id="test" editable="true"
dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn dataField="num" headerText="num" />
<mx:DataGridColumn dataField="bool"
headerText="Sent"
itemRenderer="mx.controls.CheckBox"
rendererIsEditor="true" editorDataField="selected" />
<mx:DataGridColumn dataField="num" headerText="num"
editable="true" />
<mx:DataGridColumn dataField="bool" headerText="Sent"
rendererIsEditor="true" editorDataField="blorch">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center">
<mx:Boolean id="blorch" />
<mx:CheckBox id="check" selected="{data.bool}"
change="blorch=check.selected" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="num" headerText="num"
editable="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>nevermind... I found the answer a few pages later in the
docs...
you have to implement the IFocusManagerComponent interface
and then override drawFocus as below to set the focus on the
checkBox... hope it works for multiple controls...
<mx:HBox horizontalAlign="center"
backgroundColor="#9933EE"
implements="mx.managers.IFocusManagerComponent">
<mx:Script>
<![CDATA[
override public function drawFocus(focused:Boolean):void {
check.setFocus();
]]>
</mx:Script>
<mx:Boolean id="blorch" />
<mx:CheckBox id="check" selected="{data.bool}"
change="blorch=check.selected"
updateComplete="blorch=check.selected" />
</mx:HBox> -
Forcing custom itemRenderer to updateDisplayList?
Hi, I'm new to flex, and was having some trouble.
In my project, I have a DataGrid, and a
BarChart->BarSeries. The DataGrid and the BarSeries share the
same DataProvider. I've made a custom itemRenderer, so that I can
click on Bars in the BarSeries and have them be highlighted in
black. This is done by having the itemRenderer listen for a CLICK
event, changing a variable that stores what color I want, then
calling invalidateDisplayList() to have updateDisplayList update
the display.
Since DataGrid and BarSeries share the same DataProvider,
elements in the DataGrid match up with elements in the BarSeries.
Therefore, I would like to be able to have a user click on an item
in the DataGrid, and have the associated bar in the BarSeries chart
become highlighted. However, I can't find a way to get the
itemRenderer to call updateDisplayList from outside of the
itemRenderer itself. I thought that calling invalidateDisplayList()
using the BarChart's id or the BarSeries id would force the
itemRenderer for the BarSeries to call updateDisplayList() and
update itself, but by using the debug feature, I have found that it
does not do this. Does anyone have any advice for how I would be
able to click on a DataGrid item and have it highlight the
corresponding item in the BarChart?
Thanks!Hi, I'm new to flex, and was having some trouble.
In my project, I have a DataGrid, and a
BarChart->BarSeries. The DataGrid and the BarSeries share the
same DataProvider. I've made a custom itemRenderer, so that I can
click on Bars in the BarSeries and have them be highlighted in
black. This is done by having the itemRenderer listen for a CLICK
event, changing a variable that stores what color I want, then
calling invalidateDisplayList() to have updateDisplayList update
the display.
Since DataGrid and BarSeries share the same DataProvider,
elements in the DataGrid match up with elements in the BarSeries.
Therefore, I would like to be able to have a user click on an item
in the DataGrid, and have the associated bar in the BarSeries chart
become highlighted. However, I can't find a way to get the
itemRenderer to call updateDisplayList from outside of the
itemRenderer itself. I thought that calling invalidateDisplayList()
using the BarChart's id or the BarSeries id would force the
itemRenderer for the BarSeries to call updateDisplayList() and
update itself, but by using the debug feature, I have found that it
does not do this. Does anyone have any advice for how I would be
able to click on a DataGrid item and have it highlight the
corresponding item in the BarChart?
Thanks! -
How To Update Custom ItemRenderer (Image) on DataGrid Edit
I have an DataGrid with 2 columns, column 1 called "Name" and column 2 called "Actions".
The "Name" column contains editable text and the "Actions" column uses a (inline) custom ItemRenderer which displays 2 icon images ( for Edit and Delete). All works fine. Clicking Edit or Delete calls the corrosponding outerDocument method.
The feature I am trying to add is as follows: when someone double-clicks on the text in the Name column to edit it, I would like the edit icon in the Actions column to ( grow/shrink, change color - or some such indication/reminder to click it ). Not seeing how to do this with the inline ItemRenderer, I created a custom item renderer class and, in that class, use mx:Resize to perform the "grow/shrink". I created a method called "pulse()" and, from within that renderer, all works well. ( for testing, I wired the icons click event to the pulse() method ). However, now I am not sure how to call that ItemRenderers "pulse()" method to perform the effect from the main DataGrid (when the user double-clicks on Name field to edit).
The tried using the DataGrid's "itemEditBegin", which fires correctly, but from that point I am not sure how to access the selected rows edit icon in the "Action" column. ( to call its pulse() ) method.
So any suggestions how I can achieve my end result? Being able to manipulate the edit icon in the "Actions" column, when the user double-clicks (edits) that row's "Name" column?
If I'm going about it all wrong, feel free to offer alternative solutions.
Any help would be appreciated.
Thanks,
~eHi,
Check the BAPI_MATERIAL_SAVEDATA ,in the BAPI is there a table parameter EXTENSIONIN ?
which you can use to pass the values for user defined fields to the BAPI..
Regards
Kiran Sure -
Hello,
I have a requirement to display an image in some rows in the
datagrid based on a flag obtained from the database. To achieve
this, I am using a custom itemrenderer for that particular column
and on a simple check if the value obtained for that particular row
is 1 then I show the image, else I leave it blank (i.e set the
image visibility to false).
Here is a snippet of the code:
Custom ItemRenderer
<mx:HBox .... creationComplete="init();">
<mx:Script>
<![CDATA[
public function init( ):void {
// Check if the flag is 0 or 1 to determine whether to show
or hide the image
if(data.@FLAG == 0) {
img.visible = false;
]]>
</mx:Script>
<mx:Image id="img" source="something.gif" />
</mx:HBox>
Main Application
<mx:Application .........>
<mx:DataGrid dataProvider="{myXML.item}" ... >
<mx:columns>
<mx:DataGridColumn dataField="@FLAG" headerText="Image"
itemRenderer="CustomItemRenderer" />
......... // Other columns
</mx:columns>
<mx:DataGrid>
</mx:Application>
This code seems to work to a certain level. However, here are
some problems that i'm facing and would like to know if this is the
right approach:
1. The check to determine whether to show the image doesn't
function well. It shows the image when the flag is 0 and sometimes
doesn't show the image when the flag is 1.
2. Upon scrolling or sorting of the datagrid the results of
the column randomly get messed up losing the images for the ones it
had before scrolling or sorting and sometimes placing the image in
another row it does not belong to.
Can anyone please guide me if they have worked on a similar
requirement and how it can be achieved. My feeling is that I am
performing the check in the wrong method. I tried doing it by
overriding the set data method but that has the scroll problem and
eventually makes all the images visible initially disappear after
scrolling or sorting.
Any help will be much appreciated.
Thank you.Override the set data property and move the code written in
init() method there:
override public function set data(value:Object):void {
super.data = value;
// Check if the flag is 0 or 1 to determine whether to show
or hide the image
if(data.@FLAG == 0) {
img.visible = false;
once it works, and there is no reason why it shouldn't, read
up more on life cycle of renderers in the docs.
ATTA -
Hi, I have an example of some code that I can't figure out.
What I'm doing may not be the best way to do what I want, but I
believe is should work, and can't figure out why it doesn't. I have
a datagrid with two columns, and the second column uses a custom
itemRenderer to draw multiple circles depending on nested XML data
for that row. In the
set data function of my itemRenderer, I'm trying to get the
width of the column, and use that to calculate where to put my
circle, as a value of 1 to 10.
- The first time, the
set data is called four times where there are three rows
- The first time it's called, this.width is zero
- When resizing column widths, set data is called again - the
first time only for the 2nd and 3rd rows, but with the correct
width
- Subsequent times it's called for all three rows, but the
first row uses the LAST width, not the new width
Any ideas? Here's my code:
Project name is FlexSample, first file is FlexSample.mxml,
then other two files are MyComponents/MyItemRenderer.as and
MyComponents/PointComponent.as
FlexSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
xmlns="*"
width="100%" height="100%"
initialize="init()" horizontalGap="0" verticalGap="0" >
<mx:Script>
<![CDATA[
import mx.events.ResizeEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.http.HTTPService;
import mx.events.*;
[Bindable]
public var myXML:XML=
<ROWSET>
<ROW>
<POINTS>
<POINT>
<POINT_ID>90686</POINT_ID>
<X_VALUE>2</X_VALUE>
</POINT>
<POINT>
<POINT_ID>90806</POINT_ID>
<X_VALUE>8</X_VALUE>
</POINT>
</POINTS>
<NOTE_TX>Points are 2 and 8</NOTE_TX>
</ROW>
<ROW>
<POINTS>
<POINT>
<POINT_ID>90111</POINT_ID>
<X_VALUE>4</X_VALUE>
</POINT>
<POINT>
<POINT_ID>90222</POINT_ID>
<X_VALUE>6</X_VALUE>
</POINT>
</POINTS>
<NOTE_TX>Points are 4 and 6</NOTE_TX>
</ROW>
<ROW>
<POINTS>
<POINT>
<POINT_ID>90333</POINT_ID>
<X_VALUE>1</X_VALUE>
</POINT>
<POINT>
<POINT_ID>90444</POINT_ID>
<X_VALUE>10</X_VALUE>
</POINT>
</POINTS>
<NOTE_TX>Points are 1 and 10</NOTE_TX>
</ROW>
</ROWSET>;
]]>
</mx:Script>
<mx:DataGrid width="100%" height="100%" id="dgMain"
dataProvider="{myXML.ROW}"
fontFamily="Verdana" fontSize="10" color="#000066">
<mx:columns>
<mx:DataGridColumn headerText="Note"
dataField="NOTE_TX"/>
<mx:DataGridColumn headerText="Points" dataField="POINT"
id="dgcPoints"
itemRenderer="MyComponents.MyItemRenderer"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
MyItemRenderer.as
// ActionScript file
package MyComponents {
import mx.controls.*;
import mx.core.*;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.*;
import flash.display.*;
import mx.core.*;
import mx.controls.*;
import flash.events.*;
import mx.managers.PopUpManager;
import mx.events.*;
public class MyItemRenderer extends mx.core.Container
implements IListItemRenderer{
public function MyItemRenderer() {
super();
override public function set data(oValue:Object):void {
this.removeAllChildren();
//oValue contains whole ROW in XML format...
var n:int = 0;
if(this.width==0){
trace("set data:width 0!");
if (oValue != null && this.width>0) {
var m:int = this.getChildren().length;
var nWidth:int = this.width;
var xXML:XML = new XML(oValue);
for(var s:String in xXML.POINTS.children()){
var nXValue:int = xXML.POINTS.children()[s].X_VALUE;
//Total width is from 0-9, padding of 5 on left and right to
account for circle width
var n:int = (((nXValue -1)/10) * (this.width-10)) + 5;
trace("set data: Width:" + this.width + " XValue:" + nXValue
+ " X:" + n);
var u:PointComponent = new PointComponent(0x0000EE, n);
this.addChild(u);
PointComponent.as
package MyComponents
import mx.core.UIComponent;
import mx.controls.Alert;
public class PointComponent extends UIComponent
public function PointComponent(pnColor:uint, pnX:int){
super();
graphics.clear();
graphics.beginFill(pnColor);
graphics.drawCircle(pnX, 10, 7);
}A complete runnable example, that's great, I will give it a
try.
In the meantime, for "...set data is called four times where
there are three rows...", I have noticed this as well but have no
explanation. The first time, the "value" object is "null", so I
always wrap the code in if (value != null) {}
I'll post when I get a chance to look at your sample.
Tracy -
Custom ItemRenderer makes the column non editable
Hi Folks,
I have a DataGrid which s editable, I've created a custom ItemRenderer to deal with special format needed for Date variables, for that I extended the mx:Text class in order to get access to the listData.dataField variable.
The problem is that this makes the column non-editable, the other column in the table are editabe.
When I used a VBox container the column was editable however I didn't get access to the listData, which I need for the dataField variable.
Any help will be appreciated.
Thanks,
MR.
Here is the my DateItemRenderer code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import aslib.common.Constants;
import aslib.common.Utils;
import aslib.connection.JSONConnector;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListData;
import mx.formatters.DateFormatter;
[Bindable]
private var _dispValue:String;
public function dateStr(val:Object):String {
var innerDt:Date;
if(!(val is Date))
innerDt = Utils.convertDateStr(val as String);
else
innerDt = val as Date;
if(innerDt){
var df:DateFormatter = new DateFormatter();
df.formatString = "DD/MM/YYYY";
var formatedDate:String = df.format(innerDt);
return formatedDate;
}else{
return "";
public override function set data(value:Object):void {
var date:Object = value[(listData as DataGridListData).dataField];
if(date){
_dispValue = dateStr(date);
]]>
</fx:Script>
<mx:text>{_dispValue}</mx:text>
</mx:Text>OK, found the issue, forgot to add 'super.data = value' in the set data method...
-
A DataGrid with a Custom ItemRenderer
Hi all,
I have a DataGrid whose DataProvider is bound to a simple Array. I have a custom ItemRenderer that includes a button that can remove the item itself (I don't want two separate columns with a remove button in one of them). However, I don't understand the behaviour - clicking the button rearranges the data in the DataGrid and sometimes duplicate the entries! See the example attached. Any idea what's happening?
Martin.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete();" xmlns:local="*">
<mx:Script>
<![CDATA[
[Bindable]
public var _data : Array;
protected function onCreationComplete() : void {
_data = new Array();
_data.push(1, 2, 3, 4, 5);
]]>
</mx:Script>
<mx:VBox>
<mx:DataGrid dataProvider="{_data}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="dataLabel.text = String(data);">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.controls.listClasses.BaseListData;
protected var _listData : BaseListData;
public function get listData() : BaseListData {
return _listData;
public function set listData(d : BaseListData) : void {
_listData = d;
protected function onClick(e : Event) : void {
var dp : ArrayCollection = (owner as DataGrid).dataProvider as ArrayCollection;
dp.removeItemAt(listData.rowIndex);
]]>
</mx:Script>
<mx:Label id="dataLabel" width="100%" />
<mx:Button click="onClick(event);"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Application>creationComplete is rarely used in renderers. See the itemrenderer posts on my blog
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui
Maybe you are looking for
-
Table Archiving in Oracle 10g database
Hi Friends, We are facing performance problem and large size of tables like FAGLFLEXA, BALDAT etc. Now we want to archive the tables, please help us and if any one has done this activity please share it. In particular we want to archive tables ACCTIT
-
Blank space at bottom of page in FF
I was sent some code to put a CMS system behind. But on testing the content on the div elements I have found I have blank space on the bottom of the page. I know this is caused by position:relative; but I thought using this was the correct way to dis
-
Create volumes on VMware datastore
Hi, I have followed the vova documentation and deployed openstack in a testing environment. I have created ubuntu images and using that I can launch new instances which seems to be working well. After launching the instance, I can see a folder with t
-
Hello, i hope somebody can help me. My mail program won't open, and says that i might have to reinstall the program. In the message there is a big describtion of the the problem - i have pasted it below. The message also says that i can try to reinst
-
Error in reading Livecache in Parallel
Dear All, We have a Z program which uses the function module '/SAPAPO/TS_DM_GET' to read the live cache data. In SCM 4.0 the program was working fine when executed in parallel or standalone. But in SCM 7.0 if we execute the same program in pa