title: NativeScript - Open NativeScript DropDown widget with Another UI Element
body: <p>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 <a href="https://github.com/PeterStaev" rel="nofollow">PeterStaev</a>'s
  <a href="https://github.com/PeterStaev/NativeScript-Drop-Down" rel="nofollow">NativeScript DropDown widget</a> with GridLayout. And styled it.</p>
  
  <p>Image: </p>
  
  <p><a href="https://i.stack.imgur.com/REXqw.png" rel="nofollow"><img src="https://i.stack.imgur.com/REXqw.png" alt="enter image description here"></a></p>
  
  <p>XML:</p>
  
  <pre><code>&lt;GridLayout columns="*,auto" class="drop-down-menu" tap="{{ openDropDown }}"&gt;
     &lt;dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" col="0" class="drop-down" /&gt;
     &lt;Label text="&amp;#xf078;" textWrap="false" col="1" class="font-awesome" /&gt;
  &lt;/GridLayout&gt;
  </code></pre>
  
  <p>my view-model file so far:</p>
  
  <pre><code>...
  import { DropDown } from 'nativescript-drop-down';
  
  export class RegisterViewModel extends Observable {
      ...
      public openDropDown() {
          console.log('I was tapped’); //this works
      }
  }
  </code></pre>
  
  <p>my code-behind find file (.ts) so far:</p>
  
  <pre><code>...
  import { RegisterViewModel } from '../../viewmodels/register/register-view-model';
  
  export function pageLoaded(args: EventData) {
      let page = &lt;Page&gt;args.object;
      page.bindingContext = new RegisterViewModel;
  }
  </code></pre>
  
  <p>I want the <code>openDropDown</code> function on the <code>GridLayout</code> to open the dropdown widget.
  That is, the whole <code>GridLayout</code> 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. </p>