[Solved] How do I refresh the RadListView

[Stan]

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;

[Nick Iliev]

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