Creating radListView in JS code

[Tomás]

Can I create listviews using JS?

I think that it should be something like these:

var radListView = new radListViewModule.RadListView();

radListView.setItems(items);

...

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

container.addChild(radListView);

...

 

Is it possible?

Thanks!

[Nick Iliev]

Hello Tomas,

Yes, you can create RadListView programmatically but you should directly use the property items to set the source items. 
e.g. (javaScript)

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

var radList = new listview_1.RadListView();
radList.items = [1, 2, 3, 4, 5, 6.6];
radList.selectionBehavior = "Press";
radList.itemTemplate = "<Label text='{{ $value }}' />";

container.addChild(radList);

Sample TypeScript project demonstrating the above scenario can be found here. After building the project it will also generate respective JavaScript transpiled files.


Regards,
Nikolay Iliev
Progress Telerik

[Tomás]

Hi Nikolay,

thank you for your answer, it works!

But i want to set the scrollDirection to Horizontal on JS and i dont know how.

And how can i set an itemTap function on JS?

Is there any doc that explain these methods on JS?

 

Thanks again,

Tomas

[Nick Iliev]

Hi Tomas,

To set the scroll direction you will need to explicitly create a layout for your list view using a listViewLayout property of RadListView. Based on the previous example here is how to achieve this programmatically.

var linearLayout = new listview_1.ListViewLinearLayout();
linearLayout.scrollDirection = "Horizontal";
radList.listViewLayout = linearLayout;

I have updated the demo application to demonstrate the technique shown above. Keep in mind that although the application is written in TypeScript you can still execute build command and one of the first things that will happen is that the TypeScript will be transpiled to JavaScript and for each TS file respective JS file will be automatically created. So you can get the pure JavaScript code from each TypeScript based project.

Regards,
Nikolay Iliev
Progress Telerik

[Tomás]

Thank you Nikolay, it works!

But i cant set the itemTap function. Is it possible?

[Nick Iliev]

Hi Tomas,

The itemTap event can be handled just as you would do with any other event listener.
In typescript using the keyword on is allowing you to craete your own callbacks for the different event listeners.

e.g.

radList.on("itemTap". (args) -> {
   console.log("Item tapped");;

   /// args is of type ListViewEventData
    console.log(args.itemIndex);
    console.log(args.eventData);
    console.log(args.object);
])

Regards,
Nikolay Iliev
Progress Telerik

[Stan]

Hi Nikolay,

I am not having any success with running your sample app from:
https://github.com/NickIliev/NativeScript-Issues-2017/tree/master/others/t_1116097

I'm not using RadListView PRO but I have re-created your sample app. I get no errors but an empty screen. Please see attached pic.

What am I missing?

Here are my code files I've copied from your sample files:

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.t1116097",
    "tns-android": {
      "version": "3.0.1"
    },
    "tns-ios": {
      "version": "3.2.0"
    }
  },
  "dependencies": {
    "nativescript-telerik-ui": "^2.0.1",
    "nativescript-theme-core": "~1.0.2",
    "tns-core-modules": "~3.0.0"
  },
  "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*"
  }
}

main-page.xml

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

    <StackLayout class="p-20" id="container">
        <Label text="Tap the button" class="h1 text-center"/>
    </StackLayout>
</Page>

main-page.js
var main_view_model_1 = require("./main-view-model");
var listview_1 = require("nativescript-telerik-ui/listview");
function navigatingTo(args) {
    var page = args.object;
    
    var container = page.getViewById("container");
    var radList = new listview_1.RadListView();
        radList.items = [1, 2, 3, 4, 5, 6.6];
        radList.selectionBehavior = "Press";
        radList.itemTemplate = "<label text='{{ $value }}' />";
    var linearLayout = new listview_1.ListViewLinearLayout();
        linearLayout.scrollDirection = "Horizontal";
    
        radList.listViewLayout = linearLayout;
        container.addChild(radList);
    
    page.bindingContext = new main_view_model_1.HelloWorldModel();
}
exports.navigatingTo = navigatingTo;

main-view-model.js

var observable_1 = require("data/observable");

var HelloWorldModel = (function (_super) {
    __extends(HelloWorldModel, _super);
    function HelloWorldModel() {
        var _this = _super.call(this) || this;
        // Initialize default values.
        _this._counter = 42;
        _this.updateMessage();
        _this.items = [1, 2, 3, 4, 5];
        return _this;
    }
    Object.defineProperty(HelloWorldModel.prototype, "message", {
        get: function () {
            return this._message;
        },
        set: function (value) {
            if (this._message !== value) {
                this._message = value;
                this.notifyPropertyChange('message', value);
            }
        },
        enumerable: true,
        configurable: true
    });
    HelloWorldModel.prototype.onTap = function () {
        this._counter--;
        this.updateMessage();
    };
    HelloWorldModel.prototype.updateMessage = function () {
        if (this._counter <= 0) {
            this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!';
        }
        else {
            this.message = this._counter + " taps left";
        }
    };
    return HelloWorldModel;
}(observable_1.Observable));
exports.HelloWorldModel = HelloWorldModel;

