ListGrid : Editing and focus Lost

[mastooo]

Hi,

I use ListGrid and am pretty annoyed with the fact that when my users edit are editing a cell and click on another component (or anywhere else), the cell currently being edited keeps the focus (I'm not sure it keeps the focus but i'm sure it doesn't save the value).

Is there any propertie to set to ask the ListGrid to save the value when the focus is lost ?

[Isomorphic]

setModalEditing(true)

[mastooo]

thank you Isomorphic!

Works almost great. I say almost because there is an issue: When you click in another component, the grid stops editing but the new component doesn't get the click event. Try clicking on a button while you are editing and you'll see that the button doesn't receive the click. Is there a way to avoid this behavior and tell to not consume the click event?

Thank you

Thomas

[Isomorphic]

You shouldn't see this unless you have also set stopOnErrors:true and in that case, blocking the click is correct and required because the server may send back validation errors.

[mastooo]

Nope, i don't call setStopOnError and the doc says it's set to false by default. In fact, the call to setModalEditing doesn't fit my need because i cannot even scroll anymore during editing. It's very too modal.

[mastooo]

tried under Firefox and Safari. It's the same. The call to setModalEditing is...modal. Cannot scroll or click elsewhere.
It's like having a popup:you cannot scroll what is behind and if you click on a component behind, the component will not get the click event but the dialog will disappear.

I'm on Mac OS X leopard, using the last build from SVN

[Isomorphic]

We just double-checked this on MacOS FF and Safari, no issue. Can you put together a test case?

[mastooo]

will try but it's not that easy for me.

What you tell me is that when you have a cell begin edited and you click on a button (a regular GWT one for example), the button gets the click AND the editing stops ? And When a cell is being edited, you can scroll outside the grid (imagine the listgrid inside a Panel with a vertical scrollbar) without loosing the edit (using only the mouse scroll button or using directly the scrollbar)?

Thomas

[Isomorphic]

Yes, that is how SmartClient has worked since 2003, we're familiar :)

[Isomorphic]

Hmm, wait a minute.. have you tried this with a SmartGWT button or SmartGWT-managed scrollbar? If you see different behavior (the click goes through) then this could be a zIndex issue. Try setting the zIndex of your outermost GWT component to 200000.

[mastooo]

Nope, a GWT-Ext Scrollbar and a GWT button (a regular one from GWT).

[Isomorphic]

Right, so:

Try setting the zIndex of your outermost GWT component to 200000.

[mastooo]

Ok, got a test Case. It's because of GWT-Ext (again).

The complete code below (from the showcase)

public class TestModule implements EntryPoint {

	 public void onModuleLoad() {  
		   
		         final ListGrid countryGrid = new ListGrid();  
		         countryGrid.setModalEditing(true);
		         
		         
		         countryGrid.setWidth(550);  
		         countryGrid.setHeight(224);  
		         countryGrid.setAlternateRecordStyles(true);  
		         countryGrid.setShowAllRecords(true);  
		         countryGrid.setCellHeight(22);  
		         // use server-side dataSource so edits are retained across page transitions  
		         countryGrid.setDataSource(CountryXmlDS.getInstance());  
		   
		         ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 40);  
		         countryCodeField.setAlign(Alignment.CENTER);  
		         countryCodeField.setType(ListGridFieldType.IMAGE);  
		         countryCodeField.setImageURLPrefix("flags/16/");  
		         countryCodeField.setImageURLSuffix(".png");  
		         countryCodeField.setCanEdit(false);  
		   
		         ListGridField nameField = new ListGridField("countryName", "Country");  
		         ListGridField continentField = new ListGridField("continent", "Continent");  
		         continentField.setCanToggle(true);
		         
		         
		         ListGridField memberG8Field = new ListGridField("member_g8", "Member G8");  
		         ListGridField populationField = new ListGridField("population", "Population");  
		         populationField.setType(ListGridFieldType.INTEGER);  
		         populationField.setCellFormatter(new CellFormatter() {  


					public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
						NumberFormat nf = NumberFormat.getFormat("0,000");  
		                 return nf.format(((Number) value).longValue());  
					}  
		         });  
		         ListGridField independenceField = new ListGridField("independence", "Independence");  
		         countryGrid.setFields(countryCodeField, nameField,continentField, memberG8Field, populationField, independenceField);  
		   
		         countryGrid.setAutoFetchData(true);  
		         countryGrid.setCanEdit(true);  
		         countryGrid.setEditEvent(ListGridEditEvent.CLICK);  
		         countryGrid.setEditByCell(true);  

		         Panel p = new Panel();
		         p.setLayout(new VerticalLayout());
		         
		         p.add(countryGrid);
		         p.add(new TextBox());
		         
		         new Viewport(p);
		     }  
	 
	 
	  static public class CountryXmlDS extends DataSource {  
		    
		      private static CountryXmlDS instance = null;  
		    
		      public static CountryXmlDS getInstance() {  
		          if (instance == null) {  
		              instance = new CountryXmlDS("countryDS");  
		          }  
		          return instance;  
		      }  
		    
		      public CountryXmlDS(String id) {  
		    
		          setID(id);  
		          //setRecordXPath("/List/country");  
		          DataSourceIntegerField pkField = new DataSourceIntegerField("pk");  
		          pkField.setHidden(true);  
		          pkField.setPrimaryKey(true);  
		    
		          DataSourceTextField countryCodeField = new DataSourceTextField("countryCode", "Code");  
		          countryCodeField.setRequired(true);  
		    
		          DataSourceTextField countryNameField = new DataSourceTextField("countryName", "Country");  
		          countryNameField.setRequired(true);  
		    
		          DataSourceTextField capitalField = new DataSourceTextField("capital", "Capital");  
		          DataSourceTextField governmentField = new DataSourceTextField("government", "Government", 500);  
		    
		          DataSourceBooleanField memberG8Field = new DataSourceBooleanField("member_g8", "G8");  
		    
		          DataSourceTextField continentField = new DataSourceTextField("continent", "Continent");  
		          continentField.setValueMap("Europe", "Asia", "North America", "Australia/Oceania", "South America", "Africa");  
		    
		          DataSourceDateField independenceField = new DataSourceDateField("independence", "Nationhood");  
		          DataSourceFloatField areaField = new DataSourceFloatField("area", "Area (km²)");  
		          DataSourceIntegerField populationField = new DataSourceIntegerField("population", "Population");  
		          DataSourceFloatField gdpField = new DataSourceFloatField("gdp", "GDP ($M)");  
		          DataSourceLinkField articleField = new DataSourceLinkField("article", "Info");  
		    
		          setFields(pkField, countryCodeField, countryNameField, capitalField, governmentField,  
		                  memberG8Field, continentField, independenceField, areaField, populationField,  
		                  gdpField, articleField);  
		    
		          setDataURL("countryData.json");  
		          setClientOnly(true);  
		      }
	  }
}

[mastooo]

Cannot make it works.

Tried different things. Have a test case with no GWT-Ext components at all. Just a VerticalPanel and a TextBox in it (along with the Grid). Still doesn't work. The code below:

VerticalPanel p = new VerticalPanel();
		         
		         TextBox box = new TextBox();
		         
		         DOM.setStyleAttribute(box.getElement(), "border", "solid black 4px");
		         
		         p.add(countryGrid);
		         p.add(box);
		         
		         RootPanel.get().add(p);
		         DOM.setStyleAttribute(RootPanel.get().getElement(), "z-index", "200000");

I have lot of troubles with Z-indexes. It would be great to have components added to a container get its z-index.

[Isomorphic]

Just to make sure that's really all the code that's required, can you show this as a standalone test case?

Can you also confirm that this works normally when all the components are SmartGWT (no use of root panel, and clicking on a SmartGWT component not a GWT component). We're just trying to eliminate any weirdness that happens for you only.

I have lot of troubles with Z-indexes. It would be great to have components added to a container get its z-index.

This would actually be a disaster, but it's a long story.