How do I make RadListView scroll Horizontally?

Thread is closed for posting
3 posts, 1 answers
  1. Stan
    Stan avatar
    40 posts
    Member since:
    May 2017

    Posted 22 Jul 2017 Link to this post

    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;
    }
  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 24 Jul 2017 Link to this post

    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
    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
    40 posts
    Member since:
    May 2017

    Posted 24 Jul 2017 Link to this post

    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.

Back to Top