how to aviod entering text in ComboBox?

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
AlpitaAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
dgofmanConnect With a Mentor Commented:
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
 
dgofmanCommented:
You need to assign your component to itemEditor and itemRenderer mapped to mx.controls.Label

<mx:AdvancedDataGridColumn itemEditor="ComboBoxEditor "/>
0
 
AlpitaAuthor Commented:
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
 
dgofmanCommented:
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
 
AlpitaAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.