Item Editor – Tabbing – Flex Datagrid

Standard
Spread the love

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.

4 thoughts on “Item Editor – Tabbing – Flex Datagrid

    • Hi Rob,

      I have provided link to download the source code at the end of the article. Also I would like to tell you about the environment I am using.
      Flex SDK 3.4
      Target Flash Player 10.0.0
      DataVisualization Library 3.4

  1. 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

Your email address will not be published. Required fields are marked *