ListView - Radlist view not displaying index number beyond 10

Thread is closed for posting
4 posts, 0 answers
  1. Katy
    Katy avatar
    3 posts
    Member since:
    Dec 2016

    Posted 06 Jun 2017 Link to this post

    I have a Radlist view in which list of different items load. We are using a template to determine what details of the item are displayed. This is working fine. Along with the item detail we are also displaying the index number of the item (i.e. index = 0, 1, 2, etc). This index number is displaying correctly upto number 9 in the list, but from number 10 onwards the behaviour is erratic. It displays at times and does not display at other times. the index is console logging correctly.
    Has any one else experienced this? Any ideas on how to solve this?

    html

    <GridLayout class="m-x-5">
            <RadListView id="listView" [items]="detailedTestForView" (setupItemView)="onSetupItemView($event)" selectionBehavior="Press" itemReorder="true" swipeActions="true" (itemReordered)="onItemReordered($event)" multipleSelection=false (itemSwipeProgressStarted)="onSwipeCellStarted($event)"            (itemSwipeProgressChanged)="onCellSwiping($event)" (itemSwipeProgressEnded)="onSwipeCellFinished($event)" (itemLoading)="onItemLoading($event)">
     
                <!--Templates for the items-->
                <template tkListItemTemplate let-item="item" let-i="index">
                    <StackLayout backgroundColor="white">
     
                        <!--Template For Type A -->
                        <StackLayout *ngIf="item.Type ==='TypeA'">
                            <GridLayout rows="auto auto auto auto" columns="auto 20* 5*">
     
                                <!--Index: THIS IS WHERE I HAVE THE PROBLEM -->
                                <GridLayout columns="* auto" row="0" col="0" class="m-l-10" horizontalAlignment="left">
                                    <Label [text]="changeItToString(i)" col="0" class="question-number m-y-5"></Label>
                                    <Label text=". " col="1" class="font-weight-bold m-y-5"></Label>
                                </GridLayout>
     
                                <!--Question Text and answer options-->
                                <GridLayout *ngIf="item['answerOptions'] !== undefined" row="2" col='0' colSpan="3" rows="auto auto auto auto" columns=" 1* 2* 30*">
                                    Label and Images.....
                                </GridLayout>
     
                                <!--Button for Modify-->
                                <GridLayout row="3" col="2" class="btn-tight">
                                    <Button text="Modify" (tap)="ModifyQ(item)" class="btn-modify btn-highlight"></Button>
                                </GridLayout>
     
                            </GridLayout>
                        </StackLayout>
     
                    </StackLayout>
                </template>
     
                <!--For the changes-->
                <GridLayout *tkListItemSwipeTemplate columns="* *" class="listItemSwipeGridLayout" height="100%">
                    <StackLayout id="mark-view" class="markViewStackLayout" col="0" (tap)="onLeftSwipeClick($event)" backgroundColor="#FB7EA1"
                        height="100%" verticalAlignment="center">
                        <Label text="Undo" horizontalAlignment="center" class="question-swipe"></Label>
                    </StackLayout>
                    <StackLayout id="delete-view" class="deleteViewStackLayout" col="1" (tap)="onRightSwipeClick($event)" backgroundColor="#FB7EA1"
                        height="100%" verticalAlignment="center">
                        <Label text="Delete" horizontalAlignment="center" class="question-swipe"></Label>
                    </StackLayout>
                </GridLayout>
     
            </RadListView>
        </GridLayout>

     

    The ts function called in the index code

    public changeItToString(index: number) { return (index + 1).toString(); }

     

    We also tried out the solution given in this link and added this to our ts file:

    onItemLoading(args: any)  {          
     console.log("on Rad list Item loading the index are" + args.itemIndex);  
     if (args.view._subViews[2].nodeName === "StackLayout") {       
              args.view._subViews[2]._subViews[0]._subViews[0]._subViews[0].text = args.itemIndex.toString();   
      } else if (args.view._subViews[1].nodeName === "StackLayout") {
           args.view._subViews[1]._subViews[0]._subViews[0]._subViews[0].text = args.itemIndex.toString();   
      };
    }

     

    Unfortunately, this didn't work

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 06 Jun 2017 Link to this post

    Hello Katy,

    Assuming that the application logic is depending on the Angular index, you can reuse it directly in your binding without the need for an additional method. To assign an additional value (e.g. one so that the index won't start from 0) you can use mathematical expression directly in the binding.
    e.g.
    <ng-template tkListItemTemplate let-item="item" let-i="index">
        <StackLayout orientation="horizontal" class="list-group-item">
            <Label [text]="(i +  1) + ' : '" textWrap="true"></Label>
        </StackLayout>
    </ng-template>

    In the example above the label rendering the index will start iterating from 1 and also and the additional string will be placed on the label. No need to explicitly convert the index value to string as Angular will handle this by itself. Full demonstration application can be found here.

    Note that in my test application you can also use your method that explicitly returns the index - the only change I have made is to remove the casting to string. If you try to use it in the template, it will work as expected.
    e.g.
    <Label [text]="changeItToString(i)" textWrap="true"></Label>

    One last thing to point out - as in your list-view the item reorder is enabled, keep in mind that when an item is reordered the index of that item will change when the list view is refreshed (e.g. on scroll when the recycling is triggered) - the item will be reordered but the index now will be different from the original one. If you need to preserve the index when reordering items, the best approach would be not to depend on Angular based index but to create your own via the view model.

    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. Katy
    Katy avatar
    3 posts
    Member since:
    Dec 2016

    Posted 06 Jun 2017 in reply to Nikolay Iliev Link to this post

    Thanks Nikolay. Will try and revert.
  4. Katy
    Katy avatar
    3 posts
    Member since:
    Dec 2016

    Posted 15 Jun 2017 in reply to Nikolay Iliev Link to this post

    Thanks Nikolay, we were able to solve the issue with your suggestion above.
Back to Top