DataForm not working with FlexboxLayout

[steve]

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?

 

 

[Nikolay Tsonev]

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 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  file, without the need to make any further configurations.


Let me know, whether I could help you further.
Regards,
nikolay.tsonev
Progress Telerik

[steve]

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

 

 

 

[Nikolay Tsonev]

Hi Steve,
I tested your case while using NativeScirpt 2.5 and -- 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 --. 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

[steve]

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