How to navigating through the Data using Flex form

Sunday, May 30, 2010 Posted by Sanka Senevirathna 0 comments

How to navigating through the Data or ArrayCollection using Flex form





I know you guys have a problem of having navigating through tha data of ArrayCollection by using the Flex Form
Here is the solution for viewing data, or navigating data of Flec ArrayColletion that contain bean objects....



















  selectedMember)
   {
    selectedMember = selectedMember + 1;
    tiDebAddress1.text=lststatus.getItemAt(selectedMember).status;
    cmdPrevious.enabled=true;
    if(lststatus.length-1 == selectedMember)
    {
    cmdNext.enabled=false;
    cmdPrevious.enabled=true;
    }
    else
    cmdNext.enabled=true;
   }
  }
 
  private function prevousItem():void
  {
   if(lststatus.length > 0 && selectedMember > 0)
   {
    selectedMember = selectedMember - 1;
    tiDebAddress1.text=lststatus.getItemAt(selectedMember).status;
    if(selectedMember==0)
    {
    cmdPrevious.enabled=false;
    cmdNext.enabled=true;
    }
    else
    cmdPrevious.enabled=true;
   }
  }
 
 ]]>



Labels:

Flex : How to calculate Datagrid column total

Wednesday, May 12, 2010 Posted by Sanka Senevirathna 0 comments
How to calculate Datagrid column total
Manipulating flex datagrid colomns

Select a colomn name from comboBox and hit the button and enjoy...


Happy coding.....













you can download the code from here



Labels:

Flex Dynamically popup searchable Datagrid

Tuesday, May 11, 2010 Posted by Sanka Senevirathna 0 comments
Flex Dynamically popup searchable Data-grid For Demo purpose I have create non DB version as following.Full code example is following... Check it and get idea...No need to describe this.









mainApp.mxml














PopUpGrid.as


