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"

Styling advanced

If you need to provide a more customized styling which is not covered by the above properties, you can always fine-tune the native editors for each platform. Here's an example of changing the style of the Slider editor independently on each platform:

public editorSetupSliderAndroid(editor) {
    editor.getEditorView().getThumb().setColorFilter(new android.graphics.PorterDuffColorFilter(colorDark.android, android.graphics.PorterDuff.Mode.SRC_IN));
    editor.getEditorView().getProgressDrawable().setColorFilter(new android.graphics.PorterDuffColorFilter(colorLight.android, android.graphics.PorterDuff.Mode.SRC_IN));

public editorSetupSliderIOS(editor) {
    var coreEditor = <UISlider>editor.editor;
    coreEditor.tintColor = colorLight.ios;
    coreEditor.thumbTintColor = colorDark.ios;


Want to see this scenario in action?
Check our SDK examples for Angular repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: