tkGroupTemplate with inner content scroll horizontal

[nericode]

Tell us about the problem

I am trying to horizontally set the content that is grouped with the function of <ng-template tkGroupTemplate let-category="category"> but is not possible, because all content is horizontal.

Which platform(s) does your issue occur on?

Both

Please tell us how to recreate the issue in as much detail as possible.

<RadListView
    [items]="dataItems"
    #productsListView
    [groupingFunction]="grouping"
>
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout orientation="horizontal" width="100%">
            <MDCardView width="100" height="100">
                <Image stretch="aspectFill" [src]="item.image"></Image>
            </MDCardView>
        </StackLayout>
    </ng-template>

    <ng-template tkGroupTemplate let-category="category">
        <GridLayout columns="*, auto" ios:height="50">
            <Label
                col="0"
                style="font-weight: bold; font-size: 24"
                [text]="category"
            ></Label>
            <Label
                col="1"
                style="font-size: 12; color: gray;"
                text="Ver más"
            ></Label>
        </GridLayout>
    </ng-template>

    <ListViewGridLayout
        tkListViewLayout
        itemHeight="100"
        scrollDirection="Horizontal"
    ></ListViewGridLayout>
</RadListView>

Now:

Without ListViewGridLayout:

[tsonevn]

Hi @NeriCodec, If I understand your case correctly, you want to set horizontal scroll direction for all items inside the RadListView component. To achieve this, you should specify the itemWidth inside the ListViewGridLayout as well as the ios:width in the tkGroupTemplate.

Hope this helps.

[nericode]

Hello @tsonevn , I try but not work, here my code.

NSPlayground.zip

[nericode]

Any help @tsonevn

[tsonevn]

Hi @NeriCodec, Excuse me for the delay in reply. I've checked the project and the items seem to be correctly ordered inside each group while using ListViewGridLayout. On my side, the items from the first group will be ordered in two rows and them on the right side the second group will be added. If you want all items to be displayed on one row, I would suggest replacing the ListViewGridLayout with ListViewLinearLayout inside the RadListView. This will set all items and groups on a single line. Let me know if I am missing something or if your case is different.