5 Replies Latest reply on Jul 15, 2010 7:03 AM by -skitch-

    Update DataGrid column that's source is an array collection

    -skitch- Level 1

      I have a datagrid that is fueled by an Array Collection data provider.  One of the columns is also fueled by an array collection property of each item in the data provider.  I have it so that the label function of the column does an array.join to produce a single string delimited by commas.  Therefore making the array collection property a string like: "test, hello, please".

       

      The only problem is, if that array collection property changes, it doesn't seem to appear to change in the data grid.  Is there away I can get the binding to work?

        • 1. Re: Update DataGrid column that's source is an array collection
          BhaskerChari Level 4

          Hi skitch,

           

          Can you post sample code you are working..reproducing your problem..??

           

           

          Thanks,

          Bhasker Chari

          • 2. Re: Update DataGrid column that's source is an array collection
            -skitch- Level 1

            sure! Each row in the Tag column is an Array Collection.  I use the label function to print the array collection as a string of text.  The problem is that when the array collection is changed elsewhere (items are added, edited, removed), the data grid does not pick up the changes.  The only case it would pick up the change, is if I set the entire array collection to a new array collection.

             

            I have set the array collection to be bindable, but the data grid doesn't pick up the changes.

                    <!-- ROLE DATA GRID -->
                    <mx:DataGrid
                        id="characterGrid"
                        width="100%"
                        height="100%"
                        sortableColumns="true"
                        dataProvider="{individualsPM.selectedIndividual.roles}"
                        change="individualsPM.selectedRole = characterGrid.selectedItem as Role"
                        resizableColumns="true">   
                        <mx:columns>
                            <mx:DataGridColumn
                                dataField="id"
                                headerText="ID"/>
                            <mx:DataGridColumn
                                dataField="name"
                                headerText="NAME"/>
                            <mx:DataGridColumn
                                dataField="type"
                                headerText="TYPE"/>
                            <mx:DataGridColumn
                                dataField="thumbUrl"
                                labelFunction="dataGridHasThumb"
                                headerText="THUMB"
                                width="75"/>
                            <mx:DataGridColumn
                                dataField="tags"
                                labelFunction="dataGridTags"
                                headerText="TAGS"/>
                        </mx:columns>
                    </mx:DataGrid>

             

             

                        /**
                         * dataGridTags
                         * @param Object the item in the data grid
                         * @param DataGridColumn the column of the data grid
                         */
                        protected function dataGridTags (item:Object, column:DataGridColumn):String
                        {
                            if (item is Role)
                            {
                                var role:Role = Role(item);
                                var returnString:String = "";
                                for each(var roleTag:RoleTag in role.tags)
                                {
                                    returnString += roleTag.roleName + ", ";
                                }
                                return returnString.substr(0, returnString.length - 2);
                            } else return "";
                        }

            • 3. Re: Update DataGrid column that's source is an array collection
              BhaskerChari Level 4

              Hi Skitch,

               

              Try to use a seperate variable for your datagrid dataprovider as below:

               

              [Bindable]

              private var acRoles:ArrayCollection = new ArrayCollection();

              acRoles =  individualsPM.selectedIndividual.roles;

               

              Now use  acRoles as the dataProvider for your DataGrid ...Also don't forget to set acRoles as [Bindable] ...

               

              If you now make any changes to acRoles arraycollection call the refresh() method of arraycollection as acRoles.refresh() whenever you add or remove items or make any changes...

               

              <mx:DataGrid
                          id="characterGrid"
                          width="100%"
                          height="100%"
                          sortableColumns="true"
                          dataProvider="{acRoles }"
                          change="individualsPM.selectedRole = characterGrid.selectedItem as Role"
                          resizableColumns="true">

               

              You said  in your earliar post that you are making chnages to your dataprovider in what way you are adding or removing items for your dataprovider...

               

              Try to use the above approach once I suggested and let me know..

               

              Thanks,
              Bhasker Chari

              • 4. Re: Update DataGrid column that's source is an array collection
                -skitch- Level 1

                Hey  Bhasker,

                 

                The problem doesn't really lie with the dataprovider of the datagrid, but more or less one of the properties of the items in the dataprovider.

                 

                One of the properties is an array collection (which is one of the columns; i.e. each item in the dataprovider has this array collection).  Every other column is a pretty atomic property (string, int, boolean), but there is a column that is based off an array collection.  The issue being is, the datagrid will notice changes when I make updates to the atomic properties, but not when I make changes to the array collection property.

                 

                I tried refresh on that array collection, but no luck.

                 

                Say my dataprovider is (this is quick mock up):

                 

                <Array Collection id="dataprovider">

                     <item>

                          <name value="test"/>

                          <id value="182378qjfa"/>

                          <Array Collection id="tags">

                               <item>

                                    <name value="tag1"/>

                               </item>

                          </Array Collection>

                     </item>

                </ArrayCollection>

                So my data grid dataprovider is "dataprovider", and my columns are name, id, tags; like below:

                        <mx:DataGrid
                            id="characterGrid"
                            width="100%"
                            height="100%"
                            sortableColumns="true"
                            dataProvider="{individualsPM.selectedIndividual.roles}"
                            change="individualsPM.selectedRole = characterGrid.selectedItem as Role"
                            resizableColumns="true">   
                            <mx:columns>
                                <mx:DataGridColumn
                                    dataField="id"
                                    headerText="ID"/>
                                <mx:DataGridColumn
                                    dataField="name"
                                    headerText="NAME"/>
                                <mx:DataGridColumn
                                    dataField="type"
                                    headerText="TYPE"/>
                                <mx:DataGridColumn
                                    dataField="thumbUrl"
                                    labelFunction="dataGridHasThumb"
                                    headerText="THUMB"
                                    width="75"/>
                                <mx:DataGridColumn
                                    dataField="tags"
                                    labelFunction="dataGridTags"
                                    headerText="TAGS"/>
                            </mx:columns>
                        </mx:DataGrid>

                The problem is, the data grid never picks up the changes to the tags array collection (last column).  It does pick up changes to the actual dataprovider though.  Any help would be awesome.

                 

                Thanks,

                Skitch

                • 5. Re: Update DataGrid column that's source is an array collection
                  -skitch- Level 1

                  Just an update...I was able to find a solution.  Basically I wanted the Array Collection to fire a CollectionChange Event, which then dispatched a Property Change Event like below:

                   

                          /**
                           * The tags associated with the Role
                           */
                          [Bindable]
                          public function set tags(value:ArrayCollection):void
                          {
                              //REMOVE EXISITNG EVENT LISTENER
                              if(_tags !== null)
                              {
                                  _tags.removeEventListener(CollectionEvent.COLLECTION_CHANGE, tagsPropertyChange);
                              }
                             
                              //SET VALUE
                              _tags = value;
                             
                              //SET NEW EVENT LISTENER
                              if(_tags !== null)
                              {
                                  _tags.addEventListener(CollectionEvent.COLLECTION_CHANGE, tagsPropertyChange);
                              }                 
                          }
                          public function get tags():ArrayCollection { return _tags; }
                          private var _tags:ArrayCollection;
                         
                          /**
                           * tagsPropertyChange
                           * @param CollectionEvent the collection change event
                           * The property change event fired during a _tags collection change
                           */
                          public function tagsPropertyChange(event:CollectionEvent):void
                          {
                              this.dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, tags, null, null));
                          }