RadListView - set spanCount on screen orientation change

Thread is closed for posting
2 posts, 0 answers
  1. Michele
    Michele avatar
    2 posts
    Member since:
    Jun 2017

    Posted 10 Oct 2017 Link to this post


    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


    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?



  2. Nikolay Iliev
    Nikolay Iliev avatar
    351 posts

    Posted 10 Oct 2017 Link to this post

    Hi Michele,

    To change the spanCount on orientationChanged 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) => {
            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. 

    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top