DataForm: how to set editor with transparent backgroundcolor in iOS?

[Marc]

Hello,

I try to set the backgroundColor of our EntityProperties to transparent, the dataForm should just have the same backgroundColor as the page. On Android, this works without any changes. But on iOS, the DataForm has always white background. I tried to set the fillColor to "transparent", but this has no effect.

I am not able to set the fillColor to the backgroundColor of the page in XML as a hardcoded value, because we use the nativescript-themes plugin to switch between multiple color templates during runtime.

 

[Nick Iliev]

Hello Marc,

I can confirm that this setting the editors fillColor to transparent is not possible at this very moment. I have logged this one as a bug in this issue and also upvoted
the issue with a reference to this ticket. You can track the issue for possible updates regarding the fix.

Meanwhile, the one option to resolve your case would be to dynamically change the
fill color of your editors when changing the main theme so they can match the background color.
To achieve that you can use the fillColor property as shown in this documentation section.

For example:
Layout file (XML)

<df:RadDataForm source="{{ employee }}" editorUpdate="dfEditorUpdate" />

Code behind file (TypeScript)

export function dfEditorUpdate(args: DataFormEventData) {
    var entityProperty = <EntityProperty>(<RadDataForm>args.object).getPropertyByName(args.propertyName);
    entityProperty.editor.propertyEditorStyle.fillColor = "LightBlue";
}

Regards,
Nikolay Iliev
Progress Telerik

[Imran]

I was successful in achieving this by setting "fillColor" property of "PropertyEditorStyle", we can control Alpha Index (first two digits after #). Check example code below.

<TKEntityProperty tkPropertyGroupProperties name="link" displayName="" hintText="Link"
index="4">
<TKPropertyEditor tkEntityPropertyEditor type="Label" color="White">
<TKPropertyEditorStyle tkPropertyEditorStyle strokeColor="#00695c" strokeWidth="2" fillColor="#0000FFFF" labelHidden="true"
labelTextSize="12" ios:labelFontName="Times New Roman" android:labelFontName="sans-serif-light"
labelFontStyle="Bold" labelPosition="Top" labelWidth="60" labelTextColor="#00695c" editorVerticalOffset="0"
labelVerticalOffset="0"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>

[Nick Iliev]

Hello Mark,

Thank you very much for sharing the workaround - indeed great find and easy solution!
I have logged the workaround in the linked issue so it would be visible to the community.

Regards,
Nikolay Iliev
Progress Telerik