Custom styling of TKPropertyEditor text

11 posts, 0 answers
  1. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 09 Feb Link to this post

    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

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 10 Feb Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 10 Feb in reply to Nikolay Iliev Link to this post

    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)

    }

     

    }

     

  4. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 10 Feb in reply to Johnny Link to this post

    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!

  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 10 Feb Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  6. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 10 Feb in reply to Nikolay Iliev Link to this post

    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

     

  7. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 10 Feb Link to this post

    Sorry, please find attached image
  8. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 10 Feb Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  9. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 10 Feb in reply to Nikolay Iliev Link to this post

    Great Nikolay

    I will see what I can come up with :)

    Thanks for help.

  10. Johnny
    Johnny avatar
    11 posts
    Member since:
    Feb 2017

    Posted 21 Feb Link to this post

    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

  11. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 22 Feb Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top