Sam Sam - 1 month ago 27
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.

Image:

enter image description here

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

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

Comments