1

In a NativeScript-Angular app, I’m trying to style a RadDataForms TKPropertyEditor. For the Stepper Editor on iOS I want do increase the distance between the controls and the displayed value, but I can't find a way to access them.

I'm using nativescript-ui-dataform: 4.0.0.

<TKEntityProperty tkDataFormProperty name="grade" 
    displayName="Bewertung (1 – 10)" index="1">
  <TKPropertyEditor tkEntityPropertyEditor type="Stepper">
    <TKPropertyEditorParams tKEditorParams minimum="1" maximum="10" 
      step="1"></TKPropertyEditorParams>
    <TKPropertyEditorStyle tkPropertyEditorStyle valuePosition="Left"> 
    </TKPropertyEditorStyle>
  </TKPropertyEditor>
</TKEntityProperty>
Darshan Kunjadiya
  • 878
  • 6
  • 14
soup
  • 13
  • 5
  • Refer the advanced styling [examples here](https://github.com/NativeScript/nativescript-ui-samples-angular/blob/master/dataform/app/examples/styling/advanced/dataform-styling-advanced.component.ts), you may directly modify the native object to style your element. – Manoj May 20 '19 at 13:38
  • Thank you! The example shows that the position can be adjusted via `editorView.labelAlignment = TKGridLayoutAlignment.Left;`. However `TKGridLayoutAlignment` can't be found. The example does not specify where to import it from and so far I haven't found an answer. – soup May 20 '19 at 14:42
  • It's a native object, should be available at runtime. To avoid TS errors just do `declare var TKGridLayoutAlignment;`. – Manoj May 20 '19 at 14:46
  • Perfect, thank you very much! – soup May 20 '19 at 15:00

1 Answers1

1

Refer the advanced styling examples here, you may directly modify the native object to style your element.

 public editorSetupStepperIOS(editor) {
    editor.valueLabel.textColor = colorDark.ios;

    const coreEditor = <UIStepper>editor.editor;
    coreEditor.tintColor = colorLight.ios;

    for (let i = 0; i < coreEditor.subviews.count; i++) {
        if (coreEditor.subviews[i] instanceof UIButton) {
            (<UIButton>coreEditor.subviews[i]).imageView.tintColor = colorDark.ios;
        }
    }
    const editorView = editor.editorCore;
    editorView.labelAlignment = TKGridLayoutAlignment.Left;
}
Manoj
  • 21,753
  • 3
  • 20
  • 41