RadioGroupItem, titles of the options are grayed out

[Principal Skiner]

I have a check box and a radio button group which depends on the check box's value. When check box is checked, radio button group is enabled. Otherwise it's disabled. Initial value of CB is unchecked so radio button group is disabled on start.
Problem :
When check box is checked, radio group is enabled but the titles of it's values are not.
This issue can be reproduced only if radio group is disabled on start.

public Canvas getViewPanel() {
        Canvas canvas = new Canvas();
        canvas.setWidth100();
        canvas.setHeight100();
        
        DynamicForm dynamicForm = new DynamicForm();
        
        masterChkB = new CheckboxItem("master", "Master ChkB");
        
        userReplyRGI = new RadioGroupItem("userReply" , "User Reply");
        userReplyRGI.setVertical(false);
        userReplyRGI.setValueMap("confirmed", "declined", "no reply");
        userReplyRGI.setDefaultValue("confirmed");
        userReplyRGI.setWrap(false);
        userReplyRGI.setWrapTitle(false);
        userReplyRGI.setDisabled(true);
        
        dynamicForm.setFields(masterChkB, userReplyRGI);
        
        masterChkB.addChangedHandler(new ChangedHandler() {
			public void onChanged(ChangedEvent event) {
				if(masterChkB.getValue() != null && masterChkB.getValueAsBoolean()) {
					userReplyRGI.setDisabled(false);
				}
				else if(masterChkB.getValue() != null && !masterChkB.getValueAsBoolean()) {
					userReplyRGI.setDisabled(true);
				}
				
			}
		});
        
        canvas.addChild(dynamicForm);
        return canvas;
    }

Note : masterChkB and userReplyRGI must be properties of the class that contains this method.

I'm using GWT2.0.2, SmartGWT2.1, Chrome 4.1.249.1045, Windows 7 Ultimate 32bit

[Isomorphic]

Can you make this into a completely standalone test case so that we can run it and see if there's really a bug?

[Principal Skiner]

Test case attached.

[Isomorphic]

Thanks. Last question is this reproducible only on Chrome?

[Principal Skiner]

Only tried it on Chrome. I'm too lazy to setup something else right now :)

[Principal Skiner]

Any news Iso?

[HalfonE]

I noticed the same behavior, too, on Firefox 3.6.3, SmartGWT 2.2.
Any idea?

[AW]

I am also experiencing a similar problem. I see it in both IE8 and Firefox.

Below is a stand-alone test case. When you click "Major option 2", the Minor option title and radio buttons become enabled, but the minor option radio button labels ("Option A" and "Option B") do not.

package com.mycompany.client;

