And this datagrid is editable ,  we can modify username directly, by default, Flex will use TextInput as the item editor.

I want to display some error mesg in a datagrid ItemEditor when use input is invalidate.

Using Alert – not good enough

So I add a listener to the item edit complete Event:

	/**
	 * validate user input, revert the original value if necessary.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // chech the field;
			return;
		}
		var input:String = (datagirdTest.itemEditorInstance as TextInput).text; // get the user input data.
		if(input == null || input == "") {
			event.preventDefault(); // prevent default behavior
			(datagirdTest.itemEditorInstance as TextInput).text = (event.itemRenderer.data as XML).Name;// Undo: revert the original data by the selected item.
			Alert.show(errorMesg);
			return;
		}
	}

It can work correctly, but our client think we should not change user input directly. so I comment off the undo line:

	/**
	 * validate user input, revert the original value if necessary.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // chech the field;
			return;
		}
		var input:String = (datagirdTest.itemEditorInstance as TextInput).text; // get the user input data.
		if(input == null || input == "") {
			event.preventDefault(); // prevent default behavior
			//HERE: (datagirdTest.itemEditorInstance as TextInput).text = (event.itemRenderer.data as XML).Name;// Undo: revert the original data by the selected item.
			Alert.show(errorMesg);
			return;
		}
	}

Unfortunately, because of ‘Alert’, itemEditComplete Event will dispatch many times, so there’ll be many alert in the UI.

Using Error message in item editor – can not work correctly

So, I want to display the error message in the item editor , like this:

and here is the handler:

	/**
	 * validate user input.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // check the field;
			return;
		}

		var editor:TextInput = datagirdTest.itemEditorInstance as TextInput;
		var input:String = editor.text; // get the user input data.
		if(input == null || input == "") {
			// event.preventDefault(); // prevent default behavior
			event.stopImmediatePropagation();
			editor.errorString = "User name cannot be empty!";
			trace("Error");
			// datagirdTest.destroyItemEditor();
		}else {
			editor.errorString = null;
		}
	}

Now I can display the error mesg as the above screen capture, but if the user want to reload the data or sort the column, the editor will stay there until I call datagrid.destroyItemEditor(), but:

“This method closes an item editor currently open on an item renderer. You typically only call this method from within the event listener for the itemEditEnd event, after you have already called the preventDefault() method to prevent the default event listener from executing.” http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/DataGrid.html#destroyItemEditor()

so, How can I display the error message in this way?

----------Post from: @LiGuoliang.com, 欢迎回来~----------

Solution: Handle the ‘itemEditEnd’ Event dispatched by the datagrid.

Codes:

	/**
	 * validate user input, revert the original value if necessary.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // chech the field;
			return;
		}
		var input:String = (datagirdTest.itemEditorInstance as TextInput).text; // get the user input data.
		if(input == null || input == "") {
			event.preventDefault(); // prevent default behavior
			// var filed:String = (datagirdTest.columns[event.columnIndex] as DataGridColumn).editorDataField;
			// trace(datagirdTest.itemEditorInstance[filed]);
			(datagirdTest.itemEditorInstance as TextInput).text = (event.itemRenderer.data as XML).Name;// Undo: revert the original data by the selected item.
			Alert.show(errorMesg);
			return;
		}
	}

Screen caputre:

User input is empty, we got the Event, prevent the default behavior, and revert the value form the modeling.

Ref:

1. itemEditEnd called multiple times http://forums.adobe.com/message/2459209
2. Using cell editing events  – http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_7.html

----------Post from: @LiGuoliang.com, 欢迎回来~----------

临时解决方法: 监听Datagrid的CREATION_COMPLETE事件, 在响应函数中重置Column的宽度.

效果: 参见http://cutown.com/home/reg.php, 网页内嵌入的Datagrid中, 后两列宽度为首列之外的宽度均分.

代码:

	/** Datagrid创建完毕后设定Column的宽度. */
	protected function onDGCreationComplte(e:Event):void {
		var columnServerID:DataGridColumn = columns[0] as DataGridColumn;

		for(var i:int = 0; i < columns.length; i++) {
			var column:DataGridColumn = columns[i] as DataGridColumn;
			column.width = width/columns.length; // 重设宽度, 减去首列宽度, 其他列均分.
		}
	}

