ListView - Radlist view not displaying index number beyond 10


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?


<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>

                            <!--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.....

                            <!--Button for Modify-->
                            <GridLayout row="3" col="2" class="btn-tight">
                                <Button text="Modify" (tap)="ModifyQ(item)" class="btn-modify btn-highlight"></Button>



            <!--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 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>


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();    

This didnt work.


We finally solved it by creating a local variable call order which we assigned to the value of index and then binding the order variable to the view.