4 Replies Latest reply on Jun 22, 2009 9:35 PM by kolban1

    Datagrids displaying all data in two columns

    rattlemania

      Hello,

       

      With datagrid control, data is normally displayed as a number of columns each with a header and data for that column.

       

      I have a database and I want to display all the column names in first column and the data in the second column. Is it possible to have a two column datagrid which displays in one column for all the headings from the database and in second column all the data for those headings?

       

       

       

      Names
      Data
      Name OneData One
      Name TwoData Two
      Name ThreeData Three
      Name FourData Four

       

      Please excuse but am new to Flex.

        • 1. Re: Datagrids displaying all data in two columns
          Flex harUI Adobe Employee

          What do your data objects look like?

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Datagrids displaying all data in two columns
            *Prashant Shelke* Level 4

            While preparing data on server-side you need to set schema columns as Object.label & value for that column as Object.data then this dataProvider you need to set on client-side.(dataProvider length = number of columns in schema)

            • 3. Re: Datagrids displaying all data in two columns
              rattlemania Level 1

              Thanks for the replies.

               

              I don't seem to have maybe given you to full information.  This is an AIR app and I have added a snippet of my code below:

               

                        {

                        var stmt:SQLStatement = new SQLStatement();
                              stmt.sqlConnection = sqlConn;
                              stmt.text = "SELECT * FROM project";
                              stmt.execute();
                              var result:SQLResult = stmt.getResult();
                              acGrid = new ArrayCollection(result.data);   
                              trace(acGrid)           
                          }                   
                                     
                      ]]>       
                  </mx:Script>
                  <mx:VBox left="10" right="10" top="5" width="300">       
                 
                  <mx:DataGrid id="dg" dataProvider="{acGrid}" resizableColumns="false"
                      variableRowHeight="true" width="250" rowCount="20">
                      <mx:columns>
                                 
                          <mx:DataGridColumn dataField="prjid" headerText="Project ID" width="75"/>
                          <mx:DataGridColumn dataField="projectref" headerText="Project.Ref"/>
                          <mx:DataGridColumn dataField="productionname" headerText="Prod.Name"/>
                          <mx:DataGridColumn dataField="datecreated" headerText="Created"/>           
                         
                      </mx:columns>       
                  </mx:DataGrid>

               

              This is to test that I can retrieve the data from the database into the datagrid and this works.

               

              This produces a datagrid like this:

               

              Project ID
              Project Ref
              Prod.NameCreated
              1ABCNAMEDate

               

              But when I need to achieve is:

               

              LabelsData
              Project ID1
              Project Ref.ABC
              Prod. NameNAME
              CreatedDate

               

              A two column datagrid

               

              Thank you for your help and sorry for any confusion.

              • 4. Re: Datagrids displaying all data in two columns
                kolban1

                Here is a sample program that may help.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:WindowedApplication initialize="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                <mx:Script>
                    <![CDATA[
                        import mx.collections.ArrayCollection;
                        private var myObject:Object = {"A":"a value", "B": "b value", "c": "c value"};
                       
                        [Bindable] private var myData:ArrayCollection = new ArrayCollection();
                       
                        private function init():void
                        {
                            for (var key:String in myObject)
                            {
                                myData.addItem({"Label": key, "Data": myObject[key]});
                            }
                        }
                    ]]>
                </mx:Script>   
                    <mx:DataGrid x="77" y="50" dataProvider="{myData}">
                        <mx:columns>
                            <mx:DataGridColumn headerText="Labels" dataField="Label"/>
                            <mx:DataGridColumn headerText="Data" dataField="Data"/>
                        </mx:columns>
                    </mx:DataGrid>
                </mx:WindowedApplication>

                 

                It takes a single Object and displays the properties of that object in two columns, one with the name and one with the value.  In your example, you are retrieving data from a table.  What if the table returns more than one row?  Doesn't that mean you will have duplicate names in your "Labels" column?  I'm not sure this is what you are after.

                 

                Neil