Access the properties of a tag

Thread is closed for posting
4 posts, 0 answers
  1. Gustavo
    Gustavo avatar
    12 posts
    Member since:
    Jun 2014

    Posted 07 Feb Link to this post

    Hi everyone, I would like to help.

    I have a CardView object and am wanting to traverse it to get into a particular tag to make a treatment.

    CardView html basically has a structure like this:

    <CardView>
         <GridLayout>
             <StackLayout>
                 ....
             <StackLayout>
             <StackLayout>
                 .....
             <StackLayout>
             <StackLayout>
                 .....
             <StackLayout>
             <GridLayout>
                 <StackLayout>
                     <Button class = "button-dark"> </ Button>
                 <StackLayout>
             </ GridLayout>
         </ GridLayout>
    </ CardView>

    Where I want to access the button tag to put the property: isEnabled = "true"
  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 08 Feb Link to this post

    Hello Gustavo,

    For the described scenario I would suggest using data-binding functionality in Angular and to bind isEnabled property. The binding allows you to change the property value via the code behind. For example:

    HTML
    <CardView>
         <GridLayout>
             <StackLayout>
                 ....
             <StackLayout>
             <StackLayout>
                 .....
             <StackLayout>
             <StackLayout>
                 .....
             <StackLayout>
             <GridLayout>
                 <StackLayout>
                     <Button [isEnabled]="isBtnEnabled" class = "button-dark"> </ Button>
                 <StackLayout>
             </ GridLayout>
         </ GridLayout>
    </ CardView>
    TypeScript
    @Component({
        selector: "Home",
        moduleId: module.id,
        templateUrl: "./home.component.html",
        styleUrls:["../tabs.component.scss"]
    })
    export class HomeComponent implements OnInit {
    public isBtnEnabled = true;
    }

    I also would like to let you know that we will soon close UI for NativeScript Forum section in Telerik Admin in favour of NativeScript forum.
    Since UI for NativeScript is free for using we consider that the best place for discussions and questions will be the official NativeScript forum.
    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. Gustavo
    Gustavo avatar
    12 posts
    Member since:
    Jun 2014

    Posted 08 Feb in reply to Nikolay Tsonev Link to this post

    Thanks ikolay, but I have more samples of the problem.

    I can animate the card by having it open and close according to the card that is clicked.

    In the html layout of the card that has the structure I passed, there is a button on the card that is disabled and I want to enable it as I enter the open function.

     

    In my view, I have to access the CardView object and enter inside its properties for isEnabled = "true" arrow.

    _setupEvents() {
        let scrollView: ScrollView = this._scrollView.nativeElement;
        this._children.forEach((child: LayoutBase, mainIndex: number) => {
            if (child) {
                child.addEventListener('tap', () => {
                    let indexChild = this._children.indexOf(child);
                    this._children.forEach(
                        (
                            childIterator: LayoutBase,
                            index: number,
                            array: View[]
                        ) => {
                            //Here I have the result of the three view cards.
                            console.log('childIterator: ' + childIterator); // result: childIterator: CardView(192), childIterator: CardView(236), childIterator: CardView(280)
     
                            if (index < indexChild) {
                                this._childrenState[index] = false;
                            }
     
                            if (index > indexChild) {
                                if (this._childrenState[indexChild]) {
                                    //The CardView object enters the animation function
                                    this._open(childIterator);
                                } else {
                                    //The CardView object enters the animation function
                                    this._close(childIterator);
                                }
                                this._childrenState[index] = false;
                            } else {
                                this._close(childIterator);
                            }
                            if (index === indexChild) {
                                if (indexChild === array.length) {
                                    if (this._childrenState[indexChild]) {
                                        scrollView.scrollToVerticalOffset(
                                            0,
                                            true
                                        );
                                    } else {
                                        let scrollTo: number = index * 50 - 50;
                                        scrollView.scrollToVerticalOffset(
                                            scrollTo,
                                            true
                                        );
                                    }
                                    this._childrenState[indexChild] = !this
                                        ._childrenState[indexChild];
                                } else {
                                    let scrollTo: number = index * 50 - 50;
                                    scrollView.scrollToVerticalOffset(
                                        scrollTo,
                                        true
                                    );
                                    this._childrenState[indexChild] = !this
                                        ._childrenState[indexChild];
                                }
                            }
                        }
                    );
                });
            }
        });
    }
     
    //Open the card
    _open(view: View) {
        console.log(view); //result: CardView
     
         
        view
            .animate({
                translate: { x: 0, y: 354 }
            })
            .then(() => {
                // console.log('_open --');
            });
    }
     
    //Closes the card
    _close(view: View) {
        view
            .animate({
                translate: { x: 0, y: 0 }
            })
            .then(() => {
                // console.log('_close --');
            });
    }

     

    Okay, I'll focus on all the questions in the official Nativescript forum.

     

  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 08 Feb Link to this post

    Hi Gustavo,

    Thank you for writing us back,

    You could list all child of the specific component while using the eachLayoutChild method. This method will return you every child of the container, and you will be able to access the needed element properties. For example:

    HTML
    <StackLayout class="page">
        <Button text="Get child components" (tap)="onTap($event)"></Button>
         
        <StackLayout id="container">
            <Button text="Button1"></Button>
            <Button text="Button2"></Button>
            <Button text="Button3"></Button>
        </StackLayout>
    </StackLayout>

    TypeScript
    import { Component, OnInit } from "@angular/core";
     
    import { Item } from "./item";
    import { ItemService } from "./item.service";
    import { Page } from "tns-core-modules/ui/page";
    import {StackLayout} from "ui/layouts/stack-layout";
    import {Button} from "ui/button"
    @Component({
        selector: "ns-items",
        moduleId: module.id,
        templateUrl: "./items.component.html",
    })
    export class ItemsComponent implements OnInit {
     
        // This pattern makes use of Angular’s dependency injection implementation to inject an instance of the ItemService service into this class.
        // Angular knows about this service because it is included in your app’s main NgModule, defined in app.module.ts.
        constructor() { }
     
        ngOnInit(): void {
           
        }
        onTap(args){
            var page:Page = <Page>args.object.page;
            var layout:StackLayout = <StackLayout>page.getViewById("container");
            layout.eachLayoutChild(result =>{
                var child = result;
                if(child instanceof Button){
                    console.log("button found")
                    console.log(child.text);
                    if(child.text == "Button3")
                        child.isEnabled=false;
                }
                 
            })
        }
     
    }

    In the above-attached sample code, when we tap on the button with name `Get child components`, we get an instance of the StackLayout with id container and with the help of eachLayoutChild method we search for the last Button and setup it's isEnabled property to false.

    Your question seems to be related to a component(CardView), which is not part of the UI for NativeScript suite. As I mentioned in my previous comment, I would suggest opening a new thread in NativeScript forum, where the other community members could help to solve your case.

    Also if you have a problem with the CardView component itself, you could contact the plugin's authors, while logging a new issue in the nativescript-cardview repository.

    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