Announcement

**Isomorphic** · 22 Mar 2011, 11:36

As always - thanks for the clear test case.

This turns out to be an interesting timing related issue. The problem is that getLeft() - called to determine the desired picker position - relies on the current 'showPickerIcon' attribute setting to determine what structure to look for in the DOM when figuring out item positioning, but formItem.redraw() is not an immediate (synchronous) redraw of the form item in the DOM - it occurs at the end of the thread, meaning the structure actually written into the DOM doesn't match what's expected when you call 'showPicker'.

There's an easy fix for your application code - instead of calling event.getItem().redraw(), call event.getForm().redraw(). This will force an immediate synchronous redraw.

**bade** · 23 Mar 2011, 10:45

Thanks for the compliment ;-)

I tested the solution and it's working great.
I do have a question, performance-wise.

Is a redraw of the form more "costly" then a redraw of the individual item?

Regards,
Bart

**Isomorphic** · 23 Mar 2011, 10:52

Hi Bart,
No - a redraw of a form item implies a (delayed) redraw of the form as a whole so there's no difference.
*[There are some exceptions, such as items embedded in an editable ListGrid, but this is the case for all "normal" forms]

**bade** · 24 Mar 2011, 04:00

Hi Isomorphic,

SC_SNAPSHOT-2011-03-21/EVAL Deployment
FireFox 3.6.15

I just tried my editor in an editable listgrid and I'm now seeing the same issue + an additional one: the pickerIcon itself is also not shown (or redrawn if you want).

I added a screenshot.

So, for forms it works beautifuly (and I was also able to get the select value on focus behavior to work as we want) but not (yet) for grids.
FYI, when using item.redraw() the picker is shown!

I created a (rudimentary) standalone test case with a grid and item.getForm().redraw() in the focus handler.
FYI, when using event.getItem().redraw();

Repo-case:
Double click the enumeration field, pickList is shown offset and picker is not shown.

Code:

