Solved

how to aviod entering text  in ComboBox?

Posted on 2011-09-02
5
271 Views
Last Modified: 2012-05-12
Hello experts,
 In my DataGrid i am using
public class ComboBoxEditor extends ComboBox implements IFactory. When i click on ComboBox, how to aviod entering text so that i can select item from ComboBox itself.
Is there any property to set?

Thanks,
Alpita
0
Comment
Question by:Alpita
  • 3
  • 2
5 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 36476215
You need to assign your component to itemEditor and itemRenderer mapped to mx.controls.Label

<mx:AdvancedDataGridColumn itemEditor="ComboBoxEditor "/>
0
 

Author Comment

by:Alpita
ID: 36481677
Here is my code snippet attached. MainAPP.mxml and ATTDataGrid.as.
Could you please let me know how this applies for my code?

Alpita
MainApp.mxml:
----------------
<s:ArrayCollection id="dsyslogColumns">
			<fx:Object dataField="action" width="39"  headerText="Action" dataType="Action" editable="false" headerWrap="true" />
			<fx:Object dataField="message" width="190" headerText="Description" dataType="String" editable="true" headerWrap="true" />
			<fx:Object dataField="severity" width="70" dataType="ArrayCollection" dataProvider="{this.severityColl}" dropdownWidth="90"  headerText="Severity" editable="true"/>
			<fx:Object dataField="vendorType" width="90" dataType="ArrayCollection" dataProvider="{this.vendorTypeColl}" dropdownWidth="120"   headerText="Vendor" editable="true"/>
			<fx:Object dataField="status" width="91" headerText="Status" dataType="String" />
			<fx:Object dataField="oid" width="90" headerText="Corresponding Trap Number" dataType="String" wordWrap="true" headerWordWrap="true"/>
			<fx:Object dataField="sub_dateTime" width="105" headerText="Submission Date" dataType="String"/>
			<fx:Object dataField="trans_dateTime" width="105" headerText="Transaction Date" dataType="String"/>

		</s:ArrayCollection>
		
<mx:Canvas id="waitCvs">	
		<scpt:ATTDataGrid headerBackgroundSkin="@Embed(source='/assets/Panel_headerSkin.png')" headerStyleName="datagridHeader"  width="1022" 
						  height="385" id="searchGrid" dataProvider="{this.custInfoDetails}" editable="true" allowMultipleSelection="true" 
						  needImageColumn="false" variableRowHeight="true" wordWrap="true" />
	</mx:Canvas>

ATTDataGrid.as:
-----------------

var fieldType:String = columnDefinition.dataType ;
				if(fieldType == "ArrayCollection")
				{
					if(dataGridColumn.editable && columnDefinition.hasOwnProperty("dataProvider")) 
					{
						var comboBox:ComboBoxEditor;
						var dropdownWidth : int = dataGridColumn.width ;
						
						if(columnDefinition.hasOwnProperty("dropdownWidth"))
							dropdownWidth = Number(columnDefinition.dropdownWidth) ;
						
						if(columnDefinition.hasOwnProperty("listener") )
						{
							comboBox = new ComboBoxEditor( false, dataField, columnDefinition.listener, null, dropdownWidth );
						}
						else
						{
							comboBox = new ComboBoxEditor( false, dataField, null, null, dropdownWidth);
						}
						comboBox.dataProvider = columnDefinition.dataProvider;
						
						if(columnDefinition.hasOwnProperty("labelFunction"))
						{
							comboBox.labelFunction = columnDefinition.labelFunction;
						}
						comboBox.editable = dataGridColumn.editable;	                    	
						dataGridColumn.itemEditor = comboBox;
						dataGridColumn.editorDataField = "selectedItem"; 
					}
				}

Open in new window

0
 
LVL 29

Expert Comment

by:dgofman
ID: 36482475
Check my example, that is answer on your question

<?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" width="100%" height="100%" initialize="init()">
	<fx:Script>
		<![CDATA[
			import mx.controls.ComboBox;

			[Bindable]
			private var comboFactory:ClassFactory;
			[Bindable]
			private var dataProvider:Array;
			
			private function init():void{
				comboFactory = new ClassFactory(ComboBox);
				comboFactory.properties = {dataProvider:['item1', 'item2', 'item3']}
					
				dataProvider = [{col1:11,col2:12,col3:13},
								{col1:21,col2:22,col3:23},
								{col1:31,col2:32,col3:33}];
			}
		]]>
	</fx:Script>

	<mx:AdvancedDataGrid dataProvider="{dataProvider}" itemRenderer="mx.controls.Label" editable="true">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="col1" itemEditor="{comboFactory}"/>
			<mx:AdvancedDataGridColumn dataField="col2" itemEditor="{comboFactory}"/>
			<mx:AdvancedDataGridColumn dataField="col3" itemEditor="{comboFactory}"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</s:Application>

