Styling Switch Editor label

7 posts, 0 answers
  1. Michael
    Michael avatar
    7 posts
    Member since:
    Dec 2016

    Posted 15 Dec 2016 Link to this post

    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

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 20 Dec 2016 Link to this post

    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.
  3. Grégory
    Grégory avatar
    5 posts
    Member since:
    Oct 2015

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

    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

     

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 08 Feb Link to this post

    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
    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.
  5. Grégory
    Grégory avatar
    5 posts
    Member since:
    Oct 2015

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

    Great thanks a lot !

     

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

    A proposal would really be appreciable :)

     

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 08 Feb Link to this post

    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
    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.
  7. Grégory
    Grégory avatar
    5 posts
    Member since:
    Oct 2015

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

    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

Back to Top