12 Replies Latest reply on May 17, 2010 8:07 PM by SiHoop

    Datagrid checkbox

    SiHoop Level 1

      How do I use an ArrayCollection to set the value of a checkbox in a datagrid. The code below contains all of the information I need, but I want the ArrayCollection to set the values of the checkboxes.

       

      How do I use these values to set the checkboxes?

      Thanks!

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
      <mx:Script>
          <![CDATA[
           import mx.collections.ArrayCollection;
           [Bindable] private var myData:ArrayCollection;
      private function init():void{
          myData = new ArrayCollection();
          myData.addItem({taskId: "1", title: "xxxxx", completionTime: 1, completed: true});
          myData.addItem({taskId: "2", title: "yyyyy", completionTime: 2, completed: false});
          myData.addItem({taskId: "3", title: "zzz", completionTime: 3, completed: true});
      }
          ]]>
      </mx:Script>
            <mx:DataGrid    id="dataGrid" dataProvider="{myData}" >          
              <mx:columns>
                   <mx:DataGridColumn id="taskidField" dataField="taskId" headerText="ID"  />
                   <mx:DataGridColumn id="titleField" dataField="title" headerText="TITLE" />
                   <mx:DataGridColumn id="completionTimeField" dataField="completionTime" headerText="COMPLETION TIME" />
                  <mx:DataGridColumn id="completedField" headerText="COMPLETED"  >
                        <mx:itemRenderer>
                              <mx:Component>
                                 <mx:HBox horizontalAlign="center">
                                 <mx:CheckBox id="checkBox" />
                              </mx:HBox>
                            </mx:Component>
                         </mx:itemRenderer>
                  </mx:DataGridColumn>
              </mx:columns>
          </mx:DataGrid>
      </mx:Application>

        • 1. Re: Datagrid checkbox
          BhaskerChari Level 4

          Hi SiHoop,

           

          Simply replace the below line in your code and run the application you will see the Datagrid check boxes set according to your ArrayCollection...

           

           

          <mx:CheckBox

           

          id="checkBox" selected="{data.completed}"/>

           

          Actually in the "data" object  you will have the current object that eacj row is being binded to the DataGrid.

           

          Please mark it as correct answer if it worked for you....I have tested it's working.

           

           

          Thanks ,

          Bhasker Chari.S

           

           

           

           

          • 2. Re: Datagrid checkbox
            SiHoop Level 1

            The solution works, but now I get the following warning message:

            warning: unable to bind to property 'completed' on class 'Object' (class is not an IEventDispatcher)

             

             

            What should I do to get rid of the warning? Do I have to extend ArrayCollection to make it an IEventDispatcher?

             

            Thank you!

            • 3. Re: Datagrid checkbox
              BhaskerChari Level 4

              I dont see any warning appear in the application...Is the code posted is your complete app or can you post your total code or else where you are getting this error at which line...? Because I could see no warning in the code..when I ran the app..?

              • 4. Re: Datagrid checkbox
                SiHoop Level 1

                Here's my code:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
                <mx:Script>
                    <![CDATA[
                import mx.collections.ArrayCollection;
                [Bindable] private var datagridData:ArrayCollection;
                private function init():void{
                    datagridData = new ArrayCollection();
                    datagridData.addItem({taskId: "1", title: "aaaa", completionTime: "1", completed: true});
                    datagridData.addItem({taskId: "2", title: "bbbb", completionTime: "2", completed: false});
                    datagridData.addItem({taskId: "3", title: "cccc", completionTime: "3", completed: true});
                }
                    ]]>
                </mx:Script>
                      <mx:DataGrid id="dataGrid" dataProvider="{datagridData}" >          
                        <mx:columns>
                             <mx:DataGridColumn id="taskidField" dataField="taskId" headerText="TASK ID"  />
                             <mx:DataGridColumn id="titleField" dataField="title" headerText="TITLE" />
                             <mx:DataGridColumn id="completionTimeField" dataField="completionTime" headerText="COMPLETION TIME" />
                            <mx:DataGridColumn id="completedField" headerText="COMPLETED"  >
                                  <mx:itemRenderer>
                                        <mx:Component>
                                           <mx:HBox horizontalAlign="center">
                                           <mx:CheckBox id="checkBox"  selected="{data.completed}"/>
                                        </mx:HBox>
                                      </mx:Component>
                                   </mx:itemRenderer>
                            </mx:DataGridColumn>
                        </mx:columns>
                    </mx:DataGrid>
                </mx:Application>

                 

                and here's my error message:

                 

                warning: unable to bind to property 'completed' on class 'Object' (class is not an IEventDispatcher)
                warning: unable to bind to property 'completed' on class 'Object' (class is not an IEventDispatcher)
                warning: unable to bind to property 'completed' on class 'Object' (class is not an IEventDispatcher)
                warning: unable to bind to property 'completed' on class 'Object' (class is not an IEventDispatcher)
                warning: unable to bind to property 'completed' on class 'Object' (class is not an IEventDispatcher)

                 

                Thanks for your help.

                • 5. Re: Datagrid checkbox
                  BhaskerChari Level 4

                  Hi,

                  I dont see any such type of warning..? Which version of Flex Builder and SDK you are using..?

                   

                  Will you please mention exactly at which line you are getting this warning..?

                  • 6. Re: Datagrid checkbox
                    SiHoop Level 1

                    I'm working on a Mac using Flex 3 and 3.5 sdk. It's not an error, but a warning. The warning appears in the Console window. The warning occurs when I add an item to the arrayCollection. The first time I add an item the warning occurs twice.

                     

                    datagridData.addItem({taskId: "1", title: "aaaa", completionTime: "1",  completed: true});

                     

                    After that I get a warning each time an item is added to the AC.

                    • 7. Re: Datagrid checkbox
                      BhaskerChari Level 4

                      Hi,

                       

                      Try to use either of these functions and see which one will remove the warning..

                       

                       

                      private function init():void{
                           datagridData = new ArrayCollection([{taskId: "1", title: "aaaa", completionTime: "1", completed: true},
                           {taskId: "2", title: "bbbb", completionTime: "2", completed: false},
                           {taskId: "3", title: "cccc", completionTime: "3", completed: true}]);
                      }

                      private function init():void{
                           datagridData = new ArrayCollection();
                          
                           var obj:Object = new Object();
                           obj.taskId = "1";
                           obj.title = "aaaa";
                           obj.completionTime = "1";
                           obj.completed = true;
                           datagridData.addItem(obj);
                          
                           obj = new Object();
                           obj.taskId = "2";
                           obj.title = "bbbb";
                           obj.completionTime = "2";
                           obj.completed = false;
                           datagridData.addItem(obj);
                          
                           obj = new Object();
                           obj.taskId = "3";
                           obj.title = "aaaa";
                           obj.completionTime = "3";
                           obj.completed = true;
                           datagridData.addItem(obj);
                      }

                       

                       

                      Hope this works for you..

                       

                      Thanks,

                      Bhasker

                      • 8. Re: Datagrid checkbox
                        SiHoop Level 1

                        I tried your suggestions but got the same error both times.I've been looking online for a solution and it seems I need to convert the ArrayCollection to an ObjectProxy, but I still can't get it to work without the warning message.

                        • 9. Re: Datagrid checkbox
                          Flex harUI Adobe Employee

                          Define a data class and use that instead of Object.

                           

                          Public class MyData

                          {

                              public var taskID:String;

                              public var completed:Boolean;

                              ...

                          }

                          • 10. Re: Datagrid checkbox
                            SiHoop Level 1

                            Would you mind providing a little more detail? I don't understand what you mean. What is a Bindable Public class? Is this something I should create as a new class or is it declared in my main file? And how would I connect the class with the data stored in the ArrayCollection?

                            Thanks for your help.

                            • 11. Re: Datagrid checkbox
                              Flex harUI Adobe Employee

                              There should be square brackets around Bindable.  Create a new class, define

                              it like I showed you and change your AC init to something more like:

                               

                              private function init():void{

                                  datagridData = new ArrayCollection();

                                  var md:MyData = new MyData();

                                  md.taskID = 1;

                                  md.title = "aaaa";

                                  md.completed = true;

                                  dataGridData.addItem(md);

                                  ....

                              1 person found this helpful
                              • 12. Re: Datagrid checkbox
                                SiHoop Level 1

                                Very nice-- works perfectly. I really appreciate your explanation. But why do I have to do this to prevent the warning?

                                What's going on here?