2 Replies Latest reply on Aug 7, 2010 10:35 PM by Ansury

    ComboBox in a Datagrid

    jfb00 Level 3
      Hi All,
      I have this challenge and for a month I can't get help... let me try here.
      I have a comboBox inside a datagrid, i create an event in my datagrid to do my calculations
      automatic.
      My problem is that after select an Item in the comboBox I have to click
      somewhere else to fire the event.
      Also getting the data for update, how can I update the combo index and do the calculations.
      Maybe is another way for this… Any ideas??
      Thank you in advance

      JFB

      public function calculateRateTotal(event:DataGridEvent):void{

      if(event.dataField == "id") {
      // Disable copying data back to the control.
      event.preventDefault();

      //var tempCombo:ComboBox = event.currentTarget.itemEditorInstance.rate_cb;
      var chosenItem:Object = ComboBox(event.currentTarget.itemEditorInstance.rate_cb).selectedItem;
      var chosenRateId:int = chosenItem.id;

      acPrice[price_dg.selectedIndex].id = Number(chosenRateId);
      rateID = chosenRateId;
      quantity = acPrice[price_dg.selectedIndex].qty;
      if (chosenRateId == 4){
      price_dg.columns[2].editable = true;
      price_dg.columns[3].editable = true;
      }else{
      jobsheet_RO.getRateTable();
      }
      //trace ("id from event " + acPrice[price_dg.selectedIndex].id);
      // Close the cell editor.
      price_dg.destroyItemEditor();

      // Notify the list control to update its display.
      price_dg.dataProvider.notifyItemUpdate(price_dg.editedItemRenderer);
      price_dg.invalidateDisplayList();
      }

      if(event.dataField == "qty") {
      if (event.currentTarget.itemEditorInstance.text != "" && acPrice[price_dg.selectedIndex].id != ""){
      acPrice[price_dg.selectedIndex].qty = Number(event.currentTarget.itemEditorInstance.text);
      setupFee();
      doCalculations();
      }
      }

      if(event.dataField == "setupfee") {
      if (event.currentTarget.itemEditorInstance.text != "" && acPrice[price_dg.selectedIndex].id != "")
      acPrice[price_dg.selectedIndex].setupfee = Number(event.currentTarget.itemEditorInstance.text);
      doCalculations();
      }
      }

      public function doCalculations():void{

      if (acRateTable != null){
      acPrice[price_dg.selectedIndex].perpiece = acRateTable.getItemAt(0).percentage;
      acPrice[price_dg.selectedIndex].per1000 = (acRateTable.getItemAt(0).percentage * 1000);
      acPrice[price_dg.selectedIndex].total = (acPrice[price_dg.selectedIndex].qty * acPrice[price_dg.selectedIndex].perpiece) + Number(acPrice[price_dg.selectedIndex].setupfee);
      acPrice.refresh();
      price_dg.invalidateDisplayList();

      //trace ("id " + acPrice[price_dg.selectedIndex].id);
      }
      }

      <mx:DataGrid id="price_dg" itemEditEnd="calculateRateTotal(event)" x="10"
      y="32" width="590" height="147" editable="true">
      <mx:columns>
      <mx:DataGridColumn headerText="Quantity" dataField="qty"
      labelFunction="formatNumber"/>
      <mx:DataGridColumn headerText="Rate Type" dataField="id"
      rendererIsEditor="true" editorDataField="dummy" width="120">
      <mx:itemRenderer>
      <mx:Component>
      <mx:VBox>
      <mx:ComboBox id="rate_cb" dataProvider="{outerDocument.acRate}"
      labelField="label" width="120"/>
      </mx:VBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
        • 1. Re: ComboBox in a Datagrid
          Ansury Level 3

          How about dispatching a DataGridEvent on the ComboBox's change event?

           

                              <mx:itemRenderer> 
                                   <mx:Component> 
                                        <mx:VBox> 
                                             <mx:Script>
                                                  <![CDATA[
                                                       import mx.events.DataGridEvent;
                                                  ]]>
                                             </mx:Script>
                                             <mx:ComboBox id="rate_cb" dataProvider="{outerDocument.acRates}" 
                                                             labelField="label" width="120" 
                                                             change="outerDocument.priceDg.dispatchEvent(
                                                                  new DataGridEvent(DataGridEvent.ITEM_EDIT_END, false, false, 1, null, 0, null, this, 0))"/> 
                                        </mx:VBox> 
                                   </mx:Component> 
                              </mx:itemRenderer> 
          

           

          Sorry about formatting, forum kinda sux.

           

          Also, it's kinda ugly doing this like I have above (and you should spend a little time determining how to correctly initialize all that event's parameters, if needed), so I'd recommend creating an entirely new custom item renderer component (with a VBox base like you have already) to do all this.  Like being done here with SimpleItemRenderer.mxml:

           

          http://www.benclinkinbeard.com/files/ItemRendererExample/srcview/index.html  (view source)

           

          Inline item renderers/editors are so...bleh (well just look at the code above).

          • 2. Re: ComboBox in a Datagrid
            Ansury Level 3

            Oh, and for... "Also getting the data for update, how can I update the combo index and do the calculations. "

             

            I'm not sure I get what you mean, but perhaps you're looking for a dataChange="dataChangeEventHandler()" on the DataGrid? 

            Or you may need a change handler on the dataProvider (ArrayCollection etc) itself... depending on how you're sending data to the grid. 

            Or you may need/want a ChangeWatcher.. http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_7.html ..