RadListView - Get item data object related a UI Component

Thread is closed for posting
6 posts, 0 answers
  1. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 30 Jul 2017 Link to this post

    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?  

     

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 31 Jul 2017 Link to this post

    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
    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. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 31 Jul 2017 in reply to Nikolay Tsonev Link to this post

    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 ?
  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 31 Jul 2017 Link to this post

    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 getItem() 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
    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.
  5. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 01 Aug 2017 in reply to Nikolay Tsonev Link to this post

    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. 

  6. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 01 Aug 2017 Link to this post

    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
    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.
Back to Top