Checkbox rendere in datagrid

Hi all,
I have a datagrid with checkbox as renderer.
after selecting few checkboxes,if i scroll the datagrid
checkboxes are selected at random.
my renderer code is attached..
thanks

Hi karnatis,
Just like Alex told you, we can do it easily by
for (var i:int = 0; i < dg.selectedItems.length; i++) {
     Alert.show(dg.selectedItems[i].lastName);
dg.selectedItems -> contains all checked items
dg.selectedItem    -> contains last checked item
Hope this help!

Similar Messages

Checkbox renderer problem

Hi all,
I have a checkbox renderer in datagrid .The dataprovider does
not have the selected property of the checkbox.
how do i retain the selection of the checkbox,when i scroll
the datagrid?
please help.
Thanks

thank u very much..
in set data method,i added the following
override public function set data(value:Object):void{
if(value != null){
super.data = value;
if((data.chkselected==null) ||
(data.chkselected=="undefined")){
data.chkselected = false;
this.selected = data.chkselected;
this works when i change checkbox selection in each row..
i have another problem..can u please help me in solving this
i have a checkbox as header renderer..
On click, it is selectiing/deselecting only the checkboxes of
rows which are visible and when i scroll the datagrid,other
checkboxes are not selected/deselected
thanks

Datagrid checkbox renderer refresh?

I am using a checkbox renderer for one of the columns in a
flex datagrid.
When i scroll up or down, the checkboxes i have alread
clicked, change to different boxes (records). ????
Not sure if this is a redraw issue. Tried to validate, but
did not help.
Please help.

When we add a customized checkbox column to a datagrid in .net (windows application) , the default property allows to check or uncheck the column using a double click. On the first click it selects the column and on the second click the column is either checked or unchecked.
To change this default property, we need to handle the click event on grid and modify the selected cell value. Here is the sample code to achieve this.
[C#.NET VS 2003 , Code to add checkbox column to grid using table style property]
dgItemDetails.TableStyles.Clear(); // clears the tablestyle (dgItemDetails is the name of grid)
DataGridTableStyle dgt = new DataGridTableStyle();
dgt.MappingName = "ItemDetails";
DataGridBoolColumn dgbCol = new DataGridBoolColumn(); // creates the checkbox column
dgbCol.MappingName = "Select";
dgbCol.HeaderText = "";
dgbCol.Width = 40;
dgbCol.AllowNull = false;
dgbCol.Alignment = HorizontalAlignment.Left;
dgt.GridColumnStyles.Add(dgbCol);
dgItemDetails.TableStyles.Add(dgt); // add
Eliza

Problem with checkbox item renderer in datagrid

I have a data grid having check box as an item renderer. I have viewed many posts in this forum but nothing useful in my case. I am failed to bind my datagrid itemrenderer checkbox with the field of dataprovider i.e. listUnitMovement.CHECK_PATH. Then I have to traverse data provider to check which checkboxes are checked.
[Bindable]
var listUnitMovement:XMLList=null;
In a function call
public function init(event:ResultEvent):void
    listUnitMovement=event.result.unitmovement;
     <mx:DataGrid id="dg_country"
                           dataProvider="{listUnitMovement}"
                              enabled="true">
                            <mx:columns>
                               <mx:DataGridColumn>
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:CheckBox selectedField="CHECK_PATH" />
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                                <mx:DataGridColumn headerText="Latitude" dataField="NEW_LAT" visible="false"/>
                                <mx:DataGridColumn headerText="Longitude" dataField="NEW_LONG" visible="false"/>
                               <mx:DataGridColumn>
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:Button label="Details"/>
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                            </mx:columns>
                        </mx:DataGrid>

Hi,
Do you want to just check/uncheck the checkboxes based on the CHECK_PATH field.
Do you want something like this...
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;[
Bindable]
private var listUnitMovement:ArrayCollection = new ArrayCollection([{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:false,NEW_LAT:133.233,NEW_LONG:702.22}]);]]>
</mx:Script>
<mx:DataGrid dataProvider="{listUnitMovement}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="CHECK_PATH" change="data.CHECK_PATH=selected" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="NEW_LAT"/>
<mx:DataGridColumn dataField="NEW_LONG"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Please let me know clearly what's your problem...Do you want to just bind the check box based on XmlList or something else..?
Thanks,
Bhasker Chari.S

Datagrid checkbox renderer

Hi all,
I have a datagrid with checkbox as item renderers and
checkbox as header renderer in one of its columns.
I created a custom datagrid column extending from datagrid
column.
The visible property of checkbox in a row is based on a
condition.
All works fine if there are only 7 rows in a datagrid,i get
three rows with checkbox and the other without checkbox.
but,if i have more than 7 rows(with vertical scrollbar) i see
all the checkboxes visible which should not happen.
Thanks

thanks for the reply sreenivas
but i have already done that..
here is my set data method
override public function set data(value:Object):void{
if(value != null){
super.data = value;
checkDelPermission(null);
public function checkDelPermission(event:FlexEvent =
null):void{
var checkpermissioninstance:CheckPermission = new
CheckPermission();
checkpermissioninstance.permissions = [8];
if(data.hasOwnProperty("permission")){
checkpermissioninstance.permBit = data.permission;
var delpermission:ArrayCollection =
checkpermissioninstance.getPermissions()
if(delpermission!=null){
if(delpermission[0]==true){
this.visible = true;
else{
this.visible=false
else{
this.visible = false;
MittoApp.logMessage("permission"+data.permission +" and
visible=="+this.visible);
the message is always printed with the correct values but the
display is not.
Thanku

Datagrid and checkbox renderer

I'm looking to have a datagrid have a dataprovider from a coldfusion remote object in which i want to save a boolean value for checkboxes. i want the user to be able to select and deselect checked items and submit to a back end DB where their changes are saved.
Then on load I want the checkbox value to be selected or deselected based on their previously saved prefs. Checkbox item renderers are a re-occuring problem for me. There seems to be so many ways to implement them and so far using online examples they don't show how to save results to a DB and reload them based on a DB. please help
code i'm currently trying to use (where ITEM_TYPE is a DB value of true or false) and the getCheckList.lastResult is made up of 7 rows with ITEM_TYPE and DESCRIPTION (the checkbox description for the user):
<mx:DataGrid id="myDG" dataProvider="
{parentApplication.ATService.getCheckList.lastResult}" variableRowHeight="
true" width="
500" height="250" editable="
true">
<mx:columns>
<mx:DataGridColumn textAlign="center" width="25" dataField="ITEM_TYPE" itemRenderer="
mx.controls.CheckBox" rendererIsEditor="
true"editorDataField="
selected"/>
<mx:DataGridColumn dataField="DESCRIPTION" />
</mx:columns >
</mx:DataGrid>

I tried that Blog. It doesn't show how to preload from a database the checked or unchecked values. I did figure it out on my own though after some hard work. Using the <mx:Component> tag is nice... but i found it can't reference anything in the component its in b/c anything under <mx:Componenet> is not of the same class. trick here is to add the parentDocument. prefix and you call anything you want. also found that a DB string value (or varchar) of "true" or "false" is not recognized as boolean by flex. So to check or uncheck based on a DB result set from a CF componenet you need to actually check the value. I've attached my sample code for anyone else having trouble with this:
<mx:DataGrid id="chkListDG" dataProvider="{parentApplication.ATService.getCheckList.lastResult}"width="
100%" height="100%">
<mx:columns>
<mx:DataGridColumn textAlign="center" headerText="" dataField="CHKLIST_ID" width="30">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{data.CHK_STATUS == 'true'}" click="dbChange()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function dbChange():void{
if (parentDocument.chkListDG.selectedItem.CHK_STATUS == 'false'){parentDocument.chkListDG.selectedItem.CHK_STATUS =
'true'}
else{parentDocument.chkListDG.selectedItem.CHK_STATUS =
'false'};
parentApplication.ATService.chkListSave(parentDocument.chkListDG.selectedItem.CHKLIST_ID,p arentDocument.chkListDG.selectedItem.CHK_STATUS);
]]>
</mx:Script>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Description" dataField="DESCRIPTION"/>
<mx:DataGridColumn headerText="Value" dataField="CHK_STATUS"/>
</mx:columns>
</mx:DataGrid>

Checkbox in a datagrid column header not working properly

Hi,
I have rendered a checkbox in the header of a datagrid column
using headerRenderer property. That column also has all entries as
checkboxes. What I want to do is that on checking the header
checkbox, all checkboxes should get checked. Though I am able to do
this BUT the header checkbox remains uncheched in the whole
process! Whereas, if I remove this eventHandler from it, then the
header checkbox shows the correct state i.e., show checked on
checking & unchecked on unchecking!
Any input?
Thanks in advance,
Cheree

hi many thanks for looking at my problem
what i am trying to do is show a column if the proc_id is greater than 2
it just looks a bit silly when a user configures the file (but not submitted it for loading)
the file cnt is null or zero - i had hoped not to show this - the proc_id is found from the report query !

Use spacebar to check/uncheck a checkbox in a datagrid.

I have a DataGrid that has checkbox in the first column. The user wants to be able to check/uncheck the checkbox when he selects a row, by mouse or up and down keys, and hits the spacebar. Currently the spacebar functions if the last thing that the use has clicked on is the Checkbox. If the user clicks in the cell where the checkbox in located(not the checkbox itself), the spacebar won't do anything.
<mx:TabNavigator>
     <mx:VBox>
          <ms:datagrid id="lgGrid" dataProvider="{this.lData}">
               <mx:columns>
                    <mx:Array>
                         <mx:DataGridColumn dataField="vis" id="dfID" sortable="false">
                              <mx:itemRenderer>
                                   <mx:Component>
                                        <mx:CheckBox click="data.vis = !data.vis" paddingLeft="4"/>
                                   </mx:Component>
                              </mx:itemRenderer>
                          </mx:DataGridColumn>
                          <mx:DataGridColumn dataField="name"/>
                    </mx:Array>
               </mx:columns>
          </ms:datagrid
   </mx:VBox>
</mx:TabNavigator>

Your TableModel has to indicate that the column is editable. Your TableModel also has to implement setValueAt() so that when the user changes the value, it updates the data.
The table will know to use it's own boolean renderer/editor for that column because it knows what to do when a column returns a Boolean.

Checkbox renderer

Hi
i have a data grid with one of its column having check box as
renderer.
check box is visible for only some rows based on a
condition.and this condition is in a function which is called from
updateDiaplayList() function.
but,the checkbox some how appears twice only for the first
row in the data grid.
the condition function is
public function checkDelPermission():void{
var checkpermissioninstance:CheckPermission = new
CheckPermission();
checkpermissioninstance.permissions = [8];
if(data.hasOwnProperty("permission")){
checkpermissioninstance.permBit = data.permission;
var delpermission:ArrayCollection =
checkpermissioninstance.getPermissions()
if(delpermission!=null){
this.logmessage("==== "+data.id+" =========del permisison
=="+ delpermission[0]);
if(delpermission[0]==true){
this.visible = true;
else{
this.visible = false;
else
this.visible = false;
and updatedisplaylist() is
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth,unscaledHeight);
checkDelPermission();
var n:int = numChildren;
for (var i:int = 0; i < n; i++)
var c:DisplayObject = getChildAt(i);
if (!(c is TextField))
c.x = (unscaledWidth - c.width) / 2;
c.y = 0;
the log message is printed twice for the first row data..and
for all other rows in a datagrid,every thing appears as expected.
and this happens randomly and not alwayss..
Thanks
chandana

thank u very much..
in set data method,i added the following
override public function set data(value:Object):void{
if(value != null){
super.data = value;
if((data.chkselected==null) ||
(data.chkselected=="undefined")){
data.chkselected = false;
this.selected = data.chkselected;
this works when i change checkbox selection in each row..
i have another problem..can u please help me in solving this
i have a checkbox as header renderer..
On click, it is selectiing/deselecting only the checkboxes of
rows which are visible and when i scroll the datagrid,other
checkboxes are not selected/deselected
thanks

How to set a checkbox in a datagrid's itemrenderer

Hello.
I've a spark datagrid. In a column there is a checkbox. In another column (I need to add it dynamically with actionscript) I've another checkbox (inside an itemrenderer). Cliccking on the first checkbox, I need to enable/disable the second checkbox.
More in general I need to interact not just with a checkbox but some other components inside columns added dynamically.
My question is: how to get (with actionscript) components inside an itemrender created dynamically?
Follow details related to the checkbox case:
Here my spark datagrid columns definitions:
<s:columns>
                    <s:ArrayList>
                              <s:GridColumn headerText="Azioni" resizable="false" sortable="false" width="49" ....../>
                              <s:GridColumn headerText="Iscritto" width="60" itemRenderer="renderers.EventoPersonaCheckBoxRenderer" dataField="iscritto"/>
                              <s:GridColumn id="personaEventoGridPersonaColumn" headerText="Persona" labelFunction...../>
                              <s:GridColumn id="personaEventoGridSocietaColumn" headerText="Societa" labelFunction..../>
                    </s:ArrayList>
          </s:columns>
As you can see there si an itemrender. A checkbox is inside it.
I also need to add dynamically new colums to my datagrid. Each new column has an itemrender with a checkbox.
here the code to add a new columns:
private function createNewColumn():void
                                        var newColumn:GridColumn = new GridColumn("column TEST");
                                        newColumn.itemRenderer = new ClassFactory(NewColumnCheckBoxRenderer);
                                        var cols:ArrayList = new ArrayList();
                                        cols =eventoPersonaGrid.columns as ArrayList;
                                        cols.addItem(newColumn);
The itemrenderer is the following:
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                                  xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
          <fx:Script>
                    <![CDATA[
                              import events.CheckBoxEvent;
                              protected function eventoSubscribedCB_clickHandler(event:MouseEvent):void
                                        data.iscritto = ! data.iscritto;
                                        dispatchEvent(new CheckBoxEvent(CheckBoxEvent.UPDATE,data.iscritto));
                    ]]>
          </fx:Script>
          <s:layout>
                    <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
          </s:layout>
          <s:CheckBox id="eventoSubscribedCB" selected="{data.iscritto}" click="eventoSubscribedCB_clickHandler(event)"/>
</s:GridItemRenderer>
As explained above cliccking on the checkbox inside datagrid definition, I need to change the checkbox properties that is located inside an itemrenderer.
How can I do that?
Is there a way to get the itemrenderer and checkbox references by the selectedItem datagrid property?
thank you
Pbesi

Thanks harUI.
Ok, I've to change how to face this kind of problems. Reading some articles I understood that there is not an itemrenderer for each row in a data grid. Instead, there are some itemrenderes (the number is the same of the visible rows in a datagrid) and they are applied on the other rows during the datagrid scroll. There no reason to try to get an itemrender instance. So the only way is to add these data inside a dataitem and get them with the "data" property. Ok, just is sounds strange for some properties to be carried on a valueobject because they aren't properties related to the data model (for example the infromation "checkbox is enabled/disabled"). Anyway it works. Thank you.
Pbesi

COMBOBOX & CHECKBOX RENDERER IN JTABLE

Hi,
I created JXTable by using swingx palette in Netbeans IDE. In two columns of my table, for each row I want to put checkboxes and comboboxes. I searched the ways on internet and I finalise my code. However, because I used cell editor, I just see my checkboxes and comboboxes when I enter a specific cell. I read all tutorials but unfortunately I cannot learn how to use renderer to show comboboxes and checkboxes all the time. In below you could check my code and if possible please teach how to use renderers and try to give feedback to my code by fixing it. Thank you.
*(P.S Please don't send any web site for tutorial, i searched almost all of them; but I can't understand the logic of it.)*
// SET UP THE COMBO BOX
public void setUpOverwriteValueColumn(JXTable table, TableColumn overwriteValCol) {
valueCombo = new JComboBox();
Field field = new Field();
ArrayList values = new ArrayList();
values = field.getValues();
for(String a:values){
valueCombo.addItem(a);
overwriteValCol.setCellEditor(new DefaultCellEditor(valueCombo));
DefaultTableCellRenderer renderer = new DefaultTableCellRenderer();
renderer.setToolTipText("Click for combo box");
overwriteValCol.setCellRenderer(renderer);
// SET UP THE CHECK BOX
public void setUpOverwriteColumn(JXTable table, TableColumn overwriteCol) {
valueChk = new JCheckBox();
overwriteCol.setCellEditor(new DefaultCellEditor(valueChk));
DefaultTableCellRenderer renderer = new DefaultTableCellRenderer();
renderer.setToolTipText("Click for check box");
overwriteCol.setCellRenderer(renderer);
setUpOverwriteColumn(monitorTable, monitorTable.getColumnModel().getColumn(3)); //add checkbox to 3rd column
setUpOverwriteValueColumn(monitorTable, monitorTable.getColumnModel().getColumn(4)); //add combobox to 4th column

Finally I can add renderers. But, now I have different question. When user clicks on the checkbox I want to enable the combo box. I mean if user clicks the checkbox in row 3; only the combo box which placed in row 3 should be enabled; other combos in other rows should not be enabled. Please help if you know the answer. Here is my code:
public class ComboBoxRenderer extends JComboBox implements TableCellRenderer{
    public ComboBoxRenderer(Vector items) {
        super(items);
        setOpaque(false);
    public Component getTableCellRendererComponent(
                                                JTable table,
                                                Object value,
                                                boolean isSelected,
                                                boolean hasFocus,
                                                int row,
                                                int column){
        if (isSelected && !hasFocus){
            setBackground(table.getSelectionBackground());
            setForeground(table.getSelectionForeground());
        }else{
            setBackground(table.getBackground());
            setForeground(table.getForeground());
          setSelectedItem(value);
        return this;
public class CheckBoxRenderer extends JCheckBox implements TableCellRenderer
public CheckBoxRenderer() {
    setOpaque(false);
    setHorizontalAlignment(CENTER);
    setVerticalAlignment(CENTER);
public Component getTableCellRendererComponent(
                                                    JTable table,
                                                    Object value,
                                                    boolean isSelected,
                                                    boolean hasFocus,
                                                    int row,
                                                    int column) {
    if (value != null) {
      this.setSelected( ( (Boolean) value).booleanValue());
    return this;
}To show:
public void setUpOverwriteValueColumn(JXTable table,
                                 TableColumn overwriteValCol) {
        Vector v = new Vector();
        Field field = new Field();
            ArrayList <String> values = new ArrayList<String>();
            values = field.getValues();
            for(String a:values){
                v.addElement(a);
            ComboBoxRenderer renderer = new ComboBoxRenderer(v);
            overwriteValCol.setCellRenderer(renderer);
    // SET UP THE CHECK BOX
    public void setUpOverwriteColumn(JXTable table, TableColumn overwriteCol) {
            CheckBoxRenderer renderer = new CheckBoxRenderer();
            overwriteCol.setCellRenderer(renderer);
    }Edited by: duygu_simsek on Jun 18, 2009 11:27 AM

Item renderer in datagrid with actionscript

Hi
I want to implement a datagrid similar to the one given int
the starting flex examples but in actionscript. I am having a
problem with the itemRenderer. I can't figure it out how I cam
create a imagerender in a datagridcolumn.
My code is:
var dataG:DataGrid = new DataGrid();
dataG.dataProvider = xmlList;
var coluna:DataGridColumn = new DataGridColumn();
coluna.dataField="nome";
coluna.headerText="Title";
var coluna2:DataGridColumn = new DataGridColumn();
coluna2.dataField="thumbnail";
coluna2.headerText="Title";
var imagem:Image = new Image();
imagem.height = 75;
imagem.source = "../tb/"+instrumentos.thumbnail+".jpg";
//HERE RELIES MY PROBLEM -HOW TO ASSOCIATE AN IMAGE TO THE
ITEM RENDERER
coluna2.itemRenderer = new ClassFactory(imagem);
var lalala:Array = new Array();
lalala.push(coluna);
lalala.push(coluna2);
dataG.columns = lalala;
thanks in advance

"jahh_drum" <[email protected]> wrote in
message
news:ghcs5u$p2d$[email protected]..
> Hi
>
> I want to implement a datagrid similar to the one given
int the starting
> flex
> examples but in actionscript. I am having a problem with
the itemRenderer.
> I
> can't figure it out how I cam create a imagerender in a
datagridcolumn.
>
> My code is:
>
> var dataG:DataGrid = new DataGrid();
> dataG.dataProvider = xmlList;
>
> var coluna:DataGridColumn = new DataGridColumn();
> coluna.dataField="nome";
> coluna.headerText="Title";
>
> var coluna2:DataGridColumn = new DataGridColumn();
> coluna2.dataField="thumbnail";
> coluna2.headerText="Title";
>
>
> var imagem:Image = new Image();
> imagem.height = 75;
> imagem.source = "../tb/"+instrumentos.thumbnail+".jpg";
>
> //HERE RELIES MY PROBLEM -HOW TO ASSOCIATE AN IMAGE TO
THE ITEM
> RENDERER
> coluna2.itemRenderer = new ClassFactory(imagem);
>
> var lalala:Array = new Array();
> lalala.push(coluna);
> lalala.push(coluna2);
>
> dataG.columns = lalala;
ClassFactory takes a class, not an instance.
Try something like:
foo:ClassFactory = new ClassFactory(Image)
foo.properties= {height=75,
source:"../tb/"+instrumentos.thumbnail+".jpg"};
coluna2.itemRenderer = foo;
Note that using a ClassFactory this way will give you the
same image in
every renderer to start out with. However, I believe that
image
itemRenderers by default will take their source from the data
property when
that gets set.
HTH;
Amy

Item Renderer for DataGrid

I have a button component as a Item renderer in the column of
the datagrid .
I am not able to access the Itemrenderer component(which I
declared in other mxml file in the datagrid)
This is the data grid where I have the Itemrenderer:
<mx:DataGrid id="dgCondition1"
variableRowHeight="true" width="100%" height="150"
verticalScrollPolicy="auto" editable="true"
dataProvider="{initDataGrid_Create}" >
<mx:columns>
<mx:DataGridColumn headerText="" dataField="conditi"
/>
<mx:DataGridColumn headerText="Condition"
dataField="syntax" width="300" />
<mx:DataGridColumn headerText="1" dataField="value"
width="80" editable="false" itemRenderer="buttonRenderer"/>
<mx:DataGridColumn dataField="value" headerText="2"
itemRenderer="buttonRenderer" />
I created a new mxml component for this button component
.(buttonRenderer.mxml)
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="400" height="300">
<mx:Script source="..TableDataGridBtn.as" />
<mx:Button id="col1" label="" width="75"
click="getDetail(event,col1)" />
</mx:VBox>
The Problem is I am not able to access the buttonRenderer in
the datagrid itemRenderer tag .
It says "Access of Undefined Property buttonRenderer".

"nash99" <[email protected]> wrote in
message
news:g7alc5$nkd$[email protected]..
> So
> Is it that I can Use this ItemRenderer tag in the
Application Tags only
> Is there any other way I can use them in mxml components
because I am
> using
> the same button in 16 datagrid columns , I dont wan't to
make the code
> look
> redundant.
http://www.adobe.com/livedocs/flex/3/html/help.html?content=intro_3.html

Item renderer on DataGrid (not DataGridColumn)

It seems that all the published examples of using an item renderer on a DataGrid use the itemRenderer property of DataGridColumn.
I don't think I can do this because my columns are created at run time, depending on the contents of the data provider.
I have therefore tried to assign my item renderer (a subclass of Canvas) directly to the DataGrid.
1. This works in MXML when the renderer is inline.
2. It sees to work when the renderer is an Actionscript class assigned to the DataGrid's itemRenderer property.
3. It does NOT work when the renderer is Flex component assigned to the DataGrid's itemRenderer property. This compiler error is reported: Initializer for 'itemRenderer': cannot parse value of type mx.core.IFactory from text 'comp:CellRenderer'.
I prefer to use the last method. Is there a way to fix this error?
If not, is it possible to attach the item renderer to each DataGridColumn as it is created? DataGrid does not seem to have a suitable event that reports when a column is created.
Aplogies if this is elementary stuff. I am a real Flex newbie. I am using Flex Builder 3.0
Andy Kirkham

A code example would be helpful here, but from your error message it
looks like you may be doing the following
<mx:DataGrid itemRenderer="comp:CellRenderer"/>
Instead of this, you need to use the fully qualified class name of
CellRenderer, eg.
com.renderers.CellRenderer
Look at the definition of 'comp' towards the top of your MXML file, it
will be something like:
xmlns:comp="blah.blah.blah.*"
Your itemRenderer property should then be set to:
blah.blah.blah.CellRenderer

Custom renderer in datagrid, needs to know if data changed

Hi,
I am hoping someone can help me out please.
I have a datagrid that uses a custom renderer that is
subclassed from a TextInput. When the user changes the data in a
cell, I need to color the cell. This is so that on a potentially
big grid, the user can easily see which cells he has made changes
to.
It is easy enough to set the color of the itemrenderer by
using setStyle() inside the overridden set data() method of the
custom renderer, but that is only a fraction of the solution. Since
Flex instantiates and destroys custom renderers at will depending
on if it is scrolled into view by the datagrid, keeping the state
of whether a value has changed inside the custom rendererer is not
an option.
So the only choice I have is to call back from the custom
renderer into the container that hosts the datagrid. As the
itemEditEnd event is handled in that container, a list of cells
that have had their data changed can be stored. The custom renderer
then needs to call back into the container with its cell
coordinates and ask if the data has changed, and if it has, set its
color.
How can a custom renderer know its cell position as x,y
coordinates? I see that TextInput implements IListItemRenderer
interface and has properties x and y, but putting a trace on these
gives me nonsensical numbers that seem to have no relation to the
cell coordinates.
The other thing I need to do is have the custom renderer call
back into the container that hosts the datagrid to know whether
data has changed. Is outerDocument the reference? Or is there a
proper way of doing this?
Thanks for the help you can give.

Here is a simplified version of how we track the cell by cell
changes in a datagrid. It does require you to identify the fields
that will be editable and maintaining the original data for each
column in the data source.
Our production version is much more complex than this but it
will give you the idea.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
import mx.core.Application;
import flash.events.*;
import mx.events.DataGridEvent;
import mx.controls.TextInput;
[Bindable] public var editAC : ArrayCollection = new
ArrayCollection();
[Bindable]
public var somedata:XML = <datum><item>
<col0>0</col0>
<col1></col1>
<col2></col2>
<col3>2</col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig>0</col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig>2</col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
<item>
<col0></col0>
<col1></col1>
<col2></col2>
<col3></col3>
<col4></col4>
<col5></col5>
<col6></col6>
<col0Orig></col0Orig>
<col1Orig></col1Orig>
<col2Orig></col2Orig>
<col3Orig></col3Orig>
<col4Orig></col4Orig>
<col5Orig></col5Orig>
<col6Orig></col6Orig>
</item>
</datum>
private function initApp():void {
var dgcols:Array = grid1.columns;
for (var i:int=1;i<12;i++) {
var dgc:DataGridColumn = new DataGridColumn();
if(i < 6) {
dgc.width=60;
dgc.editable=true;
dgc.dataField="col" + i.toString() ;
dgc.rendererIsEditor=true;
var ir :DGItemRenderer = new DGItemRenderer();
dgc.itemRenderer = ir;
else {
dgc.width=0;
dgc.visible = false
dgc.dataField="col" + i.toString() + "orig" ;
dgcols.push(dgc);
grid1.columns = dgcols;
]]>
</mx:Script>
<mx:DataGrid x="31" y="27" width="200" height="150"
id="grid1" dataProvider="{somedata.children()}"
horizontalScrollPolicy="on" rowHeight="25"
editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Column 0"
dataField="col0" width="30" editable="false"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()"
implements="mx.controls.listClasses.IDropInListItemRenderer,
mx.core.IFactory"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridListData;
public function newInstance():* {
var ir : DGItemRenderer = new DGItemRenderer();
return ir;
override public function set data(value:Object):void
super.data = value;
if (value != null) {
var colName : String= DataGridListData(listData).dataField;
var valOrig : String = data[colName + "Orig"];
var val : String = data[colName];
if(valOrig != val)
this.setStyle("backgroundColor",0xA7FF3F);
else
this.setStyle("backgroundColor", "#ffffff");
]]>
</mx:Script>
</mx:TextInput>

Checkbox rendere in datagrid

Similar Messages

Maybe you are looking for