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.