public ListGrid testCase10b() {   
        	
        //static data for this comboBox
  	  	ListGridRecord[] records = new ListGridRecord[3];
  	  	records[0] = new ListGridRecord();
  	  	records[0].setAttribute("enumeration_id", 1);
  	  	records[0].setAttribute("enumerationValue", "Red");
  	  	records[0].setAttribute("forUpdate", true);
  	  	records[1] = new ListGridRecord();
  	  	records[1].setAttribute("enumeration_id", 2);
  	  	records[1].setAttribute("enumerationValue", "Green");
  	  	records[1].setAttribute("forUpdate", false);//selecting green is not allowed
  	  	records[2] = new ListGridRecord();
  	  	records[2].setAttribute("enumeration_id", 3);
  	  	records[2].setAttribute("enumerationValue", "Blue");
  	  	records[2].setAttribute("forUpdate", true);
  	  	
        DataSourceIntegerField pkDS = new DataSourceIntegerField("enumeration_id");   
//        pkDS.setHidden(true);   
        pkDS.setPrimaryKey(true);
  	  	
        DataSourceTextField enumValueDS = new DataSourceTextField("enumerationValue");
        
        DataSourceBooleanField forUpdateDS = new DataSourceBooleanField("forUpdate");
  	  	
  	  	final DataSource datasource = new DataSource();
  	  	datasource.setID("testDS");
  	  	datasource.setFields(pkDS, enumValueDS, forUpdateDS);
  	  	datasource.setCacheData(records);
  	  	datasource.setClientOnly(true);  	
  	    	        
        ListGrid pickListProperties = new ListGrid();
        pickListProperties.setAutoFetchData(false);
        pickListProperties.setDataSource(datasource);
        pickListProperties.setRecordCanSelectProperty("forUpdate");
        pickListProperties.setShowHeader(false);
        pickListProperties.setCellFormatter(new CellFormatter() {   

            public String format(Object value, ListGridRecord record, int rowNum, int colNum) {   
            	
                Boolean forUpdate = record.getAttributeAsBoolean("forUpdate");   
                String enumValue = record.getAttribute("enumerationValue");
                if(forUpdate)//blue
                	return "<span style='color:#113377'>" + enumValue + "</span>";
                else//grey
                	return "<i><span style='color:#aaaaaa'>" + enumValue + "</span></i>";
                	
            }   
        });
    
        ListGridField valueField1 = new ListGridField("enumerationValue");
        
        ComboBoxItem combo =new ComboBoxItem("enumeration_id");
        combo.setShowPickerIcon(false);
        combo.setOptionDataSource(datasource);   
        combo.setValueField("enumeration_id");   
        combo.setDisplayField("enumerationValue");   
        combo.setPickListProperties(pickListProperties);
        combo.setPickListFields(valueField1);
        combo.setAddUnknownValues(false);
        combo.setCompleteOnTab(true);
        combo.setRejectInvalidValueOnChange(true);
        combo.setWidth("*");
        combo.setTextBoxStyle("textItem");//this draws the field as we want when picker is not showing!!!
        combo.addChangeHandler(new ChangeHandler() {
                        
            public void onChange(ChangeEvent event) {
                // if the user cleared the value, reset to the previous value.
                // Since addUnkonwnValues is false this also handles the
                // user entering a value that isn't present in the valueMap
                if (event.getValue() == null)
                	event.cancel();            
                else {
                	Integer enum_id = JSOHelper.getAttributeAsInt((JavaScriptObject) event.getValue(), "enumeration_id");
                	//search in list and cancel event!!!
					//retrieve the records for this enumeration => cached datasource
					Record[] values = datasource.getCacheData();
					for(int i=0; i < values.length; i++){
						if(enum_id.equals(values[i].getAttributeAsInt("enumeration_id"))){
							if(!values[i].getAttributeAsBoolean("forUpdate")){
								event.cancel();							    
							}
							break;
						}												
					}
                }
                	
            }
        });
        	       
        combo.addFocusHandler(new FocusHandler() {
			
			public void onFocus(FocusEvent event) {
				//if picker is showing, do nothing...
				if(event.getItem().getShowPickerIcon()){
					event.getItem().showPicker();	
				}
				else{
					event.getItem().setShowPickerIcon(true);
					event.getItem().setAttribute("myFocus", true);
					event.getForm().redraw();//need to redraw to show picker icon => but calls blur event
					event.getItem().showPicker();
				}
				
			}
		});
        
        combo.addBlurHandler(new BlurHandler() {
			
			public void onBlur(BlurEvent event) {
				Boolean redrawing = event.getItem().getAttributeAsBoolean("myFocus");
				
				//ignore
				if(redrawing != null && redrawing){
					event.getItem().setAttribute("myFocus", false);
					return;
				}
								
				//if picker is showing, do nothing...
				if(event.getItem().getShowPickerIcon()){
					event.getItem().setShowPickerIcon(false);
					event.getItem().redraw();//hide picker again
				}
				
			}
		});
        
        
        combo.setInputTransformer(new FormItemInputTransformer() {
			
			public Object transformInput(DynamicForm form, FormItem item, Object value,	Object oldValue) {
				if(value == null){
					SC.logWarn("Value in inputtransformer is NULL");//why?!?
					return item.getValue();//fallback in this case
				}			
				
				//return the transformed value (newId)
		        JavaScriptObject jsObject = JSOHelper.createObject();
		        JSOHelper.setAttribute(jsObject, "enumeration_id", (Integer) value);
		        JSOHelper.setAttribute(jsObject, "dataType", 9);
				return jsObject;				
			}
		});
        
        combo.setEditorValueFormatter(new FormItemValueFormatter() {
			
			public String formatValue(Object value, Record record, DynamicForm form, FormItem item) {
				if (value == null) {
					return "";
				}

				if (value instanceof JavaScriptObject) {
					JavaScriptObject jsObject = (JavaScriptObject) value;
					String id = JSOHelper.getAttribute(jsObject, "enumeration_id");
					Integer enumeration_id = new Integer(id);
					
					if (enumeration_id.equals(Integer.MIN_VALUE)) {
						return "";
					}
					
					//retrieve the records for this enumeration => cached datasource
					Record[] values = datasource.getCacheData();
					for(int i=0; i < values.length; i++){
						if(enumeration_id.equals(values[i].getAttributeAsInt("enumeration_id")))
							return values[i].getAttribute("enumerationValue");							
					}
					
					return id;//unknown value
				}

				return (String) value;				
			}
		});
    	
        DataSourceField pkField = new DataSourceField();
        pkField.setName("primaryKeys");
        pkField.setType(FieldType.SEQUENCE);
        pkField.setPrimaryKey(true);
        pkField.setHidden(false);
        
		DataSourceField comboBoxDS = new DataSourceField();   
		comboBoxDS.setName("enumeration_id");   
		comboBoxDS.setTitle("comboBoxField");   
		comboBoxDS.setType(FieldType.ENUM);   
		comboBoxDS.setEditorType(combo);

        DataSource dataSource = new DataSource(); 
        dataSource.setFields(pkField, comboBoxDS);   
        dataSource.setClientOnly(true);
        
        //initialised values => pay attention to the MIN_VALUE
        JavaScriptObject jsObject = JSOHelper.createObject();
        JSOHelper.setAttribute(jsObject, "enumeration_id", 3);
        JSOHelper.setAttribute(jsObject, "dataType", 9);  
        
        ListGridRecord[] result = new ListGridRecord[1];
        result[0] = new ListGridRecord();
        result[0].setAttribute("enumeration_id", jsObject);
        result[0].setAttribute("primaryKeys", 0);
           
        //the order list grid   
        ListGrid ordersList = new ListGrid();   
        ordersList.setHeight(170);   
        ordersList.setWidth(500);
        ordersList.setCanEdit(true);
        ordersList.setDataSource(dataSource);

        // databound edit pattern (requires primary key)
        dataSource.setTestData(result);
        ordersList.setAutoFetchData(true);
   
        return ordersList;
    }

Attached Files

**bade** · 28 Mar 2011, 06:40

Hi,

Any update on this one?

Regards,
Bart

**Isomorphic** · 28 Mar 2011, 12:33

Ah this makes sense - if a FormItem is shown as an editor in a ListGrid, the DynamicForm is used just to provide standard APIs for things like valuesManagement of the items - it's not actually drawn.

So rather than doing getForm().redraw() - try item.getContainerWidget().redraw().

Let us know if this doesn't resolve it.

*By the way, when I said earlier that item.redraw() calls form.redraw() so they're interchangable performance-wise - this is true when the item is rendered into a DynamicForm - actually for a ListGrid, item.redraw() just refreshes the cell in question, so it is technically going to be more work to call getContainerWidget().redraw() and redraw the listGrid body as a whole. However the difference should be small and this shouldn't have a major impact on your application performance. Obviously let us know if your observations imply that it is having a big performance hit.

**bade** · 28 Mar 2011, 23:59

The pickers are showing and drop down lists are shown correct now, thanks.

Announcement

ComboBoxItem.showPicker() issue in onFocus event

Comment

Comment

Comment

Comment

Comment

Comment

Comment