11 Replies Latest reply on Jun 26, 2007 3:39 AM by TIPLVinay

    comboBox inside a datagrid

    Level 7
      Hi all,
      How can I put a comboBox inside a datagrid?
      I want to set the comboBox with their own dataprovider and the id should
      pass to the datagrid fill at the save time.
      I try this but doesnt let me to include a dataprovider.
      Any links??
      please help and thank you in advance.

      JFB
      <mx:DataGridColumn headerText="Rate" dataField="rate" editable="false">
      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox>
      <mx:ComboBox id="rate_cb"></mx:ComboBox>
      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>


        • 1. Re: comboBox inside a datagrid
          Try using an itemRenderer in your datagrid column:

          <mx:DataGridColumn dataField="rate" headerText="Rate"
          itemRenderer="RndrRateField"/>

          With the file RndrRateField.mxml looking like this:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*"
          verticalScrollPolicy="off" horizontalScrollPolicy="off" >

          <mx:ComboBox id="rate_cb"/>

          </mx:VBox>
          • 2. Re: comboBox inside a datagrid
            Level 7
            Thanks for you reply and help,
            i got an error on the main page:
            Access of undefined property RndrRateField. NewEstimate.mxml EstimatorInFlex
            line 185

            Any idea how to solve this?
            Rgds

            JFB


            "spatz04" <webforumsuser@macromedia.com> wrote in message
            news:f4tm81$5co$1@forums.macromedia.com...
            > Try using an itemRenderer in your datagrid column:
            >
            > <mx:DataGridColumn dataField="rate" headerText="Rate"
            > itemRenderer="RndrRateField"/>
            >
            > With the file RndrRateField.mxml looking like this:
            >
            > <?xml version="1.0" encoding="utf-8"?>
            > <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*"
            > verticalScrollPolicy="off" horizontalScrollPolicy="off" >
            >
            > <mx:ComboBox id="rate_cb"/>
            >
            > </mx:VBox>
            >


            • 3. Re: comboBox inside a datagrid
              ntsiii Level 3
              In you first example, you might try:
              <mx:DataGridColumn headerText="Rate" dataField="rate" editable="false">
              <mx:itemRenderer>
              <mx:Component>
              <mx:VBox>
              <mx:ComboBox id="rate_cb" dataProvider="{outerDocument.acComboData}"></mx:ComboBox>
              </mx:VBox>
              </mx:Component>
              </mx:itemRenderer>
              </mx:DataGridColumn>

              "outerDocument" lets you access members outside the renderer, which runs in its own scope.

              "acComboData" is the variable that holds the combobox list data.

              In spatz04s code, you may need to:
              import RndrRateField; //assuming this file is in the same folder.

              Tracy
              • 4. Re: comboBox inside a datagrid
                ntsiii Level 3
                Hmm in spatz04s code there is no assignment of a dataProvider, so I don't think that will help you.

                To go very far in Flex, you will have to become fluent in itemRenderers. They are a bit complex, but not really hard, and there are lots of good examples available.

                Tracy
                • 5. Re: comboBox inside a datagrid
                  Level 7
                  You are the best... that works Tracy
                  I will come back with more :)
                  Tks

                  JFB


                  "ntsiii" <tspratt@lariatinc.com> wrote in message
                  news:f4uej2$3ua$1@forums.macromedia.com...
                  > In you first example, you might try:
                  > <mx:DataGridColumn headerText="Rate" dataField="rate" editable="false">
                  > <mx:itemRenderer>
                  > <mx:Component>
                  > <mx:VBox>
                  > <mx:ComboBox id="rate_cb"
                  > dataProvider="{outerDocument.acComboData}"></mx:ComboBox>
                  > </mx:VBox>
                  > </mx:Component>
                  > </mx:itemRenderer>
                  > </mx:DataGridColumn>
                  >
                  > "outerDocument" lets you access members outside the renderer, which runs
                  > in
                  > its own scope.
                  >
                  > "acComboData" is the variable that holds the combobox list data.
                  >
                  > In spatz04s code, you may need to:
                  > import RndrRateField; //assuming this file is in the same folder.
                  >
                  > Tracy
                  >


                  • 6. Re: comboBox inside a datagrid
                    Richard Braxton
                    How do you do the same with the correct item selected? I either get all the comboboxes displaying the same selection or I get no selection at all. Help!
                    • 7. Re: comboBox inside a datagrid
                      ntsiii Level 3
                      You must have the itemRenderer set the selectedIndex in the overrides set data() method. You migh be able to get this t work in an in-line renderer, but it would be pretty messy.

                      Tracy
                      • 8. Re: comboBox inside a datagrid
                        MLK_SS
                        Hi All,

                        I am having a problem displaying data into a combo box inside a data grid.

                        I am getting data from a webservice and storing the data into a Array Collection variable and trying to pass the var as the data provider for the combo box.

                        If I try an individual combo box it works fine.

                        But, when trying to integrate into a datagrid it gives an error saying Access of undefined property. I tried using outerDocument as mentioned above, the error doesnot show up but the output does not show up with the data inside the Data grid Combo box.

                        <mx:DataGrid id="fav" x="10" y="332" headerColors="[#C3D3AA, #C3D3AA]" enabled="true" editable="true" textDecoration="underline">
                        <mx:columns>
                        <mx:DataGridColumn width="120" headerWordWrap="true" headerText="Fav./Del./ Copy/Edit" fontWeight="bold" editable="false" dataTipField="Favourites" activate="true" >
                        <mx:itemRenderer>
                        <mx:Component>
                        <mx:VBox>
                        <mx:ComboBox activate="true" labelField="TEXT" dataProvider="{dataArray}" />

                        </mx:VBox>

                        </mx:Component>
                        </mx:itemRenderer>
                        </mx:DataGridColumn>
                        </mx:columns>
                        </mx:DataGrid>

                        the function that handles the data result is :

                        public function handleResult(event:ResultEvent):void{

                        dataArray = new ArrayCollection();

                        tasktypeArray = new ArrayCollection();
                        var myXML:XML = new XML(event.result);
                        var kf:XMLList = myXML.child("WORKLIST");

                        var tasktype:XMLList = myXML.child("TASKTYPE");
                        a = kf.item;
                        b= kf.item[0].TEXT;

                        textarea1.text = myXML.toXMLString();
                        textarea3.text = myXML.child("TEMPLATE");
                        trace(kf.child("TEXT").length());
                        for (var x:int = 0; x < 25; x++) {
                        var resultObj:Object = new Object ();

                        resultObj.TEXT =tasktype.descendants("item")[x].TEXT.valueOf();
                        dataArray.addItem(resultObj);

                        }

                        Please let me know where I am going wrong

                        Thanks,
                        • 9. Re: comboBox inside a datagrid
                          Level 7
                          Hi,
                          I think you need to declared your array public at the begining of the page
                          like
                          [Bindable]
                          public var dataArray = new ArrayCollection();
                          You need to use outerDocument.
                          <mx:ComboBox activate="true" labelField="TEXT"
                          dataProvider="{outerDocument.dataArray}" />
                          I discover that the components are case sensitive also.
                          I hope this help.

                          JFB





                          "MLK_SS" <webforumsuser@macromedia.com> wrote in message
                          news:f5p8fq$jju$1@forums.macromedia.com...
                          > Hi All,
                          >
                          > I am having a problem displaying data into a combo box inside a data grid.
                          >
                          > I am getting data from a webservice and storing the data into a Array
                          > Collection variable and trying to pass the var as the data provider for
                          > the
                          > combo box.
                          >
                          > If I try an individual combo box it works fine.
                          >
                          > But, when trying to integrate into a datagrid it gives an error saying
                          > Access
                          > of undefined property. I tried using outerDocument as mentioned above, the
                          > error doesnot show up but the output does not show up with the data inside
                          > the
                          > Data grid Combo box.
                          >
                          > <mx:DataGrid id="fav" x="10" y="332" headerColors="[#C3D3AA, #C3D3AA]"
                          > enabled="true" editable="true" textDecoration="underline">
                          > <mx:columns>
                          > <mx:DataGridColumn width="120" headerWordWrap="true"
                          > headerText="Fav./Del./ Copy/Edit" fontWeight="bold" editable="false"
                          > dataTipField="Favourites" activate="true" >
                          > <mx:itemRenderer>
                          > <mx:Component>
                          > <mx:VBox>
                          > <mx:ComboBox activate="true" labelField="TEXT"
                          > dataProvider="{dataArray}" />
                          >
                          > </mx:VBox>
                          >
                          > </mx:Component>
                          > </mx:itemRenderer>
                          > </mx:DataGridColumn>
                          > </mx:columns>
                          > </mx:DataGrid>
                          >
                          > the function that handles the data result is :
                          >
                          > public function handleResult(event:ResultEvent):void{
                          >
                          > dataArray = new ArrayCollection();
                          >
                          > tasktypeArray = new ArrayCollection();
                          > var myXML:XML = new XML(event.result);
                          > var kf:XMLList = myXML.child("WORKLIST");
                          >
                          > var tasktype:XMLList = myXML.child("TASKTYPE");
                          > a = kf.item;
                          > b= kf.item[0].TEXT;
                          >
                          > textarea1.text = myXML.toXMLString();
                          > textarea3.text = myXML.child("TEMPLATE");
                          > trace(kf.child("TEXT").length());
                          > for (var x:int = 0; x < 25; x++) {
                          > var resultObj:Object = new Object ();
                          >
                          > resultObj.TEXT
                          > =tasktype.descendants("item")[x].TEXT.valueOf();
                          > dataArray.addItem(resultObj);
                          >
                          > }
                          >
                          > Please let me know where I am going wrong
                          >
                          > Thanks,
                          >
                          >


                          • 10. Re: comboBox inside a datagrid
                            MLK_SS Level 1
                            Hi,

                            Thanks for your response. I tried the same, and still its not working for me.

                            I do have the var declared as Public and Bindable.

                            <mx:DataGrid id="fav" x="10" y="332" headerColors="[#C3D3AA, #C3D3AA]" enabled="true" editable="true" textDecoration="underline">
                            <mx:columns>
                            <mx:DataGridColumn width="120" headerWordWrap="true" headerText="Fav./Del./ Copy/Edit" fontWeight="bold" editable="false" dataTipField="Favourites" activate="true" >
                            <mx:itemRenderer>
                            <mx:Component>
                            <mx:VBox>
                            <mx:ComboBox activate="true" labelField="TEXT" dataProvider="{outerDocument.dataArray}" />

                            </mx:VBox>

                            </mx:Component>
                            </mx:itemRenderer>
                            </mx:DataGridColumn>

                            </mx:columns>
                            </mx:DataGrid>

                            Still its not working. Any ideas .....

                            thanks