How do I refresh the RadListView

2 posts, 1 answers
  1. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 21 Sep Link to this post

    I would like to have an item spanCount of 3 in portrait mode and a spanCount of 5 in landscape mode. My UI is not refreshing, please help. Thanks so much.

    package.json

    {
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "readme": "NativeScript Application",
    "repository": "<fill-your-repository-here>",
    "nativescript": {
    "id": "org.nativescript.RLVrefresh",
    "tns-ios": {
    "version": "3.2.0"
    }
    },
    "dependencies": {
    "nativescript-telerik-ui": "^3.1.1",
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "~3.2.0"
    }
    }

    main-page.xml

    <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-telerik-ui/listview" navigatingTo="onNavigatingTo" unloaded="pageUnloaded" class="page">
        <Page.actionBar>
            <ActionBar title="RLV Refresh" icon="" class="action-bar">
            </ActionBar>
        </Page.actionBar>

        <StackLayout id="container" >
        </StackLayout>
    </Page>

    main-page.js

    var listview_1 = require("nativescript-telerik-ui/listview");
    var application = require("application");

    exports.pageUnloaded = function() {
        application.off(application.orientationChangedEvent);
        console.log("Page unloaded!");
    }
    function onNavigatingTo(args) {
        application.on(application.orientationChangedEvent, setOrientation);
        var page = args.object;
        var calcSpan = "3";
        var myContent = ["~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png"];
        var listView = new listview_1.RadListView();
            listView.height = 900;
            listView.items = myContent;
            listView.itemTemplate = "<StackLayout><Image src='{{ $value }}' /></StackLayout>";
        var gridLayout = new listview_1.ListViewGridLayout();
            gridLayout.scrollDirection = "Vertical";
            gridLayout.itemHeight = 123;
            gridLayout.itemWidth = 123;
            gridLayout.spanCount = calcSpan;
            listView.listViewLayout = gridLayout;
        var container = page.getViewById("container");
            container.addChild(listView);
        function setOrientation(arg) {
            console.log("setOrientation called: " + arg.newValue);
            var orientation = arg.newValue;
            if (orientation = "portrait") {
                calcSpan = "3";
            } 
            if (orientation = "landscape") {
                calcSpan = "5";
            }
            if (orientation = "undefined") {
                calcSpan = "3";
            }
            listView.refresh();
        }
    }
    exports.onNavigatingTo = onNavigatingTo;

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 25 Sep Link to this post

    Hello Stan,

    The refresh method of RadListView will only update your source binding.
    If you need to dynamically change the structure of your RadListView, you will need to reinitialize the whole RadListView.

    For example (based on your code snippet):
    function onNavigatingTo(args) {
        application.on(application.orientationChangedEvent, function(args) {
            setOrientation(args);
        });
     
        var page = args.object;
        var calcSpan = "3";
        var myContent = ["~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png"];
     
        var listView = new listview_1.RadListView();
            listView.height = 900;
            listView.items = myContent;
            listView.itemTemplate = "<StackLayout><Label text='{{ $value }}' /></StackLayout>";
     
        var gridLayout = new listview_1.ListViewGridLayout();
            gridLayout.scrollDirection = "Vertical";
            gridLayout.spanCount = calcSpan;
            listView.listViewLayout = gridLayout;
     
        var container = page.getViewById("container");
            container.addChild(listView);
     
        function setOrientation(args) {
            console.log("setOrientation called: " + args.newValue);
     
            var orientation = args.newValue;
            switch (orientation) {
                case "portrait":
                        console.log("portrait");
                        calcSpan = 3;
     
                        var listView = new listview_1.RadListView();
                        listView.height = 900;
                        listView.items = myContent;
                        listView.itemTemplate = "<StackLayout><Label text='{{ $value }}' /></StackLayout>";
     
                        var gridLayout = new listview_1.ListViewGridLayout();
                        gridLayout.scrollDirection = "Vertical";
                        gridLayout.spanCount = calcSpan;
                        listView.listViewLayout = gridLayout;
     
                        container.removeChildren();
                        container.addChild(listView);
                    break;
                case "landscape":
                        console.log("landscape");
                        calcSpan = 2;
     
                        var listView = new listview_1.RadListView();
                        listView.height = 900;
                        listView.items = myContent;
                        listView.itemTemplate = "<StackLayout><Label text='{{ $value }}' /></StackLayout>";
     
                        var gridLayout = new listview_1.ListViewGridLayout();
                        gridLayout.scrollDirection = "Vertical";
                        gridLayout.spanCount = calcSpan;
                        listView.listViewLayout = gridLayout;
     
                        container.removeChildren();
                        container.addChild(listView);
                    break;       
                default:
                        console.log("undefined");
                        calcSpan = 3;
     
                        var listView = new listview_1.RadListView();
                        listView.height = 900;
                        listView.items = myContent;
                        listView.itemTemplate = "<StackLayout><Label text='{{ $value }}' /></StackLayout>";
     
                        var gridLayout = new listview_1.ListViewGridLayout();
                        gridLayout.scrollDirection = "Vertical";
                        gridLayout.spanCount = calcSpan;
                        listView.listViewLayout = gridLayout;
     
                        container.removeChildren();
                        container.addChild(listView);
                    break;
            }
     
     
            listView.refresh();
        }
    }
    exports.onNavigatingTo = onNavigatingTo;

    For your convenience, I have created this test applicaiton demonstrating the above technique.

    Regards,
    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