Datagrid combobox as itemrenderer problem.

Hi All,
     I have different problem. i have a datagrid with10-20 rows. Different item renderers in all columns(6 - 10 columns). In that a single column has combobox as item rederer.
     I have to serve different dataprovider for each row's combobox. I assigned dataprovider by overriding data property. is this right?.
     while my datagrid has scrollbar frequently my rows are refreshing. This makes bad my app.
     Please help me.

Yes, what you are doing is right, if you think that once the data provider is set on the combobox, and it does not change(except the selected value) then do not assign the data provider from override.
I would create a dirty flag in the combo itemrend and set this to true once the dataprovider is set on the combo, and will not set the dp again when the override data is called by looking at this dirty flag.

Similar Messages

Dynamic datagrid rowHeight and itemRenderer problem

Hi guys,
Long time listener; first time caller....
I have had a look around the forums here and i can see there are a lot of similar issues to the one i'm currently having but not so many solutions. Not sure if i'll have any better luck with my question but here goes...
My issue is to do with the row height of a datagrid row not matching up properly with the height of the custom iterm renderer used on a column.
The item renderer consists of an HBox containing an image and a textArea. The image will not always be present and the text area can contain a couple of words or many lines of text.
I have overridden the measure function of the item render in which i am manually setting the HBox's height and measuredHeight.
Problem is that i have to find some way of triggering a redraw of the datagrid AFTER if have set the item renderers height, but i dont seem to be able to directly access the in-line renderer from the parent class.
If anyone could throw any suggestions my way it would be greatly appreciated!
thanks '
Dave

Ok so here's the sample code...
****Renderer*****
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
horizontalAlign="
left" verticalAlign="
middle" horizontalGap="
0"verticalGap="
0"xmlns:mx="
http://www.adobe.com/2006/mxml" horizontalScrollPolicy="
off"verticalScrollPolicy="
off"width="
100%" height="
100%"resize="measure()"
borderColor="
green"borderStyle="
solid"
>
<mx:Metadata>[
Event(name="gridRowHeightChange", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.events.ResizeEvent;
import flash.events.Event;
Bindable] public var showLocalPartImage:Boolean = false;
override public function set data(value:Object):void
     super.data = value;
     lblPartNum.text = data.label;}
override protected function measure():void
     super.measure();
     if(lblPartNum.text != "" && lblPartNum.width > 0)     {
          lblPartNum.validateNow();          lblPartNum.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT;
          lblPartNum.height =
          this.height = measuredHeight = lblPartNum.mx_internal::getTextField().height;
          dispatchEvent(
new Event("gridRowHeightChange"));     }
]]>
</mx:Script>
<mx:Image id="imgLocal" horizontalAlign="center" verticalAlign="middle" visible="false" width="{0}"/>
<mx:TextArea id="lblPartNum" width="{this.width - imgLocal.width - 4}" height="100%" editable="false" verticalScrollPolicy="off" />
</mx:HBox>
****EndRenderer*****
****DataGrid****
public function measureGrid(event:Event):void{
shoppingCart.removeEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);
shoppingCart.invalidateList();
shoppingCart.addEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);
<mx:DataGrid id="shoppingCart"width="
100%" height="100%"dataProvider="
{_order.orderItems}"allowMultipleSelection="
true"sortableColumns="
true"variableRowHeight="
true"doubleClickEnabled="
true"doubleClick="selectPartHandler(event)"
paddingRight="
5"editable="
false"
>
<mx:columns>
<mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>
<mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>
<mx:DataGridColumn minWidth="240" width="270" dataTipField="description" dataField="description" headerText="Description"editable="
false" wordWrap="true">
<mx:itemRenderer>
<mx:Component>
<controls:DescriptionShoppingCartRenderer showLocalPartImage="
{!(outerDocument.displayUnderline)}" gridRowHeightChange="{outerDocument.measureGrid(event)}">
</controls:DescriptionShoppingCartRenderer>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
****EndDataGrid****
Unfortunately the whole code is much too large to fit in here, but here are the main working parts.
I hope this helps.
What i am getting when running this is strange. When i run the first time and when i resize a column, the row height is incorrect, but then when i just click the 'column stretch' arrow (ie the space between the column headers) and dont actually resize at all, the row heights re-calculate and they fit perfectly.
This makes me think that i need to trigger this event manually AFTER the itemRenderer has been calculated.
EDIT: forgot to add the measureGrid function

