Custom styling of TKPropertyEditor text

[Johnny]

Hi all

I am trying to style the textfield so that it is just a basic rectangle for ios and android. (i.e. no native styling)

So my understanding is that I will need to give both Android and iOS functions to change the style

like this : export function editorSetupTextAndroid(editor) and export function editorSetupTextiOS(editor)

Looking at the documentation, it seems I need to get the editor view (editor.getEditorView())

But where is the documentation for getEditorView() ? How can I access the background colour of the textfield and remove any native styling?

In all the examples, you custom style it seems every other native element, apart from the textfield :(

Thanks for the continued support :)

 

Best wishes

[Nick Iliev]

Hi Johnny,

To avoid confusion, I am guessing that you are talking about Editor of type Text (as there is not TextField as possible editor in RadDataForm). All supported editors here.

If that is the case, then you can easily change the default style by applying tkPropertyEditorStyle
e.g.

<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>

As an alternative option, you can access each control with getEditorView() and change the native settings using editorUpdate change detection.To change the native properties, you will need the API reference for the native control (e.g., behind Text editor for Android lies android.support.v7.widget.AppCompatEditText). The easiest way to see what's the native control behind each editor is to log it with 

data.editor.getEditorView()  // where "data" is the arguments from editorUpdate callback

Full example on how to modify the styling of Text editor via its native methods and properties (Android).
The code below is based on modifying this example.

dataform-styling-advance.component.html

<RadDataForm [source]="settings" tkExampleTitle tkToggleNavButton (editorUpdate)="dfEditorUpdate($event)">
    <TKEntityProperty tkDataFormProperty name="onlyOnWiFi" index="0">
        <TKPropertyEditor tkEntityPropertyEditor type="Switch"></TKPropertyEditor>
    </TKEntityProperty>

    <TKEntityProperty tkDataFormProperty name="myName">
        <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
    </TKEntityProperty>

    <TKEntityProperty tkDataFormProperty name="networkLimit" index="1">
        <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="networkPreference" index="2" [valuesProvider]="prefModes">
        <TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="appVolume" index="3">
        <TKPropertyEditor tkEntityPropertyEditor type="Slider"></TKPropertyEditor>
    </TKEntityProperty>
</RadDataForm>

Notice the editorUpdate method (editorUpdate)="dfEditorUpdate($event)"  in the HTML file. We are using this to update the styles.

The in the code behind file:
dataform-styling-advance.component.ts

private setTextLabels(data) {
    var textAndroid = data.editor.getEditorView();

    console.log(data.editor.getEditorView()); // ndroid.support.v7.widget.AppCompatEditText

    var fontName = "sans-serif-light";
    var fontStyle = android.graphics.Typeface.ITALIC;
    var color = new Color("red");
    var textSize = 38;
    var typeface = android.graphics.Typeface.create(fontName, fontStyle);

    textAndroid.setTextColor(color.android);
    textAndroid.setTextSize(textSize);
    textAndroid.setTypeface(typeface);
}

public dfEditorUpdate(data) {
    if (applicationModule.android) {
        console.log(applicationModule.android)
        switch (data.propertyName) {
            case "myName":
                this.setTextLabels(data);
                console.log("myName text labels set");
                break;
        }
    }
}

To make the example for advanced styling work with a text editor I've also changed the data-services/settings.ts file adding a string variable myName for our text editor 

export class Settings {
    public onlyOnWiFi: boolean = false;
    public myName: string = "Jonnhy";
    public networkLimit: number = 10;
    public networkPreference: string = "LTE";
    public appVolume: number = 70;

    constructor() {
    }
}

Regards,
Nikolay Iliev
Telerik by Progress

[Johnny]

Thanks Nikolay.

I have about 10 Text (EditText in android)boxes and one spinner.

If for example I do this:

public dfEditorUpdate(data) {

console.log(data)

}

 

}

 

[Johnny]

Sorry my last reply was posted before finishing it.

Is there no way to delete ? This forum is not easy to use, sorry to say!

[Nick Iliev]

Hi Johnny,

Don't worry about non-completed posts - you can continue your explanation in the forum thread.

I guess here but If you want to customise 10 different text editors and one spinner you can achieve that by differentiating them by their property name.An excellent example can be found here. Note that the property names comes from the data source as used here. The same concept is valid in an Angular-2 application, and the respective example can be shown here. In both case4s using switch-case or if-else conditional statements will do the job of differing the editors by their property names

Again this is all based on an assumption about your unasked question - let us know if you need another kind of assistance.

Regards,
Nikolay Iliev
Telerik by Progress

[Johnny]

Yes thats pretty much it!

What I was trying to achieve is a app wide styling, as I the app I am developing is basically lots of forms.

The idea of having to write a switch statement for say 40 text boxes, to style the same for each one seems extreme.

Ideally I would like dfEditorUpdate method to filter out just the text editor - ignore any others like spinners, and then apply the styling I need.

As you can see from the attached image, in a way I am going against what NativeScript is good at - i.e. Native controls and styling, so this "generic" styling is already going against what the ideal is.

I also looked at doing this from Android styling (via Android styling) to apply app wide, but couldnt find the style I wanted.

Thanks for your help, really grateful. I will continue to investigate.

 

Best

 

[Johnny]

Sorry, please find attached image

[Nick Iliev]

Hello Johnny,

In the editorUpdate function, you can use switch-case and assign the styling for your repeating text-field in the default clause. Of use if-else clause and declare your repeating styling for your 40 tex-filed in the ending else clause/. This way you can reuse your code with a single line of code.
An example of using a switch to apply different styling to the different elements can be found here. (but without the default clause in the end )

e.g.

public dfEditorUpdate(data) {
    if (applicationModule.android) {
        switch (data.propertyName) {
            case "onlyOnWiFi": this.editorSetupSwitchAndroid(data.editor); break;
            case "networkLimit": this.editorSetupStepperAndroid(data.editor); break;
            case "networkPreference": this.editorSetupSegmentedEditorAndroid(data.editor); break;
            case "appVolume": this.editorSetupSliderAndroid(data.editor); break;
        }
    } else if (applicationModule.ios) {
        switch (data.propertyName) {
            case "onlyOnWiFi": this.editorSetupSwitchIOS(data.editor); break;
            case "networkLimit": this.editorSetupStepperIOS(data.editor); break;
            case "networkPreference": this.editorSetupSegmentedEditorIOS(data.editor); break;
            case "appVolume": this.editorSetupSliderIOS(data.editor); break;
        }
    }
}

Regards,
Nikolay Iliev
Telerik by Progress

[Johnny]

Great Nikolay

I will see what I can come up with :)

Thanks for help.

[Johnny]

Ok having learned some aspects to styling, please could you help with styling my form so that the label appears above the control.

In iOS, the label is to the left, but how can I move this label ? (please see attached image in previous comment above)

Can you give any pointers to how this might be possible?

 

Thanks

[Nick Iliev]

Hello Johnny,

At this very moment, there are some limitations when ordering the labels in iOS. Our developers have this option in mind and will update the implementation once we have a proper solution, but right now for iOS, you can only organize your labels on the same line with your editors.
The feature you are looking for is already requested here. From the logged issue, you can track its development and possible workarounds and also join the discussion and upvote it to raise its priority.

Regards,
Nikolay Iliev
Telerik by Progress