Thanks so much...

[Deyan]

Hello Stan,

Can you try changing this line:

 "<label text='{{ $value }}' />"

to:

 "<Label text='{{ $value }}' />"

and see if it helps?

Regards,
Deyan
Progress Telerik

[Stan]

Sorry to let you know, I made the change on that line but I am still getting the same screen.

[Nick Iliev]

Hello Tomas,

For your convenience, I have created JavaScript version on how to create RadListView via code behind.
You can find the demo application here. 

There are few things that have changed from the original code:
- I have updated the version of nativescript-telerik-ui-pro so it would be compatible with the latest tns-core-modules plugin (the NativeScript modules).
- There is one additional step needed to be taken on iOS. The RadListView needs its height to be set (or to be nested in a layout with predefined height size).This is required for iOS otherwise the RadListView will not occupy any space and won't be visible.

Here is the needed JavaScript code with nativescript--telerik-ui-pro v.3.1.1

var listview_1 = require("nativescript-telerik-ui-pro/listview");

function navigatingTo(args) {
    var page = args.object;

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

    var radList = new listview_1.RadListView();
    radList.height = 300;
    radList.items = [1, 2, 3, 4, 5, 6.6, 888];
    radList.itemTemplate = "<StackLayout><Label text='{{ $value }}' /></StackLayout>";
    var linearLayout = new listview_1.ListViewLinearLayout();
    linearLayout.scrollDirection = "Vertical";
    radList.listViewLayout = linearLayout;

    container.addChild(radList);
}
exports.navigatingTo = navigatingTo;

Regards,
Nikolay Iliev
Progress Telerik

[Stan]

Thank you so much! That worked.

[Stan]

radList.height = 300;

Setting the height works (iOS), but how do I set it to the balance of that screen?

I have items that are linearLayout.itemHeight = 100;

When I set radList.height = 2000; it seems to work but is that the correct way to do this? Please let me know if there are consequences doing this. 

By the way, I'm getting this: CONSOLE LOG file:///app/tns_modules/nativescript-globalevents/globalevents.js:98:16: Handler onNavigatingTo navigatingTo - I think someone left this diagnostic in the latest release code.

Thanks so much.

 

[Nick Iliev]

Hi Stan,

Yes, indeed the only way to initialize a ListView or RadListView on iOS to assign some pre-defined size.
The only drawback would be that you will have to create your UI based on some hardcoded dimensions for the list - apart from that there are no consequences of any kind.

Regarding the console logs in nativescript-globalevents plugin

The plugin is made by a community member. I have created this issue so that the author of the plugin can refactor its code and remove the obsolete logs from its source.

Regards,
Nikolay Iliev
Progress Telerik

[Stan]

Thank you so much Nikolay!

Would it be possible for you to elaborate on the itemTap event you mentioned above? or maybe put in your new sample app at:  https://github.com/NickIliev/NativeScript-Issues-2017/tree/master/others/t_1116097_js

Thanks again

[Nikolay Tsonev]

Hello Stan,
Indeed you could handle itemTap event while using on method inside pure NativeScript JavaScript project. For example:
XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-telerik-ui-pro/listview"  navigatingTo="navigatingTo" class="page">
    <StackLayout class="p-20" id="container" height="300">
        <Label text="Tap the button" class="h1 text-center"/>
    </StackLayout>
</Page>

JavaScript

var listview_1 = require("nativescript-telerik-ui-pro/listview");

function navigatingTo(args) {
    var page = args.object;

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

    var radList = new listview_1.RadListView();
    radList.height = 300;
    radList.items = [1, 2, 3, 4, 5, 6.6, 888];
    radList.itemTemplate = "<StackLayout><Label text='{{ $value }}' /></StackLayout>";
    var linearLayout = new listview_1.ListViewLinearLayout();
    linearLayout.scrollDirection = "Vertical";
    radList.listViewLayout = linearLayout;
    radList.on("itemTap", function (args){
        console.log("Item tapped");

          // args is of type ListViewEventData
           console.log(args.index);
           console.log(args.eventData);
           console.log(args.object);
    })
    container.addChild(radList);
}
exports.navigatingTo = navigatingTo;

Hope this helps.

Regards,
nikolay.tsonev
Progress Telerik

[Stan]

That worked great. Thank you Nikolay!