RadListView - set spanCount on screen orientation change

[Michele]

Hello,

I'm using Angular2 (Typescript), RadListView with ListViewStaggeredLayout.
I need to set the value for spanCount at runtime when the screen orientation changes.
I've set:

<ListViewStaggeredLayout tkListViewLayout
     scrollDirection="Vertical"
     [spanCount]="columns">
</ListViewStaggeredLayout>

 

and I set columns variable on screen orientation event. The function setOrientation is binded on orientationChange event:

 

import { on as applicationOn, off as applicationOff } from "application";

...
    ngOnInit() {
      applicationOn("orientationChanged", (e)=>{ this.setOrientation(e); });
    }

    ngOnDestroy() {
      applicationOff("orientationChanged", this.setOrientation);
    }

    ngAfterViewInit() {
      this.setOrientation({newValue: 'portrait'})
    }

    setOrientation(e) {
      if(e.newValue=="portrait") {
        this.columns = N;
      } else {
        this.columns = M;
      }
    }
...

 

It seems works fine but after a bit or if items are many or view is loading, it doesn't work anymore and I get the next exception:

ERROR Error: java.lang.IllegalStateException: Cannot call this method while RecyclerView is computing a layout or scrolling
JS:     android.support.v7.widget.RecyclerView.assertNotInLayoutOrScroll(RecyclerView.java:2619)
JS:     android.support.v7.widget.RecyclerView$LayoutManager.assertNotInLayoutOrScroll(RecyclerView.java:7236)
JS:     android.support.v7.widget.StaggeredGridLayoutManager.assertNotInLayoutOrScroll(StaggeredGridLayoutManager.java:530)
JS:     android.support.v7.widget.StaggeredGridLayoutManager.setSpanCount(StaggeredGridLayoutManager.java:429)

 

How can I solve this? What's the best way to set spanCount on screen orientation change event?

 

Thanks

[Nick Iliev]

Hi Michele,

To change the spanCount on event you will need to redraw the ListViewStaggeredLayout so it could be measured properly. You can achieve that the following way:

Component file:

radList: RadListView;

onRadListLoaded(args) {

    this.radList = <RadListView>args.object;   

}

 

ngOnInit() { 

    this.items = this.itemService.getItems(); // using the template hello world app

 

    applicationOn("orientationChanged", (args: OrientationChangedEventData) => {

        console.log("orientationChanged");

 

        if(args.newValue == "portrait") {

            let staggeredLayout = new ListViewStaggeredLayout();

            staggeredLayout.scrollDirection = "Vertical";

            staggeredLayout.spanCount = 2;

 

            this.radList.listViewLayout = staggeredLayout;

        } else {

            let staggeredLayout = new ListViewStaggeredLayout();

            staggeredLayout.scrollDirection = "Vertical";

            staggeredLayout.spanCount = 3;

 

            this.radList.listViewLayout = staggeredLayout;

        }

    }); 

    }

And in the HTML file using the loaded event to get the reference to RadListView

<RadListView [items]="items" (loaded)="onRadListLoaded($event)">

For your convenience, I have created this demo application demonstrating where the above technique is implemented. 

Regards,
Nikolay Iliev
Progress Telerik