import java.util.HashMap;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.RadioGroupItem;
import com.smartgwt.client.widgets.form.fields.SpacerItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.events.ChangeEvent;
import com.smartgwt.client.widgets.form.fields.events.ChangeHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class HelloWorld implements EntryPoint {

	private DynamicForm majorOption1Form;
	private DynamicForm majorOption2Form;

	private RadioGroupItem majorOption1Field;
	private TextItem stringField;

	private RadioGroupItem majorOption2Field;
	private RadioGroupItem minorOptionField;
	
	private static final String MAJOR_OPTION_1_FIELD_NAME = "majorOption1";
	private static final String MAJOR_OPTION_2_FIELD_NAME = "majorOption2";
	private static final String STRING_FIELD_NAME = "string";
	private static final String MINOR_OPTION_FIELD_NAME = "minorOption";

	public void onModuleLoad() {

		int formWidth = 0;
		int[] colWidths = new int[] { 20, 150, 320 };
		for (int i = 0; i < colWidths.length; i++) {
			formWidth += colWidths[i];
		}
		formWidth += (2) * 5;

		DynamicForm[] forms = new DynamicForm[2];
		for (int i = 0; i < 2; i++) {

			// The RadioGroupItem takes two columns by default: The label to the
			// left of the button is the first and the button plus label to the
			// right is the second. As we want no label to the left, make the
			// first column very small. Could probably change one of
			// RadioGroupItem's attributes to make it span only one column.
			forms[i] = new DynamicForm();
			forms[i].setNumCols(3);
			forms[i].setWidth(formWidth);
			forms[i].setColWidths(colWidths[0], colWidths[1], colWidths[2]);

			// Colour taken from that which appears when you setIsGroup(true);
			forms[i].setBorder("1px solid #A7ABB4");
			forms[i].setCellSpacing(5);
		}

		// Major option 1
		majorOption1Form = forms[0];

		majorOption1Field = new RadioGroupItem(MAJOR_OPTION_1_FIELD_NAME, "");
		majorOption1Field.setValueMap(new String[] { "Major option 1" });
		majorOption1Field.addChangeHandler(new MajorOptionClickHandler());

		SpacerItem communitySpacer = new SpacerItem();
		communitySpacer.setStartRow(true);

		stringField = new TextItem(STRING_FIELD_NAME, "String");

		majorOption1Form.setFields(majorOption1Field, communitySpacer,
				stringField);

		// Major option 2
		majorOption2Form = forms[1];

		majorOption2Field = new RadioGroupItem(MAJOR_OPTION_2_FIELD_NAME, "");
		majorOption2Field.setValueMap(new String[] { "Major option 2" });
		majorOption2Field.addChangeHandler(new MajorOptionClickHandler());

		SpacerItem spacer = new SpacerItem();
		spacer.setStartRow(true);

		minorOptionField = new RadioGroupItem(MINOR_OPTION_FIELD_NAME, "Minor option");
		minorOptionField.setValueMap(new String[] { "Option A", "Option B" });

		majorOption2Form.setFields(majorOption2Field, spacer, minorOptionField);

		// Add to layout
		VLayout allForms = new VLayout();
		allForms.setMembersMargin(15);

		for (int i = 0; i < 2; i++) {

			allForms.addMember(forms[i]);
		}
		allForms.setWidth(majorOption2Form.getWidth());

		
		// Set data
		HashMap<String, Object> map = new HashMap<String, Object> ();
		map.put(MAJOR_OPTION_1_FIELD_NAME, "Major option 1");
		map.put(STRING_FIELD_NAME, "");
		map.put(MAJOR_OPTION_2_FIELD_NAME, null);
		map.put(MINOR_OPTION_FIELD_NAME, "Option A");
		
		majorOption1Form.setValues(map);
		majorOption2Form.setValues(map);
		
		updateEnabledState(true);
//		minorOptionField.setDisabled(true);
		
		
		RootPanel.get().add(allForms);

	}

	private void updateEnabledState(boolean majorOption1) {
		boolean majorOption1FieldsDisabled = false;
		boolean majorOption2FieldsDisabled = false;

		if (majorOption1) {
			majorOption2FieldsDisabled = true;
		} else {
			majorOption1FieldsDisabled = true;
		}

		stringField.setDisabled(majorOption1FieldsDisabled);

		minorOptionField.setDisabled(majorOption2FieldsDisabled);

	}

	private class MajorOptionClickHandler implements ChangeHandler {

		/*
		 * (non-Javadoc)
		 * 
		 * @see
		 * com.smartgwt.client.widgets.form.fields.events.ClickHandler#onClick
		 * (com.smartgwt.client.widgets.form.fields.events.ClickEvent)
		 */
		@Override
		public void onChange(ChangeEvent event) {
			FormItem clickedItem = event.getItem();
			boolean majorOption1 = clickedItem == majorOption1Field;
			updateEnabledState(majorOption1);
			Object temp = null;
			if (majorOption1) {
				HashMap<String, Object> values = ((HashMap<String, Object>)majorOption2Form.getValues()); 
				values.put(MAJOR_OPTION_2_FIELD_NAME, null);
				majorOption2Form.setValues(values);
			} else {
				HashMap<String, Object> values = ((HashMap<String, Object>)majorOption1Form.getValues()); 
				values.put(MAJOR_OPTION_1_FIELD_NAME, null);
				majorOption1Form.setValues(values);

			}
		}
	}

}

[Isomorphic]

What skin are you using?

[Isomorphic]

Never mind - we're reproducing this -- should have a fix shortly

[Isomorphic]

ok - fixed. The fix will be present in the next nightly build (and future releases)