12 Replies Latest reply on Dec 1, 2011 10:27 AM by Code Girl

    Single Column Datagrid

    Code Girl Level 1

      I have a combobox with a list of class a

      when a record is selected in the ComboBox then the data grid is populated with a list from a of type class b which basically is a id and name

       

      Since I do not want to list the id field I only want to to list the name field but if someone edits the list I want another combobox to pop up with a list of class b.

      When someone selects from that list, I want to return the class b. 

       

      The problem is that the row is class b and the column is the name and not the class b and so the returned item is not compatible. 

       

      How can I assign the selected b to the row instead of the column?

       

      Or, is there something else besides a datagrid which has headers, can be sorted, and has itemeditors so I can add the combo box or drop down list.

        • 1. Re: Single Column Datagrid
          Code Girl Level 1

          Wondering why nobody has answered my last few questions?

           

          Also, I it was a dropdownlist instead of a combobox but thats does not change the question.  I have tried so many angles and still do not have an answer.

          • 2. Re: Single Column Datagrid
            Claudiu Ursica Level 4

            There is a labelFunction and an itemRendererFunction property for lists and grids you might be able to hook up logic in there based on your selections.

             

             

            C

            • 3. Re: Single Column Datagrid
              Code Girl Level 1

              I am already using these functions.  but thank you for your suggestion.  Its possible what I want to do can not be done because of the property constraint in the datagridcolumn.  Adobe may need to make a change to allow "this" as the dataField or create a datagrid single column component.

              • 4. Re: Single Column Datagrid
                Claudiu Ursica Level 4

                Why don't you use a list or datagroup instead if there is only one column?

                 

                C

                 

                 

                P.S.

                 

                I did not understand 100% what you are trying to achieve.

                • 5. Re: Single Column Datagrid
                  Code Girl Level 1

                  If I understand it correctly, you can not attach an item editor that contains a dropdownlist  on a list.  Am I wrong?   I wonder if a data group does or not?

                  • 6. Re: Single Column Datagrid
                    Code Girl Level 1

                    Found a work around solution but really could use a cleaner one.

                     

                    First do not assign a datafield in the datagridcolumn.  In the drop down list close handler update the list that services the Datagrid directly using the outerdocument.bs[outerdocument.dg.selectedIndex] = your objec b.  This did work.  But not too clean.

                    1 person found this helpful
                    • 7. Re: Single Column Datagrid
                      Flex harUI Adobe Employee

                      Post a 20-line test case.

                      • 8. Re: Single Column Datagrid
                        Claudiu Ursica Level 4

                        I have done in the past list with custom renderer where fields where steppers. Code was written by hand but it worked...

                        You had to handle a lot including tabbing but at the end of the day was what we needed.

                        • 9. Re: Single Column Datagrid
                          Code Girl Level 1

                          The dataprovidor is a list of Class B inside Class A

                           

                          Class A

                          {

                          List<Class B>

                          }

                           

                          Class B

                          {

                          int id

                          String name

                          }

                           

                          The dropdownlist is a list of all Class B's

                          valueObject:A a

                          valueObject:B b

                          DataGrid id="bDG"

                                    dataProvider="{a.bs}"

                                    editable="true"

                               Column

                                    DataColumn dataField

                                                        labelFunction="b.name"

                                                        editable="true"

                                                        editorDataField="value"

                          // notice no datafield property

                                         itemEditor

                                              Script

                                                   function get value:B

                                                        return b

                                                   function ddl closehandler

                                                        b = ddl.selectedItem as B

                                                        outerDocument.a.bs[outerDocument.bDG.selectedIndex] = b

                                              Declaration

                                                   valueObject:B id b

                                              DropDownList

                                                   prompt="b.name"

                                                   dataProvider="bList"

                                                   labelField="name"

                          1 person found this helpful
                          • 10. Re: Single Column Datagrid
                            Flex harUI Adobe Employee

                            That’s not a test case, that’s a snippet.  I don’t have time to build up a test case around snippets.  Post an application that I can cut, paste, compile and run.  Try to keep it to as few lines as possible.

                            • 11. Re: Single Column Datagrid
                              Code Girl Level 1

                              Sorry so big.  Didn’t know how to convert java classes to as since FB did it for me.

                              • 12. Re: Single Column Datagrid
                                Code Girl Level 1

                                 

                                <?xml version="1.0" encoding="utf-8"?>

                                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                xmlns:s="library://ns.adobe.com/flex/spark"

                                xmlns:mx="library://ns.adobe.com/flex/mx"

                                xmlns:valueObjects="valueObjects.*"

                                width="100%" height="100%">

                                <fx:Script>

                                <![CDATA[

                                import mx.collections.ArrayCollection;

                                import mx.events.FlexEvent;

                                 

                                protected function aCBLabel(item:Object):String

                                {

                                if (item != null)

                                return item.name;

                                else

                                return "";

                                }

                                 

                                protected function bDG_creationCompleteHandler(event:FlexEvent):void

                                {

                                bDG.selectedIndex = 0;

                                }

                                 

                                protected function bFormat(item:BDto, column:DataGridColumn):String

                                {

                                if (item != null)

                                return item.name;

                                else

                                return "";

                                }

                                ]]>

                                </fx:Script>

                                <fx:Declarations>

                                <valueObjects:ADto id="aDto"/>

                                <valueObjects:BDto id="bDto"/>

                                <s:ArrayCollection id="aList">

                                <valueObjects:ADto>

                                <valueObjects:id>1</valueObjects:id>

                                <valueObjects:name>a1</valueObjects:name>

                                <valueObjects:bs>

                                <valueObjects:BDto>

                                <valueObjects:id>1</valueObjects:id>

                                <valueObjects:name>b1</valueObjects:name>

                                </valueObjects:BDto>

                                <valueObjects:BDto>

                                <valueObjects:id>2</valueObjects:id>

                                <valueObjects:name>b2</valueObjects:name>

                                </valueObjects:BDto>

                                </valueObjects:bs>

                                </valueObjects:ADto>

                                <valueObjects:ADto>

                                <valueObjects:id>2</valueObjects:id>

                                <valueObjects:name>a2</valueObjects:name>

                                </valueObjects:ADto>

                                </s:ArrayCollection>

                                <s:ArrayCollection id="bList">

                                <valueObjects:BDto>

                                <valueObjects:id>1</valueObjects:id>

                                <valueObjects:name>b1</valueObjects:name>

                                </valueObjects:BDto>

                                <valueObjects:BDto>

                                <valueObjects:id>2</valueObjects:id>

                                <valueObjects:name>b2</valueObjects:name>

                                </valueObjects:BDto>

                                <valueObjects:BDto>

                                <valueObjects:id>3</valueObjects:id>

                                <valueObjects:name>b3</valueObjects:name>

                                </valueObjects:BDto>

                                </s:ArrayCollection>

                                </fx:Declarations>

                                <fx:Binding source="aCB.selectedItem as ADto" destination="aDto"/>

                                <s:Form id="AForm" width="700" height="170">

                                <s:layout>

                                <s:BasicLayout/>

                                </s:layout>

                                <s:HGroup x="0" y="50" width="670" height="60">

                                <s:Label height="25" fontWeight="bold" text="Find an A" verticalAlign="middle"/>

                                <s:ComboBox id='aCB'

                                prompt="Enter or Select an A Name"

                                labelFunction="aCBLabel"

                                x="110" y="10" width="375">

                                <mx:ArrayCollection id="asList" list="{aList}"/>

                                </s:ComboBox>

                                </s:HGroup>

                                </s:Form>

                                <mx:DataGrid id="bDG" x="10" y="140" width="450" height="200"

                                editable="true"

                                dataProvider="{aDto.bs}"

                                creationComplete="bDG_creationCompleteHandler(event)">

                                <mx:columns>

                                <mx:DataGridColumn id="bNameDC"

                                headerText="As Bs"

                                editable="true"

                                labelFunction="bFormat"

                                editorDataField="value"

                                width="150">

                                <mx:itemEditor>

                                <fx:Component>

                                <mx:Canvas>

                                <fx:Script>

                                <![CDATA[

                                import mx.collections.ArrayCollection;

                                import mx.events.FlexEvent;

                                 

                                import spark.events.DropDownEvent;

                                [Bindable]

                                public var bs:ArrayCollection;

                                 

                                protected function sdd_InitializeHandler(event:FlexEvent):void

                                {

                                bs = outerDocument.bList;

                                bDto = outerDocument.bDG.selectedItem as BDto;

                                if (bDto != null)

                                {

                                var t:BDto;

                                for (var i:int = 0; i<bs.length; i++)

                                {

                                t = bs[i];

                                if (bDto.id == t.id)

                                {

                                ddl.selectedIndex = i;

                                break;

                                }

                                }

                                }

                                ddl.openDropDown();

                                }

                                 

                                public function get value():BDto

                                {

                                return bDto

                                }

                                 

                                 

                                protected function ddl_closeHandler(event:DropDownEvent):void

                                {

                                bDto = ddl.selectedItem as BDto;

                                outerDocument.aDto.bs[outerDocument.bDG.selectedIndex] = bDto;

                                }

                                 

                                ]]>

                                </fx:Script>

                                <fx:Declarations>

                                <valueObjects:BDto id="bDto"/>

                                <!-- Place non-visual elements (e.g., services, value objects) here -->

                                </fx:Declarations>

                                <s:DropDownList id="ddl"

                                width = "100%"

                                prompt="{bDto.name}"

                                dataProvider="{bs}"

                                labelField="name"

                                initialize="sdd_InitializeHandler(event)"

                                open="ddl.skin['dropDown'].owner = this"

                                close="ddl_closeHandler(event)">

                                </s:DropDownList>

                                </mx:Canvas>

                                </fx:Component>

                                </mx:itemEditor>

                                </mx:DataGridColumn>

                                </mx:columns>

                                </mx:DataGrid>

                                </s:Application>