8 Replies Latest reply on Feb 10, 2010 9:14 PM by Raju Penumatsa

    Datagrid inside a datagrid

    Raju Penumatsa

      Hello every one...

       

      I am facing an issue in displaying data in a datagrid inside a cell of another datagrid. Let me explain you clearly my requirement. I want to display data in a datagrid/Advanced datagrid with two columns. In each row first column value will be associated with multiple data values in the second cell . so i thought of putting a datagrid in second coloumn so that i can get multiple rows in second column for each row of the parent datagrid. For example take the following sample xml file. In this file each student record is associated with multiple teacher details.

       

      So could anybody please suggest me the the way to do this...

       

      Thanks in advance

       

      Sample xml:

       

      <stud_det>

       

          <student>

       

              <name>student1</name>

       

              <teacher>

       

                  <name>teacher1</name>

       

              </teacher>

       

              <teacher>

       

                  <name>teacher2</name>

       

              </teacher>

       

              <teacher>

       

                  <name>teacher3</name>

       

              </teacher>

       

          </student>

       

          <student>

       

              <name>student2</name>

       

              <teacher>

       

                  <name>teacher2</name>

       

              </teacher>

       

              <teacher>

       

                  <name>teacher4</name>

       

              </teacher>

       

              <teacher>

       

                  <name>teacher3</name>

       

              </teacher>

       

          </student>

       

      </stud_det>

        • 1. Re: Datagrid inside a datagrid
          archemedia Level 4

          You can make an itemRenderer for the second column which is a dataGrid too.

           

          Something like this:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
             
              <mx:Script>
                  <![CDATA[
                      import mx.events.DragEvent;
                      import mx.collections.ArrayCollection;
                     
                      [Bindable]
                      private var dp:ArrayCollection = new ArrayCollection();
                     
                      private function init():void
                      {
                          var apa:Array = [
                              {student: "John", teachers: [{name: "Mark"}, {name: "Linda"}]},
                              {student: "Paul", teachers: [{name: "Obama"}]},
                              {student: "George", teachers: [{name: "Caroline"}, {name: "Christine"}]},
                              {student: "Ringo", teachers: [{name: "Frank"}]}];
                          dp.source = apa;
                      }
                     
                     
                  ]]>
              </mx:Script>
             
              <mx:DataGrid dataProvider="{dp}" variableRowHeight="true" width="600" height="800">
                  <mx:columns>
                      <mx:DataGridColumn headerText="Student" dataField="student" width="50"/>
                      <mx:DataGridColumn headerText="Selected">
                          <mx:itemRenderer>
                              <mx:Component>
                                  <mx:DataGrid dataProvider="{data.teachers}">
                                      <mx:columns>
                                          <mx:DataGridColumn headerText="name" dataField="name"/>
                                      </mx:columns>
                                  </mx:DataGrid>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                  </mx:columns>
              </mx:DataGrid>
          </mx:Application>

           

           

          I used an arrayCollection as dataProvider, but you can use an XML collection as well.

           

          Hope this helps

           

          Dany

          1 person found this helpful
          • 2. Re: Datagrid inside a datagrid
            Claudino Bur Level 2

            You will also have to consider the performance issue...the memory usage if you would use a datagrid in a datagrid. I had a project and I needed to render lot's of data in this way so sometimes it was freazing the screen.

            • 3. Re: Datagrid inside a datagrid
              Raju Penumatsa Level 1

              Thanks for the solution.I tried this using Value Objects since i am going to build an app using Blaze DS so i am going to use Value Objects to hold data.

              But when i tried using VO s i got the follwoing error msg

               

              TypeError: Error #1010: A term is undefined and has no properties.
                  at mx.controls.listClasses::ListBase/setSelectionDataLoop()[C:\autobuild\3.4.0\frameworks\pr ojects\framework\src\mx\controls\listClasses\ListBase.as:6473]

               

              Here i am providing my code. Could you please investigate the problem and help me out.. I am fairly new to this flex .I have 1 month experience in flex.so could you please suggest me if have done anything wrong here

               

               

              TeacherVO.as

               

              package
              {
                  public class TeacherVO
                  {
                      public var name:String;
                      public function TeacherVO()
                      {
                         
                      }
                  }
              }

               

              StudentVO

              package
              {
                  import mx.collections.ArrayCollection;

               

                  public class StudentVO
                  {
                      public var name:String;
                      public var teacherCol:ArrayCollection;
                      public function StudentVO()
                      {
                         
                      }
                  }
              }

               

               

              Stud_det.mxml

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024" minHeight="768" creationComplete="init()">
                  <mx:Script>
                      <![CDATA[
                          import mx.collections.ArrayCollection;
                          [Bindable]
                          private var studCol:ArrayCollection = new ArrayCollection();
                          private function init():void
                          {
                              var teacher1:TeacherVO= new TeacherVO();
                              teacher1.name="Obama";
                              var teacher2:TeacherVO= new TeacherVO();
                              teacher2.name="Mark";
                             
                              var teacherCol:ArrayCollection= new ArrayCollection();
                              teacherCol.addItem(teacher1);
                              teacherCol.addItem(teacher2);
                             
                              var stud1:StudentVO= new StudentVO();
                              stud1.name="John";
                              stud1.teacherCol=teacherCol;
                             
                              studCol.addItem(stud1);
                             
                          }
                      ]]>
                  </mx:Script>
                  <mx:DataGrid dataProvider="{studCol}" variableRowHeight="true" width="600" height="800">
                      <mx:columns>
                          <mx:DataGridColumn headerText="Student" dataField="name" width="50"/>
                          <mx:DataGridColumn headerText="Teacher" dataField="teacherCol" >
                              <mx:itemRenderer>
                                  <mx:Component>
                                      <mx:DataGrid dataProvider="{data.teacherCol}" showHeaders="false">
                                          <mx:columns>
                                              <mx:DataGridColumn  dataField="name"/>
                                          </mx:columns>
                                      </mx:DataGrid>
                                  </mx:Component>
                              </mx:itemRenderer>
                          </mx:DataGridColumn>
                      </mx:columns>
                  </mx:DataGrid>
              </mx:Application>

              • 4. Re: Datagrid inside a datagrid
                Francisc Level 3

                You could also consider using an AdvancedDataGrid component, maybe it fits your purposes.

                 

                http://livedocs.adobe.com/flex/3/langref/mx/controls/AdvancedDataGrid.html#includeExamples Summary

                • 5. Re: Datagrid inside a datagrid
                  archemedia Level 4

                  Consider MASH reply using advancedDataGrid!

                   

                  Where your solution concerns, a few changes:

                   

                  TeacherVO.as

                   

                  package
                  {

                      [Bindable]
                      public class TeacherVO
                      {
                          public var name:String;
                          public function TeacherVO()
                          {
                             
                          }
                      }
                  }

                   

                  StudentVO

                  package
                  {
                      import mx.collections.ArrayCollection;

                   

                       [Bindable]

                   

                      public class StudentVO
                      {
                          public var name:String;
                          public var teacherCol:ArrayCollection;
                          public function StudentVO()
                          {
                             
                          }
                      }
                  }

                   

                   

                  Stud_det.mxml

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024" minHeight="768" creationComplete="init()">
                      <mx:Script>
                          <![CDATA[
                              import mx.collections.ArrayCollection;
                              [Bindable]
                              private var studCol:ArrayCollection = new ArrayCollection();
                              private function init():void
                              {
                                  var teacher1:TeacherVO= new TeacherVO();
                                  teacher1.name="Obama";
                                  var teacher2:TeacherVO= new TeacherVO();
                                  teacher2.name="Mark";
                                 
                                  var teacherCol:ArrayCollection= new ArrayCollection();
                                  teacherCol.addItem(teacher1);
                                  teacherCol.addItem(teacher2);
                                 
                                  var stud1:StudentVO= new StudentVO();
                                  stud1.name="John";
                                  stud1.teacherCol=teacherCol;
                                 
                                  studCol.addItem(stud1);
                                 
                              }
                          ]]>
                      </mx:Script>
                      <mx:DataGrid dataProvider="{studCol}" variableRowHeight="true" width="600" height="800">
                          <mx:columns>
                              <mx:DataGridColumn headerText="Student" dataField="name" width="50"/>
                              <mx:DataGridColumn headerText="Teacher" dataField="teacherCol" >
                                  <mx:itemRenderer>
                                      <mx:Component>
                                          <mx:DataGrid dataProvider="{data.teacherCol}" showHeaders="false">
                                              <mx:columns>
                                                  <mx:DataGridColumn  dataField="name"/>
                                              </mx:columns>
                                          </mx:DataGrid>
                                      </mx:Component>
                                  </mx:itemRenderer>
                              </mx:DataGridColumn>
                          </mx:columns>
                      </mx:DataGrid>

                   

                   


                  </mx:Application>

                  • 6. Re: Datagrid inside a datagrid
                    Raju Penumatsa Level 1

                    Thanks for your suggestions...Finally i came to know that the problem is only in flex SDK 4 with flash builder 4 . The same code is working fine in flex builder 3.... So any suggestions on how to do the same in flash builder 4  ??

                    • 7. Re: Datagrid inside a datagrid
                      archemedia Level 4

                      Sorry, can't help you on that. I still work in 3

                       

                      Maybe you can try to make a custom mxml component with a dataGrid in it and then link that component to the itemRenderer of your main grid instead of using an inline item renderer. That might work

                       

                      Dany

                      • 8. Re: Datagrid inside a datagrid
                        Raju Penumatsa Level 1

                        Thanks for your time. Even i tried the same before.. but useless .....