This is a migrated thread and some comments may be shown as answers.

Styling Switch Editor label

6 Answers 181 Views

DataForm

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

6 Answers, 1 is accepted

answered on 20 Dec 2016, 02:48 PM

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

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.

answered on 07 Feb 2017, 03:34 PM

sans-titre.png

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>

</TKPropertyEditor>

</TKEntityProperty>

<TKEntityProperty tkDataFormProperty name="val2" displayName="I Agree with Terms" index="10">

<TKPropertyEditor tkEntityPropertyEditor type="Switch">

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

answered on 08 Feb 2017, 01:42 PM

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