Stephen's dev blog

Flex 3 DataGrid double click event

Posted on: 6 August, 2008

I’ve just had a thought that it was hard to come accross resources for handling double click events on DataGrids in Flex 3.

There are lots of tutorials on how to handle them in Flex 2 but this doesn’t apply for Flex 3, as Flex 3 natively handles double click events and Flex 2 did not.

There are also a lot of tutorials on how to amend functionality so that you have to double click to edit a row instead of the default single click. This tutorial does not cover this, this tutorial covers functionality of double clicking a row and then triggering something. I.E. a table of products, you want to double click a row to view product details etc.

First off, we need to make a slight amendment to our DataGrid (or AdvancedDataGrid, same applies to both):

<mx:DataGrid id="MyDataGrid" doubleClickEnabled="true" itemDoubleClick="functionName(event);">
...

There are obvious meanings to both of these new attributes; doubleClickEnabled is used to tell Flex we want to allow/handle double click events on this DataGrid and itemDoubleClick tells Flex which function to use.

The above function should look something like:

protected function functionName(event:ListEvent):void
{
    var selectedRow:Object = event.currentTarget.selectedItem;
    Alert.show(selectedRow.myVariableName);
}

You can directly access the selected row from the DataGrid using the event.currentTarget.selectedItem reference. You can then access any variable that exists in the DataGrid’s dataProvider for that row.

Of course to get the above working you’ll need to:

import mx.controls.Alert;
import mx.events.ListEvent;

Stephen.

Advertisements

21 Responses to "Flex 3 DataGrid double click event"

After accessing the row, how does one actually access a particular cell?

Hi Mary,

Apologies I should have made it clearer. Say if in your DataGrid (or AdvancedDataGrid) you have a cell called ‘Product name’ and it refers to a field in the data provider called ‘product_name’, you can do this:

protected function functionName(event:ListEvent):void
{
    var selectedRow:Object = event.currentTarget.selectedItem;
    Alert.show(selectedRow.product_name);
}

This is the function which binds to the ‘itemDoubleClick’ event of the DataGrid. Because ‘event.currentTarget.selectedItem’ refers to the row that was double clicked, you can access any of the cells of that row using standard dot notation.

As you can see above I have assigned ‘event.currentTarget.selectedItem’ to a local variable but you don’t have to, you can directly access a cell’s value by doing: ‘event.currentTarget.selectedItem.field_name’.

Thanks for reading and I hope this clears it up!
Stephen.

I need to work with the column name rather than the field name as this is a column in the DataGrid that is modified if the row has been clicked on.

Actually to be more clear, I need to change the image in the column if the row is clicked on. I have tried an ItemRenderer both inline as a Component and external; but I am still not able to modify the image in the column.

Sorry, to be even more clear, I need to change the image in a particular cell of the row that was double clicked on, not the entire column.

So just to clarify:

You have a datagrid, one of the columns is an image.

You want to be able to double click the image column of a particular row, and change the image of that row.

Do you want to actually browse for a new image to upload? Or do you want to edit a string representation of the source? E.G. you double click to edit the source of the image in a text field.

The latter will be a lot simpler! πŸ˜›

The issue is that you don’t necessarily click on the column containing the image. If you click anywhere in the row, you make the image invisible which is simpler than swapping out images.

Editing a string representation of the source would let you swap out the image which would also be ok.

Thanks for feedback!

I gave up on swapping the image for one row and created an inline ItemRenderer with “visible=true”. Now if I change the Boolean value it is bound to upon a click in the row, the image for all rows is set to invisible which is still not what I want!

I just spent a few hours trying to build something to do what you want because I’ve not done this kind of thing before. Then I came across this, which is EXACTLY what I was trying to do πŸ˜›

http://blog.classsoftware.com/index.cfm/2007/6/11/Flex-Datagrid-Edit-Cell-on-Row-Click

Not annoying at all! πŸ˜› Hope it helps anyway. The interesting function is the editCell one, I’ll keep this one in mind for future πŸ™‚

I had studied that example; but I think what I’m trying to do is not the same. Both columns in that example are from the data provider. My first column, an image column, is one I populate with an inline ItemRenderer->Component->Image tag sequence. The image is set to visible initially, and I need to set it to invisible when the user clicks on the row. I can handle columns from the data provider; but access to this first image populated column escapes me. Thanks for the time you have spent on this.

