Flex 4 -> Datagrid add checkbox to a column

Report · Aug 24, 2010

Hello all.

I am trying to add a checkbox to a datagrid column, so that i can use it to delete a record from the array. My datagrid is as follows

    <mx:DataGrid x="10" y="40" width="903" dataProvider="{questionsArr}" sortableColumns="false" draggableColumns="false" editable="true">
        <mx:columns>
            <mx:DataGridColumn headerText="No." dataField="Number" width="100" editable="false"/>
            <mx:DataGridColumn headerText="Question" dataField="Question" />
            <mx:DataGridColumn headerText="Delete" width="100" />
        </mx:columns>
    </mx:DataGrid>

The user inputs questions into the array via a textinput box.

But what i want to do is add a checkbox to the "Delete" column. If anyone could help me with this that would be great !

Report · Aug 24, 2010

You must add the check box to the column using an itemrenderer. Look at this link for more info

http://livedocs.adobe.com/flex/3/html/cellrenderer_3.htmlhttp://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/

Report · Aug 24, 2010

Hi

Use check box as an item renderer to the datagrid and then u will get check box for the delete column

Here i posting the sample code of item renderer and datagrid column for ur convieniance... Name that Item renderer as RenderItem.mxml

for out timebeing..

            <?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" c>
    <mx:Script>
        <![CDATA[

            override public function set data(value:Object):void
            {
               super.data=value;

// Add ur stuff here
}

]]>
</mx:Script>
</mx:CheckBox>

and in datagrid u can use this item renderer for the Delete column

<mx:DataGrid>

<mx:columns>

<mx:DatagridColums headerText="Delete" itemRenderer="../RenderItem.mxml"/>

</mx:columns>

<mx:DataGrid>

Report · Aug 24, 2010

Ok, thanks both for your answers.

I have now gone about doing it the following way:

    <mx:DataGrid x="10" y="40" width="903" dataProvider="{questionsArr}" sortableColumns="false" draggableColumns="false" editable="true">
        <mx:columns>
            <mx:DataGridColumn headerText="No." dataField="Number" width="100" editable="false"/>
            <mx:DataGridColumn headerText="Question" dataField="Question" />
            <mx:DataGridColumn headerText="Delete" width="100">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:HBox horizontalAlign="center" verticalAlign="middle">
                                <s:CheckBox/>
                            </mx:HBox>
                        </fx:Component>
                    </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

It works fine, as i add a question, a checkbox gets added to the Delete column. Alls great.

But when i come to click on the checkbox, the following text gets displayed [object Object]

Then when i click away from the checkbox the checkbox reappears. With it either selected or unselected depending on what value it should be.

Is there anyway so that it dosent display the [object Object] ?

Report · Aug 24, 2010

Please use the code given by the other guy for check

box renderer and override the set data method as per your requirement. Read the link I have given all about item renderers for more information.

Report · Aug 24, 2010

Hi

See in ur example u are using fx:component tag and there u are using checkbox.. flex will not allow any operations on that component when u write like that .. And in ur code the id and click properties are not allowed .. how can u make dynamic selections and how can it take u r task weather u are selecting or deselecting.. how can u add that task to delete the record

so for such type task the usage of itemrenderer is best way.. For such type of task implementation go for the itemrenderers ..

If any doubts and updates let me know..

Report · Aug 24, 2010

flex4 wrote:
Hi
          See in ur example u are using fx:component tag and there u are using checkbox.. flex will not allow any operations on that component when u write like that .. And in ur code the id and click properties are not allowed .. how can u make dynamic selections and how can it take u r task weather u are selecting or deselecting.. how can u add that task to delete the record
                 so for such type task the usage of itemrenderer is best way.. For such type of task implementation go for the itemrenderers ..
          If any doubts and updates let me know..

txt talk... noooooo I feel all old now.

Report · Aug 25, 2010

Hi vackar

txt talk... noooooo I feel all old now.

what does it mean...... am i wrong anything ...i am little bit poor in english.. if anything wrong let me know

Report · Aug 25, 2010

flex4 wrote:
Hi vackar
txt talk... noooooo I feel all old now.
what does it mean...... am i wrong anything ...i am little bit poor in english.. if anything wrong let me know

No it's not that you did something wrong. Some times when people post messages they write like they are sending a text message. And when I read your post I had to re-read it a couple of times to understand it (I thought you were using txt talk) - Made me feel like I was getting old.

Sorry for the misunderstaning.

Vackar

Report · Feb 04, 2011

For the column to not display [object Object] try setting editorDataField in the dataGridColumn and in the same tag set rendererIsEditor = "true"

Report · Jul 25, 2011

Check out this post http://www.benclinkinbeard.com/2007/11/efficient-reusable-and-centered-checkbox-renderers-for-datagr... . It contains full code for exactly what you want to do.

HTH;

Amy

Report · Aug 01, 2013

<mx:DataGridColumn headerText="Date" dataField="date" width="100" editable="true" editorDataField="selected" rendererIsEditor="true"> <mx:itemRenderer> <mx:Component> <mx:CheckBox selected="false"> </mx:CheckBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn>

Taken from http://stackoverflow.com/questions/1120841/flex-checkbox-in-datagrid