Open in new window

0
 

Author Comment

by:Alpita
ID: 36489310
In my code , i am using Custom ComboBox component and Custom DataGrid.
I think this not applies .
Here are those files attached. Please let me know any ideas.
ATTDataGrid.txt
ComboBoxEditor.txt
0
 
LVL 29

Accepted Solution

by:
dgofman earned 250 total points
ID: 36493010
I hope you will figureout how to use it

Main.mxml

<?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" width="100%" height="100%" initialize="init()" xmlns:local="*">
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var editableComboFactory:ClassFactory;
			[Bindable]
			private var nonEditableComboFactory:ClassFactory;

			[Bindable]
			private var dataProvider:Array;
			
			private function init():void{
				dataProvider = [{col1:11,col2:12,col3:13},
					{col1:21,col2:22,col3:23},
					{col1:31,col2:32,col3:33}];

				var properties1:Object = {
					editable:true
				};
				nonEditableComboFactory = new ClassFactory(ComboBoxEditor);
				nonEditableComboFactory.properties = {properties:properties1, dataProvider:['item1', 'item2', 'item3']}

				var properties2:Object = {
					editable:false
				};
				editableComboFactory = new ClassFactory(ComboBoxEditor);
				editableComboFactory.properties = {properties:properties2, dataProvider:['item1', 'item2', 'item3']}

			}
		]]>
	</fx:Script>

	<local:ATTDataGrid dataProvider="{dataProvider}" itemRenderer="mx.controls.Label" editable="true">
		<local:columns>
			<mx:DataGridColumn dataField="col1" editorUsesEnterKey="true" itemEditor="{nonEditableComboFactory}"/>
			<mx:DataGridColumn dataField="col2" editorUsesEnterKey="true" itemEditor="{editableComboFactory}"/>
			<mx:DataGridColumn dataField="col3" editorUsesEnterKey="true"/>
		</local:columns>
	</local:ATTDataGrid>
</s:Application>

