Can not select an element by id inside the collectionView

[Whip]

Which platform(s) does your issue occur on?

• Android 11, real device (Samsung phone)

Please, provide the following version numbers that your issue occurs with:

• CLI: 7.1.2
• Cross-platform modules: 7.1.4
• Runtime(s): 7.0.1
• Plugin(s):

"dependencies": {
    "@nativescript-community/ui-collectionview": "^4.0.24",
    "@nativescript/core": "^7.1.4",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/theme": "^3.0.1",
    "@nstudio/nativescript-cardview": "^2.0.1",
    "@nstudio/nativescript-checkbox": "^2.0.4",
    "@nstudio/nativescript-loading-indicator": "^4.0.0",
    "@triniwiz/nativescript-image-cache-it": "^7.0.5",
    "@triniwiz/nativescript-image-zoom": "^4.0.0",
    "@triniwiz/nativescript-toasty": "^4.1.1",
    "nativescript-carousel": "^7.0.1",
    "nativescript-exit": "1.0.1",
    "nativescript-gif": "^5.0.0",
    "nativescript-material-icons": "^1.0.3",
    "nativescript-permissions": "^1.3.11",
    "nativescript-phone": "^2.0.0",
    "nativescript-photoviewer": "^2.1.5",
    "nativescript-ui-dataform": "^7.0.4",
    "nativescript-ui-listview": "^9.1.0",
    "nativescript-ui-sidedrawer": "^9.0.3",
    "nativescript-youtubeplayer": "^3.0.1"
  },
  "devDependencies": {
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.1.1",
    "@nativescript/webpack": "~4.0.0",
    "sass": "1.26.7"
  },

Please, tell us how to recreate the issue in as much detail as possible.

<gv:CollectionView items="{{ items }}" colWidth="50%" rowHeight="167" itemTap="onItemSelected">
    <gv:CollectionView.itemTemplate>
         <Label text="{{ name }}" id="{{ 'check'+index }}" verticalAlignment="center"/>
    </gv:CollectionView.itemTemplate>
</gv:CollectionView>

exports.onItemSelected = function(args){
   const selectedItem = page.getViewById('check'+args.index);
   console.log(selectedItem); // returns undefined
}

I'm trying to replace Radlistview with this plugin but I can't to this so I can't use it as of yet. Am I doing something wrong or is it a bug?

[farfromrefug]

I don't even know why it works in rlv. it should not. there is a big chance that view might not be "findable". instead you need to use getViewForItemAtIndex

[Whip]

I can't find any documentation on this. Can you post a simple example?

[farfromrefug]

you can look at the typings. yes the doc might not be full but the typings are always up to date

[Whip]

Okay I looked through your code and I see the function is used in there but I can't seem to get it to work. I tried

exports.onItemSelected = function(args){
   const selectedItem = getViewForItemAtIndex(args.index);
   const selectedItem = this.getViewForItemAtIndex(args.index);
}

Both don't work. I did spot that there's a view returned in the function, so I tried

console.log(args.view);

it returns the GridLayout. My code is a bit complicated than I posted above as an example. Its a GridLayout containing several items, one of those has the id on it which I need. I feel like I'm missing something basic but I'm not an expert on this. Could you post a basic example? I would highly appreciate it.

[farfromrefug]

@Whip you re almost there. Now that you have the GridLayout which is the cell holder, simply use the getViewById you want on this GridLayout then you ll get your view

[Whip]

Perfect. Thanks for your guidance.