ListView - Radlist view not displaying index number beyond 10

[Katy]

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

[Nick Iliev]

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

[Katy]

Thanks Nikolay. Will try and revert.

[Katy]

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