DataGrid CheckBox ItemRenderer

Hi
I am having some problems with my CheckBox extended
ItemRenderer for a DataGrid.
All works fine except now rollover does not work properly on
the DataGrid - you hover over a row and the first one you come to
highlights but thereafter it will not update to show other rows you
go over.
I am attaching the code to see if anyone can spot anything.
I've been searching the Internet for a solution for the last
day and a half but hopefully someone here can help me out !
Thanks in advance
Chris

No, the itemRenderer should be wrapped into a container, so
"this" will refer to container itself.
this->ComboBox_id will be right way.
Here is the example of IR:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:Label
id="cellLabel"
x="0" y="0"
width="100%"
textAlign="right"
text="{data.hasOwnProperty('m_nDiscountPercent')?frmt_Percent.format(data.m_nDiscountPerc ent)
+ '%':'---'}"
paddingRight="10"/>
</mx:VBox>
Yours will look similar, just ComboBox instead of a Label.
Cheers,
Dmitri.

Similar Messages

Flex datagrid custom itemRenderer - making column NOT EDITABLE

Hi all,
I am new to flex and having been trying to build custom editors and renderers for datagrid. I ran into this problem trying to fix another one (http://forums.adobe.com/post!reply.jspa?message=3569216)
The problem is :
I have a custom editor and a renderer for a text column. The whole grid is editable (i.e; editable=true). But clicking on the cell does not show me the editor. However, if I change the renderer to mx.controls.label, clicking on it takes me to my custom editor.
Can anyone please tell what I am doing wrong?? I am pasting the relevant code for more details.
DATAGRID : Replacing itemRenderer = "renderers.TextRenderer" with itemRenderer = "mx.controls.Label" makes the column editable
<mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498" dataProvider="{this.slideArray}">
     <mx:columns>
                       <mx:DataGridColumn headerText="Text" width="100"
                                                       resizable="true" sortable="false"
                                                       itemRenderer = "renderers.TextRenderer"
                                                       itemEditor="editors.TextEditor"
                                                      dataField="text" editorDataField="myData"/>
            </mx:columns>
</mx:DataGrid>
TEXT EDITOR
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                           xmlns:s="library://ns.adobe.com/flex/spark"
                                           xmlns:mx="library://ns.adobe.com/flex/mx"
                                           focusEnabled="true"
                                          initialize="initEditor()">
<mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>
<fx:Script>
<![CDATA[
          import domain.Slide; // contains just one property :::: public var text : String
          override public function set data(value:Object):void{
                    super.data = value;
                    this.edit.text = (value as Slide).text;
          public var myData : String; // editor data field
          import mx.binding.utils.BindingUtils;
          private function initEditor():void{
                    BindingUtils.bindProperty(this,"myData", this.edit, "text");
]]>
</fx:Script>
</s:MXDataGridItemRenderer>
TEXT RENDERER
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                          xmlns:s="library://ns.adobe.com/flex/spark"
                                         xmlns:mx="library://ns.adobe.com/flex/mx"
                                         focusEnabled="true">
     <s:Label id="txt" horizontalCenter="0" verticalCenter="0"/>
     <fx:Script>
          <![CDATA[
                         import domain.Slide;
                         override public function set data(value:Object):void{
                                        super.data = text;
                                        this.txt.text = (value as Slide).text;
          ]]>
     </fx:Script>
</s:MXDataGridItemRenderer>
Tricks I have tried and failed :
1. added the following code to the renderer
   override public function get data():Object{
                                   return super.data;
2. remove/change focusEnabled
3. wrote the same renderer in Actionscript - making it extend MXDataGridItemRenderer. I had to add the label component txt using addElement. Clicking on this does show th editor but it doesnt show the label txt at all... i.e; I dont get any text displayed.
I am using Flex 4.0 sdk.

It worked!!!!!!! Thank you!! What you mentioned was indeed the problem!
Here is the custom item renderer's set data function
Before
Now
override public function set data(value : Object):void{
                super.data = text;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
override public function set data(value : Object):void{
                  super.data = value;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
oh man, this is such a stupid mistake. I think I was confused with having three text properties - one inherited from MXDataGridItemRenderer, one in my txt Label control and one on my slide.
I had no idea that sending the value up to the super class was so important. None of the docs I read seemed to give much importance to this statement.
thanks so much and sorry for taking up so much of your time. I guess it is uncessary to post any more code.

Flex spark dataGrid gridColumn itemrenderer binding bug

I hava a TextInput within mx DataGrid gridColumn itemrenderer and binding its text to {data.f1} ,
when I set DataGrid dataProvider column (0,0) to "value1" by actionsript code,
it will update "value1" to TextInput field.
But if I change to spark DataGrid, TextInput Text won't be changed.
Please see below two samples, when user click "set var" button, it set dataProvider column (0,0) to "value1",
sample1 is in mx comopent, it works fine and will update "value1" to TextInput Text.
sample2 is in spark component, it did not work.
anyone can help for spark component ?
many thanks.
*** sample1 (mx componet): ***
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
layout="absolute">
<mx:Button x="235" y="52" label="set var" click="setVar()"/>
<mx:DataGrid id="grid_1" dataProvider="{ia_row}" x="25" y="52">
<mx:columns>
   <mx:DataGridColumn dataField="f1" headerText="Column 1">
    <mx:itemRenderer>
     <fx:Component>
      <mx:TextInput text="{data.f1}" width="95%"/>
        </fx:Component>
    </mx:itemRenderer>
   </mx:DataGridColumn>
   <mx:DataGridColumn dataField="f2" headerText="Column 2"></mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<fx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable]
   private var ia_row:ArrayCollection = new ArrayCollection([
    {f1:"a1", f2:"b1"},
    {f1:"a2", f2:"b2"}
   private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</mx:Application>
*** sample2 (spark componet): ***
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
>
<s:Button x="267" y="94" label="set var" click="setVar()"/>
<s:DataGrid id="grid_1" x="55" y="94" width="204" height="139" dataProvider="{ia_row}">
<s:columns>
   <s:ArrayList>
    <s:GridColumn dataField="f1" headerText="Column 1" width="120">
     <s:itemRenderer>
      <fx:Component>
       <s:GridItemRenderer>
        <s:TextInput text="{data.f1}" width="95%"/>
         </s:GridItemRenderer>
      </fx:Component>
     </s:itemRenderer>
    </s:GridColumn>
    <s:GridColumn dataField="f2" headerText="Column 2"></s:GridColumn>
   </s:ArrayList>
</s:columns>
</s:DataGrid>
<fx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable]
   private var ia_row:ArrayCollection = new ArrayCollection([
    {f1:"a1", f2:"b1"},
    {f1:"a2", f2:"b2"}
   private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</s:Application>

sir, I think it does not send CHANGE event to dataGrid, so my suggestion is following:
private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    Alert.show(t_row.f1);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
    ia_row.refresh();//it is used to dispatch Event if dataprovider was changed.

Problem with Checkbox ItemRenderer in a DataGrid

Hello Everyone,
I'm using a datagrid with two columns, which is used as a data entry grid. The first column has a simple text input field and the 2nd column has a checkbox as an itemrenderer. On creationComplete event, I'm passing an arraycollection as the dataprovider for this datagrid. The arraycollection:
<mx:ArrayCollection id="psAC">
        <mx:source>
            <mx:Array>
                <mx:Object PaText="line1" PaCheckbox="0" />
                <mx:Object PaText="line2" PaCheckbox="0" />
                <mx:Object PaText="line3" PaCheckbox="1" />
                <mx:Object PaText="line4" PaCheckbox="0" />
                <mx:Object PaText="line5" PaCheckbox="0" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
There is a datagrid (dGa) in the main application. On click of this, a pop up window comes up which has the same datagrid layout(i.e, 2 columns). And this is where the data is entered. Here, if the user checks the check box, I have assigned a value of '1' for the 2nd column of the arraycollection. THis code(below) works fine.
<datagrid in pop up window>
<mx:DataGridColumn headerText="Best Possible Action?" textAlign="center" width="200" editable="false">
                            <mx:itemRenderer>
                                <mx:Component>
                                   <mx:CheckBox>
                                        <mx:Script>
                                                <![CDATA[
                                                     override public function set data(value:Object):void{
                                                         if(value.PaCheckbox == 1){
                                                            this.selected = true;
                                                        }else{
                                                            this.selected = false;
                                                ]]>
                                            </mx:Script>
                                        
                                    </mx:CheckBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
But I would also need to set the PaCheckbox value to 0 or 1, based on teh check condition of the check box. I tried using change event (commented in the code above). But there I get an error: Cannot access a property or method of a null object reference. I checekd in debug mode, there the data object is null! Can you please help me on how to pass back the values(0 o 1) to my arraycollection, based on the checkbox's status?
Cheers,
Deepak

heyo,
I solved it.....
i was missing this line of code super.data = value; in the ovverriden function...Once we have this line, the data object will have teh field names and their values in it, which can be accessed on the change event...

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

Problem with labelfunction with checkbox itemrenderer

I have a DataGrid with a column that looks like this:
<mx:DataGridColumn headerText="Buy online?"
dataField="onlineshop" itemRenderer="mx.controls.CheckBox"
rendererIsEditor="true" labelFunction="checkBoxLabel"
editorDataField="selected" />
My label function looks like this (for testing):
private function checkBoxLabel(item:Object,
column:Object):Boolean
return false;
The checkboxes in the grid always show up checked by default.
What am I doing wrong?

"endquote" <[email protected]> wrote in
message
news:e4e0cj$ffh$[email protected]..
>I have a DataGrid with a column that looks like this:
>
> <mx:DataGridColumn headerText="Buy online?"
dataField="onlineshop"
> itemRenderer="mx.controls.CheckBox"
rendererIsEditor="true"
> labelFunction="checkBoxLabel" editorDataField="selected"
/>
>
> My label function looks like this (for testing):
>
> private function checkBoxLabel(item:Object,
column:Object):Boolean
> {
> return false;
> }
>
> The checkboxes in the grid always show up checked by
default. What am I
> doing
> wrong?
labelFunction is for the *label* (of the CheckBox, in this
case). The
selected property of the CheckBox is set based on the value
of the
dataField--in your case, "onlineshop". Is onlineshop true in
all your items?
Manish Jethani
Developer, Flex Framework
Adobe Systems Inc.

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 Checkbox - Select All Headerrenderer

i have a datagrid that utilizes an itemrenderer and headerrender for the same column to have checkboxes and also a select all checkbox in the column header...as such:
<mx:DataGrid width="100%" height="100%" id="dg" dataProvider="{employees}" sortableColumns="false"
                            draggableColumns="false">
                            <mx:columns>
                                <mx:DataGridColumn width="30" textAlign="center">
                                    <mx:headerRenderer>
                                        <mx:Component>
                                            <mx:CheckBox/>
                                        </mx:Component>
                                    </mx:headerRenderer>
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:CheckBox selected="{(data.@isSelected == 'true')?true:false}" click="{data.@isSelected = (data.@isSelected != 'true') ? 'true' : 'false';}"/>
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                                <mx:DataGridColumn headerText="Item ID" dataField="@id" width="60"/>
                                <mx:DataGridColumn headerText="Date" dataField="@date" width="85"/>
                            </mx:columns>
                        </mx:DataGrid>
my XMLList is as follows (that populates the datagrid):
<mx:XMLList id="employees">
        <request id="720" date="Aug 21 09" isSelected="false"/>
        <request id="721" date="Aug 21 09" isSelected="false"/>
        <request id="722" date="Aug 21 09" isSelected="false"/>
        <request id="723" date="Aug 21 09" isSelected="false"/>
</mx:XMLList>
Now, if I select a rows checkbox, it works fine and updates the XMLList with the new value of isSelected for that row.
My question is this: how do I make it so that clicking on the checkbox inside the headerrenderer selects all the checkboxes in the itemrenderer? I know that Flex doesn't build rows that are not in view yet, so what needs to happen here in order to a) select the itemrenderer checkboxes and b) update the related XMLList so all isSelected update to either true/false.
Thanks!

Thanks for putting me on the right track for this...quick question:
My arrayCollection looks like this:
[Bindable]
private var myAC:ArrayCollection = new ArrayCollection([
    {id:1, date: 'Bob Jones', isSelected: true},
    {id:2, date: 'Jane Smith', isSelected: true},
    {id:3, date: 'Doug Johnson', isSelected: false},
    {id:4, date: 'Bob Jones', isSelected: true},
    {id:5, date: 'Jane Smith', isSelected: true},
    {id:6, date: 'Doug Johnson', isSelected: false},
    {id:7, date: 'Bob Jones', isSelected: true},
    {id:8, date: 'Jane Smith', isSelected: true},
    {id:9, date: 'Doug Johnson', isSelected: false},
And the datagrid displays this correctly, so no problems there.
Now, I have a function that gets called when the checkbox in the header is selected, but am stuck here as to how to update all of the isSelected values in myAC to true.
This is what I tried with no success...any thoughts?
public function checkAll():void {
    for(var i:int=0; i < myAC.length; i++){
        myAC.itemUpdated(myAC.getItemAt(i).isSelected, false, true);
Thanks!

Datagrid checkbox headerrenderer check off problem

I have a datagrid where one column has select option like what we have in mail inboxes. User can select one or many row items to perform any actions by selecting the checkbox. It has also one select all option which is shown in the header renderer of that particular column. If user clicks on that all checkboxes gets selected.
I have done that but the problem is that whenever i am performing any action by selecting all(header checkbox) and as a result the datagrid sometimes sets visible off or switches to some other mxml component from the component which is holding the datagrid and after coming back from that scenario again to the datagrid, its seen that the checkbox is still checked ... i want that checkbox to set to non-checked.
help me.

Hi subhajit nag,
Say the below is your mxml component in viewStack...
<your component>
<mx:Script>
<![CDATA[
[Bindable]private var headerChecked:Boolean = false;
private function onShow():void
     headerChecked = false;
]]>
</mx:Script>
</your component>
<mx:DataGrid x="35" y="10" id="mydg">
        <mx:columns>
            <mx:DataGridColumn editable="true" sortable="false">
             <mx:headerRenderer>
              <mx:Component>
                        <mx:CheckBox selected="{outerDocument.headerChecked}" click="checkUnCheckCheckBoxes()">
                         <mx:Script>
                  <![CDATA[
                   import mx.collections.ArrayCollection;
               private function checkUnCheckCheckBoxes():void
                  // You can handle your logic what you want to do when header check box is clicked....
                  ]]>
              </mx:Script>
                        </mx:CheckBox>
                    </mx:Component>
             </mx:headerRenderer>
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:CheckBox selected="{data.isSelected}" click="{data.recselected = !data.recselected}"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Column 1" dataField="firstName"/>
            <mx:DataGridColumn headerText="Column 2" dataField="lastName"/>
        </mx:columns>
    </mx:DataGrid>
So you just need to change the value of the headerChecked bindable variable to false..in show event for your first scenario...and your header check box is automatically unselected because this check box is binded to a bindable variable to which you are setting to false...
For your second scenario....you can use the same changing the headerChecked value to false...
You need to set this varibale to false in your second scenario where you know that your Header Render datagrid is making it visible after you made it unvisible...
say you have clicked header check box and you made this datagrid invisible and this header checkbox datagrid will be visible once again when you click toggle button so set the value to false in the toggle button click function....
private function toggleButtonClickHandler():void
     headerChecked = false;
     yourHeaderChkDataGrid.visible = true;
     yourAnotherDG.visible = false;
Hope this is clear for you now...Try this and let me know...
Thanks,
Bhasker Chari

DataGrid Checkbox

Hello!
I have a DataGrid with this column:
<mx:DataGridColumn headerText="" width="25" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="selected" sortable="false" paddingLeft="6"/>
How can I get the ArrayCollection made up of the rows that have that checkbox selected when a button is pressed for example?
Thank you!

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
Here you go:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.CheckBox;
      private var arr:Array = [
        {name: "Bob Smith", FLAG: false},
        {name: "Fred Tompas", FLAG: false},
        {name: "Mary Freeman", FLAG: false},
        {name: "Tim Thorat", FLAG: false}
      [Bindable] public var ac:ArrayCollection = new ArrayCollection(arr);
      [Bindable] public var selectedNames:ArrayCollection = new ArrayCollection();
      private function selectedOnly(item:Object, idx:uint, arr:Array):Boolean {
        return (item.FLAG == "true");
    ]]>
</mx:Script>
<mx:DataGrid id="dg" dataProvider="{ac}">
    <mx:columns>
      <mx:DataGridColumn dataField="name" width="100" headerText="Name"/>
      <mx:DataGridColumn dataField="FLAG" width="100" headerText="Selected">
        <mx:itemRenderer>
          <mx:Component>
            <mx:CheckBox selectedField="FLAG" change="onChange(event);" label="">
              <mx:Script>
                <![CDATA[
                  import mx.controls.Alert;
                  private function onChange(evt:Event):void {
                    data.FLAG = !data.FLAG;
                    if(data.FLAG == true){
                      outerDocument.selectedNames.addItem(data.name);
                    }else{
                      if(outerDocument.selectedNames.contains(data.name)){
                        outerDocument.selectedNames.removeItemAt(outerDocument.selectedNames.getItemIndex(data.name));
                ]]>
              </mx:Script>
            </mx:CheckBox>
          </mx:Component>
        </mx:itemRenderer>
      </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>
<mx:List dataProvider="{selectedNames}"/>
</mx:Application>

Datagrid Checkbox item renderer Issue.

Hi There
Recently I faced a requirement to have a checkbox inside a datagrid where I need to develop a music module with playlist management for ADOBE AIR based application.
For this I have searched and found a source to use Datagrid and Checkbox components which overrides some inbuild methods to give the required result..
But Finally I ended with one strange issue
When the check box is placed in the datagrid at 0 column index it works firne but if we place at any index ( I need it to be last colum ) the checkbox is not updating the display.
Source Flex Air project attached.
From the sample... While clicking on a row the left column checkbox is getting updated but Right remains same... when you scroll the Datagrid then the checkboxes are getting update when they are redrawn. I didn't found where to call the redraw for the right checkbox column.
Cany any one faced this strange issue. and found any solution ?????
If the Logic what I am following for a Playlist module is not good one then suggest if you guys know any other mechanism to develop a playlist management with datagrid and Checkboxes.
Message was edited by: ChintuBabu

Hi There
Recently I faced a requirement to have a checkbox inside a datagrid where I need to develop a music module with playlist management for ADOBE AIR based application.
For this I have searched and found a source to use Datagrid and Checkbox components which overrides some inbuild methods to give the required result..
But Finally I ended with one strange issue
When the check box is placed in the datagrid at 0 column index it works firne but if we place at any index ( I need it to be last colum ) the checkbox is not updating the display.
Source Flex Air project attached.
From the sample... While clicking on a row the left column checkbox is getting updated but Right remains same... when you scroll the Datagrid then the checkboxes are getting update when they are redrawn. I didn't found where to call the redraw for the right checkbox column.
Cany any one faced this strange issue. and found any solution ?????
If the Logic what I am following for a Playlist module is not good one then suggest if you guys know any other mechanism to develop a playlist management with datagrid and Checkboxes.
Message was edited by: ChintuBabu

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

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: Custom Itemrenderer

Hello,
my Datagrid consists of a variable number of columns that are
handled by the same Itemrenderer. Now I have the problem that I
can't find out which column I belong to when I am in the override
set data function.
Any hints how i can back track to what column the "current"
Itemrenderer belongs or is processing at that moment?
Thanks and GzG
Nerun

I had the exact requirement. Multiple columns using the same
item renderer and needing to know what was clicked. Essentially I
solved it in three steps.
1. Override the datagid to add your own custom events;
package com.psc.eis.view
import mx.controls.DataGrid;
import mx.events.ListEvent;
[Event( name = "MyViewCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MyEditCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MyDeleteCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MySearchEvent", type = "mx.events.ListEvent"
public class MyDataGrid extends DataGrid
public function MyDataGrid() { super()}
public static var
MY_VIEW_CURRENT_EVENT:String="MyViewCurrentEvent";
public static var
MY_EDIT_CURRENT_EVENT:String="MyEditCurrentEvent";
public static var
MY_DELETE_CURRENT_EVENT:String="MyDeleteCurrentEvent";
public static var MY_SEARCH_EVENT : String =
"MySearchEvent";
2. In your item renderer create a click handler that
dispatches the appropriate event
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center">
<mx:Script>
<![CDATA[
private function clickHandler() : void
import mx.events.ListEvent;
var event:ListEvent = new ListEvent(
MyDataGrid.MY_EDIT_CURRENT_EVENT );
event.itemRenderer = this;
owner.dispatchEvent(event);
]]>
</mx:Script>
<mx:Image id="imageDelete" source="images/bluepencil.gif"
width="20" click="clickHandler()"/>
</mx:HBox>
3. In your mxml for the datagrid setup the event handler
<psc:MyDataGrid id="dataGridProjects" dataProvider="{. .
MyViewCurrentEvent="viewCurrentHandler(event)"
MyEditCurrentEvent="editCurrentHandler(event)"
MyDeleteCurrentEvent="deleteCurrentHandler(event)"
>
That's it.

Flex 4, datagrid, checkboxes, and the impossible dream?

I want to build a datagrid that has a column with checkboxes so the user can select a single record or multiple records (for deletion, for exporting, for whatever). But I also want to enable the user to click on anywhere in the row other than the checkbox to open a record for editing. I know how to do one or the other function, but I haven't been smart enough to figure out how to combine the functions with Flex 4. Is it possible?
I see this sort of functionality in my gmail account - I can click on checkboxes to select items for delete *and* I can click on any item to open it for reading, etc. The item doesn't open when I click on the checkbox. I see lots of posts discussing checkboxes in datagrids. I've studied Alex's Flex Closet post at http://blogs.adobe.com/aharui/2010/01/checkboxes_in_datagrid_with_ch.html most closely. Can anyone point me in the right direction?
TIA!!!

Interesting. For a workaround, does it work for you if you wrap the caselessSortForField() in some curly quotes (ie: use databinding)?
<mx:DataGridColumn dataField="index"
sortCompareFunction="{caselessSortForField('index')}" />
It worked for me locally using my simple test case and a nightly Flex 4.1 SDK.
Peter

DataGrid CheckBox ItemRenderer

Similar Messages

Maybe you are looking for