Как создать представление сетки с двумя столбцами в строке с помощью RadListView

Я думал, что это легко, но, к сожалению, я не могу найти никакого ответа. Я установил telerik-ui и хочу использовать RadListView. Из документа я вижу демонстрационную страницу с идеальным макетом, чтобы иметь несколько элементов в строке. В моем случае я хочу иметь два столбца в строке, а затем отображать представление списка. Ниже мой xml-код, но он совершенно пустой, не знаю почему. Вы можете помочь?

Это код в моем XML:

<RadListView [items]="flattenDishes">
    <ListViewLinearLayout scrollDirection="Vertical" itemHeight="500" spanCount="2"></ListViewLinearLayout>
    <ng-template tkListItemTemplate let-flattenDish="item">
        <GridLayout rows="auto" columns="auto, *">
            <StackLayout orientation="vertical">
              <Image [src]="serverUrl +'images/' +  flattenDish.get('option_imageUrl') " stretch="aspectFill" width=200 height=200></Image>
              <Label  [text]="flattenDish.get('option_size')+':'+ flattenDish.getTrans('zh').get('title')"></Label>
              <Label  [text]="flattenDish.get('option_price')"></Label>
            </StackLayout>
        </GridLayout>
    </ng-template>
</RadListView>

Может ли кто-нибудь помочь мне иметь рабочий шаблон здесь?

Спасибо


angular2-nativescript nativescript-telerik-ui
person user3006967    schedule 31.07.2017    source источник
comment
Вы поняли это правильно?   -  person Tinus Jackson    schedule 13.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте это, не с RadListView, но важная часть находится внутри элемента:

 <ListView class="list-group" [items]="workOrders" (itemTap)="onItemTapSecondList($event)" separatorColor="gray">
            <ng-template let-workOrder="item">
                <StackLayout orientation="horizontal">
                    <StackLayout>
                        <Label text="Order ref:" class="order-id-label"></Label>
                    </StackLayout>
                    <StackLayout>
                        <Label text="Order date:" class="order-id-label"></Label>
                    </StackLayout>
                </StackLAyout>
            </ng-template>
        </ListView>
person Ramon    schedule 11.04.2018