how can l get event that item component tap ?

5 posts, 0 answers
  1. Scleo
    Scleo avatar
    5 posts
    Member since:
    Sep 2016

    Posted 15 Oct Link to this post

    I am in the list view is very convenient, but I don't know how to pour the items,Did anyone give me a method?

    my ex: item had three component ,one label & two button ,i want get the button event

  2. Scleo
    Scleo avatar
    5 posts
    Member since:
    Sep 2016

    Posted 15 Oct Link to this post

    follow my html code 

    <GridLayout dock="right">
        <RadListView [items]="detailList" (itemSelected)="onItemSelected($event)" exampleTitle toggleNavButton>
            <template tkListItemTemplate class="list-detail" let-item="item">
                <GridLayout columns=" *,*,*" rows="auto,auto,auto">
                    <TextField colSpan="3" row='0' *ngIf="option==='modify' &&hasChild&& item.list" [(ngModel)]="currentItem.name"></TextField>
                    <Button *ngIf="option==='modify' &&hasChild&& item.list" col='1' row='1' text="save" (tap)="modifyItem(currentItem)"></Button>
                    <Button *ngIf="option==='modify' &&hasChild&& item.list" col='2' row='1' text="cancel" (tap)="modifyQuit(item)"></Button>
                </GridLayout>
            </template>
        </RadListView>
    </GridLayout>

     

    thanks a lot ~

  3. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    95 posts

    Posted 17 Oct Link to this post

    Hello Scleo Lei,

    I am not quite sure what are you trying to achieve when you say "how to pour the items".
    Are you trying to load your items in your list-view!? If so, you can do it by providing your data-items in your component  constructor or ngOnInit method (if you have implemented OnInit)
    Example for the basic pouring of items into list-view can be found here (with vanilla list-view but the principle is the same for RadListView) or  these examples here (for RadListView).

    As for the second question (how to get the button event) you can also do it via your code behind in the component. For example take a look at the button in this sample.
    <Button row="2" text="Change Color" (tap)="changeColor(hexField.text)"></Button>
    On tap, it will trigger the method changeColor which takes an argument (in this specific case the argument is the text passed from TextField). Of course, the argument is not mandatory - it depends on your logic.
    Now let's take a look at the method itself.
     
    public changeColor(value: string) {
        if (value[0] !== '#') {
            value = "#" + value;
        }
        var isValidHexColor = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
     
        if (isValidHexColor) {
            var rgbColors = this.convertHex(value);
            this.redValue = rgbColors[0];
            this.greenValue = rgbColors[1];
            this.blueValue = rgbColors[2];
        } else {
            console.log("Invalid hex value entered");
        }
    }

    The method is declared inside your AppComponent class and when triggered with taking the passed value and execute the logic that depends on it. The whole example can be found here. In the same application, you can find a lot more examples written in NativeScript + Angular 2.

    I hope that information will answer your questions - please let us know if you need further assistance.

    Regards,
    Author nickname
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Scleo
    Scleo avatar
    5 posts
    Member since:
    Sep 2016

    Posted 19 Oct in reply to Nikolay Iliev Link to this post

    Hi Nikolay,
         the item is show correct, but use button the tap event didn't work (ios platform,I guess may be the button with the listview an event conflict ) ,so i changed  button to use label ,then the tap event be ok.
    and thank your sample,studied。
  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    95 posts

    Posted 19 Oct Link to this post

    Hi Scleo Lei,

    Indeed, the button component is a special case which has its own tap handler and event (which may cause this event conflict).
    So your workaround with using a Label is a very good solution (you can also use any other layout element to trigger the tap e.g. Grid). Thank you for reporting back!

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top