Showing List View In Repeater

2 posts, 0 answers
  1. suralal
    suralal avatar
    15 posts
    Member since:
    Mar 2016

    Posted 24 Sep 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
    92 posts

    Posted 26 Sep 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
Back to Top