package com.dspl.component
{
import com.iwobanas.controls.MDataGrid;
import com.iwobanas.controls.dataGridClasses.MDataGridColumn;
import com.iwobanas.controls.dataGridClasses.filterEditors.SliderFilterEditor;
import com.iwobanas.controls.dataGridClasses.filterEditors.WildcardFilterEditor;
import com.iwobanas.core.ISearchable;
import flash.events.Event;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.containers.HBox;
import mx.containers.TitleWindow;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.Label;
import mx.controls.TextInput;
import mx.core.Application;
import mx.core.ClassFactory;
import mx.events.DataGridEvent;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.managers.DragManager;
import mx.managers.PopUpManager;

public class PopUpGrid
{

 var mygrid:MDataGrid;
 var tt:TitleWindow;
 var txt:TextInput;
 var columnName:String;
 var txtSearch:TextInput;

 [Bindable]
 public var target:ISearchable;

 public function PopUpGrid(listCollectionFCurrencies:ArrayCollection,txt:TextInput,app:Application,columnName:String,columnsNameList:Array,columnsFilterList:Array)
 {
  this.txt=txt;
  this.columnName=columnName;
  tt=new TitleWindow()
  mygrid =new MDataGrid();
  mygrid.dataProvider=listCollectionFCurrencies;
  mygrid.columns =getDataGridColumns(columnsNameList,columnsFilterList);

  mygrid.editable=true;
  mygrid.dragEnabled=true;
  mygrid.width=500;

/*    //Following code is the call to component
  var mySearch:SearchBox=new SearchBox();
  mySearch.target=mygrid;
  tt.addChild(mySearch); */

//Following code segment is for SearchBox facility
   var hBoxSearch:HBox=new HBox();
   target=mygrid;
   var lblSearch:Label=new Label();
   lblSearch.text="Search:"
   txtSearch=new TextInput();
   txtSearch.addEventListener(Event.CHANGE,function() {target.find(txtSearch.text);});
   //txtSearch.addEventListener(Event.CHANGE,function() {mouseOverListener('Print This');});
   txtSearch.setStyle('backgroundColor','{!target.searchString || target.found ? 0xffffff:0xff0000}');
   txtSearch.addEventListener(FlexEvent.ENTER,function() {target.findNext();});
   txtSearch.toolTip="Live search";

   var previousButton:Button=new Button();
   previousButton.enabled='{target.searchString != null}';
   previousButton.label="<"     previousButton.toolTip="Previous"     previousButton.addEventListener(MouseEvent.CLICK,function() {target.findPrevious();});      var nextButton:Button=new Button();     nextButton.enabled='{target.searchString != null}';     nextButton.label=">"
   nextButton.toolTip="Next"
   nextButton.addEventListener(MouseEvent.CLICK,function() {target.findNext();});

   hBoxSearch.addChild(lblSearch);
   hBoxSearch.addChild(txtSearch);
   hBoxSearch.addChild(previousButton);
   hBoxSearch.addChild(nextButton);
   tt.addChild(hBoxSearch);

//Above code segment is for SearchBox facility

   tt.addChild(mygrid);
  PopUpManager.addPopUp(tt, app, false);
  PopUpManager.centerPopUp(tt);//this is only set location :center
  mygrid.addEventListener(DataGridEvent.ITEM_EDIT_BEGINNING,clickRow);
  this.txt.addEventListener(DragEvent.DRAG_ENTER,fndragEnterHandler);//grag and drop facility
  this.txt.addEventListener(DragEvent.DRAG_OVER,fndragOverHandler);//grag and drop facility
  this.txt.addEventListener(DragEvent.DRAG_DROP,fndragDropHandler);//grag and drop facility

 }

           private function getDataGridColumns(columnsNameList:Array,columnsFilterList:Array):Array {
            var dataGridColumnList:Array =new Array();

            for (var i:String in columnsNameList)
   {

    //Type of Filters : MultipleChoiceFilterEditor,SliderFilterEditor,WildcardFilterEditor,NumberRangeFilter,DateRangeFilter(new one)
       var dgc:MDataGridColumn = new MDataGridColumn(columnsNameList[i]);
       if("String"==columnsFilterList[i]){dgc.filterEditor=new ClassFactory(WildcardFilterEditor);}
       else if("Integer"==columnsFilterList[i]){dgc.filterEditor=new ClassFactory(SliderFilterEditor); }
      // else if("Date"==columnsFilterList[i]){dgc.filterEditor=new ClassFactory(DateRangeFilterEditor); }
       dataGridColumnList.push(dgc);
   }
   return dataGridColumnList;
           }

  private function clickRow(event:DataGridEvent):void
  {
  try{
   //this.txt.text=mygrid.selectedItem.curCode;//event.rowIndex.toString();
   this.txt.text=mygrid.selectedItem[columnName];//event.rowIndex.toString();
   PopUpManager.removePopUp(tt);
   }
  catch (e:Error) {
     Alert.show( e.message);
   }
  }

  private function fndragEnterHandler(event:DragEvent):void
           {
            if (event.dragSource.hasFormat("items"))
            DragManager.acceptDragDrop(TextInput(event.currentTarget));
           }

           private function fndragOverHandler(event:DragEvent):void
           {
            if (event.dragSource.hasFormat("items"))
            DragManager.showFeedback(DragManager.COPY);
           }

           private function fndragDropHandler(event:DragEvent):void
           {
           event.preventDefault();
           var itemsArray:Array = event.dragSource.dataForFormat("items") as Array;
               TextInput(event.currentTarget).text=itemsArray[0].(this.columnName);
           }


}
}




This is non Database program MXML file














This is non Database program .as file

