Item Editor – Tabbing – Flex Datagrid

Most of you, must have customized Flex DataGrid using custom item editors, may be to format an information or to group multiple controls in one column. Customizing appearance of DataGrid cells is one of the powerful feature of Flex and comes to the rescue of developer. This article discusses one of the problem faced by the developers while implementing customized item editor.

Consider an example where in 3 columns are added to DataGrid as
1. Customer ID
2. Customer Name
3. No. of Orders

All of these columns should be editable and a search icon should be placed next to customer name textbox. Users should be able to search customer name by clicking on search icon.

Usually, developers tend to use custom item editor along with HBox or Canvas to achieve this requirement. But there are problems of using HBox or Canvas as a root tag for Item Editor. If your users mostly like to use Keyboard over mouse, you will notice that “Tab” do not work as per expectation. Users will find your application keyboard-unfriendly and may get frustrated due to forceful use of mouse. Compile following code and just tab through grids, you will notice the problem.



Well does that mean, there is no way to achieve perfect tabbing in DataGrid, aha – thats not true at all. You can certainly tweak Flex framework and achieve the desired functionality by adding few lines of ActionScript and changing the root tag.

Here is the working version of same.



You will require serach.gif image in order to run this sample program.

Updated: To download above source code, please click here.

By Carbon Rider

Hi this is Yogesh, welcome to my world. Being passionate about learning new technologies and building frameworks, I end up spending most of my time in front of computer. But over last few months, I realised apart from being good coder and designer (Yes I am) I have something hidden in me. And thats called ART.

4 replies on “Item Editor – Tabbing – Flex Datagrid”

cannot get this to compile the way it is written in the above page. I tried pulling the UIComponent out and making a mxml for the component which compiled but the name and button do not show up and tabbing still doesn’t work.

Leave a Reply