This is a migrated thread and some comments may be shown as answers.

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

4 Answers 102 Views
ListView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Stan
Top achievements
Rank 1
Stan asked on 17 Sep 2017, 08:41 PM

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.

4 Answers, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 18 Sep 2017, 12:17 PM
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.
0
Stan
Top achievements
Rank 1
answered on 18 Sep 2017, 10:58 PM

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?

 

0
Accepted
Nikolay Tsonev
Telerik team
answered on 19 Sep 2017, 06:23 AM
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,  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.
0
Stan
Top achievements
Rank 1
answered on 19 Sep 2017, 10:58 PM
That worked! Thank so much Nikolay.
Tags
ListView
Asked by
Stan
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Stan
Top achievements
Rank 1
Share this question
or