How do I show images with creating RadListView via code behind?

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

    Posted 17 Sep Link to this post

    I'm not sure if my code files below are the correct way to show images with creating RadListView via code behind. I'm getting a CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:165:30: Binding: Property: 'mySubsContentArray' is invalid or does not exist. SourceProperty: 'mySubsContentArray'

    Please advise, thank you.

    package.json

    {
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "readme": "NativeScript Application",
    "repository": "<fill-your-repository-here>",
    "nativescript": {
    "id": "org.nativescript.RLVcode",
    "tns-ios": {
    "version": "3.2.0"
    },
    "tns-android": {
    "version": "3.2.0"
    }
    },
    "dependencies": {
    "nativescript-telerik-ui": "^3.1.1",
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "~3.2.0"
    },
    "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11"
    }
    }

    main-page.xml

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

        <StackLayout id="container" >
            <Label text="Below is RLV By code" class="h1 text-center"/>
        </StackLayout>
    </Page>

    main-page.js

    var observable = require("data/observable");
    var ObservableArray = require("data/observable-array").ObservableArray;
    var listview_1 = require("nativescript-telerik-ui/listview");

    var myContent = ["~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png", "~/img/Test.png"];

    var content = new ObservableArray();

    var viewModel = new observable.Observable();
        viewModel.set("mySubsContents", content);

    function getSubsContents() {
        var contentArray = myContent;
            contentArray.forEach(function(element) {
                content.push({mySubsContentArray: element});
            });
    }

    exports.onNavigatingTo = function(args) {
        var page = args.object;

        var container = page.getViewById("container");

        var radList = new listview_1.RadListView();
            radList.height = 2000;
            radList.items = "{{ mySubsContents }}";
            radList.itemTemplate = "<StackLayout><Image src='{{ mySubsContentArray }}' /></StackLayout>";
        var linearLayout = new listview_1.ListViewLinearLayout();
            linearLayout.scrollDirection = "Vertical";
            linearLayout.itemHeight = 123;
            linearLayout.itemWidth = 123;
            radList.listViewLayout = linearLayout;

            container.addChild(radList);
            
        getSubsContents();
        page.bindingContext = viewModel;
    }

    Thanks so much.

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 18 Sep Link to this post

    Hello Stan,

    Thank you for the attached sample code.

    The issue with the attached sample is related to the fact that for the ListView items you should provide an array of elements, where every element is a JSON object, where we set the name of the bound property as a first argument and the image path as a second. For further help, you could review the attached sample code.

    XML
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-telerik-ui-pro/listview" navigatingTo="onNavigatingTo" class="page">
        <Page.actionBar>
            <ActionBar title="RLV By code" icon="" class="action-bar">
            </ActionBar>
        </Page.actionBar>
     
        <StackLayout id="container" >
            <Label text="Below is RLV By code" class="h1 text-center"/>
        </StackLayout>
    </Page>

    TypeScript
    import { EventData } from 'data/observable';
    import { Page } from 'ui/page';
    import {RadListView, ListViewLinearLayout} from "nativescript-telerik-ui-pro/listview"
    import { HelloWorldModel } from './main-view-model';
    import {ObservableArray} from "data/observable-array";
    import {StackLayout} from "ui/layouts/stack-layout"
     
    // Event handler for Page "navigatingTo" event attached in main-page.xml
    export function onNavigatingTo(args: EventData) {
        /*
        This gets a reference this page’s <Page> UI component. You can
        view the API reference of the Page to see what’s available at
        */
        let page = <Page>args.object;
        let myContent = [{mySubsContentArray:"~/icon.png"}, {mySubsContentArray:"~/icon.png"}, {mySubsContentArray:"~/icon.png"}];
     
        var listView  = new RadListView();
        listView.height = 200;
        listView.items = myContent;
        listView.itemTemplate = "<StackLayout><Image src='{{ mySubsContentArray }}' /></StackLayout>";
        var linearLayout = new ListViewLinearLayout();
            linearLayout.scrollDirection = "Vertical";
            linearLayout.itemHeight = 123;
            linearLayout.itemWidth = 123;
        listView.listViewLayout = linearLayout;
        var container:StackLayout = <StackLayout>page.getViewById("container");
        container.addChild(listView);
        page.bindingContext = new HelloWorldModel();
    }

    JavaScript
    var listview_1 = require("nativescript-telerik-ui-pro/listview");
    var main_view_model_1 = require("./main-view-model");
    // Event handler for Page "navigatingTo" event attached in main-page.xml
    function onNavigatingTo(args) {
        /*
        This gets a reference this page’s <Page> UI component. You can
        view the API reference of the Page to see what’s available at
        */
        var page = args.object;
        var myContent = [{ mySubsContentArray: "~/icon.png" }, { mySubsContentArray: "~/icon.png" }, { mySubsContentArray: "~/icon.png" }];
        var listView = new listview_1.RadListView();
        listView.height = 200;
        listView.items = myContent;
        listView.itemTemplate = "<StackLayout><Image src='{{ mySubsContentArray }}' /></StackLayout>";
        var linearLayout = new listview_1.ListViewLinearLayout();
        linearLayout.scrollDirection = "Vertical";
        linearLayout.itemHeight = 123;
        linearLayout.itemWidth = 123;
        listView.listViewLayout = linearLayout;
        var container = page.getViewById("container");
        container.addChild(listView);
        page.bindingContext = new main_view_model_1.HelloWorldModel();
    }
    exports.onNavigatingTo = onNavigatingTo;


    Let me know, whether this helps or if I could assist you further.
    Regards,
    nikolay.tsonev
    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.
  3. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 18 Sep in reply to nikolay.tsonev Link to this post

    Thank you so much for that!

    However, my images are all coming from a folder in the app and the images may change. Please, is there no other way to do this without creating every element as a JSON object?

     

  4. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 19 Sep Link to this post

    Hi Stan,

    Indeed it is possible and to be able to do that you should set the $value for the image source property. Then you will be able to set an array from string values, for example, only path to the images inside the array. I am attaching sample code.
    TypeScript
    import { EventData } from 'data/observable';
    import { Page } from 'ui/page';
    import {RadListView, ListViewLinearLayout} from "nativescript-telerik-ui-pro/listview"
    import { HelloWorldModel } from './main-view-model';
    import {ObservableArray} from "data/observable-array";
    import {StackLayout} from "ui/layouts/stack-layout"
     
    // Event handler for Page "navigatingTo" event attached in main-page.xml
    export function onNavigatingTo(args: EventData) {
     
        let page = <Page>args.object;
     
        let myContent = ["~/icon.png", "~/icon.png", "~/icon.png", "~/icon.png", "~/icon.png"];
        var listView  = new RadListView();
        listView.height = 200;
        listView.items = myContent;
        listView.itemTemplate = "<StackLayout><Image src='{{ $value }}' /></StackLayout>";
        var linearLayout = new ListViewLinearLayout();
            linearLayout.scrollDirection = "Vertical";
            linearLayout.itemHeight = 123;
            linearLayout.itemWidth = 123;
        listView.listViewLayout = linearLayout;
        var container:StackLayout = <StackLayout>page.getViewById("container");
        container.addChild(listView);
        page.bindingContext = new HelloWorldModel();
    }


    JavaScript
    var listview_1 = require("nativescript-telerik-ui-pro/listview");
    var main_view_model_1 = require("./main-view-model");
    // Event handler for Page "navigatingTo" event attached in main-page.xml
    function onNavigatingTo(args) {
        /*
        This gets a reference this page's <Page> UI component. You can
        view the API reference of the Page to see what's available at
        */
        var page = args.object;
     
        var myContent = ["~/icon.png", "~/icon.png", "~/icon.png", "~/icon.png", "~/icon.png"];
        var listView = new listview_1.RadListView();
        listView.height = 200;
        listView.items = myContent;
        listView.itemTemplate = "<StackLayout><Image src='{{ $value }}' /></StackLayout>";
        var linearLayout = new listview_1.ListViewLinearLayout();
        linearLayout.scrollDirection = "Vertical";
        linearLayout.itemHeight = 123;
        linearLayout.itemWidth = 123;
        listView.listViewLayout = linearLayout;
        var container = page.getViewById("container");
        container.addChild(listView);
        page.bindingContext = new main_view_model_1.HelloWorldModel();
    }
    exports.onNavigatingTo = onNavigatingTo;

    Regards,
    nikolay.tsonev
    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.
  5. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 19 Sep in reply to nikolay.tsonev Link to this post

    That worked! Thank so much Nikolay.
Back to Top