DataGridColumn Editável: Controle de Edição Inline com itemEditor

16/08/2010

Vou aproveitar que hoje eu tô tomado no jiraya então tem mais post pra essa galera antenada com o flex e que apronta confusões de montão, como diria o narrador da sessão da tarde kkkkk.

Vou continuar trabalhando em cima do projeto do post Inserindo ícones em uma DataGrid com itemRenderer.

A primeira alteração é adicionar mais uma propriedade as tags clube no model.

<mx:Model id="modelPaulistas">
	<clubes>
		<clube nome="Palmeiras" libertadores="true" quantidade="1" />
		<clube nome="Santos" libertadores="true" quantidade="2" />
		<clube nome="São Paulo" libertadores="true" quantidade="3" />
		<clube nome="Corinthians" libertadores="false" quantidade="0" />
	</clubes>
</mx:Model>

Em seguida adicionamos a datagrid a propreidade editable=”true” para que as células possam ser editadas,
por padrão editable é false.

<mx:DataGrid x="10" y="10" dataProvider="{modelPaulistas.clube}" editable="true">

Também temos que determinar quais as colunas que terão suas células editáveis, setando editable igual a true ou false, no caso precisamos apenas que uma coluna seja editável, a de quantidade.

<mx:DataGridColumn editable="true"
	headerText="Quantidade" dataField="quantidade"
	editorDataField="value"/>

Neste momento já possível editar o conteúdo da célula, no modo normal a célula é um Text e quando em foco a célula se torna um TextInput, mas pode ser alterado e é aí que entra o a propriedade itemEditor, através dela podemos setar o componente que será utilizado na hora da edição, podendo ser: Label, Button, Combobox, Checkbox, NumericStepper, DateField, Image, TextArea.
Como estamos lidando com números pequenos, o NumericStepper é o mais adequado.

<mx:DataGridColumn editable="true"
	headerText="Quantidade" dataField="quantidade"
	editorDataField="value">
	<mx:itemEditor>
		<mx:Component>
			<mx:NumericStepper/>
		</mx:Component>
	</mx:itemEditor>
</mx:DataGridColumn>