Flex Datagrid Edit Cell on Row Click
With flex datagrids you sometimes find you have a datagrid with multiple columns but only one or two columns are editable.
Which column are editable are not immediately apparent to a user, they have to click on cells to find out what's editable or not editable.
You can add some sort of visual indication to show what cells are editable (see here) OR you can make clicking on a row edit a cell.
Here's how to detect clicking on a cell and set the editable column of the datagrid.
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" viewSourceURL="srcview/index.html">
3
4 <mx:DataGrid id="myDG" dataProvider="{customers}" rowCount="5" width="300" height="200" editable="true" itemClick="editCell(event)" >
5 <mx:columns>
6 <mx:DataGridColumn headerText="Name" width="100" dataField="name" editable="false" editorDataField="text" />
7 <mx:DataGridColumn headerText="Addresss" dataField="address" width="200" editable="true" />
8 </mx:columns>
9 </mx:DataGrid>
10
11 <mx:Model id="custdata">
12 <customers>
13 <customer>
14 <name>Cust1</name>
15 <address>Address1</address>
16 </customer>
17 <customer>
18 <name>Cust2</name>
19 <address>Address2</address>
20 </customer>
21 <customer>
22 <name>Cust3</name>
23 <address>Address3</address>
24 </customer>
25 </customers>
26 </mx:Model>
27
28 <mx:Script>
29 <![CDATA[
30 import mx.events.ListEvent;
31 import mx.collections.ArrayCollection;
32
33 [Bindable] private var customers:ArrayCollection = new ArrayCollection();
34
35 private function init():void {
36 customers = new ArrayCollection(custdata.customer);
37 }
38
39 public function editCell(event:ListEvent):void {
40 myDG.editedItemPosition = {columnIndex:1, rowIndex:event.rowIndex};
41 }
42 ]]>
43 </mx:Script>
44
45</mx:Application>
Code has been updated to work in Flex 3.
The only thing to be be careful of is that the itemClick event handler will be called not only if a cell in the datagrid is clicked on but also if the header of the datagrid is clicked on so you need to take one off the rowIndex when setting the edited item position.
Here what the code looks like when run (right click to view source and/or download):
I've got two data grids in my app, with drag and drop between them. The destination list is the one I need to do this to. One column uses a custom item editor, a numeric stepper. Problem is, I drag one item, click it, nothing. Drag a second item over, click it -- the FIRST row's stepper highlights. Same happens for each, only the first row highlight no matr what row is clicked on. Thoughts?
Email me your code and I'll take a quick look at it, sounds like you're not setting the row number.
Justin
The item renderer from a component doesn't seem to work for me.
I don't know if it's a bug or what.
But how about if I got numeric cell to edit and I want to format them?
Email me you code and I'll take a look at why the item renderer isn't working.
That was exactly what i was looking for!
Do you know if there is a way to set an editable property on a specific cell? I still want the entire column to be editable but with some logic I need to disable a cell being editable depending on the value of a boolean in that selected row (selectedItem). Is this possible? Was having trouble with this and this post has gotten me the closest to figuring it out.
The simple way would be to enable/disable the text field based on the boolean ie the user can't edit the field event though it shows up as a text input.
I'll look into not having it text input coming up. My first try would be to make a custom renderer with a viewstack with a text field on the first view and a text field on the second. Then use the editable property to change the selectedIndex to display the non editable version or non editable version of the content.
if (event.rowIndex > 0) {...}
and change the editedItemPosition to
rowIndex:event.rowIndex
Thanks!
I am having the same problem as you. If the datagrid is editable and scrollable, when you click on a cell with the mouse and the vertical scroll bar is not all the way down (possibly not all the way up as well) the rows jump around. You end up landing on the physical row number you intended, but since the scroll automatically moved, the data in that row is not the data you intended to click on.
I have tried using the AdvancedDataGrid to see if it might be fixed in that component. I have looked through all the properties of the DataGrid to see if there is something that could enable me to fix this behavior.
If anyone knows of a solution to this problem, I would love to hear it!
Thanks,
Lisa
- add:
import mx.core.mx_internal;
use namespace mx_internal;
Add id to:
<mx:DataGridColumn id="address" headerText="Addresss" dataField="address" width="200" editable="true" />
Change editCell function to use address.colNum instead of index:
public function editCell(event:ListEvent):void {
myDG.editedItemPosition = {columnIndex:address.colNum, rowIndex:event.rowIndex};
}