(URGENT) Skining problem of components (datagrid & combobox)

Hi,
I m using FLASH CS3, I used Datagrid and Combobox component from components panel, and simply add some data inside in that.
setupComboBox();
function setupComboBox():void
    cb.setSize(200, 22);
    cb.prompt = "Select a Credit Card";
    cb.addItem( { label: "MasterCard", data:1 } );
    cb.addItem( { label: "Visa", data:2 } );
    cb.addItem( { label: "American Express", data:3 } );
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.events.DataGridEvent
var dp:DataProvider = new DataProvider();
dp.addItem({col1:"item 1.A", col2:"item 1.B", col3:"item 1.C"});
dp.addItem({col1:"item 2.A", col2:"item 2.B", col3:"item 2.C"});
dp.addItem({col1:"item 3.A", col2:"item 3.B", col3:"item 3.C"});
dp.addItem({col1:"item 4.A", col2:"item 4.B", col3:"item 4.C"});
myDataGrid.addColumn("col1");
myDataGrid.addColumn("col2");
myDataGrid.addColumn("col3");
myDataGrid.dataProvider = dp;
myDataGrid.setSize(300, 200);
myDataGrid.move(10, 10);
It seems working fine.
My problem is , I want two different type of skining of two different component(DataGrid & Combobox). in the same fla.
.. e.g if datagrid have gray color skin type and combobox have black color skin type.
Can any one have any Idea?

Thanks for reply..
@kennethkawamoto2
I already implemented that thing , that u suggest, The Main problem of this component is CellRenderer, what's the solution of it ?
If i apply this
cb.setStyle("upSkin", ComboBox_upSkin2);
cb.setStyle("overSkin", ComboBox_overSkin2);
cb.setStyle("downSkin", ComboBox_downSkin2);
Its change the header of Comobo box pattern, but the rest part e.g cell is remaining the same.
I tried like this also
cb.setStyle("upSkin",CellRenderer_upSkin2)
cb.setStyle("downSkin",CellRenderer_downSkin2)
cb.setStyle("overSkin",CellRenderer_overSkin2)
cb.setStyle("disabledSkin",CellRenderer_disabledSkin2)
cb.setStyle("selectedDisabledSkin",CellRenderer_selectedDisabledSkin2)
cb.setStyle("selectedUpSkin",CellRenderer_selectedUpSkin2)
cb.setStyle("selectedDownSkin",CellRenderer_selectedDownSkin2)
cb.setStyle("selectedOverSkin",CellRenderer_selectedOverSkin2)
but it gives error........
TypeError: Error #2007: Parameter child must be non-null.
    at flash.display::DisplayObjectContainer/addChildAt()
    at fl.controls::BaseButton/drawBackground()
    at fl.controls::LabelButton/draw()
    at fl.core::UIComponent/drawNow()
    at fl.controls::List/drawList()
    at fl.controls::List/draw()
    at fl.core::UIComponent/drawNow()
    at fl.controls::List/scrollToIndex()
    at fl.controls::SelectableList/scrollToSelected()
    at fl.controls::ComboBox/open()
    at fl.controls::ComboBox/onToggleListVisibility()
When u click on combobox to open it up. The Component Assets of datagrid and combobox are the same so I am not able to apply different skin pattern of this two different component ..
Still is there any way pls let me ..

How to get the Dataprovider var of a Datagrid inside an ItemRenderer?

Hey,
I have two Datagrids, both of them have a bindable dataprovider. My first Datagrid has an ItemRenderer. I would like to update my dataprovider inside the ItemRenderer. Is it possible? My ItemRenderer is a Combobox. Everytime I change the Combobox I would like to update/refresh the dataprovider for my datagrid. I tried it with but it doesn´t work.(parentDocument
as filename).dataProvider.source=sth.;
(parentDocument as filename).dataProvider.refresh();
Regards
Kat

