Custom Editor Styling

[Imran]

How can we style a Custom Editor? for instance I want to hide the Label of my custom editor.

Thanks

[Imran]

I was able to hide the label by setting displayName="" on EntityProperty , but still I am looking for a way to change background color font and other styling of Custom Editor.

 

[Nikolay Tsonev]

Hello Imran,

Thank you for contacting us.

All available styling properties for the DataForm component could be found in this article from the documentation. 

In your case to change the backgroundColor of the Editor you should use fillColor property labelFontName and labelFontStyle for styling the labels in the component.
For example:
 

<df:RadDataForm id="myDataForm" source="{{ person }}">
        <df:RadDataForm.properties>
            <df:EntityProperty name="name" index="0"/>
            <!-- >> dataform-editor-custom-xml -->
            <df:EntityProperty backgroundColor="red" name="age" index="1">
                <df:EntityProperty.editor>
                    <df:CustomPropertyEditor
                        editorNeedsView="editorNeedsView"
                        editorHasToApplyValue="editorHasToApplyValue"
                        editorNeedsValue="editorNeedsValue">
                <df:PropertyEditor.propertyEditorStyle>
                    <df:PropertyEditorStyle strokeColor="#00695c" strokeWidth="2" fillColor="#4db6ac"
                                labelHidden="false" labelTextSize="18"
                                labelPosition="Left" labelWidth="60"
                                ios:labelFontName="Times New Roman" android:labelFontName="sans-serif-light"
                                labelFontStyle="Italic" labelTextColor="#00695c"/>
                    </df:PropertyEditor.propertyEditorStyle>
                </df:CustomPropertyEditor>

                </df:EntityProperty.editor>
            </df:EntityProperty>
            <!-- << dataform-editor-custom-xml -->
            <df:EntityProperty name="birthDate" index="2">
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="DatePicker" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
        </df:RadDataForm.properties>
    </df:RadDataForm>

I also would like to let you know that we will soon close UI for NativeScript Forum section in Telerik Admin in favor of NativeScript forum.
Since UI for NativeScript is free for using we consider that the best place for discussions and for questions will be the official NativeScript forum.

Hope this helps.


Regards,
nikolay.tsonev
Progress Telerik

[Imran]

I have tried applying style to Custom Editor in following way but it breaks the application.

<TKEntityProperty tkPropertyGroupProperties name="dummyField" index="8" labelHidden="true" displayName="">
<TKCustomPropertyEditor tkEntityPropertyEditor (editorNeedsView)="editorNeedsView($event)" (editorHasToApplyValue)="editorHasToApplyValue($event)"
(editorNeedsValue)="editorNeedsValue($event)" labelHidden="true">
<TKPropertyEditorStyle tkPropertyEditorStyle strokeColor="#00695c" strokeWidth="2" fillColor="#4db6ac" labelHidden="false"
labelTextSize="12" ios:labelFontName="Times New Roman" android:labelFontName="sans-serif-light"
labelFontStyle="Bold" labelPosition="Top" labelWidth="60" labelTextColor="#00695c" editorVerticalOffset="0"
labelVerticalOffset="0"></TKPropertyEditorStyle>
</TKCustomPropertyEditor>
</TKEntityProperty>

[Nikolay Tsonev]

Hello Imran,

Thank you for the provided code snippet.

I reviewed the sample code and found that the error is caused by setting the wrong directive name in the TKPropertyEditorStyle.
To solve the issue you should replace the tkPropertyEditorStyle with tkCustomPropertyEditorStyle. For example:

<TKEntityProperty tkDataFormProperty name="age" index="1" displayName="">
        <TKCustomPropertyEditor tkEntityPropertyEditor (editorNeedsView)="editorNeedsView($event)" (editorHasToApplyValue)="editorHasToApplyValue($event)"
         (editorNeedsValue)="editorNeedsValue($event)" labelHidden="true">
         <TKPropertyEditorStyle tkCustomPropertyEditorStyle  strokeColor="#00695c" strokeWidth="2" fillColor="#4db6ac" labelHidden="false"
         labelTextSize="12" ios:labelFontName="Times New Roman" android:labelFontName="sans-serif-light"
         labelFontStyle="Bold" labelPosition="Top" labelWidth="60" labelTextColor="#00695c" editorVerticalOffset="0"
         labelVerticalOffset="0"></TKPropertyEditorStyle>
        </TKCustomPropertyEditor>
    </TKEntityProperty>

Let me know whether this helps or if I could assist you further.


Regards,
nikolay.tsonev
Progress Telerik

[Imran]

Thanks for pointing out the cause. You have been great help.