CustomPropertyEditor example with Angular?

Thread is closed for posting
2 posts, 1 answers
  1. Douglas
    Douglas avatar
    16 posts
    Member since:
    Apr 2017

    Posted 03 May 2017 Link to this post

    There is not custom property editor documentation.  There also isn't an example in the ui samples for angular.

    Can you provide one?

    My objective is to get a standard DatePicker UI element for picking a date.  The defined editor DatePicker displays the date string in a European format and uses a native calendar which is hard to change years on some versions of android.

  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 04 May 2017 Link to this post

    Hello,
    Thank you for contacting us.

    I reviewed the case, however at this time using CustomEditor is not supported for NativeScript Angular 2 projects and for now it could be used only in the pure NativeScript one.

    At this point, for now, I could suggest changing the dataFormat of the view, while using the RadDataForm editorUpdate event. When the event is fired you could change the format of the shown date for both iOS and Android. 
    I am attaching sample code:
    HTML
    <GridLayout rows="" columns="">
        <RadDataForm [source]="ticketOrder" (editorUpdate)="onEditorUpdate($event)" tkExampleTitle tkToggleNavButton>
            <TKEntityProperty tkDataFormProperty name="movie" displayName="Movie Name" index="0" [valuesProvider]="movies">
                <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="date" index="1">
                <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="time" index="2">
                <TKPropertyEditor tkEntityPropertyEditor type="TimePicker"></TKPropertyEditor>
            </TKEntityProperty>
            <!-- >> angular-dataform-editors-html -->
            <TKEntityProperty tkDataFormProperty name="type" displayName="Type" index="3" valuesProvider="2D, 3D">
                <TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>
            </TKEntityProperty>
            <!-- << angular-dataform-editors-html -->
            <TKEntityProperty tkDataFormProperty name="price" index="4" readOnly="true">
                <TKPropertyEditor tkEntityPropertyEditor type="Decimal"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="numberOfTickets" displayName="Number of Tickets" index="5">
                <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="contactName" displayName="Contact Name" index="6">
                <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="contactPhone" displayName="Contact Phone" index="7">
                <TKPropertyEditor tkEntityPropertyEditor type="Phone"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="contactEmail" displayName="Contact Email" index="8">
                <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
            </TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="agreeTerms" displayName="I Agree with Terms" index="9">
                <TKPropertyEditor tkEntityPropertyEditor type="Switch"></TKPropertyEditor>
            </TKEntityProperty>
             
        </RadDataForm>
    </GridLayout>


    TypeScript

    public onEditorUpdate(args) {
     
            if (args.propertyName == "date") {
                this.changeDateFormatting(args.editor);
            }
        }
     
        private changeDateFormatting(editor) {
            if (applicationModule.ios) {
                var dateFormatter = NSDateFormatter.alloc().init();
                dateFormatter.dateFormat = "MM-yyyy-dd";
                editor.dateFormatter = dateFormatter;
            } else {
                var simpleDateFormat = new java.text.SimpleDateFormat("MM-yyyy-dd", java.util.Locale.US);
                editor.setDateFormat(simpleDateFormat);
            }
        }
    Bear in mind that you should also install tns-platform-declarations , which will allow you to access some native methods. You could do that with:

    npm install tns-platform-declarations --save
    Also, you should create reference.d.ts file in the main directory of the project and add the following two lines:

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


    For further help, you could also review the attached sample project or the example in nativescript-ui-samples-angular

    Regards,
    nikolay.tsonev
    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