ATTDataGrid.as
[code]
package com.att.syslog.view.script
{
	import com.att.syslog.util.Constants;
	import com.att.syslog.vo.BaseVO;
	import com.att.syslog.vo.DSyslogInfoVO;

	import flash.display.DisplayObject;
	import flash.events.KeyboardEvent;
	import flash.utils.Dictionary;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.controls.dataGridClasses.DataGridItemRenderer;
	import mx.controls.listClasses.IDropInListItemRenderer;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.controls.listClasses.ListBaseContentHolder;
	import mx.core.ClassFactory;
	import mx.core.IDataRenderer;
	import mx.events.DataGridEvent;
	import mx.events.ListEvent;
	import mx.styles.IStyleClient;
	import mx.utils.StringUtil;
	
	
	public class ATTDataGrid extends DataGrid
	{
		public var needImageColumn : Boolean = false ;
		private var _styleFunction:Function;
		private var oldStyles:Dictionary = new Dictionary(true);//use weak keys
		
		
		public function ATTDataGrid()
		{
			super();
			this.addEventListener(ListEvent.ITEM_ROLL_OUT, deleteToolTip);
			this.addEventListener(ListEvent.ITEM_ROLL_OVER, createToolTip);
			styleFunction = errorStyleFunction;
			
		}
		
		/*
		 override protected function ProcessKeyPreview(ref System.Windows.Forms.Message m) 
		{ 
			
			Keys keyCode = (Keys)(int)m.WParam & Keys.KeyCode; 
			
			if((m.Msg == WM_KEYDOWN || m.Msg == WM_KEYUP) 
				
				&& keyCode == Keys.Enter ) 
				
				return false; 
			
			return true; 
		}
		*/
		


		
		public function setColumnHeader(customColumns:ArrayCollection):void
		{
			//Alert.show("In setColumnHeader editable: "+this.editable);
			var newcolumns : Array = new Array() ;
			//Alert.show("customColumns.length:"+customColumns.length);
			
			if(needImageColumn)
				setImageColumn(newcolumns) ;
			
			for(var i:int=0; i < customColumns.length; i++)
			{
				var columnDefinition:Object = customColumns.getItemAt(i) as Object ;   
				var dataGridColumn:DataGridColumn = new DataGridColumn() ;			
				var dataField : String = columnDefinition.dataField ;			
				//Alert.show("dataField: "+dataField);
				dataGridColumn.headerText = columnDefinition.headerText ;
				dataGridColumn.dataField = columnDefinition.dataField ;
				dataGridColumn.editable = columnDefinition.editable ;
				dataGridColumn.editorUsesEnterKey = true;
				setColumnWidth(columnDefinition, dataGridColumn);
				if(columnDefinition.hasOwnProperty("headerWrap"))
					dataGridColumn.headerWordWrap = columnDefinition.headerWrap ;
				
				/*	
				if(columnDefinition.hasOwnProperty("itemRenderer"))
				dataGridColumn.itemRenderer = new ClassFactory(getDefinitionByName(columnDefinition.itemRenderer) as Class);
				*/
				
				
				
				var fieldType:String = columnDefinition.dataType ;
				if(fieldType == "ArrayCollection")
				{
					if(dataGridColumn.editable && columnDefinition.hasOwnProperty("dataProvider")) 
					{
						var comboBox:ComboBoxEditor;
						var dropdownWidth : int = dataGridColumn.width ;
						
						if(columnDefinition.hasOwnProperty("dropdownWidth"))
							dropdownWidth = Number(columnDefinition.dropdownWidth) ;
						
						var listener:Function = null;
						if(columnDefinition.hasOwnProperty("listener") )
						{
							listener = columnDefinition.listener;
						}

						comboBox.properties = {
										editable:false,
										listener:listener,
										dropdownWidth:dropdownWidth
									};
						comboBox.dataProvider = columnDefinition.dataProvider;
						
						if(columnDefinition.hasOwnProperty("labelFunction"))
						{
							comboBox.labelFunction = columnDefinition.labelFunction;
						}
						comboBox.editable = dataGridColumn.editable;	                    	
						dataGridColumn.itemEditor = comboBox;
						dataGridColumn.editorDataField = "selectedItem"; 
					}
				}
				else if(fieldType == "Action")
				{
					var imageRenderer : ImageItemRenderer = new ImageItemRenderer();
					dataGridColumn.itemRenderer = imageRenderer;
				}
				else if(dataGridColumn.editable) 
				{
					var maxCharString1 : String = columnDefinition.maxLength ;
					//Alert.show("columnDefinition.maxLength ="+maxCharString1);
					var textEditor : ATTTextInput ;
					var maxLength1 : int = 0 ;
					
					if(maxCharString1 != null && StringUtil.trim(maxCharString1)!="" )                		
						maxLength1 = int(Number(maxCharString1)) ;
					
					if(columnDefinition.hasOwnProperty("listener") )
						textEditor = new ATTTextInput( maxLength1, dataField, columnDefinition.listener);
					else
						textEditor = new ATTTextInput(maxLength1, dataField) ;
					
					dataGridColumn.itemEditor = textEditor;
					dataGridColumn.wordWrap = true;//added new
					
				}
				newcolumns.push(dataGridColumn) ;
			}
			columns = newcolumns ;
		}	
		
		public function setColumnWidth(columnDefinition:Object, dataGridColumn:DataGridColumn):void
		{
			if(columnDefinition.hasOwnProperty("width"))
			{
				dataGridColumn.width = Number(columnDefinition.width);
			}
			else
			{
				var num:Number = String(columnDefinition.headerText).length * 8;
				if(num > 100)
					dataGridColumn.width = num;
			}
		}
		
		/* used before for image column */
		public function setImageColumn(columns:Array):void
		{
			var dataGridColumn:DataGridColumn = new DataGridColumn() ;			    
			dataGridColumn.dataField = "uiValid"; 
			dataGridColumn.editable = false ;
			dataGridColumn.headerText = "" ;
			dataGridColumn.width = 25 ;
			//dataGridColumn.itemRenderer =  new ValidImageRenderer();
			columns.push(dataGridColumn) ;
			dataGridColumn.draggable = false ;
		}
		
		private function deleteToolTip(obj:Object):void
		{
			this.toolTip = null;
		}
		
		private function createToolTip(event:ListEvent):void
		{
			if (event.itemRenderer as DataGridItemRenderer)
			{
				if(!DataGridItemRenderer(event.itemRenderer).data.validFlag)
				{
					var str:String = DataGridItemRenderer(event.itemRenderer).data.tooltip;
					this.toolTip = str;
				}
			}
		}
		
		private function errorStyleFunction(data:Object, column:DataGridColumn):Object
		{
			if (data && data.hasOwnProperty("validFlag"))
			{
				var flag:Boolean = data["validFlag"] as Boolean;
				if(!flag)
				{
					var str:String = data["tooltip"] as String;
					
					if (str && str.length > 0)
					{
						return {color:0xFF0000,backgroundColor:0xFFF552,fontWeight:"bold"};
						//return {color:0xFF0000,backgroundColor:0x0000FF};
					}
					else
					{
						return new Object();
					}
				}
			}
			return null;
		}
		
		/*private function onItemEditBeiginHandler(event:DataGridEvent):void
		{
		var vo:BaseVO = this.selectedItem as BaseVO;
		if(vo.action != Constants.TYPE_OF_UPDATE_ADD && vo.action != Constants.TYPE_OF_UPDATE_UPDATE)
		{
		event.preventDefault();
		}
		}*/
		
		/**
		 *  A callback function called while rendering each cell in the DataGrid. 
		 *
		 *  The signature of the callback function is:
		 *
		 *   <pre>function myStyleFunction(data:Object, column:DataGridColumn):Object</pre>
		 *
		 *   <p>where <code>data</code> is the data object associated with the item renderer being rendered.</p>
		 *
		 *  <p>The return value should be a Object with styles as properties.
		 *  For example: <code>{ color:0xFF0000, fontWeight:"bold" }</code>.</p>
		 */
		
		public function get styleFunction():Function{
			return _styleFunction;
		}
		public function set styleFunction(value:Function):void{
			_styleFunction=value;
			invalidateDisplayList();
		}
		
		override protected function drawItem(item:IListItemRenderer,
											 selected:Boolean = false,
											 highlighted:Boolean = false,
											 caret:Boolean = false,
											 transition:Boolean = false):void {
			super.drawItem(item, selected, highlighted, caret, transition);
			applyUserStylesForItemRenderer(item);
		}
		//copied from advanceddatagrid and modified
		protected function applyUserStylesForItemRenderer(givenItemRenderer:IListItemRenderer):void {
			if (!givenItemRenderer)
				return;
			
			if (!
				(
					// It should support all the following interfaces/inheritances
					givenItemRenderer is IStyleClient
					&& givenItemRenderer is IDataRenderer
					&& givenItemRenderer is DisplayObject
				)
			)
			{
				return;
			}
			
			var itemRenderer:IStyleClient = givenItemRenderer as IStyleClient;
			//can&apos;t find out the column info right now
			var column:DataGridColumn;
			var ir:IDropInListItemRenderer = givenItemRenderer as IDropInListItemRenderer;
			if (ir){
				column = columns[ir.listData.columnIndex];
			}
			// 1. Reset to the default i.e. "old" styles
			var styleName:String;
			if (oldStyles[itemRenderer])
			{
				for (styleName in oldStyles[itemRenderer])
				{
					itemRenderer.setStyle(styleName, oldStyles[itemRenderer][styleName]);
				}
				delete oldStyles[itemRenderer];
			}
			
			// 2. Call the DataGrid&apos;s styleFunction
			var newStyles:Object;
			if (styleFunction != null)
			{
				newStyles = styleFunction(IDataRenderer(itemRenderer).data, column);
				if (newStyles)
				{
					for (styleName in newStyles)
					{
						if (!oldStyles[itemRenderer])
						{
							oldStyles[itemRenderer] = {};
						}
						
						oldStyles[itemRenderer][styleName] = itemRenderer.getStyle(styleName);
						itemRenderer.setStyle(styleName, newStyles[styleName]);
					}
				}
			}
		}
		/**
		 *  Sets up an item renderer for a column and put it in the listItems array
		 *  at the requested position.
		 *  
		 *  @param c The DataGridColumn for the renderer.
		 *  @param contentHolder The set of rows (locked rows, regular rows).
		 *  @param rowNum The row number.
		 *  @param colNum The column number.
		 *  @param data The data for the row.
		 *  @param uid The uid for the data.
		 *  
		 *  @return The renderer for this column and row.
		 */
		override protected function setupColumnItemRenderer(c:DataGridColumn, contentHolder:ListBaseContentHolder,
															rowNum:int, colNum:int, data:Object, uid:String):IListItemRenderer
		{
			/*    Call the original function, since we can&apos;t get at a lot of the vars 
			it needs access to */
			var item:IListItemRenderer = super.setupColumnItemRenderer(c, contentHolder, rowNum, colNum, data, uid);
			//apply styles to the new renderer
			applyUserStylesForItemRenderer(item);
			//pass the styled renderer out to whatever called this function
			return item;
		}
		
		
	}		
}

