Showing List View In Repeater

4 posts, 0 answers
  1. suralal
    suralal avatar
    18 posts
    Member since:
    Mar 2016

    Posted 24 Sep 2016 Link to this post

     

    I am having my Json structure which is in the given below format.

    I want the data to be populated in 

    OCTOBER

        Mahanavami

        Moharram

    DECEMBER

        Nabi Dinam

     

    So i had tried with a repeater inside a repeater which did not work out .So I have added a List view inside a repeater

    it is showing error " Binding error while setting property items of Repeater".

     

    Js:

     var schoolCalender = [

        {
          "name": "OCTOBER",
          "names": [
            {
              "date": "10-10-2016",
              "dayType": "Full Holiday",
              "desc": "Mahanavami",
              "monthName": "OCTOBER",
              "day": 10
            },
            {
              "date": "11-10-2016",
              "dayType": "Working Day",
              "desc": "",
              "monthName": "OCTOBER",
              "day": 11
            },
            {
              "date": "12-10-2016",
              "dayType": "Full Holiday",
              "desc": "Moharram",
              "monthName": "OCTOBER",
              "day": 12
            }
          ]
        },
        {
          "name": "DECEMBER",
          "names": [
            {
              "date": "13-12-2016",
              "dayType": "Partial Holiday",
              "desc": "Nabi Dinam",
              "monthName": "DECEMBER",
              "day": 13
            }
          ]
        }
      ],

      page.bindingContext = {myItems: schoolCalender};

    Xml:

            <StackLayout orientation="vertical" height="auto">
              <Repeater items="{{ myItems }}" >
                <Repeater.itemsLayout>
                  <WrapLayout />
                </Repeater.itemsLayout>
                <Repeater.itemTemplate>
                    <StackLayout>
                      <Label  cssClass="sMood" text="{{ name }}"/>
                    </StackLayout>
                        <ListView items="{{myItems.names }}" height="400">
                          <ListView.itemTemplate>
                            <WrapLayout orientation="vertical" style="background-color:#eee;padding-top:15;">
                                <StackLayout orientation="horizontal" cssClass="containerCalender">
                                  <Label text="{{ day}}" cssClass="dateBox" />
                                  <Label text="{{ desc }}" cssClass="eventText" />
                                </StackLayout>
                            </WrapLayout>
                          </ListView.itemTemplate>
                        </ListView>
              </StackLayout>

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    262 posts

    Posted 26 Sep 2016 Link to this post

    Hello Suralai,

    You solution is pretty close to a working one - all you ahave to do is to use $value in your nested repeater.
    I have reproduced your scenario with one list-view as the parent and repeater as the ensted component for each of your "names" object.
    Here is the working code that demonstrates how to create nested list-view with prepeater.

    <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
            <ListView id="listview" items="{{ myItems }}" itemTap="listViewItemTap">
                <ListView.itemTemplate>
                    <StackLayout>
                      <Label text="{{ name }}" textWrap="true" />
                       
                      <Repeater items="{{ names }}" >
                        <Repeater.itemsLayout>
                          <WrapLayout />
                        </Repeater.itemsLayout>
                        <Repeater.itemTemplate>
     
                            <StackLayout>
                                <Label text="{{ $value.date }}" margin="10" />
                                <Label text="{{ $value.dayType }}" margin="10" />
                                <Label text="{{ $value.desc }}" margin="10" textWrap="true" />
                            </StackLayout>
                           
                        </Repeater.itemTemplate>
                      </Repeater>
                    </StackLayout>
                </ListView.itemTemplate>
            </ListView>
    </Page>
    Notice here that for each "names" object I am getting a reference to its internal items with $value

    page.ts
    import { EventData } from "data/observable";
    import { ObservableArray } from "data/observable-array";
    import { Page } from "ui/page";
     
    var observable_array_1 = require("data/observable-array");
    export function onPageLoaded(args: EventData) {
        var page = <Page>args.object;
         
        var array = new ObservableArray(schoolCalender);
        var listView = page.getViewById('listview');
     
        page.bindingContext = { myItems: array };
     
    }
     
    export function listViewItemTap(args) {
        var itemIndex = args.index;
        var object = args.object;
        console.log(itemIndex);
    }
     
    export function test(args) {
        console.log(args.object.get('id'));
    }

    In the typescript page schoolCalender is exactly the same as in your case.




    Regards,
    Nikolay Iliev
     by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Serhii
    Serhii avatar
    1 posts
    Member since:
    Jan 2017

    Posted 03 Feb in reply to Nikolay Iliev Link to this post

    Hi. What about itemTap event for Repeater?
  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    262 posts

    Posted 06 Feb Link to this post

    Hello Suralai,

    The Repeater module does not have an itemTap method implemented.
    However, one can be easily created with some code-behind logic and use the view-model.
    TO achieve that assign a property id for each of your repeating items and enumerate it in ascending order.
    The through the binding context you can have access to the unique id and know on which item the user has tapped.

    For example:
    page.xml
    <Page>
       <Repeater items="{{ myItems }}">
         <Repeater.itemsLayout>
            <WrapLayout />
         </Repeater.itemsLayout>
         <Repeater.itemTemplate>
             <StackLayout tap="myTapFunction" >
                 <Label text="{{ name }}" margin="10" />
             </StackLayout>
         </Repeater.itemTemplate>
       </Repeater>
    </Page>

    page.ts
    var view = require("ui/core/view");
    function pageLoaded(args) {
        var page = args.object;
        page.bindingContext = { myItems: [{ name: "Name1", id:1 }, { name: "Name2", id:2 }, { name: "Name3", id:3 }] };
    }
    exports.pageLoaded = pageLoaded;
     
    function myTapFunction(args) {
        var item = args.view.bindingContext;
        console.log('item.id', item.get('id')); // tapped on item with id X
    }
    exports.myTapFunction = myTapFunction;


    Regards,
    Author nickname
    Telerik by Progress
    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.
Back to Top