Fixed column/section in nativescript layout


#1

I need to implement a layout as per the attached drawing.

Basically I need to freeze first column whereas the horizontal scrolling should work for all the items/rows. (as well as vertical) The model I have, is per row (including fixed cell value), so I assume this cell needs to be within scoll view control- but than the first cell becomes scrollable as well.

Any ideas how to construct this - much appreciated!

scrollable


#2

I’m not sure if it’s doable, but this seems to call for a grid layout.

Every cell would be inside a grid layout and the contents of the 2nd column would be wrapped inside a scrollview. Something list this:

<LIST>
    <ListItemTemplate> // please check for correct syntax I'm just doing this blindly
        <GridLayout rows="1" columns="2" ...>
            <Label row="0" column="0" text="Blah" />
            <SrollView row="0" column="1">
                ...contents inside scrollview...
            </ScrollView>
        </GridLayout>
    </ListItemTemplate>
</LIST>

It’s possible that you may need to use a StackLayout in place of the ScrollView, and put the ScrollView inside the StackLayout itself.


#3

Do you have fixed and equal number of data items under each header?


#4

The problem with this approach is to synchronise the scrolls between items in the list, isn’t it?


#5

No, in each section there can be different amount of items.


#6

Give this one a try


#7

The same issue as commented to pentool - I need to sync the horizontal scroll between all the items, so they are not independent 'sections’
Any idea for that?

Thanks!


#8

A possible hack could be updating the position of other scrollviews while one is being scrolled by user.