lunes, 16 de febrero de 2009

Utilizando un ItemEditor para modificar las filas de un DataGrid


Este post lo voy a realizar como una continuacion del post anterior Utilizando un ItemRender en un DataGrid pero en este caso vamos a ampliar el ejemplo utilizando una propiedad llamada itemEditor.

Un itemEditor es un componente que se utiliza para modificar informacion, a diferencia de un itermRenderer (que se utiliza unicamente para mostrar informacion) el itemEditor es ideal para realizar modificaciones a datos utilizando los componentes mas idoneos para facilitar la modificacion. La mejor manera de que se vea lo que trato de decir es mostrando el ejemplo que vamos a realizar:
Como pueden notar al hacer click sobre alguna de las celdas los datos que se visualizaban ahora se renderizan de otra manera ideal para su manipulacion.

Para lograr esto debemos colocar en cada columna una propiedad llamada itemEditor que contendrá la ruta hacia la clase o componente que queremos utilizar para renderizar los datos en el momento de la modificacion de la celda. En el caso de este ejemplo la estructura del DataGrid queradía de la siguiente manera.


<mx:DataGrid id="dg" x="10" y="10" columnWidth="20" dataProvider="{datos}" rowHeight="25" editable="true" width="357">
<mx:columns>
<mx:DataGridColumn headerText="RadioButton" dataField="radioValue" editable="false" itemRenderer="mx.controls.RadioButton"/>
<mx:DataGridColumn headerText="NumericStepper" dataField="numeriValue" editorDataField="value" itemEditor="mx.controls.NumericStepper"/>
<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image" itemEditor="mx.controls.TextInput"/>
<mx:DataGridColumn headerText="CheckBox" dataField="checkBoxValue" editable="false" itemRenderer="mx.controls.CheckBox"/>
<mx:DataGridColumn headerText="TextInput" dataField="textValue" editable="true" itemEditor="mx.controls.TextInput"/>
</mx:columns>
</mx:DataGrid>

Si no queremos que una columna en especifica se pueda editar debemos asignarle la propiedad editable=false.

Bueno esto es todo en este ejemplo, como pueden ver es muy facil utilizar estos itemEditors para modificar las filas del DataGrid. Cualquier duda no duden en escribirme al correo aalejo@gmail.com.

2 comentarios:

  1. Muy buen ejemplo, pero hay algo que estoy buscando desde hace dias y no he tenido suerte. Yo quiero colocar en un grid, distintos controles en una misma columna, por ejemplo, un datecontrol y un inputbox. Como se puede hacer esto?

    ResponderEliminar
  2. tonga, Debes utilizar un itemrenderer propio, creando un componente flex que herede de cualquier objeto que implemente la interfaz ItemRenderer. Te sugiero que revises este ejemplo que te puede servir de ayuda. http://internetdeveloping.blogspot.com/2009/02/datagrid-con-un-itemrender-propio.html

    ResponderEliminar