As someone who is just starting out with Nativescript, I have a question that may seem basic to some. I wanted my dropdown to have a more web browser-like feel, so I decided to use the NativeScript DropDown widget by PeterStaev. I customized it with a GridLayout and styled it to fit my needs.
Here is an image of the setup:
https://i.sstatic.net/REXqw.png
This is the XML code for the dropdown menu:
<GridLayout columns="*,auto" class="drop-down-menu" tap="{{ openDropDown }}">
<dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" col="0" class="drop-down" />
<Label text="" textWrap="false" col="1" class="font-awesome" />
</GridLayout>
Currently, my view-model file looks like this:
...
import { DropDown } from 'nativescript-drop-down';
export class RegisterViewModel extends Observable {
...
public openDropDown() {
console.log('I was tapped’); //this works
}
}
And here is my code-behind TypeScript file (.ts):
...
import { RegisterViewModel } from '../../viewmodels/register/register-view-model';
export function pageLoaded(args: EventData) {
let page = <Page>args.object;
page.bindingContext = new RegisterViewModel;
}
I am looking for guidance on how to make the openDropDown function in the GridLayout trigger the dropdown widget. Essentially, I want the entire area of the GridLayout, including the font icon, to be able to open the dropdown menu. Any help or suggestions for a more elegant solution would be greatly appreciated.