Open in new window



ComboBoxEditor.as

package com.att.syslog.view.script
{

	
	import flash.events.Event;
	import flash.events.FocusEvent;
	
	import mx.controls.ComboBox;
	import mx.core.IFactory;
	import mx.events.ListEvent;
	
	
	public class ComboBoxEditor extends ComboBox implements IFactory
	{
		private var listenerFunction : Function;
		private var _trackText:String = "";
		private var caseSensitiveSearching : Boolean = false;	
		private var _properties:Object;
		
		public function ComboBoxEditor(){
			super();
			super.height = 22;
		}
		
		public function get properties():Object{
			return _properties;
		}
		public function set properties(o:Object):void
		{
			_properties = o;
			if(o != null){
			    if(o.hasOwnProperty("labelFun"))
			    	this.labelFunction = o.labelFun;	
			    if(o.hasOwnProperty("dropdownWidth"))
			    	this.dropdownWidth = o.dropdownWidth;
				if(o.hasOwnProperty("listener")) {
					listenerFunction = o.listener;
					addEventListener(ListEvent.CHANGE, listenerFunction, false, 0, true);
				}
			}
		}
		
 	    public function newInstance():*{
		    var comboBox1:ComboBoxEditor = new ComboBoxEditor();
		    comboBox1.dataProvider = this.dataProvider;
		    comboBox1.labelFunction = this.labelFunction;
		    comboBox1.dropdownWidth = this.dropdownWidth;
		    return comboBox1;
	    }

	   	override public function set data(value:Object):void {
	   		if(value == null)
	   			return ;
				
			super.data = value;
	   } 

/*	    override public function get selectedItem():Object
	    {
//	        trace("In get selectedItem *********** " + super.selectedItem );
	        if(super.selectedItem && super.data != null){
	        	if(DataGridListData(listData).rowIndex != (DataGridListData(listData).owner as DataGrid).selectedIndex)
	        		return super.selectedItem;
	        	
	        	var fieldName : String = DataGridListData(listData).dataField;
	        	var baseVO : BaseVO = data as BaseVO;
	        	baseVO[fieldName] = super.selectedItem;
	        	(DataGridListData(listData).owner as DataGrid).invalidateList();
	        }
	        return super.selectedItem;
	    }
*/
		override protected function textInput_changeHandler(event:Event):void {
			_trackText = this.textInput.text;
			
			//this.textInput.text = this.textInput.text.toUpperCase() ;
		
			this.open();
			// variables used in the loop 
			var label : String = null;
			var matchingIdx : int = 0;
			var foundMatch : Boolean = false;
			var searchString : String = this.textInput.text;
			
			if ( caseSensitiveSearching == false ) 
				searchString = searchString.toLowerCase();	
			
			// using a for each loop on dataProvider does not strongly 
			// couple to it only being an ArrayCollection... simlar 
			// with weak typing on the items in the set 
			for each ( var item : Object in this.dataProvider ) 
			{
				// using itemToLabel() checks a few things like 
				// if the item is a String, or if there's a 
				// labelFunction being used 
				label = this.itemToLabel( item );		
				
				// if searching should not be case sensitive 
				// do a toLowerCase() on label 
				if ( label && this.caseSensitiveSearching == false )
				{
					label = label.toLowerCase();
				}		
				
				// find the first item that starts with searchString 
				// if there's a match, break out of the loop 
				if ( label && label.substr( 0, searchString.length ) == searchString )
				{
					this.dropdown.selectedIndex = matchingIdx;
					this.dropdown.scrollToIndex( matchingIdx );
					foundMatch = true
					break;
				}
				matchingIdx++;
			}
			
			
			// if there was no match found set selectedIndex to -1 
			// (unselect the list) 
			if ( foundMatch == false ) 
			{
				this.dropdown.selectedIndex = -1;
			}
		}
		
//		override public function close(trigger:Event=null):void{ 
//			super.close(trigger);
//			if (this.text == "")
//			{
//				this.selectedIndex = 0;
//			}
//		}
		
		override protected function focusOutHandler(event:FocusEvent):void
		{
			super.focusOutHandler(event);
			if (this.text == "")
			{
				this.selectedIndex = 0;
			}
			this.editable = false;
		}
		
		override protected function focusInHandler(event:FocusEvent):void
		{
			super.focusInHandler(event);
			if(_properties.hasOwnProperty("editable")){
				this.editable = _properties.editable;
			}else{
				this.editable = true;
			}
			this.textInput.setFocus();
//			this.text = this.text.toUpperCase() ;
		}
	   


	}
}

Open in new window

0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Use of TCL script on Cisco devices:  - create file and merge it with running configuration to apply configuration changes
This video discusses moving either the default database or any database to a new volume.
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now