----------Post from: @LiGuoliang.com, 欢迎回来~----------

		datagridClasses.doubleClickEnabled = true;
		datagridClasses.addEventListener(MouseEvent.DOUBLE_CLICK, onDGDoubleClicked);

正确方法应该使用ListEvent.ITEM_DOUBLE_CLICK监听项目双击事件.

		datagridClasses.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, onDGDoubleClicked);

----------Post from: @LiGuoliang.com, 欢迎回来~----------

if(focusManager == null) {
	e.preventDefault()
	return;
}

----------Post from: @LiGuoliang.com, 欢迎回来~----------

//新建一个DataGrid _dataGrid = new DataGrid();
//增加右键
var menu:NativeMenu = new NativeMenu();
var menuItemDelete:NativeMenuItem = new NativeMenuItem("Delete");
//监听事件,在右键选定Delete时运行该函数
 menuItemDelete.addEventListener(Event.SELECT, onMenuDeleteClicked);
//将该menuItem加入到Menu中
menu.addItem(menuItemDelete);
 _dataGrid.contextMenu = menu; //将菜单加入到DataGrid中 

columnLocale = new DataGridColumn(); //新建一个列
columnLocale.dataField ="locale";//设定DataGrid中locale列的EditItem;
comboBoxLocaleEditor = new ClassFactory(ComboBox); // D
comboBoxLocaleEditor.properties = {dataProvider : LocalizationItem.localeArray} //设定该EditorItem的属性
columnLocale.itemEditor = comboBoxLocaleEditor; 

var columnGender:DataGridColumn = new DataGridColumn();
 columnGender.headerText = "Gender&quot";
columnGender.dataField = "Gender_";
//使用ItemRender
columnGender.itemRenderer = new ClassFactory(Gender_Label);
 _dataGrid.showHeaders = false; //隐藏DataGrid的Header
_dataGrid.columns = [columnLocale, columnGender]; //这一个数组,存放DataGrid的Column 

_dataGrid.dataProvider = value; //设定dataProvider 

具体在实际中的使用, 无异于MXML.

----------Post from: @LiGuoliang.com, 欢迎回来~----------

如Student中有一Gender_属性, 1表示男生, 2表示女生, 3表示未知, 现在有下要求:

1. 在DataGrid中不可以显示1, 2,3, 应显示 男女 [ 该功能可由LabelFunction实现],

2. 如果为男生,, 则”男生”颜色为红色, 女生颜色为默认, 未知字体大小为10号

具体实现:

			var columnGender:DataGridColumn = new DataGridColumn();
			columnGender.headerText = "Gender";
			columnGender.dataField = "Gender_"; //使用ItemRender
			columnGender.itemRenderer =  new ClassFactory(Gender_Label);
			//columnGender.labelFunction = formatGender;

			_dataGridStudent.columns = [columnID, columnName, columnAge, columnGender];

ItemRender实现: 该类将继承List, 重写其UpdateDisplayList函数, 如下:

package com.test.itemRender
{
import mx.controls.Label;
import mx.controls.listClasses.ListBase;

public class Gender_Label extends Label
{
	/**
	 * 构造函数
	 */
	public function Gender_Label() {
		super();
	}

	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
		super.updateDisplayList(unscaledWidth, unscaledHeight);
		if(data.Gender_ == 1) {
             setStyle('fontSize',14);
             setStyle('fontWeight', 'bold');
             setStyle('color', 0xDD0000);
             this.text = "男生";
		 }else if(data.Gender_ == 2) {
		 	setStyle('fontSize',14);
		 	this.text = "女生"
		 }
		 //otherwise, return the label to its regular state
		 else {
		     setStyle('fontSize', 10);
             this.text = "未知";
		 }
	}

}// end of class
}// end of package