package com.dspl.component
{
import com.iwobanas.controls.MDataGrid;
import com.iwobanas.controls.dataGridClasses.MDataGridColumn;
import com.iwobanas.controls.dataGridClasses.filterEditors.SliderFilterEditor;
import com.iwobanas.controls.dataGridClasses.filterEditors.WildcardFilterEditor;
import com.iwobanas.core.ISearchable;
import flash.events.Event;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.containers.HBox;
import mx.containers.TitleWindow;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.Label;
import mx.controls.TextInput;
import mx.core.Application;
import mx.core.ClassFactory;
import mx.events.DataGridEvent;
import mx.events.DragEvent;
import mx.events.FlexEvent;
import mx.managers.DragManager;
import mx.managers.PopUpManager;

public class PopUpGrid
{

 var mygrid:MDataGrid;
 var tt:TitleWindow;
 var txt:TextInput;
 var columnName:String;
 var txtSearch:TextInput;

 [Bindable]
 public var target:ISearchable;

 public function PopUpGrid(listCollectionFCurrencies:ArrayCollection,txt:TextInput,app:Application,columnName:String,columnsNameList:Array,columnsFilterList:Array)
 {
  this.txt=txt;
  this.columnName=columnName;
  tt=new TitleWindow()
  mygrid =new MDataGrid();
  mygrid.dataProvider=listCollectionFCurrencies;
  mygrid.columns =getDataGridColumns(columnsNameList,columnsFilterList);

  mygrid.editable=true;
  mygrid.dragEnabled=true;
  mygrid.width=400;

/*    //Following code is the call to component
  var mySearch:SearchBox=new SearchBox();
  mySearch.target=mygrid;
  tt.addChild(mySearch); */

//Following code segment is for SearchBox facility
   var hBoxSearch:HBox=new HBox();
   target=mygrid;
   var lblSearch:Label=new Label();
   lblSearch.text="Search:"
   txtSearch=new TextInput();
   txtSearch.addEventListener(Event.CHANGE,function() {target.find(txtSearch.text);});
   //txtSearch.addEventListener(Event.CHANGE,function() {mouseOverListener('Print This');});
   txtSearch.setStyle('backgroundColor','{!target.searchString || target.found ? 0xffffff:0xff0000}');
   txtSearch.setStyle('border-color','{#EDF5FE}');
   txtSearch.addEventListener(FlexEvent.ENTER,function() {target.findNext();});
   txtSearch.toolTip="Live search";

   var previousButton:Button=new Button();
   previousButton.enabled='{target.searchString != null}';
   previousButton.label="<"     previousButton.toolTip="Previous"     previousButton.addEventListener(MouseEvent.CLICK,function() {target.findPrevious();});      var nextButton:Button=new Button();     nextButton.enabled='{target.searchString != null}';     nextButton.label=">"
   nextButton.toolTip="Next"
   nextButton.addEventListener(MouseEvent.CLICK,function() {target.findNext();});

   hBoxSearch.addChild(lblSearch);
   hBoxSearch.addChild(txtSearch);
   hBoxSearch.addChild(previousButton);
   hBoxSearch.addChild(nextButton);
   tt.addChild(hBoxSearch);

//Above code segment is for SearchBox facility

   tt.addChild(mygrid);
  PopUpManager.addPopUp(tt, app, false);
  PopUpManager.centerPopUp(tt);//this is only set location :center
  mygrid.addEventListener(DataGridEvent.ITEM_EDIT_BEGINNING,clickRow);
  this.txt.addEventListener(DragEvent.DRAG_ENTER,fndragEnterHandler);//grag and drop facility
  this.txt.addEventListener(DragEvent.DRAG_OVER,fndragOverHandler);//grag and drop facility
  this.txt.addEventListener(DragEvent.DRAG_DROP,fndragDropHandler);//grag and drop facility

 }

           private function getDataGridColumns(columnsNameList:Array,columnsFilterList:Array):Array {
            var dataGridColumnList:Array =new Array();

            for (var i:String in columnsNameList)
   {

    //Type of Filters : MultipleChoiceFilterEditor,SliderFilterEditor,WildcardFilterEditor,NumberRangeFilter,DateRangeFilter(new one)
       var dgc:MDataGridColumn = new MDataGridColumn(columnsNameList[i]);
       if("String"==columnsFilterList[i]){dgc.filterEditor=new ClassFactory(WildcardFilterEditor);}
       else if("Integer"==columnsFilterList[i]){dgc.filterEditor=new ClassFactory(SliderFilterEditor); }
      // else if("Date"==columnsFilterList[i]){dgc.filterEditor=new ClassFactory(DateRangeFilterEditor); }
       dataGridColumnList.push(dgc);
   }
   return dataGridColumnList;
           }

  private function clickRow(event:DataGridEvent):void
  {
  try{
   //this.txt.text=mygrid.selectedItem.curCode;//event.rowIndex.toString();
   this.txt.text=mygrid.selectedItem[columnName];//event.rowIndex.toString();
   PopUpManager.removePopUp(tt);
   }
  catch (e:Error) {
     Alert.show( e.message);
   }
  }

  private function fndragEnterHandler(event:DragEvent):void
           {
            if (event.dragSource.hasFormat("items"))
            DragManager.acceptDragDrop(TextInput(event.currentTarget));
           }

           private function fndragOverHandler(event:DragEvent):void
           {
            if (event.dragSource.hasFormat("items"))
            DragManager.showFeedback(DragManager.COPY);
           }

           private function fndragDropHandler(event:DragEvent):void
           {
           event.preventDefault();
           var itemsArray:Array = event.dragSource.dataForFormat("items") as Array;
               TextInput(event.currentTarget).text=itemsArray[0].(this.columnName);
           }


}
}
Labels:
Subscribe to: Posts (Atom)