Disabled form item appearance

[Budfudder]

I have a DynamicForm that we disable() and enable() at various times. All good - when it's disabled, all the form items show as greyed out, as I would expect.

Except for one form item - it's a DataSourceDateField, which I want to be read-only, so I've used setCanEdit(false) to make it read-only. That makes it just show a text value (like 15/12/2010), which is fine. But that text value is always shown in black text, as if it were editable, even when the form is disabled (see the attached file FormSection.jpg for a screenshot of a bit of the form showing what I mean).

How do I make the date field look disabled? I've tried explicitly using disable() on the form item itself - doesn't help (note that I use setShowDisabled(true) to make sure that the form item should be re-styled to indicate its disabled state). Nothing I try works - am I missing something? Or can this field not change to look disabled?

[davidj6]

Setting canEdit=false on a datasource field causes the field to render as a statictextitem, not disabled. Just set disabled on the formitem itself and leave the canEdit setting off.

[andreycha]

And how can I make form show items as not grayed out? I want all disabled items to have black font.

[davidj6]

If the fields are never to be edited, just set canEdit=false on the data source fields. If the fields change state between enabled and disabled, you will need to updated the css styles for the form items to change the font color.

[andreycha]

If the fields change state between enabled and disabled, you will need to updated the css styles for the form items to change the font color.

That's my case. How can I update CSS styles and what styles exactly I need to update?

[davidj6]

Look through the skin .css file for the *Disabled styles. You will need to override .textItemDisabled to cover most of the form items.

Something like:

.textItemDisabled {
    color: #000000
}

[andreycha]

Do I have to override Disabled styles and color properties only or the whole bunch of styles (like Focused etc.)?

[davidj6]

As long as you import the standard skin and override after the import you can just override the properties you want to change. This assumes you want to change the disabled look _everywhere_.

If you plan on making a number of changes, consider creating a custom skin and making changes there.

[andreycha]

I created my own CSS file, overrided textItemDisabled style and put reference to CSS file in index.html. Disabled items still have gray font. What am I doing wrong?

[davidj6]

Likely that the theme is still coming from SmartGwt import after your css import overwriting your styles. Read the FAQ about themes so you load your default skin from your index.html and then add your stylesheet after that.

[andreycha]

Where can I find that FAQ?

[davidj6]

It's a sticky message in the forum: FAQ.

[Budfudder]

Setting canEdit=false on a datasource field causes the field to render as a statictextitem, not disabled. Just set disabled on the formitem itself and leave the canEdit setting off.

I want the datasource field to appear as a statictextitem, so I use canEdit=false for that purpose.

And as I said in my opening post, setting disabled on the formitem doesn't make its value grey. Note that this is a particular type of formitem, as outlined in the OP - all my other formitems grey as you would expect when disabled. It's just this one that doesn't. Again, it's a DataSourceDateField, with canEdit=false set which doesn't change colour when it's disabled or enabled.

[Isomorphic]

What exact version, skin, browser and FormItem? Posting these details and a runnable code sample would make it possible to reproduce the problem if there is one.

[Budfudder]

Here's a small example of this problem occurring:

The entry point:

public class TestEntryPoint implements EntryPoint {
    public void onModuleLoad() {
        VLayout layout = new VLayout();

        final DynamicForm form = new DynamicForm();
        form.setWidth(250);

        HashMap hash = new HashMap();
        hash.put("name", "fred");
        hash.put("normalDate", new Date());
        hash.put("cantSaveDate", new Date());
        form.setDataSource(new XMLDS("test"));
        form.editNewRecord(hash);
        form.setWrapItemTitles(false);

        IButton swapButton = new IButton("Disable/Enable");
        swapButton.setLeft(300);
        swapButton.setWidth(250);
        swapButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                form.setDisabled(!form.getDisabled());
            }
        });

        layout.addMember(form);
        layout.addMember(swapButton);

        layout.draw();
    }
}

And the data source:

public class XMLDS extends DataSource{
    public XMLDS(String id) {
        DataSourceTextField itemNameField = new DataSourceTextField("name", "Name", 128, true);

        DataSourceDateField normalDateField = new DataSourceDateField("normalDate", "Normal Date");
        DataSourceDateField cantSaveDateField = new DataSourceDateField("cantSaveDate", "Can't Save Date");
        cantSaveDateField.setCanSave(false);

        setFields(itemNameField, normalDateField, cantSaveDateField);
    }
}

With this code you get a small form with a few fields - a text field and two date fields. One of the date fields has setCanSave(false) set on it, so the date appears in text format. Below the form is a button which you select to toggle the enabled state of the form. When the form is disabled, you can see that the text version of the date (the "Can't Save Date" field) doesn't change appearance like all the other controls, including the normal date ("Normal Date").

Is this a bug? I've tried everything to get the text version of the date behaving properly (I can do it if I just use a text field, but then it can't be saved as a date, just as text).

Thanks for your help.