Hi Mary,

Sorry I misunderstood your original problem πŸ˜› I’ve been investigating again and I’ve come across an interesting idea which may help.

Basically you create a simple custom DataGrid class which adds a getter method for returning an array of all itemRenderers for all rows.

Then on your ‘click’ function you loop through this array, check to see if the renderer corresponds to the row that was clicked and then do something with it. In the example I found he was using this method to make that row’s itemRenderer turn the row bold, but I’m sure it could be modified to make the itemRenderer hidden?

The example I found is: http://blog.paranoidferret.com/index.php/2008/09/02/accessing-datagrid-itemrenderers/

I was thinking the line you could change to hide the itemRenderer could be:

rowRenderers[i][j].setStyle("fontWeight", "bold");

What would happen if you change this to:

rowRenderers[i][j].visible = false;

I haven’t tested this so I don’t even know if it’s possible, but worth a try πŸ˜›

Stephen.

Thank you soooo much worked fine obviously. but difficult ressource to find although completely straight forward. cheers

Hi benjamin,

Thanks for the comment, I’m glad it helped! πŸ˜€

Stephen.

Hi ,

Please clarify me.

Requirement: Need to use a itemrenderer link button for a particular column say(ProjectName) in a datagrid. when i click the projectName, need to load a page with its corresponding projectname and its relevant details.

Issue:

i need to get a selected row/ cell value for a column say ProjectName and it has to be appended in the url.

dont know how to retrieve the selected row/cell value by using a datagrid itemrenderer.

kindly help me out to solve this issue .

Hi Nithya,

Sorry for the late, late, late reply, been crazily busy lately!

So your exact issue is;

You want a button as an itemRenderer in a DataGrid and when you click the button, you want to load a page (or State etc) with details relating to that row?

Say if you had a simple DataGrid with two columns (Project name, View) with the second column containing a button, you could do something like this:

<mx:Script>
    <![CDATA[
        protected function viewSelectedProject():void
        {
            var selectedProject:Object = ProjectDataGrid.selectedItem;
            Alert.show('Project name: '+selectedProject.project_name);
        }
    ]]>
</mx:Script>
<mx:DataGrid selectionMode="singleRow" id="ProjectDataGrid">
    <mx:columns>
        <mx:DataGridColumn headerText="Project name" dataField="project_name"/>
        <mx:DataGridColumn headerText="View">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
                        <mx:Script>
                            <![CDATA[
                                protected function viewProject(event:MouseEvent):void
                                {
                                    outerDocument.viewSelectedProject();
                                }
                            ]]>
                        </mx:Script>
                        <mx:Button label="View" click="viewProject(event);"/>
                    </mx:Canvas>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

Let me know if it works! Not tested!

Stephen.

Great example, any advise how I can hide the row that I doubleclick ?

Hi Zima,

Sorry for the late reply.

There’s no native method to hide a row so you’ll most likely have to use either .removeChildAt to remove the row, or take the row out of the DataGrid’s dataProvider and re-assign it to the table.

Hope it helps,
Stephen.

Hi stephen,

I have a datagrid with 4 columns in which lastcolumn holds itemrenderer as mx:image. am populating the datagrid values from a backend. based on a boolean condition i want to display the image in last column . say if false na, icon should be present in that row. if the value is false that cell shoul not possess any icon.

i dont know how to do this.

as the item renderer is defined for the last datagrid column am getting the icon for all the rows.

please help me out to solve this issue..

Thanks in advance,
nithya

Thanx for the tip πŸ˜‰

can we use states and transitions in datagrid for swaping columns.i dont know how to do this.if anybody knows please send the code asap.
thank you

Thanks for the help.

Comments are closed.


  • Patrick: I changed my code, but now I have another problem: Fatal error: Call to a member function isAvailable() on a non-object in /var/www/vhost/web/shopA
  • Stephen Gray: Hi Patrick, That first error is my fault. I had the method name for the refund() method as void() as I had copied the code from the other method!
  • Patrick: Hi Stephen, thanks for sharing your knowledge about creating a custom payment module. I need an extension for magento to handle a credit card payme

Categories

%d bloggers like this: