Creating radListView in JS code

16 posts, 2 answers
  1. Tomás
    Tomás avatar
    3 posts
    Member since:
    Jun 2017

    Posted 23 Jun Link to this post

    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!

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 26 Jun Link to this post

    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
    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. Tomás
    Tomás avatar
    3 posts
    Member since:
    Jun 2017

    Posted 26 Jun Link to this post

    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

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 27 Jun Link to this post

    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 tns 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
    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. Tomás
    Tomás avatar
    3 posts
    Member since:
    Jun 2017

    Posted 27 Jun Link to this post

    Thank you Nikolay, it works!

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

  6. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 27 Jun Link to this post

    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
    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.
  7. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 13 Sep Link to this post

    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...

  8. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 14 Sep Link to this post

    Hello Stan,

    Can you try changing this line:

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

    to:

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

    and see if it helps?

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

    Posted 14 Sep in reply to Deyan Link to this post

    Sorry to let you know, I made the change on that line but I am still getting the same screen.
  10. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 15 Sep Link to this post

    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
    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.
  11. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 16 Sep in reply to Nikolay Iliev Link to this post

    Thank you so much! That worked.
  12. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 16 Sep Link to this post

    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.

     

  13. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    295 posts

    Posted 18 Sep Link to this post

    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
    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.
  14. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

    Posted 18 Sep in reply to Nikolay Iliev Link to this post

    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

  15. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 19 Sep Link to this post

    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
    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.
  16. Stan
    Stan avatar
    38 posts
    Member since:
    May 2017

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

    That worked great. Thank you Nikolay!
Back to Top