How do I make RadListView scroll Horizontally?

[Stan]

It's scrolling vertically, and differently in iOS than in Android. Please see jpeg(s).

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

main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-telerik-ui/listview" navigatingTo="onNavigatingTo">
    <ActionBar title="Rlv Horizontal Scroll"/>
        <lv:RadListView items="{{ myItems }}" selectionBehavior="Press" itemSelected="{{onItemSelected}}" row="1">
             <lv:RadListView.listViewLayout>
                <lv:ListViewLinearLayout scrollDirection="horizontal" itemHeight="100" itemWidth="130"/>
            </lv:RadListView.listViewLayout>
            <lv:RadListView.itemTemplate>
                <StackLayout orientation="horizontal">
                    <!-- Need loadMode="async" for Android or get OutOfMemory error  -->
                    <Image src="{{ myPaths }}" decodeWidth="400" decodeHeight="400" loadMode="async" height="100" width="130" />
                </StackLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
</Page>

main-page.js
var fs = require("file-system");
var observable = require("data/observable");
var ObservableArray = require("data/observable-array").ObservableArray;

var myImages = new ObservableArray();
var viewModel = new observable.Observable();
    viewModel.set("myItems", myImages);

function readFiles() {
    var documents = fs.knownFolders.currentApp();
    var myFolder = documents.getFolder("Wines");
    var array = myFolder.getEntitiesSync();
    array.forEach(function (element) {
        myImages.push({myPaths: element._path});
    });
}

exports.onNavigatingTo = function(args) {
    readFiles();
    var page = args.object;
    page.bindingContext = viewModel;
}

[Nikolay Tsonev]

Hello,
Thank you for the attached code snippets and images, which shows the issue.

We tested the case on our side while using the latest version of UI for Nativescript plugin 3.0.4, however, the ListView was rendered properly on both Android and iOS and we were unable to find any difference.

Could you update the plugin's version to latest available one and to rebuild your project. Bear in mind to remove node_modules and platforms folders, before rebuilding.

If the problem still exists please review the attached sample project and make the needed changes, which will allow us to recreate this scenario.

Also for further help, you could review the horizontal scrollDirection example here.


Regards,
nikolay.tsonev
Progress Telerik

[Stan]

Thanks so much for your sample project. 

Updating to the latest Nativescript plugin 3.0.4 did not help.
After much scrutiny I found that it was the word "horizontal" in scrollDirection="horizontal" it needed to be a capital "H". Now it works.

Thanks again.