This is a migrated thread and some comments may be shown as answers.

Showing List View In Repeater

3 Answers 151 Views
ListView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
suralal
Top achievements
Rank 1
suralal asked on 24 Sep 2016, 11:42 AM

 

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>

3 Answers, 1 is accepted

Sort by
0
Nick Iliev
Telerik team
answered on 26 Sep 2016, 07:26 AM
Hello Suralai,

solution is pretty close to a working one - all you 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 component for each of your "names" object.
Here is the working code that demonstrates how to create nested with .

<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
0
Serhii
Top achievements
Rank 1
answered on 03 Feb 2017, 06:41 PM
Hi. What about itemTap event for Repeater?
0
Nick Iliev
Telerik team
answered on 06 Feb 2017, 07:21 AM
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.
Tags
ListView
Asked by
suralal
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Serhii
Top achievements
Rank 1
Share this question
or