Question

I have a simple dojo text box and a value picker. I want to disable this field for manual entry so that value picker should be used only.

Normally, I can disable the field with dojo attribute, but it greys out the field which is confusing for the user.

<xe:djTextBox id="dep" value="#{viewScope.Department}">
    <xe:this.dojoAttributes>
        <xp:dojoAttribute name="readonly" value="true"></xp:dojoAttribute>
    </xe:this.dojoAttributes>
</xe:djTextBox>             
<xe:valuePicker id="valuePicker1" for="dep" dialogTitle="Select the department">
    <xe:this.dataProvider>
        <xe:simpleValuePicker valueListSeparator=",">
            <xe:this.valueList><![CDATA[#{javascript:@DbColumn("", "(ActiveDepartments)", 1)||""}]]></xe:this.valueList>
        </xe:simpleValuePicker>
    </xe:this.dataProvider>
</xe:valuePicker>

Any method to achieve this without clientside javascript tricks?

Answer 1

You can change the color of the text by overriding the following CSS:

.dijitTextBoxReadOnly, .dijitTextBoxDisabled {
color: gray;
}

You probably want to set color to black in order for the field not to look disabled 🙂