RadDataForm: Styling

If you followed the getting started article, you now know how to edit an object's properties with DataForm for NativeScript. You can change the style of each editor, its label or the groups if grouping is enabled.

NativeScriptUI-DataForm-Styling-Android NativeScriptUI-DataForm-Styling-iOS

Styling Properties

The styling of the editors is done with PropertyEditorStyle objects and the styling of the group headers is done with GroupTitleStyle objects. They can be used in a similar way since they share most of their properties like strokeColor, strokeWidth, fillColor, labelTextColor, labelTextSize, labelFontName and labelFontStyle. Additionally, the PropertyEditorStyle provides the following: labelHidden, editorHorizontalOffset, editorVerticalOffset, labelHorizontalOffset and labelVerticalOffset

Styling example

Here's an example that demonstrates the usage of some of the above mentioned styling properties:

  • Declare the TKEntityProperty and set the tkPropertyGroupProperties inline directive to it in your HTML
  • Between its tags declare an TKPropertyEditor and set the tkEntityPropertyEditor inline directive to it
  • Finally between the TKPropertyEditor tags declare the TKPropertyEditorStyle and set the tkPropertyEditorStyle inline directive to it
<TKEntityProperty tkPropertyGroupProperties name="name">
    <TKPropertyEditor tkEntityPropertyEditor type="Text">
        <TKPropertyEditorStyle tkPropertyEditorStyle strokeColor="#6A1B9A" strokeWidth="2" fillColor="#E040FB" labelHidden="false"
            labelTextSize="18" ios:labelFontName="Times New Roman" android:labelFontName="sans-serif-light" labelFontStyle="Italic"
            labelTextColor="#6A1B9A"></TKPropertyEditorStyle>
    </TKPropertyEditor>
</TKEntityProperty>