RadListView - Get item data object related a UI Component

[Dimitar]

Hi, 

RadListView .- each UI component of the list including a few buttons .  My target is to find when the button inside of the item is clicked to understand which data item is connected to .  If there any property or the current item render in which the button is clicked holding the current data item to which is connected?  

 

[Nikolay Tsonev]

Hello Dimitar,

To be able to find which item contains the button, which tap event is fired, you could setup a unique id for an every component, which contains the item number in its string. For example:
XML

<Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/listview" xmlns="http://www.nativescript.org/tns.xsd">
    <lv:RadListView items="{{ dataItems }}" >
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label fontSize="20" text="{{ itemName }}"/>
                <Label fontSize="14" text="{{ itemDescription }}"/>
                <Button id="{{buttonId}}" text="First button" tap="onTap" />
                <Button id="{{buttonId2}}" text="First button" tap="onTap2" />
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</Page>

TypeScript

import { ObservableArray } from "tns-core-modules/data/observable-array";
import { Observable } from "tns-core-modules/data/observable";
export function onPageLoaded(args){
    var page = args.object;
    var array = new ObservableArray([
        {itemName:"itemName0", itemDescription:"itemDescription0", buttonId:"bt0", buttonId2:"btn0"},
        {itemName:"itemName1", itemDescription:"itemDescription1", buttonId:"bt1", buttonId2:"btn1"},
        {itemName:"itemName2", itemDescription:"itemDescription2", buttonId:"bt2", buttonId2:"btn2"},
        {itemName:"itemName3", itemDescription:"itemDescription3", buttonId:"bt3", buttonId2:"btn3"},
        {itemName:"itemName4", itemDescription:"itemDescription4", buttonId:"bt4", buttonId2:"btn4"}
    ])
    page.bindingContext = {"dataItems":array}
}
// << listview-first-look-context

export function onTap(args){
console.log("onbutton tap");
console.log(args.object.get("id"));
}
export function onTap2(args){
console.log("onbutton tap2");
console.log(args.object.get("id"));
}

In the example when the tapEvent is triggered we get the id value with the help of the get method. 

Let me know whether this help or if I could assist you further.

Regards,
nikolay.tsonev
Progress Telerik

[Dimitar]

As I understand on next step in order to extract the item data , I should loop the whole array with criteria equal to the ButtonId ?

[Nikolay Tsonev]

Hi Dimitar,

I could suggest getting only the number value from the button id string, which corresponds to the current index of the item while replacing all other symbols and to get the specific item from the Observablearray by using () method. For example:

export function onTap(args){
var arg =args.object.get("id").replace( /^\D+/g, '');

array.getItem(parseInt(arg))
}

In this case, there will be no need to loop the whole array.

Regards,
nikolay.tsonev
Progress Telerik

[Dimitar]

Yes , you are right , but this means I should always add to the array list a column with id name with index and in case there a changes an receiving a new data from the server to update and be sure that this id name is correct. But as I understand there is no way to take the data item related with the current item render directly , so  I suppose this is the only way . 

Thank you. 

[Nikolay Tsonev]

Hello Dimitar,

Indeed there is another option to access the current item, whose button tap event has been fired. The binding context has been inherited by the child's components and while using this functionality you could access the item by using the instance of the current object. In the below-attached example, it is shown how you could access the item and to read itemName. 

XML

<Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/listview" xmlns="http://www.nativescript.org/tns.xsd">
    <lv:RadListView items="{{ dataItems }}" >
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label fontSize="20" text="{{ itemName }}"/>
                <Label fontSize="14" text="{{ itemDescription }}"/>
                <Button id="{{buttonId}}" text="First button" tap="onTap" />
                <Button id="{{buttonId2}}" text="First button" tap="onTap2" />
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</Page>

TypeScript

import { ObservableArray } from "tns-core-modules/data/observable-array";
import { Observable } from "tns-core-modules/data/observable";
import {Button} from "ui/button"
export function onPageLoaded(args){
    var page = args.object;
    var array = new ObservableArray([
        {itemName:"itemName0", itemDescription:"itemDescription0", buttonId:"0", buttonId2:"0"},
        {itemName:"itemName1", itemDescription:"itemDescription1", buttonId:"1", buttonId2:"1"},
        {itemName:"itemName2", itemDescription:"itemDescription2", buttonId:"2", buttonId2:"2"},
        {itemName:"itemName3", itemDescription:"itemDescription3", buttonId:"3", buttonId2:"3"},
        {itemName:"itemName4", itemDescription:"itemDescription4", buttonId:"4", buttonId2:"4"}
    ])
    page.bindingContext = {"dataItems":array}
}
// << listview-first-look-context

export function onTap(args){
    console.log("tap");
    var button:Button = <Button>args.object;
    console.log(button.bindingContext.itemName)

}
export function onTap2(args){
    console.log("tap2");
    var button:Button = <Button>args.object;
    console.log(button.bindingContext.itemName)
}

Regards,
nikolay.tsonev
Progress Telerik