The parent document of an itemRenderer is not always what you expect.
You're better off using the listOwner property on listData.
http://livedocs.adobe.com/flex/3/langref/mx/controls/ComboBox.html#listData
http://livedocs.adobe.com/flex/3/langref/mx/controls/listClasses/BaseListData.html#owner

Drag-n-Drop problem in DataGrid with custom ItemRenderer

Hi,
I am trying to use a DataGrid to set the ordering of a group
of images.
I want to do this with a DataGrid which will show me some
properties of
the images in different columns including a thumbnail of the
image. The
problem is when I use any custom renderer for any column, the
draging is
not working. It works fine when I don't use any ItemRenderer.
My code looks something like this:
<mx:DataGrid dragEnabled= "true" dropEnabled= "true"
dragMoveEnabled= "true">
<mx:columns>
<mx:DataGridColumn headerText="Thumb" itemRenderer=
"component. GridImageRenderer"/>
<mx:DataGridColumn headerText="Current name" width="100"
itemRenderer= "component. NameRenderer" />
<mx:DataGridColumn headerText="New name" width="150"
dataField="nameNew" />
</mx:columns>
</mx:DataGrid>
Can anyone please give me any clue how to fix this?
Regards,
~ Arif

Hello again, BinaryDigit.
I thought we need to apply Drag n drop API for this case.
Without wasting too much time,
I tried out as your source code from the previous reply,,,
Instead of getting it clearly, I got another Confusion... (pardon me)
Let me clarify this with the examples given,
I try to adopt previous source code
and it was this detail;
1) Taking the X and Y coordinate (from the mouseEvent) Plus jLabel1 coordinate (both X and Y).
2) Positioning a Coordinate taken to JLabel1
3) Passing the Coordinate taken to jLabelX, and jLabelY.
The problem found was;
if we make 3rd become comments, now the jLabel1
could works!
I mean, jLabel1 could be dragged to another Coordinate (by dragging it to another location)
But,
if we un-comments the 3rd source code,
The effect would be no movement of the jLabel1.
BinaryDigit, is this related to the layout you mentioned before?
Correct, DarrylBurke! :D
I thought also the same thing,
but setLocation() give me another Confusion....
the coordinate seems taking its basement as a reference.
I mean, the jLabel Coordinate's is referenced
from the panel where the jLabel is attached to,
rather than the Coordinate's of the base jFrame (main base -what should I call this?)
Sorry, the Details number three (3) is my preference, Since I wanted to see the X, Y movements also.

DataGrid ComboBox itemRenderer/editor not updating dataProvider properly

I have a DataGrid with one column using a ComboBox as the itemRenderer. The column is editable but if you trace the dataProvider, the changes lag behind by one. So uncheck two row's ComboBox and the dataProvider only shows one row's data updated.
Any ideas?

Yep, its a CheckBox, too early in the morning.
Another component (DataGrid) will be filtered depending on what rows in the ADG have their CheckBox checked, so leaving the row may be too late.
Here is the code I have so far. In the itemEditEnd event handler I'm trying to set the field in the dataProvider manually, but it causes an infinite loop. preventDefault and stopImmediatePropagation don't help.
----- CheckBoxRenderer.mxml -----
<?xml version="1.0"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      import mx.controls.CheckBox;
      [Bindable] public var newSelected:Boolean;
    ]]>
