8 Replies Latest reply on Oct 30, 2009 6:46 AM by Cybernavy

    combobox using label/data as editor in advdatagrid

    Cybernavy

      Hi,

       

      I have found an Flex example using combobox in an datagrid using label/data.

      http://philflash.inway.fr/flex/dgRendererSimple/dgRendererSimple.html

       

      I am now trying to use the example of the “SizeRenderer” and modify it, so the dpValue array is filled with values from an HTTPService request (instead of hard coded array values).

       

      Nevertheless, I cannot find the problem with the code.

       

       

      This is what I changed in the SizeRenderer example:

       

       

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

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">

         <mx:Script>

              <![CDATA[

             

              import mx.rpc.events.ResultEvent;

              import com.adobe.serialization.json.JSON;

                     

                  // Define a property for returning the new value to the cell.

                  public var result:String="";

                 

                  [Bindable]

                  private var dpValue:Array;

                                     

                       public function getcampagnesdata(event:ResultEvent):void

                       {

                         var rawArray:Array;

                         var rawData:String = String(event.result);

                         rawArray = JSON.decode(rawData) as Array;

                         dpValue = new Array(rawArray);

                       }

                 

             

                  // Override the set method for the data property.

                  override public function set data(value:Object):void

                  {

                      super.data = value;

                      if (value != null)

                      {

                          var currentValue:String = value.campagne;

                          var len:int = dpValue.length;

                          for (var i:int = 0; i < len; i++)

                          {

                              if (dpValue[i].data == currentValue)

                              {

                                  editor.selectedIndex = i;

                                  break;

                              }

                          }

                      }

                  }

                 

                  public function onChange():void

                  {

                      var index:int = editor.selectedIndex;

                      result = dpValue[index].data;

                  }         

              ]]>

          </mx:Script>

         

          <mx:HTTPService id="getcampagnes" url="getcampagnes.php"

           useProxy="false" method="GET" resultFormat="text" showBusyCursor="true"

           result="getcampagnesdata(event)">

            </mx:HTTPService>

         

           <mx:ComboBox id="editor" dataProvider="{dpValue}" width="130" change="onChange()" initialize="getcampagnes.send()"/>

      </mx:VBox>

       

       

       

       

       

      The datagrid has the column with the renderer as editor:

       

       

      <mx:AdvancedDataGrid

            <mx:columns>

               <mx:AdvancedDataGridColumn headerText="Campagne" dataField="campagne" width="25" editable="true"

      rendererIsEditor="true" editorDataField="result" itemRenderer="Campagne_Renderer"/>

            </mx:columns>

      </mx:AdvancedDataGrid>

       

       

       

      Output of getcampagnes.php is:

       

      [{"data":"","label":""},{"data":"1","label":"Verjaardag"},{"data":"2","label":"-30%"},{"da ta":"3","label":"Solden"},{"data":"4","label":"1\/3 gratis"},{"data":"5","label":"Opbouwverkoop"},{"data":"6","label":"Opening"},{"data":"7", "label":"Uitverkoop"},{"data":"8","label":"Opendeurdagen"},{"data":"9","label":"Saloncondi ties"},{"data":"10","label":"Nieuwe collectie"},{"data":"11","label":"Gratis graniet"},{"data":"12","label":"Lancering"}]

       

       

       

      I would appreciate your help if possible.

       

      Kind regards,

      Tom

        • 1. Re: combobox using label/data as editor in advdatagrid
          _Natasha_ Level 4

          Hi,

           

          you set in ADG

          <mx:AdvancedDataGridColumn headerText="Campagne" dataField="campagne" width="25" editable="true"

          rendererIsEditor="true" editorDataField="result" itemRenderer="Campagne_Renderer"/>

           

          but in data you have only data and label fields. So data is empty.

          • 2. Re: combobox using label/data as editor in advdatagrid
            Cybernavy Level 1

            I don't think so, since the example works perfectly and is constructed the same way.

             

            If I implement the example exactly, the "data" value is inserted into my datagrid and the "label" value is shown in the combobox. When saving the datagrid, the "data" value is actually saved as it should be.

            The "datefield=campagne" is correct, since that it the column name that is returned from my ADVdatagrid query.

             

            First I implemented the exact code from the example and it works great (I only change "size" to "campagne", since my column names are not the same)

             

             

            <?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">    <mx:Script>         <![CDATA[             // Define a property for returning the new value to the cell.             public var result:String="";                         []             private var dpValue:Array = [                 { label:"S  (small)", data:"small" },                 { label:"M  (medium)", data:"medium"},                 { label:"L  (large)", data:"large"},                 { label:"XL (extra-large)", data:"extra-large"} ];                                 // Override the set method for the data property.             override public function set data(value:Object):void             {                 super.data = value;                 if (value != null)                 {                     var currentValue:String = value.size;                     var len:int = dpValue.length;                     for (var i:int = 0; i < len; i++)                     {                         if (dpValue[i].data == currentValue)                         {                             editor.selectedIndex = i;                             break;                         }                     }                 }             }                         public function onChange():void             {                 var index:int = editor.selectedIndex;                 result = dpValue[index].data;             }                  ]]>     </mx:Script>      <mx:ComboBox id="editor" dataProvider="{dpValue}" width="130" change="onChange()"/> </mx:VBox>

             

             

             

             

            But as soon as I removed the hardcoded dpValue Array and try to create the Array from the HTTPservice ... it stops working.

            • 3. Re: combobox using label/data as editor in advdatagrid
              _Natasha_ Level 4

              Ok.

               

              did you get any errors?

               

              Is result event from HTTPService is dispatched?

               

              Never the less it's not a good idea to get data to combobox in each renderer.

              itemRenderer is created for each row and each row will get this data. You can set this data to be static as an example.

              • 4. Re: combobox using label/data as editor in advdatagrid
                Cybernavy Level 1

                I've managed to get it working, but only if I remove the next function and calls to it:

                 

                // Override the set method for the data property.

                            override public function set data(value:Object):void

                            {

                                super.data = value;

                                if (value != null)

                                {

                                    var currentValue:String = value.campagne;

                                    var len:int = dpValue.length;

                                    for (var i:int = 0; i < len; i++)

                                    {

                                        if (dpValue[i].data == currentValue)

                                        {

                                            editor.selectedIndex = i;

                                            break;

                                        }

                                    }

                                }

                            }

                 

                So the httpservice is called and data is returned, I've even managed to save the correct data value (while showing the label), but without that function the combobox isn't set to it's correct label after loading the datagrid.

                 

                about the "not good to get data to each renderer" ... your right, but I have no idea how to do this static thing (guess that is is hardcoded like in the example?). Do you have an example how to get the data once and use it for each itemrenderer?

                • 5. Re: combobox using label/data as editor in advdatagrid
                  _Natasha_ Level 4

                  check in debugger this function. It seems that problem is in string

                  if (dpValue[i].data == currentValue)

                   

                  JSON should parse your data as Number, but currentValue is String. Check if any values pass this condition.

                  • 6. Re: combobox using label/data as editor in advdatagrid
                    Cybernavy Level 1

                    you seem to be correct, everything works if I remove the next function:

                     

                    // Override the set method for the data property.

                     

                    override public function set data(value:Object):void

                    {

                     

                    super.data = value;

                     

                    if (value != null)

                    {

                     

                    var currentValue:String = value.campagne;

                     

                    var len:int = dpValue.length;

                     

                    for (var i:int = 0; i < len; i++)

                    {

                     

                    if (dpValue[i].data == currentValue)

                    {

                    editor.selectedIndex = i;

                     

                    break;

                    }

                    }

                    }

                    }

                    The only thing that doens't work, is that the label is lagging one step behind.

                    for example: I load the grid and choose "for free" in the combobox. Grid is saved and no label is visible in that combobox.
                    I make another choice in the same combobox, I choose "Vacation" ... the grid is saved and the combobox shows: "for free".

                    I make a third choice and change to "Back home" ... grid saves and "Vacation" is shown in the combobox.

                     

                    So it's always lagging one step behind.

                    Changes CurrentValue to int, tried some other things .. but with no solution.

                    It'll be something really small that I'm not seeing.

                    • 7. Re: combobox using label/data as editor in advdatagrid
                      _Natasha_ Level 4

                      Overriding set data is the MAIN function of itemRenderer!

                       

                      You should get a debugger and try to understand why it doesn't work! It's only 10 strings of code!

                      • 8. Re: combobox using label/data as editor in advdatagrid
                        Cybernavy Level 1

                        problem found: in the override function SET DATA, the "value:Object" is null.

                         

                        No idea why, is the set data performed before the query can fill the dpValue?