NativeScript - Open NativeScript DropDown widget with Another UI Element

Question

I am really new to Nativescript, so pardon me for the noob question. I wanted a more web browser feel for my dropdown, so I used PeterStaev's NativeScript DropDown widget with GridLayout. And styled it.

Image:

XML:

<GridLayout columns="*,auto" class="drop-down-menu" tap="{{ openDropDown }}">
   <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" col="0" class="drop-down" />
   <Label text="&#xf078;" textWrap="false" col="1" class="font-awesome" />
</GridLayout>

my view-model file so far:

...
import { DropDown } from 'nativescript-drop-down';

export class RegisterViewModel extends Observable {
    ...
    public openDropDown() {
        console.log('I was tapped’); //this works
    }
}

my code-behind find file (.ts) so far:

...
import { RegisterViewModel } from '../../viewmodels/register/register-view-model';

export function pageLoaded(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = new RegisterViewModel;
}

I want the openDropDown function on the GridLayout to open the dropdown widget. That is, the whole GridLayout area should be able to open the dropdown menu, including the font-icon. I’d really appreciate any help with the code to accomplish this. Or a more elegant solution.

Answer 1

The nativescript-drop-down plugin ships with a method to open the drop down, found here in the README: https://github.com/PeterStaev/NativeScript-Drop-Down#methods

So what you need is to get a reference to the dropdown in your method openDropDown. I would assign an ID to the drop-down UI component, get the drop-down in the method and then call .open(); This will open the drop-down.

For the sample below to work I'm assuming you have an instance of the Page set to a variable called page. There are other ways to get the component but this works.

public openDropDown(args: EventData) {
    console.log('I was tapped’); //this works
    let page = <Page>args.object;
    let dropdown = <DropDown>page.getViewById('yourDropDid');
    dropdown.open();
}

Answer 2

To get this to work I had to use the following html

<GridLayout class="dd_container" columns="auto, *" (tap)="openDD($event)">
   <DropDown id="ddstates"
              [class]="cssClassState"
              [items]="ddstates"
              [(ngModel)]="selectedIndexState"
              [hint]="hintstate"
              (selectedIndexChanged)="onchange($event)"
              (opened)="onopen()"
              (closed)="onclose()"
              row="0"
              col="0">
    </DropDown>
</GridLayout>

I had to add the id attribute instead of just #ddstates

the openDD() function contains:

let dropdown = <DropDown>this.page.getViewById('ddstates');
dropdown.open();

the page value is declared in the constructor as

private page: Page