Flex Dynamically popup searchable Datagrid

Tuesday, May 11, 2010 Posted by Sanka Senevirathna
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:

Post a Comment

Subscribe to: Post Comments (Atom)