Styling Switch Editor label

[Michael]

Hello,

Styling the label of TKPropertyEditor of type Switch is not working while using this properties :

labelTextColor, labelTextSize, labelFontName and labelFontStyle

 

Whereas all others styling properties works good

[Nick Iliev]

Hi Michael,

We have tested the styling for property editor of type Switch and at our side, everything seems to work as expected. Here is the sample code we used to confirm that the styling is applied for label related styles.

<TKEntityProperty tkDataFormProperty name="agreeTerms" displayName="I Agree with Terms" index="9">
    <TKPropertyEditor tkEntityPropertyEditor type="Switch">
        <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="red">
        </TKPropertyEditorStyle>
    </TKPropertyEditor>
</TKEntityProperty>

The snippet above can be tested and verified with a little modification of this example.
Please let me know if you need further assistance or if your case is behaving differently than the expected.

Regards,
Nikolay Iliev
Telerik by Progress

[Grégory]

Hello,

I'm also using Switch editor type in a dataForm, and as said Michael, styling the label is not working, but only the label !!

For Information, I use Nativescript with Angular, and the telerik-ui-pro version (with dataForm angular components).

My test are realized on an android phone.

 

I use this code (inspired by Nikolay Iliev example)

<RadDataForm [source]="data"
                     (propertyCommit)="dfPropertyCommit($event)"
                     (propertyCommitted)="dfPropertyCommitted($event)"
                     commitMode="Manual"
                     validationMode="OnLostFocus">

            <TKEntityProperty tkDataFormProperty name="val1" displayName="I Agree with Terms 2" index="9">
              <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="red">
                  </TKPropertyEditorStyle>
              </TKPropertyEditor>
            </TKEntityProperty>

            <TKEntityProperty tkDataFormProperty name="val2" displayName="I Agree with Terms" index="10">
              <TKPropertyEditor tkEntityPropertyEditor type="Switch">
                  <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="red">
                  </TKPropertyEditorStyle>
              </TKPropertyEditor>
            </TKEntityProperty>
        </RadDataForm>

 

The result from device is in attachment.

You can see that all styling properties works good, except the label for the switch editor.

 

Can you confirm

 

[Nick Iliev]

Hello Gregory,

Thank you for reporting this issue - the information that this happens in an Angular application was really helpful to isolate this case. We were able to reproduce this behaviour and it was logged here. Once we have more information and a fix, the information will be updated in the issue above.

Regards,
Nikolay Iliev
Telerik by Progress

[Grégory]

Great thanks a lot !

 

There is any workaround to styling switch label during the fix developpement ?

A proposal would really be appreciable :)

 

[Nick Iliev]

Hi Gregory,

As a temporary workaround, you can access the native properties of the switch editor and apply some native styling for your labels. This can be achieved using the editorUpdate change detection and implement the styling to the callback function.
e.g. (modifying this example for test purposes)

dataform-styling-advanced.component.ts

private setLabels(data) {

    var switchAndroid = data.editor.getEditorView();

 

    var labelFontName = "sans-serif-light";

    var labelFontStyle = android.graphics.Typeface.ITALIC;

    var labelColor = new Color("red");

    var labelTextSize = 48;

    var typeface = android.graphics.Typeface.create(labelFontName, labelFontStyle);

 

    switchAndroid.setTextColor(labelColor.android);

    switchAndroid.setTextSize(labelTextSize);

    switchAndroid.setTypeface(typeface);

}

 

public dfEditorUpdate(data) {

    console.log("data.propertyName: " + data.propertyName);
      // based on this specific example data: onlyOnWiFi
      // (in the code-behind comes from the data source Settings)

 

    if (applicationModule.android) {

        console.log(applicationModule.android)

        switch (data.propertyName) {

            case "onlyOnWiFi":

                this.setLabels(data); // apply the native styles

                console.log("onlyOnWiFi switch labels set");

                break;

        }

    }

}

dataform-styling-advanced.component.html (no changes compared to the original file)

<RadDataForm [source]="settings" (editorUpdate)="dfEditorUpdate($event)">
    <TKEntityProperty tkDataFormProperty name="onlyOnWiFi" index="0">
        <TKPropertyEditor tkEntityPropertyEditor type="Switch"></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>

This will set the label for the switch to be in red colour with font-size  48 and Italic. 
Note in your HTML file the call for dfEditorUpdate method

(editorUpdate)="dfEditorUpdate($event)"

Keep in mind that to have access to the native APIs in an angular project you will need some additional steps.To achieve that you should follow these steps:

1. install tns-platform-declarations

npm i tns-platform-declarations --save-dev

2. enabled the declaration by modifying your project's references.d.ts and tsconfig.json files as follows:
references.d.ts content

/// <reference path="./node_modules/tns-core-modules/tns-core-modules.es2016.d.ts" />

/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />

declare type Comment = any;
declare type CloseEvent = any;
declare type Document = any;
declare type DocumentFragment = any;
declare type Element = any;
declare type History = any;
declare type HTMLAnchorElement = any;
declare type HTMLCollection = any;
declare type HTMLDocument = any;
declare type HTMLElement = any;
declare type HTMLInputElement = any;
declare type HTMLScriptElement = any;
declare type HTMLStyleElement = any;
declare type KeyboardEvent = any;
declare type Location = any;
declare type MessageEvent = any;
declare type MouseEvent = any;
declare type Node = any;
declare type NodeList = any;
declare type Text = any;
declare type WebSocket = any;

tsconfig.json content

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "lib": [
            "es2016"
        ]
    }
}

Then rebuild your application and you will have access to the native APIs which means you will have access to android.graphics.Typeface.ITALIC.  Once all that is done you can rebuild your application and the label will have the native styles applied.

Regards,
Nikolay Iliev
Telerik by Progress

[Grégory]

It works perfectly !!

Thanks a lot for your reactivity I really appreciate

 

I didn't need to install tns-platform-declarations and modify my references.d.ts and tsconfig.json in my project to make it work. Maybe it could be useful by prevent error on compilation but for now it works great