Embed RadDataForm inside RadListView/ListView

Question

I need to use the Stepper component from the nativescript-pro-ui, however it is not a standalone component but it needs to be wrapped by RadDataForm. What i am trying to do is to loop through a list of available menus returned from a REST api for user to order.

I have created a playground here: https://play.nativescript.org/?template=play-ng&id=vwvuXt

As you can see, i bind the [source] of the RadDataForm to individual item from the ListView. However, this way the RadDataForm does not display.

If I change it to use *ngFor, it works. So, what is wrong with the binding with RadDataForm, is there anyway to achieve it?

The template code that use the *ngFor is like this:

<RadDataForm *ngFor="let item of menus" tkExampleTitle tkToggleNavButton [source]="item">
    <TKEntityProperty tkDataFormProperty name="name" [isReadOnly]="isReadOnly" displayName="Name" index="0"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="price" [isReadOnly]="isReadOnly" displayName="Price" index="1"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="image" [isReadOnly]="isReadOnly" displayName="Image" index="2"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="quantity" displayName="Quantity" index="3">
        <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
    </TKEntityProperty>
</RadDataForm>

Answer 1

Remember my friend, you need to use the NativeScript layouts to avoid wrong behaviors in all platforms. So to fix the issue of your example, the code is the following:

<ListView [items]="menus">
    <ng-template let-item="item">
        <StackLayout>
            <RadDataForm #myDish [source]="item" tkExampleTitle tkToggleNavButton>
                <TKEntityProperty tkDataFormProperty name="name" displayName="Dish Name" index="0">
                    <TKPropertyEditor tkEntityPropertyEditor type="Text">
                    </TKPropertyEditor>
                </TKEntityProperty>
            </RadDataForm>
        </StackLayout>
    </ng-template>
</ListView>

As you can see we are using StackLayout for each field of the list. Also, you can use the RadListView component, you can find more advanced features like infinite scrolling, pull to refresh, etc.