ReadOnly formatting and updates

Forms
1

I have been trying a few different ideas but keep getting stuck !

In short I have some fields which need to be ready only for the majority of the time. This is fine if I set the fields to be ReadOnly=True in the form. However, I cannot find a command to make them ReadOnly=False programmatically. I tried hiding the fields in a tab which only opens to a specific user group and creating a textbox and copying in the field values but but the field box is filled white. I have tried every combo of CSS to change the background colour of the textbox field to that of the form.

If I use fd.field(‘Fieldname’).disabled=true this works but again I get the formatting issue…

is there a simple way of overriding the programmatically setting the field to be ReadOnly
or overriding the CSS of a textbox control to set the background color ?

2

Dear @Lensteruk,
If you need to change fields programmatically on the form, we highly recommend using fd.field('Fieldname').disabled property instead of ReadOnly setting.

If you want to change presentation of the disabled fields, you can try the following CSS, adding !important to it makes sure it overwrites existing styles:

.fd-form .form-control:disabled, .fd-form .form-control[readonly] {
 background-color: #ddd5e8 !important;
 opacity: 0.5 !important;
}
3

Perfect - thank you for your support

4

Hi there, just tried this solution but it doesn’t solve the problem. The text is still masked to the point that it is unreadable.

5

Dear @Lensteruk,
What do you mean by unreadable? This is not a solution by any means, just an example of you can use styles to change the presentation of disabled fields. You can specify any styles, even something like:

.fd-form .form-control:disabled, .fd-form .form-control[readonly] {
   background-color: #fff !important;
   color: #000 !important;
}

Though this will not be as clearly disabled. If you mean something else, rather than styles, please, give us a screenshot of specific field and what is the issue with it, we’ll try to find the best solution for you.

6

So I have a bunch of fields which need to be read only on the edit form and this read only status toggled programmatically based on a field value. I can set the fields to be disabled as per your guidance but when I do the field does not look good and isn't very readable. if I can show them as if there were not disabled ie with no overlay then that would be perfect.

hope that makes sense - basically I want this

59

to look like this

16
Screenshot 2019-03-21 at 17.08.16.png1260×402 30 KB

7

Dear @Lensteruk,
For Multiline text field, please, try:

.fd-form .fd-editor-overlay{
   opacity: 0 !important;
}

Also, could you tell us which browser you are using? Or is there any custom CSS? The overlay looks weird, it shouldn’t look like this.

8

What's the proper selector for a Currency Control... The border still appears.

9

Dear @EasyCom,
Try this:

.fd-form .fd-editor-overlay{
   opacity: 0 !important;
}

.fd-form .form-control:disabled, .fd-form .form-control[readonly] {
   background-color: #fff !important;
   color: #000 !important;
}

.fd-form .k-autocomplete.k-state-disabled, .fd-form .k-dateinput-wrap.k-state-disabled, .fd-form .k-dropdown-wrap.k-state-disabled, .fd-form .k-picker-wrap.k-state-disabled, .fd-form .k-multiselect-wrap.k-state-disabled, .fd-form .k-numeric-wrap.k-state-disabled, .fd-form .k-editor.k-state-disabled, .fd-form .k-upload.k-state-disabled {
    border-width: 0;
}
10

That does it... Thanks

1 Like