8 Replies Latest reply on Mar 10, 2010 11:29 PM by bornaeon

    Nested Inline ItemRenderers – A List in a DataGrid

    bornaeon

      My dear friends,

      There is a Flex 3.2 sample about this title, in this link... one part of code is here:


      <mx:DataGrid id="myDatagrid" creationComplete="initCatalog(products)"
          variableRowHeight="true" width="300" height="300">
         <mx:columns>
             <mx:DataGridColumn dataField="price" />
             <mx:DataGridColumn dataField="items" labelFunction="labelFunc" >
               <mx:itemRenderer>
                <mx:Component>
                       <mx:List height="120" rowHeight="40" dataProvider="{data.items}">
                           <mx:itemRenderer>
                               <mx:Component>
                                   <mx:Image />
                               </mx:Component>
                          </mx:itemRenderer>
                       </mx:List>
                   </mx:Component>
               </mx:itemRenderer>
            </mx:DataGridColumn>
         </mx:columns>
      </mx:DataGrid>


      And the code is right, and doing well. but when I want to use it in Flash Builder 4 Beta 2, there is an error like this:

      #1010: A term is undefined and has no properties.


      my code is here, just like 3rd version:

      <mx:DataGrid id="myDatagrid" creationComplete="initCatalog(products)" 
          variableRowHeight="true" width="300" height="300">
         <mx:columns>
             <mx:DataGridColumn dataField="price" />
             <mx:DataGridColumn dataField="items" labelFunction="labelFunc" >
               <mx:itemRenderer>
                <fx:Component>
                       <mx:List height="120" rowHeight="40" dataProvider="{data.items}">
                           <mx:itemRenderer>
                               <fx:Component>
                                   <mx:Image />
                               </fx:Component>
                          </mx:itemRenderer>
                       </mx:List>
                   </fx:Component>
               </mx:itemRenderer>
            </mx:DataGridColumn>
         </mx:columns>
      </mx:DataGrid>


      What should I do to fix that?!

      TanQ

        • 1. Re: Nested Inline ItemRenderers – A List in a DataGrid
          Flex harUI Adobe Employee

          Post the entire stacktrace of the error.

          • 2. Re: Nested Inline ItemRenderers – A List in a DataGrid
            bornaeon Level 1

            TypeError: Error #1010: A term is undefined and has no properties.
                at mx.controls.listClasses::ListBase/setSelectionDataLoop()[E:\dev\gumbo_beta2\frameworks\pr ojects\framework\src\mx\controls\listClasses\ListBase.as:7362]
                at mx.controls.listClasses::ListBase/commitSelectedItems()[E:\dev\gumbo_beta2\frameworks\pro jects\framework\src\mx\controls\listClasses\ListBase.as:7253]
                at mx.controls.listClasses::ListBase/commitSelectedItem()[E:\dev\gumbo_beta2\frameworks\proj ects\framework\src\mx\controls\listClasses\ListBase.as:7218]
                at mx.controls.listClasses::ListBase/adjustSelectionSettings()[E:\dev\gumbo_beta2\frameworks \projects\framework\src\mx\controls\listClasses\ListBase.as:4686]
                at mx.controls.listClasses::ListBase/updateDisplayList()[E:\dev\gumbo_beta2\frameworks\proje cts\framework\src\mx\controls\listClasses\ListBase.as:4409]
                at mx.controls::List/updateDisplayList()[E:\dev\gumbo_beta2\frameworks\projects\framework\sr c\mx\controls\List.as:1150]
                at mx.controls.listClasses::ListBase/validateDisplayList()[E:\dev\gumbo_beta2\frameworks\pro jects\framework\src\mx\controls\listClasses\ListBase.as:3969]
                at mx.managers::LayoutManager/validateClient()[E:\dev\gumbo_beta2\frameworks\projects\framew ork\src\mx\managers\LayoutManager.as:931]
                at mx.core::UIComponent/validateNow()[E:\dev\gumbo_beta2\frameworks\projects\framework\src\m x\core\UIComponent.as:7249]
                at mx.controls.dataGridClasses::DataGridBase/updateRendererDisplayList()[E:\dev\gumbo_beta2\ frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1330]
                at mx.controls.dataGridClasses::DataGridBase/drawItem()[E:\dev\gumbo_beta2\frameworks\projec ts\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1295]
                at mx.controls.dataGridClasses::DataGridBase/drawVisibleItem()[E:\dev\gumbo_beta2\frameworks \projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1268]
                at mx.controls.dataGridClasses::DataGridBase/makeRows()[E:\dev\gumbo_beta2\frameworks\projec ts\framework\src\mx\controls\dataGridClasses\DataGridBase.as:804]
                at mx.controls.dataGridClasses::DataGridBase/makeRowsAndColumns()[E:\dev\gumbo_beta2\framewo rks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:688]
                at mx.controls::DataGrid/makeRowsAndColumns()[E:\dev\gumbo_beta2\frameworks\projects\framewo rk\src\mx\controls\DataGrid.as:1817]
                at mx.controls.listClasses::ListBase/makeRowsAndColumnsWithExtraRows()[E:\dev\gumbo_beta2\fr ameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:1750]
                at mx.controls.listClasses::ListBase/updateDisplayList()[E:\dev\gumbo_beta2\frameworks\proje cts\framework\src\mx\controls\listClasses\ListBase.as:4387]
                at mx.controls.dataGridClasses::DataGridBase/updateDisplayList()[E:\dev\gumbo_beta2\framewor ks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:676]
                at mx.controls::DataGrid/updateDisplayList()[E:\dev\gumbo_beta2\frameworks\projects\framewor k\src\mx\controls\DataGrid.as:1716]
                at mx.controls.listClasses::ListBase/validateDisplayList()[E:\dev\gumbo_beta2\frameworks\pro jects\framework\src\mx\controls\listClasses\ListBase.as:3969]
                at mx.managers::LayoutManager/validateDisplayList()[E:\dev\gumbo_beta2\frameworks\projects\f ramework\src\mx\managers\LayoutManager.as:663]
                at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\gumbo_beta2\frameworks\projects \framework\src\mx\managers\LayoutManager.as:736]
                at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\gumbo_beta2\frameworks\ projects\framework\src\mx\managers\LayoutManager.as:1069]

            • 3. Re: Nested Inline ItemRenderers – A List in a DataGrid
              Flex harUI Adobe Employee

              That error indicates that the selectedItem is not in the dataprovider.

              • 4. Re: Nested Inline ItemRenderers – A List in a DataGrid
                bornaeon Level 1

                I see.

                I know the problem is List's data provider:  dataProvider="{data.items}"

                But the problem is that the code is exactly the same as the code in Flex 3 and that's doing right in there!!!

                I just copied the code from Flex builder 3.2 and paste it in Flash Builder 4 Beta 2 and convert <mx:Script> tag to <fx:Script> and <mx:Component> to <fx:Component>. And I didn't make any other changes to rest of codes line! shouldn't it work as well as Flex builder 3 in Flash Builder 4?!?!

                I'll paste all the code from Flex 3 at the end of my post...

                (Let me say that, I found the sample from here.)



                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    width="600" height="600" xmlns="*">

                 

                <mx:Script>
                <![CDATA[

                 

                   import mx.collections.ArrayCollection;  
                  
                   private var catalog:ArrayCollection;

                 

                   [Bindable]
                   public var under50:Array = ["assets/putty.jpg", "assets/cantena.jpg"];
                  
                   [Bindable]
                   public var between50100:Array = ["assets/orb.jpg", "assets/globe.jpg", "assets/usbfan.jpg"];
                  
                   [Bindable]
                   public var over100:Array = ["assets/hotsauce.jpg"];
                        
                    private var products:Array =
                    [
                    { price: "under $50", items: under50},
                    { price: "$50 - $100", items: between50100},
                    { price: "over $100", items: over100}
                    ];

                 

                    private function initCatalog(cat:Array):void
                    {
                    catalog = new ArrayCollection(cat);
                    myDatagrid.dataProvider = catalog;
                    }
                  
                    private function labelFunc(item:Object, item2:Object) : String
                    {
                    if(item.cdata)
                        return "yes";
                    else {
                        return "no";
                    }
                    }
                ]]>
                </mx:Script>

                 

                <mx:Label text="CellRenderer - Nested Inline " fontSize="15" />

                 

                <mx:DataGrid id="myDatagrid" creationComplete="initCatalog(products)"
                    variableRowHeight="true" width="300" height="300">
                   <mx:columns>
                       <mx:DataGridColumn dataField="price">
                           <mx:itemRenderer>
                               <mx:Component>
                                   <mx:Label />             
                               </mx:Component>
                           </mx:itemRenderer>
                       </mx:DataGridColumn>
                       <mx:DataGridColumn dataField="items" labelFunction="labelFunc" >
                         <mx:itemRenderer>
                         <mx:Component>
                                 <mx:List height="120" rowHeight="40" dataProvider="{data.items}">
                                     <mx:itemRenderer>
                                         <mx:Component>
                                             <mx:Image />
                                         </mx:Component>
                                    </mx:itemRenderer>
                                 </mx:List>
                             </mx:Component>
                         </mx:itemRenderer>
                      </mx:DataGridColumn>
                   </mx:columns>
                </mx:DataGrid>

                 

                </mx:Application>

                • 5. Re: Nested Inline ItemRenderers – A List in a DataGrid
                  bornaeon Level 1

                  Dear FLex harUI,

                  I'm cheking another things in Flash builder 4 Beta 2 with default sdk and see the same problem!

                  I think problem is in the Nested Grids. you know? parent DataGrid know all of functions, CallResponder and ... but entire DataGrid (child one) don't know any of them...

                  For example, I'm using .NET web service in flex... main code is here:


                       <fx:Script>
                          <![CDATA[
                              import mx.events.FlexEvent;
                              import mx.controls.Alert;           


                              protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                              {
                                  GetSingleClassResult.token = sampleDataService.GetSingleClass();
                              }


                          ]]>
                      </fx:Script>
                     
                      <fx:Declarations>       
                          <s:CallResponder id="GetSingleClassResult"/>       
                          <sampledataservice:SampleDataService id="sampleDataService"

                                 fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>       
                      </fx:Declarations>


                       <mx:DataGrid x="10" y="10" id="dataGrid"
                                   creationComplete="dataGrid_creationCompleteHandler(event)"
                                   dataProvider="{GetSingleClassResult.lastResult}">
                          <mx:columns>           
                              <mx:DataGridColumn headerText="FirstName" dataField="FirstName"/>
                              <mx:DataGridColumn headerText="ImageUrl" dataField="ImageUrl" itemRenderer="mx.controls.Image"/>
                              <mx:DataGridColumn headerText="LastName" dataField="LastName"/>
                          </mx:columns>
                      </mx:DataGrid>



                  And all things are right. but when I want to put another Grid to First DataGridColumn of parent DataGrid, like this:


                       <fx:Script>
                           <![CDATA[
                               import mx.events.FlexEvent;
                               import mx.controls.Alert;           


                              protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                               {
                                   GetSingleClassResult.token = sampleDataService.GetSingleClass();
                               }

                           

                              protected function dataGrid2_creationCompleteHandler(event:FlexEvent):void
                               {
                                   GetSingleClassResult2.token = sampleDataService.GetSingleClass();
                               }

                      

                           ]]>

                       </fx:Script>


                      
                       <fx:Declarations>       
                          <s:CallResponder id="GetSingleClassResult2" />               

                          <s:CallResponder id="GetSingleClassResult" />       
                           <sampledataservice:SampleDataService id="sampleDataService"

                                 fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>       
                       </fx:Declarations>

                      

                       <mx:DataGrid x="10" y="10" id="dataGrid"
                                   creationComplete="dataGrid_creationCompleteHandler(event)"
                                   dataProvider="{GetSingleClassResult.lastResult}">
                          <mx:columns>
                              <mx:DataGridColumn headerText="Childs">
                                  <mx:itemRenderer>
                                      <fx:Component>                       
                                          <mx:Canvas>
                                              <mx:DataGrid id="dataGrid2"  creationComplete="dataGrid2_creationCompleteHandler(event)"
                                                       dataProvider="{GetSingleClassResult2.lastResult.Childs}" showHeaders="false" >
                                              <mx:columns>
                                                  <mx:DataGridColumn>
                                                      <mx:itemRenderer>
                                                          <fx:Component>
                                                              <mx:Image />
                                                          </fx:Component>
                                                      </mx:itemRenderer>
                                                  </mx:DataGridColumn>
                                              </mx:columns>
                                          </mx:DataGrid>
                                          </mx:Canvas>
                                      </fx:Component>
                                  </mx:itemRenderer>
                              </mx:DataGridColumn>
                              <mx:DataGridColumn headerText="FirstName" dataField="FirstName"/>
                              <mx:DataGridColumn headerText="ImageUrl" dataField="ImageUrl" itemRenderer="mx.controls.Image"/>
                              <mx:DataGridColumn headerText="LastName" dataField="LastName"/>
                          </mx:columns>
                      </mx:DataGrid>


                  dataProvider and creationComplete are unknown and I have some error like these:

                  1120: Access of undefined property GetSingleClassResult2.

                  1180: Call to a possibly undefined method dataGrid2_creationCompleteHandler.


                  What should we do?!

                  • 6. Re: Nested Inline ItemRenderers – A List in a DataGrid
                    Flex harUI Adobe Employee

                    mx:Component defines a sub-document boundary.  Things in the main document

                    need to be public and referenced via outerDocument.

                    • 7. Re: Nested Inline ItemRenderers – A List in a DataGrid
                      Flex harUI Adobe Employee

                      I don't remember what behavior shipped in beta2, but there was a period of

                      time when the List was more sensitive to having selectedItem not be in the

                      dataprovider.  It might work again on the latest nightly builds.

                       

                      The way you have it coded, the DG will hand the List one of the arrays in

                      "items" so the List's DP needs to be a dataProvider of all three of those

                      arrays.  I doubt that's what you really want so describe what you want and

                      we'll see if we can figure it out.

                      • 8. Re: Nested Inline ItemRenderers – A List in a DataGrid
                        bornaeon Level 1


                        Dear Flex harUI, TanQ for your replies...

                        At first, I'm downloading the latest nightly builds and I'll try that... TanQ again.

                        And now, Let me describe it more for u... I'm developing a graphical project in my native language (Persian)

                        In my home page, I have a poets list and under each poet's name, list of his/her poem books.

                        You can see that in the pics, below:


                        Simple Pic:

                        Dorj_1.jpg

                         

                        More describes in pic:

                        Dorj_2.jpg


                        All of my data, such as my list of poems and their books are in the DB that moderate with MS SQLServer. And I bind my data from my DB to my Flex project with WCF web service in BasicHttpBindding mode. I'm gonna use nested grids, that the first column is for poet's name and the second one is another list or DG to generate the book list of that specific poet; just like the pics, above.

                         

                        Do you have an idea, how can I implement this?!