Sam Sam - 2 months ago 39
TypeScript Question

NativeScript - Open NativeScript DropDown widget with Another UI Element

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.


enter image description here


<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" />

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
function on the
to open the dropdown widget.
That is, the whole
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.


The nativescript-drop-down plugin ships with a method to open the drop down, found here in the README:

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() { console.log('I was tapped’); //this works let dropdown = <DropDown>page.getViewById('yourDropDid');; }