2 Replies Latest reply on Jul 21, 2011 9:18 AM by roestigraben

    DataGrid binded to arrayCollection with Filtering refresh problem

    roestigraben

      Hello,

       

      my application essentially has two dataGrids side by side.

      The user is selecting from the first dataGrid and adds to the 2nd datagrid which is holding all items selected for a given project.

      Then, I have a dropDownList where I can select the project amongst many.

       

      The 2nd dataGrid is filtering the items for the selected project.

       

      Both datagrids work with a SQL database interfacing with the dataGrids through two arrayCollections.

       

      My problem:

       

      when I want to add an item from the first datagrid and enter it into the project datagrid, I cannot get a nice refresh done with the button "addBtn".

       

      To make it work I need to go thru a nullFiltering with a weird project value "XXX" and then do a reFiltering to display the updated info.

      Fo this I needed to add 2 buttons (nullFilter and reFilter).

      With this the wanted operation is OK, but this is a detour and i don't want to use these two extra buttons.

       

      I tried also to add the clickhandler actions directly in my click handler for the "addBtn" by copying the code into that click handler, but it does not work properly

       

      Please help me as I am stuck.

       

      BR

      peter

       

       

       

      <?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" minWidth="955" minHeight="600" xmlns:usedipservice="services.usedipservice.*" xmlns:valueObjects="valueObjects.*" xmlns:allipservice="services.allipservice.*">

       

       

       

      <fx:Script>

      <![CDATA[

      import mx.collections.ArrayCollection;

      import mx.controls.Alert;

      import mx.events.FlexEvent;

      import mx.rpc.events.ResultEvent;

       

      import spark.events.IndexChangeEvent;

       

      // this arrayCollections serves as provider to the project selector

      [Bindable]

      public var projects:ArrayCollection = new ArrayCollection([

      {label:"Spear2340", data:1},

      {label:"Lille", data:2},

      {label:"AP9600", data:3},

      {label:"Arnie", data:4},

      {label:"Neuron", data:5},

      {label:"Cannes", data:6} ]);

       

      //This arryCollection is the buffer between the service call nd the datagrid. All filtering is done on this

      [Bindable]

      private var usedIP:ArrayCollection;

       

      //the variable for the project dropdown list

      [Bindable]

      private var selectedName:String;

       

      //placeholder for the future access to the IP Catalog (or allIP Service)

      [Bindable]

      private var ipCatalog:ArrayCollection;

       

       

       

      // function that handles the actions when something in the dropdown list changes

      public function handleProjectSelected(event:IndexChangeEvent):void

      {     

      selectedName = DropDownListProjects.selectedItem.label;

      // filter against the project name

      usedIP.filterFunction = filterProject;

      usedIP.refresh();

      // sum up the cost of all IP

      sumUpColumn();

      // show the price

      totalProjectPrice.visible = true;

      // show the content of the project list only when one has chosen the project

      usedIPDG.visible = true;

      }

      // filtering against the selected project

      private function filterProject(item:Object):Boolean

      {

      return item["project"].match(new RegExp(selectedName, 'i'))

      }

       

      //--------------------------------------detour to make the filtering work, needs rework-------------

      public function nullFilter(event:MouseEvent):void

      {     

      getAllUsedIPResult.token = usedIPService.getAllUsedIP();

      selectedName = "XXX";

      usedIP.filterFunction = nullProject;

      usedIP.refresh();

      }

      private function nullProject(item:Object):Boolean

      {

      return item["project"].match(new RegExp(selectedName, 'i'))

      }

      public function reFilter(event:MouseEvent):void

      {     

      selectedName = DropDownListProjects.selectedItem.label;

      usedIP.filterFunction = reProject;

      usedIP.refresh();

      usedIPDG.visible = true;

      }

      private function reProject(item:Object):Boolean

      {

      return item["project"].match(new RegExp(selectedName, 'i'))

      }

      //--------------------------------------end of detour -----------------------------------------------

       

      protected function addBtn_clickHandler(event:MouseEvent):void

      {

      // create a new usedIp Object

      usedIPx = new UsedIP();

      //assign propetries to this new Object

      usedIPx.project = DropDownListProjects.selectedItem.label;

      usedIPx.name = ipCatalogDG.selectedItem.name;

      usedIPx.provider = ipCatalogDG.selectedItem.provider;

      usedIPx.technology = ipCatalogDG.selectedItem.technology;

      usedIPx.cost = parseInt(ipCatalogDG.selectedItem.cost);

      usedIPx.description = ipCatalogDG.selectedItem.description;

      //create the database entry for this new Object

      createUsedIPResult.token = usedIPService.createUsedIP(usedIPx);

      usedIPDG.visible = false;

       

       

       

      }

       

      protected function usedIPDG_clickHandler(event:MouseEvent):void

      {

      if (usedIPDG.selectedIndex !=-1) {

      deleteBtn.enabled = true;

      addBtn.enabled = false;

      }

      }

       

      protected function ipCatalogDG_clickHandler(event:MouseEvent):void

      {

      if (ipCatalogDG.selectedIndex !=-1) {

      addBtn.enabled = true;

      deleteBtn.enabled = false;

      }

      }

       

      // determine the price per project

      [Bindable]

      private var totalPrice:Number = 0.0;

       

      private function sumUpColumn():void

      {

      var i:uint

      totalPrice = 0.0;

       

      for(i=0; i<usedIP.length; i++) {

       

      totalPrice += (usedIP.getItemAt(i).cost);

       

      }

      }

       

       

      protected function dataGrid_creationCompleteHandler(event:FlexEvent):void

      {

      getAllUsedIPResult.token = usedIPService.getAllUsedIP();

      }

       

       

      protected function getAllUsedIPResult_resultHandler(event:ResultEvent):void

      {

      usedIP = event.result as ArrayCollection;

      }

       

       

       

       

      protected function deleteBtn_clickHandler(event:MouseEvent):void

      {

      deleteUsedIPResult.token = usedIPService.deleteUsedIP(usedIPx.id);

      sumUpColumn();

      }

       

       

      protected function deleteUsedIPResult_resultHandler(event:ResultEvent):void

      {

      usedIPDG.dataProvider.removeItemAt(usedIPDG.selectedIndex);

      }

       

       

      protected function ipCatalogDG_creationCompleteHandler(event:FlexEvent):void

      {

      getAllAllIPResult.token = allIPService.getAllAllIP();

      }

       

       

      protected function getAllAllIPResult_resultHandler(event:ResultEvent):void

      {

      ipCatalog = event.result as ArrayCollection;

      }

       

       

       

       

      ]]>

      </fx:Script>

       

      <fx:Declarations>

       

      <mx:CurrencyFormatter id="usdFormatter" precision="0" currencySymbol="$"

        decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"

        useThousandsSeparator="true" alignSymbol="left"/>

      <s:CallResponder id="getAllUsedIPResult" result="getAllUsedIPResult_resultHandler(event)"/>

      <usedipservice:UsedIPService id="usedIPService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>

       

      <valueObjects:UsedIP id="usedIPx"/>

      <s:CallResponder id="createUsedIPResult"/>

      <s:CallResponder id="deleteUsedIPResult" result="deleteUsedIPResult_resultHandler(event)"/>

      <s:CallResponder id="getAllAllIPResult" result="getAllAllIPResult_resultHandler(event)"/>

      <allipservice:AllIPService id="allIPService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>

       

       

       

       

      </fx:Declarations>

       

      <fx:Binding source="usedIPDG.selectedItem as UsedIP" destination="usedIPx"/>

       

      <s:Panel width="1000" title="Project Form" verticalCenter="0" horizontalCenter="0">

       

      <s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10">

      <mx:HBox>

      <s:DropDownList id="DropDownListProjects"

      width="200"

      dataProvider="{projects}"

      labelField="label"

      prompt="Select Project"

      change="handleProjectSelected(event)" textAlign="left"/>

      </mx:HBox>

       

      <mx:HBox verticalAlign="middle">

       

      <mx:DataGrid id="ipCatalogDG"

      width="400"

      click="ipCatalogDG_clickHandler(event)"

      creationComplete="ipCatalogDG_creationCompleteHandler(event)"

      dataProvider="{ipCatalog}">

      <mx:columns>

      <mx:DataGridColumn headerText="name" dataField="name"/>

      <mx:DataGridColumn headerText="provider" dataField="provider"/>

      <mx:DataGridColumn headerText="cost" dataField="cost"/>

      <mx:DataGridColumn headerText="technology" dataField="technology"/>

      <mx:DataGridColumn headerText="description" dataField="description"/>

       

       

      </mx:columns>

      </mx:DataGrid>

       

       

      <mx:VBox horizontalAlign="center">

      <s:Button id="addBtn"

        label="Add to Project"

        click="addBtn_clickHandler(event)"

        width="130"

        enabled="false"/>

      <s:Button id="deleteBtn"

        label="Delete from Project"

       

        width="130"

        enabled="false" click="deleteBtn_clickHandler(event)"/>

      </mx:VBox>

      <mx:DataGrid id="usedIPDG"

      dataProvider="{usedIP}"

      width="400"

      click="usedIPDG_clickHandler(event)"

      creationComplete="dataGrid_creationCompleteHandler(event)"

      visible="false">

      <mx:columns>

       

      <mx:DataGridColumn headerText="project" dataField="project" width="100"/>

      <mx:DataGridColumn headerText="name" dataField="name" width="100"/>

      <mx:DataGridColumn headerText="provider" dataField="provider" width="100"/>

      <mx:DataGridColumn headerText="cost" dataField="cost" width="100"/>

       

      </mx:columns>

      </mx:DataGrid>

       

      </mx:HBox>

       

      <s:Label id="totalProjectPrice"

      text="The total price for this Project is : {usdFormatter.format(totalPrice)}"

      visible="false"/>

       

       

       

       

      </s:VGroup>

      </s:Panel>

      <s:Button x="10" y="428" label="nullFilter" id="nullFilterBtn" click="nullFilter(event)"/>

      <s:Button x="10" y="457" label="reFilter" id="reFilterBtn" click="reFilter(event)"/>

       

       

      </s:Application>

        • 1. Re: DataGrid binded to arrayCollection with Filtering refresh problem
          G1Z

          I did not understand your question properly, can you please make it nice and simple?

          • 2. Re: DataGrid binded to arrayCollection with Filtering refresh problem
            roestigraben Level 1

            Sorry to be too complicated!

             

            The below functionality does not work. I explain: The callResponder result handler should  trigger a new service to the database, then filter the information and display it in the dataGrid.

             

            protected function createAllIPResult_resultHandler(event):void

            {

            getAllUsedIPResult.token = usedIPService.getAllUsedIP();

            usedIP.filterFunction = filterProject;

            usedIP.refresh();

            }

             

             

            private function filterProject(item:Object):Boolean

            {

            return item["project"].match(new RegExp(selectedName, 'i'))

            }

             

            When I do a small test application that adds a button filterBtn to do the filtering after a click on this button, then it works. I would like to know why and to make the first solution work (without the button filterBtn). See the working code below

             

             

            protected function createAllIPResult_resultHandler(event):void

            {

            getAllUsedIPResult.token = usedIPService.getAllUsedIP();

            }

             

            protected function filterBtn_clickHandler(event:MouseEvent):void

            {

            usedIP.filterFunction = filterProject;

             

             

            usedIP.refresh();

            }

             

             

            private function filterProject(item:Object):Boolean

            {

            return item["project"].match(new RegExp(selectedName, 'i'))

            }