DataForm not working with FlexboxLayout

5 posts, 2 answers
  1. steve
    steve avatar
    3 posts
    Member since:
    Nov 2016

    Posted 27 May Link to this post

    DataForm on IOS does not appear to work with FlexboxLayout, must we be forced to use GridLayout or StackLayout?

    <FlexboxLayout class="flex-screen-middle p-15">

    <!--<FlexboxLayout class="form">-->
    <RadDataForm tkExampleTitle tkToggleNavButton height="200" [source]="account">

    <TKEntityProperty tkDataFormProperty name="username" index="0">
    <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="Username can't be empty."></TKNonEmptyValidator>
    <TKMaximumLengthValidator tkEntityPropertyValidators errorMessage="Username can be at most 12 characters." length="12"></TKMaximumLengthValidator>
    </TKEntityProperty>

    <TKEntityProperty tkDataFormProperty name="email" displayName="E-Mail" index="1">
    <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
    </TKEntityProperty>

    <TKEntityProperty tkDataFormProperty name="password" displayName="Password" index="2">
    <TKPropertyEditor tkEntityPropertyEditor type="Password"></TKPropertyEditor>
    <TKMinimumLengthValidator tkEntityPropertyValidators errorMessage="Password must be at least 6 characters long." length="6"></TKMinimumLengthValidator>
    </TKEntityProperty>

    <TKEntityProperty tkDataFormProperty name="passwordConfirm" displayName="Password Confirmation" index="3">
    <TKPropertyEditor tkEntityPropertyEditor type="Password"></TKPropertyEditor>
    <TKMinimumLengthValidator tkEntityPropertyValidators errorMessage="Password must be at least 6 characters long." length="6"></TKMinimumLengthValidator>
    </TKEntityProperty>

    </RadDataForm>

    </FlexboxLayout>

     

    Also... I have bought a licence, but still get the nag screen, is there .lic file which I need?

     

     

  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 29 May Link to this post

    Hello  Steve,

    Thank you for contacting us,

    I tested the given code snippet on my side and the DataForm component is shown as expected on iOS whole using FlexboxLayout.

    Could you verify whether you included NativeScriptUIDataFormModule in the imports of app.module.ts file. for example:
    import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
    import { NativeScriptModule } from "nativescript-angular/nativescript.module";
    import { AppRoutingModule } from "./app.routing";
    import { AppComponent } from "./app.component";
     
    import { ItemService } from "./item/item.service";
    import { ItemsComponent } from "./item/items.component";
    import { ItemDetailComponent } from "./item/item-detail.component";
    import { NativeScriptUIDataFormModule } from "nativescript-telerik-ui-pro/dataform/angular";
     
    @NgModule({
        bootstrap: [
            AppComponent
        ],
        imports: [
            NativeScriptModule,
            AppRoutingModule,
            NativeScriptUIDataFormModule
        ],
        declarations: [
            AppComponent,
            ItemsComponent,
            ItemDetailComponent
        ],
        providers: [
            ItemService
        ],
        schemas: [
            NO_ERRORS_SCHEMA
        ]
    })
    export class AppModule { }

    For your convenience, I am also attaching sample project and screenshot from the simulator.

    Regarding the second question, you need only to install the tgz file, without the need to make any further configurations.


    Let me know, whether I could help you further.
    Regards,
    nikolay.tsonev
    Progress Telerik
    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. steve
    steve avatar
    3 posts
    Member since:
    Nov 2016

    Posted 29 May in reply to nikolay.tsonev Link to this post

    Hi Nikolay,

    I am still on NS 2.5 so I am using v1.6.1 of nativescript-telerik-ui-pro.  

    Thanks for the tip on the licence issue - it works now. My package.json was referencing the 1.6.1 version and I just changed it to:

    "nativescript-telerik-ui-pro": "./nativescript-ui-pro.tgz"

    ----

    Regarding NativeScriptUIDataFormModule: I tried to import that directly in my app.module and get:

     JS ERROR Error: Type RadDataFormComponent is part of the declarations of 2 modules: NativeScriptUIDataFormModule and AppModule! Please consider moving RadDataFormComponent to a higher module that imports NativeScriptUIDataFormModule and AppModule. You can also create a new NgModule that exports and includes RadDataFormComponent then import that NgModule in NativeScriptUIDataFormModule and AppModule.

     

    So, this is what I currently have in my app.module.ts (copied from the SDKAngular example that came with nativescript-telerik-ui-pro):

    import { DATAFORM_DIRECTIVES } from 'nativescript-telerik-ui-pro/dataform/angular';

     

    @NgModule({
        bootstrap: [
            AppComponent
        ],
        declarations: [
            LISTVIEW_DIRECTIVES,
            SIDEDRAWER_DIRECTIVES,
            CALENDAR_DIRECTIVES,
            CHART_DIRECTIVES,
            DATAFORM_DIRECTIVES,

    ..

    ..

    Any other ideas?

    Thanks,
    Steve

     

     

     

  4. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 29 May Link to this post

    Hi Steve,
    I tested your case while using NativeScirpt 2.5 and nativescript-telerik-ui 1.6.1 and indeed the DataForm component will not be shown while using FlexboxLayout. However, this issue is fixed in the latest NativeScript and UI for NativeScript.

    One possible option is to upgrade to latest version of both NativeScirpt and nativescript-telerik-ui. In case this is not applicable for you, you could just replace FlexboxLayout with GridLayout, which will allow showing the component with the correct dimensions.

    I am attaching the sample project, which I used for testing.

    Regards,
    nikolay.tsonev
    Progress Telerik
    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. steve
    steve avatar
    3 posts
    Member since:
    Nov 2016

    Posted 29 May in reply to nikolay.tsonev Link to this post

    Hi Nikolay,

    Thanks so much for looking into this. Ok, it works now, thanks for both of your example projects btw.  I will upgrade to NS 3 at some point,  but unfortunately cannot do so currently with my deadline.

    Kind regards,

    Steve

Back to Top