VerticalList and HorizontalList doesn't scroll beyond visible screen area

[premjoy7]

We've used following code to create VerticalList:

`var verticalList = new VerticalList("datafeed");

for(var i=1;i<=15;i++) { var btn = new Button("id"+i); btn.appendChildWidget(new Label(i)); verticalList.appendChildWidget(btn); }

this.appendChildWidget(verticalList);`

This doesn't let us to scroll beyond visible screen. Same is observed with Grid as well. Is this expected by design?

[subsidel]

Yes, the HorizontalList and VerticalList components do not have any scrolling logic of their own - however the Carousel does.

The example app has a demonstration of how to use carousels if you are unfamiliar with them: https://github.com/bbc/talexample/blob/dusting/static/script/appui/components/simple.js#L70 https://github.com/bbc/talexample/blob/dusting/static/script/appui/formatters/simpleformatter.js#L35 https://github.com/bbc/talexample/blob/dusting/static/script/appui/components/carouselcomponent.js#L16

[premjoy7]

Thanks for the reference. We would like to have following UX:

menu 1 [item 1] [item 2] ..... [item 20] ---> Horizontal carousel menu 2 [item 1] [item 2] ..... [item 20] ---> Horizontal carousel ....... menu 20 [item 1] [item 2] ..... [item 20] ---> Horizontal carousel

Could you suggest a component which can support vertical scroll for above requirement?

[subsidel]

You should be able to have a Carousel with its orientation set to Carousel.orientations.VERTICAL with child components of Carousels with orientation of Carousel.orientations.HORIZONTAL which contains each item for the row.

[Vertical carousel]
    [container 1]
      [label] menu 1 [/label]
      [Horizontal carousel]→ [item 1 /]→ [item 2 /] →..... [item 20 /]  [/Horizontal carousel]
    [/container 1]
↓
    [container 2]
      [label] menu 2 [/label]
      [Horizontal carousel 2]→ [item 1 /]→ [item 2 /] →..... [item 20 /]  [/Horizontal carousel 2]
    [/container 2]
↓   .......
    [container 20]
      [label] menu 20 [/label]
      [Horizontal carousel 20] →[item 1 /]→ [item 2 /]→ ..... [item 20 /]  [/Horizontal carousel 20]
    [/container 20]
[/Vertical carousel]

[premjoy7]

Thank you for the inputs. We tried following sample:

            var scarousel = new Carousel("scarousel", Carousel.orientations.VERTICAL);
            this.appendChildWidget(scarousel);

            var dataSource = new DataSource(null, new SimpleFeed(), 'loadData');
            var formatter = new SimpleFormatter();

            var c1 = new HorizontalCarousel("c1", formatter, dataSource, false, HorizontalCarousel.ALIGNMENT_LEFT);
            var c2 = new HorizontalCarousel("c2", formatter, dataSource, false, HorizontalCarousel.ALIGNMENT_LEFT);
            var c3 = new HorizontalCarousel("c3", formatter, dataSource, false, HorizontalCarousel.ALIGNMENT_LEFT);
            var c4 = new HorizontalCarousel("c4", formatter, dataSource, false, HorizontalCarousel.ALIGNMENT_LEFT);

            scarousel.appendChildWidget(c1);
            scarousel.appendChildWidget(c2);
            scarousel.appendChildWidget(c3);
            scarousel.appendChildWidget(c4);

We ended up with two issues: (1) Vertical navigation between horizontal carousel is not happening. (2) When tried with focus(), auto scroll doesn't happen.

Looking forward to your inputs.

[premjoy7]

Follow up to my earlier comment. We could get this working with following formatter:

function(Formatter, Label, Button, Image, HorizontalCarousel, DataSource, SimpleFormatter, SimpleFeed, Container) {
     return Formatter.extend({
        format : function (iterator) {
            var button, item;
            item = iterator.next();
            var con = new Container('con'+item.id);
            con.appendChildWidget(new Label(item.id));
            var dataSource =  new DataSource(null, new SimpleFeed(), 'loadData');
            var formatter = new SimpleFormatter();
            var horCarousal = new HorizontalCarousel('hrC'+item.id,formatter,dataSource,false,HorizontalCarousel.ALIGNMENT_LEFT);
          con.appendChildWidget(horCarousal);
            return con;
        }
    });
}

Thanks for your support. We're progressing :-)