最终效果:

----------Post from: @LiGuoliang.com, 欢迎回来~----------

解决: 通过监听右键菜单SELECT事件, 获取到当前右键所击位置的Index, 并将之赋值给DataGrid或其他容器的SelectIndex, 完成点击操作

详细实现:  以DataGrid为例.

第一步, 首先给DataGrid添加菜单

			var dgMenu:NativeMenu = new NativeMenu();
			var del:NativeMenuItem  = new NativeMenuItem("Test");
			del.addEventListener(Event.SELECT, onRightClickDel);
			dgMenu.addItem(del);
			dgMenu.addEventListener(ContextMenuEvent.MENU_SELECT, onRightClicked);
			_dataGridStudent.contextMenu = dgMenu;

第二步, 响应函数:

	/**响应右键点击 */
	private function onRightClicked(e:ContextMenuEvent):void {
		var rightClickItemRender:IListItemRenderer;

		if(e.mouseTarget is IListItemRenderer) {
			rightClickItemRender = IListItemRenderer(e.mouseTarget);
		}else if(e.mouseTarget.parent is IListItemRenderer) {
			rightClickItemRender = IListItemRenderer(e.mouseTarget.parent);
		}

		if(rightClickItemRender != null) {
			var rightClickIndex:int = _dataGridStudent.itemRendererToIndex(rightClickItemRender);
			if(_dataGridStudent.selectedIndex != rightClickIndex) {
				_dataGridStudent.selectedIndex = rightClickIndex;
				onSlectedChange();
			}
		}
		trace("通过右键单击获得选定的行: " + _dataGridStudent.selectedIndex);
	}

Delete响应函数:

	/** 当右键菜单的Delete点击后响应*/
	private function onRightClickDel(e:Event):void {
		//在这里放逻辑....
	}

效果:

控制台Trace信息:

通过右键单击获得选定的行: 1

参考资料: Adobe CookBook  Select List item with mouse right-click

----------Post from: @LiGuoliang.com, 欢迎回来~----------

原理:

DataGrid通过DataGridColum函数中的itemToLabel实现数据源到现实内容的过程,

当DataGrid 某列的labelFunction不为空时, DataGridColumn的itemToLabel函数将执行:

if (labelFunction != null)
return labelFunction(data, this);

具体可参见类DataGridColumn的itemToLabel函数.

使用方法:

var columnGender:DataGridColumn = new DataGridColumn();  //增加一个Column
			columnGender.headerText = "Gender";
			columnGender.dataField = "Gender_";
			columnGender.labelFunction = formatGender;  //设定LabelFunction

			_dataGridStudent.columns = [columnID, columnName, columnAge, columnGender];  //将Column加入到DG中.总共四个Column

labelFunction函数

	/** 设定DataGrid 性别栏显示内容*/
	 private function formatGender(item:Object, c:DataGridColumn):String {
	 	var gender:String;
	 	if(item.Gender_ == 1) {
	 		gender = "男";
	 	}else if(item.Gender_ == 2) {
	 		gender = "女";
	 	}else {
	 		gender = "未知";
	 	}
	 	return gender;
	 }

----------Post from: @LiGuoliang.com, 欢迎回来~----------

点击一个之后:

简单实现方法:

_dataGridStudent.addEventListener(ListEvent.CHANGE, onSlectedChange);

对应监听函数:

		_actionEdit.enabled = _dataGridStudent.selectedItem != null;
		_actionDelete.enabled = _dataGridStudent.selectedItem != null;

这样实现了:
1.无点击时不可用
2.点击且有选择时可用
3. 如点击之后, 按住Ctrl点击, 可取消对其选择, 这时将置按钮于不可用状态.

----------Post from: @LiGuoliang.com, 欢迎回来~----------