title: vaadin grid hide column
body: <p>Hello I am new to this polymer framework. I have a drop-down list with paper checkbox elements for hiding some columns in a vaadin grid. Here is my sample code</p>
  
  <pre><code>&lt;paper-icon-button icon="icons:menu" slot="dropdown-trigger" alt="hide-menu"&gt;&lt;/paper-icon-button&gt;
      &lt;paper-listbox slot="dropdown-content"&gt;
          &lt;template is="dom-repeat" items="{{toggleColumns}}" as="column" index-as="index"&gt;
              &lt;paper-icon-item&gt;
                  &lt;paper-checkbox checked="{{column.hidden}}" on-click="_makeHidden"&gt;[[column.prop]]&lt;/paper-checkbox&gt;
              &lt;/paper-icon-item&gt;
          &lt;/template&gt;
      &lt;/paper-listbox&gt;
  &lt;/paper-menu-button&gt;
  </code></pre>
  
  <p>My vaadin-grid is given below</p>
  
  <pre><code>&lt;vaadin-grid id="material" class='content' aria-label="Basic Binding Example" page-size="10" column-reordering-allowed&gt;
      &lt;vaadin-grid-selection-column widthtrue="66px" flex="0" select-all="{{selectAll}}"&gt;
          &lt;template class="header"&gt;
              &lt;paper-checkbox checked="{{selectAll}}"&gt;&lt;/paper-checkbox&gt;
          &lt;/template&gt;
          &lt;template&gt;
              &lt;paper-checkbox checked="{{selected}}"&gt;&lt;/paper-checkbox&gt;
          &lt;/template&gt;
      &lt;/vaadin-grid-selection-column&gt;
      &lt;vaadin-grid-column id="firstName" resizable&gt;
          &lt;template class="header"&gt;
              &lt;vaadin-grid-sorter path="firstName"&gt;                            
                   &lt;div class="cell"&gt;
                       &lt;span&gt;First Name&lt;/span&gt;&lt;iron-icon icon="icons:arrow-upward"&gt;&lt;/iron-icon&gt;
                   &lt;/div&gt;
              &lt;/vaadin-grid-sorter&gt;
          &lt;/template&gt;
                      &lt;template&gt;[[item.firstName]]&lt;/template&gt;
                  &lt;/vaadin-grid-column&gt;
                  &lt;vaadin-grid-column id="lastName" resizable&gt;
                      &lt;template class="header"&gt;Last Name&lt;/template&gt;
                      &lt;template&gt;[[item.lastName]]&lt;/template&gt;
                  &lt;/vaadin-grid-column&gt;
                  &lt;vaadin-grid-column id="address" width="150px" resizable&gt;
                      &lt;template class="header"&gt;Address&lt;/template&gt;
                      &lt;template&gt;
                          &lt;p style="white-space: normal"&gt;[[item.address.street]], [[item.address.city]]&lt;/p&gt;
                      &lt;/template&gt;
                  &lt;/vaadin-grid-column&gt;
              &lt;/vaadin-grid&gt;
  </code></pre>
  
  <p>My toggleColumn array is </p>
  
  <pre><code>toggleColumns: {
                  type: Array,
                  notify: true,
                  value: [
                      {
                          id: 0, prop: 'FirstName', hidden: false
                      }, {
                          id: 1, prop: 'LastName', hidden: false
                      }, {
                          id: 2, prop: 'Address', hidden: false
                      }
                  ]
              }
  </code></pre>
  
  <p>On clicking the checkbox the "column.prop" is changed accordingly. But I cant figure out how to set that to grid column hidden property. For example clicking the first checkbox makes <code>toggleColumns[0].hidden</code> to true. Now how to make <code>this.$.firstName.hidden</code> to be true?
  Thank you.</p>