Skip navigation
Currently Being Moderated

Flex 4 -> Datagrid add checkbox to a column

Aug 24, 2010 3:45 AM

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 !

 
Replies
  • Currently Being Moderated
    Aug 24, 2010 3:52 AM   in reply to djh88ukwb
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 24, 2010 4:00 AM   in reply to djh88ukwb

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 24, 2010 5:23 AM   in reply to djh88ukwb

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 24, 2010 6:05 AM   in reply to djh88ukwb

    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..

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 24, 2010 9:33 AM   in reply to flex4

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 25, 2010 4:56 AM   in reply to Vackar

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 25, 2010 5:39 AM   in reply to flex4

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2011 5:54 AM   in reply to djh88ukwb

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2011 8:41 AM   in reply to djh88ukwb

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

     

    HTH;

     

    Amy

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2013 1:59 PM   in reply to djh88ukwb

      <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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points