</mx:Script>
<mx:CheckBox id="selectedChbx" selected="{data.FLAG}"/>
</mx:VBox>
----- mainapp.mxml -----
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      import mx.events.AdvancedDataGridEvent;
      import mx.collections.ArrayCollection;
      import mx.controls.CheckBox;
      [Bindable] private var transactions:ArrayCollection = new ArrayCollection([
        {orderID: "33725", theirOrderNumber: "10170", name: "Bob Smith", SKUs: "21", PICKS: "50", FLAG: "true"},
        {orderID: "33729", theirOrderNumber: "10172", name: "Mary Wilson", SKUs: "3", PICKS: "6", FLAG: "true"},
        {orderID: "33730", theirOrderNumber: "10176", name: "Fred Carson", SKUs: "1", PICKS: "2", FLAG: "true"},
        {orderID: "33731", theirOrderNumber: "10177", name: "Morten Hills", SKUs: "5", PICKS: "16", FLAG: "true"},
        {orderID: "33732", theirOrderNumber: "10178", name: "Bill Trundy", SKUs: "5", PICKS: "34", FLAG: "true"},
        {orderID: "33734", theirOrderNumber: "10179", name: "Ocean Boat Supply", SKUs: "8", PICKS: "19", FLAG: "true"},
        {orderID: "33736", theirOrderNumber: "10180", name: "Janet Aberdine", SKUs: "5", PICKS: "18", FLAG: "true"},
        {orderID: "33737", theirOrderNumber: "10181", name: "Kim Restine", SKUs: "2", PICKS: "6", FLAG: "true"},
        {orderID: "33738", theirOrderNumber: "10182", name: "Thomas Overby", SKUs: "5", PICKS: "12", FLAG: "true"}
      public function handleGridChanged(evt:AdvancedDataGridEvent):void{
        var newData:Boolean = CheckBoxRenderer(evt.currentTarget.itemEditorInstance).newSelected;
        trace(evt.rowIndex);
        var obj:Object = transactions.getItemAt(evt.rowIndex);
        trace("BEFORE: " + obj.FLAG);
        obj.FLAG = newData;
        trace("AFTER: " + obj.FLAG);
        transactions.setItemAt(obj, evt.rowIndex);
        return;
        evt.preventDefault();
        evt.stopImmediatePropagation();
//        for each(var item:Object in transactions){
          //trace(item.FLAG);
    ]]>
</mx:Script>
<mx:Label fontSize="12" text="Bulk Print / Pull - Step 1"/>
<mx:HBox>
    <mx:AdvancedDataGrid id="dgTransactions" dataProvider="{transactions}"
      fontSize="12" editable="true" sortableColumns="true" height="500"
      width="100%" itemEditEnd="handleGridChanged(event);">
        <mx:columns>
          <mx:AdvancedDataGridColumn dataField="orderID" headerText="WMSOID" width="100"
            editable="false" textAlign="center"/>
          <mx:AdvancedDataGridColumn dataField="theirOrderNumber" headerText="Order #"
            textAlign="center" width="130" editable="false"/>
          <mx:AdvancedDataGridColumn dataField="name" headerText="Customer"
            width="125" textAlign="left" editable="false"/>
          <mx:AdvancedDataGridColumn dataField="SKUs" headerText="SKU's"
            width="75" textAlign="right" editable="false"/>
          <mx:AdvancedDataGridColumn dataField="PICKS" headerText="Picks"
            width="75" textAlign="right" editable="false"/>
          <mx:AdvancedDataGridColumn dataField="FLAG" headerText="I" width="20" textAlign="center"
            editable="true" rendererIsEditor="true" editorDataField="newSelected"
            itemRenderer="CheckBoxRenderer"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
    <mx:DataGrid>
    </mx:DataGrid>
</mx:HBox>
</mx:Application>

DataGrid Combobox dataprovider erasing items

I have a DataGrid that is linked to an array of custom data objects which I call a seriesList. You are supposed to be able to choose the name of each series via a combobox in the datagrid. It works fine except when the user selects the combobox and then clicks somewhere else in the interface, which closes the combobox and erases whichever item is previously selected!


<mx:DataGrid id="seriesTable" color="black" fontSize="9" rowHeight="30" editable="true" resizeEffect="slow" rollOverColor="#CCCCCC"
    selectionColor="#999999" dataProvider="{axis.seriesList}" width="100%"
    rowCount="{axis.seriesList.length > 2 ? axis.seriesList.length : 2}" >
        <mx:columns>
             <mx:DataGridColumn dataField="name" headerText="Name" width="280" headerStyleName="centered" id="nameColumn"
                     rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.SeriesBoxRenderer"/>
        </mx:columns>
</mx:DataGrid>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" horizontalAlign="center">
   <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            // Define a property for returning the new value to the cell.
            public var result:String="";
            [Bindable]
            private var dpValue:ArrayCollection;
            private function init():void {
                // list of possible names to choose from for this series
                dpValue = mx.core.Application.application.seriesArray;
            // Override the set method for the data property.
            override public function set data(value:Object):void {
                if (dpValue == null) init();
                super.data = value;
                if (value != null)     {
                    var currentValue:String = value.name;
                    var len:int = dpValue.length;
                    for (var i:int = 0; i < len; i++) {
                        if (dpValue[i].name == currentValue) {
                            editor.selectedIndex = i;
                            return;
                editor.selectedIndex = 0;            }
            public function onChange():void {
                var index:int = editor.selectedIndex;
                result = dpValue[index].name;
                data.name = dpValue[index].name;
        ]]>
    </mx:Script>
     <mx:ComboBox id="editor" textAlign="left" labelField="name" dataProvider="{dpValue}" change="onChange()"/>
</mx:VBox>

I'm thinking the problem may be the dataprovider for the combobox. This array is also shared with another List component in another tab on the interface. The reason I am thinking this is because I have another item renderer which uses a combobox and does not erase itself when you click nothing. Here is the code for that item, and the only difference I can see between this code and the code that doesn't work is the fact that the dataprovider is shared with another part of the code. Still not sure how to fix this, however.
          [Bindable]
            private var dpValue:ArrayCollection;
            private function init():void {
                dpValue = mx.core.Application.application.aquisitionOptions.lastResult.system.data;
                for ( var i:int=0; i<dpValue.length; i++ ) { //loop over the items in the dataProvider
                   if (dpValue[i].id == data.aquisitionID) { //compare desired value to current item.data value
                        editor.selectedIndex = i; //set the seletedIndex of the combo box
                        data.aquisitionDescr = dpValue[i].name;
                        break;
          // Override the set method for the data property.
            override public function set data(value:Object):void {
                super.data = value;
                if (dpValue == null) init();
                if (value != null)     {
                    var currentValue:String = value.aquisitionDescr;
                    trace ("\n current: ", currentValue);
                    var len:int = dpValue.length;
                    for (var i:int = 0; i < len; i++) {
                        if (dpValue[i].name == currentValue) {
                            editor.selectedIndex = i;
                            return;
                editor.selectedIndex = 0;
            public function onChange():void {
                var index:int = editor.selectedIndex;
                result = dpValue[index].name;
                data.aquisitionDescr = dpValue[index].name;
                data.aquisitionID = editor.selectedItem.id as String;
        ]]>
    </mx:Script>
     <mx:ComboBox id="editor" labelField="name" dataProvider="{dpValue}" change="onChange()"/>

<mx:DataGridColumn dataField="aquisitionDescr" headerText="Data Aquisition" width="160" headerStyleName="centered" id="acquisitionColumn"
                     rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.AquisitionBoxRenderer"/>

Dynamic dataprovider in Datagrid combobox.

Hi,
i am using Flex 3. I have a data grid with first two rows having item renderers as ComboBoxes. What i want to implement is that, depending on my selection in the first combobox, the respective second combobox should get a dataprovider of my choice.
For e.g.
If I select the 1st combobox as India, then the adjacent combobox should have the cities in India.
If I select the 1st combobox as France, then the adjacent combobox should have the cities in France.
I dont have the values in any local variables. The values must be fetched at runtime because the list of Countries(in first combobox) is very exaustive so fetching the list of all cities for all countries would not be right. So for each selection of country i have to make an http service call to fetch the corresponding city list.
My question is how do i dynamically give the cities as dataprovider to each of the combo boxes in each row.
Hope my description is comprehensible enough.
Thanks
Sid.

HI,
Can you check the below code. If that is what you need.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                 layout="vertical"
                 creationComplete="application1_initializeHandler(event)">
     <mx:Script>
         <![CDATA[
             import mx.collections.ArrayCollection;
             import mx.events.FlexEvent;
             // Defines your collections
             [Bindable]
             public var countriesData:ArrayCollection=new ArrayCollection([{label: 'India'}, {label: 'Brazil'}]);
             [Bindable]
             public var citiesData:ArrayCollection;
             [Bindable]
             public var collection:ArrayCollection=new ArrayCollection();
             protected function application1_initializeHandler(event:FlexEvent):void
                 dataGrid.addEventListener("countryChanged", country_changed_handler);
                 collection.addItem({cityData:citiesData});
            // Change this method to the remote callings.
            // In the resultEvent you will change the citiesData collection.
             protected function country_changed_handler(event:DataEvent):void
                 if (event.data == 'India')
                     dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'Mumbai'}, {label: 'Delhi'}]);
                 else
                     dataGrid.selectedItem.cityData = new ArrayCollection([{label: 'São Paulo'}, {label: 'Rio de Janeiro'}]);
                 dataGrid.invalidateList();
             public function addRow(event:MouseEvent):void{
                 //collection.addItem(new Object());
                 collection.addItem({cityData:citiesData});
             public function dropRow(event:MouseEvent):void{
         ]]>
     </mx:Script>
     <mx:DataGrid id="dataGrid"
                  dataProvider="{collection}">
         <mx:columns>
             <mx:DataGridColumn>
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:ComboBox dataProvider="{this.parentDocument.countriesData}"
                                      labelField="label"
                                      change="combobox1_changeHandler(event)"
                                      selectedIndex="-1">
                             <mx:Script>
                                 <![CDATA[
                                     import mx.collections.ArrayCollection;
                                     import mx.events.ListEvent;
                                    protected function combobox1_changeHandler(event:ListEvent):void
                                         dispatchEvent(new DataEvent("countryChanged", true, true, this.selectedLabel));
                                 ]]>
                             </mx:Script>
                         </mx:ComboBox>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
             <mx:DataGridColumn>
                 <mx:itemRenderer>
                     <mx:Component>
                         <mx:ComboBox labelField="label">
                             <mx:Script>
                                 <![CDATA[
                                          override public function set data(value:Object):void
                                            super.data = value;
                                            var prevSelectedItem:Object = this.selectedItem;
                                            this.dataProvider = data.cityData ;
                                            this.selectedItem = prevSelectedItem;
                                 ]]>
                             </mx:Script>
                         </mx:ComboBox>
                     </mx:Component>
                 </mx:itemRenderer>
             </mx:DataGridColumn>
         </mx:columns>
     </mx:DataGrid>
     <mx:HBox width="299" horizontalAlign="center" horizontalGap="51">
         <mx:Button label="Add" click="addRow(event)"/>
         <mx:Button label="Drop" click="dropRow(event)"/>
     </mx:HBox>
</mx:Application>

Custom ItemRenderer Problem

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

Datagrid ComboBox data repetition

I have made a datagrid and a column which has a ComboBox
control which references a fixe length and data array to display
the dropdown in the grid column. The problemis this array has to be
repeated for every row of data in the grid.
Is there anyway to make the drop down array just on list and
referenced on the dropdown Combox column no matter how many records
there?

Hello Greg,
I think I may have answered with your help my own question:
I recoded the array as follows (and added a TextInput column
in the example):
This way I don't have to repeat the fixed 'aa' array in the
{lst} with literals.
Also I didnt understand that the DataGrid can had a different
dp from the components. Is that right?

Datagrid and multiple ItemRenderer

What I would like to do and haven't been successful is add a column to a Datagrid at runtime. Each cell in that column is going to be different based upon user data. The first column is populated based upon a user query then another query (i.e. RESTful query) is made to mashup some data.
I wanted a button (mashup data) to appear in the column enabled if data was available and disabled if data was not available.
I was doing something like this:
My MXML file has this:
        <mx:DataGrid id="dg" dataProvider="{ModelLocator.getInstance().list}" itemClick="itemClickHandler(event)" left="10" right="0" bottom="0" top="50" editable="true" >
            <mx:columns>
                <mx:DataGridColumn headerText="Name" dataField="name" editable="true" />
                 <mx:DataGridColumn headerText="Data" dataField="someData" itemRenderer="ActionButtonItemRenderer" />
            </mx:columns>
        </mx:DataGrid>
ActionButtonItemRenderer.as file:
    public class ActionButtonItemRenderer extends Button
        public function ActionButtonItemRenderer()
            super();
            label = "Show Data";
        override public function set data(value:Object):void {
            if (null == value.myData) {
                label = "";
                this.enabled = false;
        // Handle the search button event.
        override protected function clickHandler(event:MouseEvent):void
            // Code omitted here...
It works but when I use my mouse wheel to scroll through the records the buttons get all hosed up and the enabled buttons become disabled. It's weird.
Thanks!

You create an ArrayCollection or XMLListCollection and populate it initially with perhaps data that would represent "no data".
Then if your queries return real data, the dataProvider object now "has data".
The itemRenderer does the appropriate thing if there is not is no data.
You don't generate the button in the dataProvider, you just get the label and visible property value etc. from the dataProvider.
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

Datagrid last row flickering problem.

Hi,
I used flex 3.5 datagrid. It is a complex datagrid with lot of itemrenderers and itemeditors.when my datagrid has vertical scroll and when i scroll datagrid, last row keep on flickering.
any idea or solution for this problem?

my grid contains 6 columns. Among 6, some of the column texts are visible some of them hided.
it is only happens to last row of the Datagrid.
This is happened when i scroll my datagrid vertically.

Datagrid combobox itemEditor event

I have a datagrid populated by managed arraycollection by
dataservice. One of the columns has an item Editor using a
component ComboBox. Sofar all is fine but I have not been able to
define an event that will be triggered when the combobox has
changed and a new value is selected. I have tried itemEditEnd which
will only trigger if one clicks outside the itemEditor which
generates an "other" event. "Change" method of DG will trigger an
event before any selection is made. Any ideas? I need the trigger
to commit the change to database.
Thx

Hi,
I'm sorry to bug you with a non-technical discussion, but I
am a recruiter in San Diego. My client is in need of 3 Senior Flex
Developers for their project. I have had an extremely rough time
finding someone for this position. Would you be interested in this
position, or do you know of anyone that might be? We do pay
referral fees. This position may be open to telecommuting.
Job Description:
They are in the midst of a major re-architecting of their
Corporate Management system utilizing many cutting edge
technologies. As it relates to the position they are using Flex as
their UI.
This is either a contract, or a full-time position.
Pay: Market Rate
Thanks for your help!
Natalie Fay
Outsource Technical
www.ostechnical.com
[email protected]
858.874.5637

DataGrid/ComboBox/ItemEditor

Hi all,
I've got a DataGrid, "dg", whose dataprovider is set to an
array of "thing" objects.
Each row then has several columns using a custom renderer, a
canvas containing a combobox. The combobox's dataprovider is set to
thing's array of "subthing" objects. The editorDataField for each
row is set to "selectedItem".
When a combobox is changed, I need to set Thing.subthing =
combobox.selectedItem. Unfortunately I can't make this happen.
If I don't include a "selectedItem" variable within the MXML
component definition, I get the following RTE on focus out of the
combobox:
ReferenceError: Error #1069: Property selectedItem not found
on renderers.worksheet.SubThingComboBox and there is no default
value.
Once I add selectedItem, then I get this RTE:
ReferenceError: Error #1069: Property null not found on Thing
and there is no default value.
Basically, how do I map the selectedItem of the combobox to
Thing.subThing?

The override set data() method returns a reference to the
current "thing". On combo box change, you can use this reference to
set the property in the thing item.
If you do not know what the "overide set data()" method is,
you need to study some more on itemRenderers. There are several
examples on cflex.net and many elsewhere on the net.
Tracy

ComboBox Lable position problem

Hello!
I am using Flex 4 and an MX ComboBox because I can set rowCount.
Problem is, using Lucida font, the text is badly positioned vertically as shown in the image.
How can I fix this please?

Thank you!

Datagrid combobox as itemrenderer problem.

Similar Messages

Maybe you are looking for