dynamic columns in vaadin-grid

Dear all

i'm trying to use your cool vaadin-grid element, but i'd like to use is creating dynamic grid based on the JSON obtained from the server.

So i'm trying to create both cols and items with javascript (this is the first step, then i'll use JSON result instead of static arrays) but is not working:

<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html">
<dom-module id="kwings-grid">
  <template>
    <style>
    </style>


  <vaadin-grid id="simple">
      <table>
        <colgroup>
        <template is="dom-repeat" items="{{columns}}">
          <col name="{{item.dataIndex}}">
        </template>        
        </colgroup>
      </table>
    </vaadin-grid>               
       
  </template>
  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'kwings-grid',
      create:function(){
          var grid = document.querySelector('#simple');
          
              grid.columns = new Array({dataIndex:'field_a'},{dataIndex:'field_b'});
      },
      ready: function() {
          
          var grid = document.querySelector('#simple');
          
              grid.items = new Array({field_a:'AAA1',field_b:'BBB1'},{field_a:'AAA2',field_b:'BBB2'});
          
      }
    });
  </script>
  </dom-module>

The same code works properly if cols element are static:

<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html">
<dom-module id="kwings-grid">
  <template>
    <style>
    </style>


  <vaadin-grid id="simple">
      <table>
        <colgroup>
          <col name="field_a">
          <col name="field_b">
        </colgroup>
      </table>
    </vaadin-grid>               
       
  </template>
  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'kwings-grid',
      create:function(){
      },
      ready: function() {
          
          var grid = document.querySelector('#simple');
          
              grid.items = new Array({field_a:'AAA1',field_b:'BBB1'},{field_a:'AAA2',field_b:'BBB2'});
          
      }
    });
  </script>
  </dom-module>

Any help/idea?

Thanks to all in advance!

Hi

Currently the <table> element configurator is meant for static config only. We've been experimenting with dynamically replacing/mutating the table element but with templates especially things might get tricky.

If you need to modify the columns dynamically, easiest way now is to change the grid.columns array (preferably trough Polymer APIs) or use grid.addColumn/removeColumn APIs.

Tomi

Thanks!

ps: where can i found the Polymer APIs of the element?

Thanks

sorry... found!

https://vaadin.com/docs/-/part/elements/vaadin-grid/columns.html

Thanks!

I've have a very similar requirement but have been unable to create a working dynamic equivalent of the static code above.  I can add columns to an already-rendered grid with .addColumn() but I can't create a completely empty grid and then create all its columns dynamically.  I also still don't understand how to change grid.columns via the Polymer APIs or how the link above relates to that.  I'd really appreciate any extra info or working code - especially if it tied in with iron-ajax!

thanks

Matt

UPDATE: cracked it now, late in my timezone but will post the example I was looking for tomorrow - anyone reading this, please chase me if I've forgotten :-)

Matt

Can you please share your code how you remove the columns? The docs doesn't seems to have it in...

Thanks in advance

Stephan

Hi Stephan,

you can use the removeColumn(id) method to remove columns. It is documented in the vaadin-grid API documentation here: https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/#vaadin-grid:method-removeColumn

Thank you. Was hoping for something that works directly on the name though...
 

When I try to add a column, it shows up as an empty column -- that is, there is space for it but the header is empty and the data is empty.  Can you provide an example of how to do it properly?  Thanks.

The templates apparently work for headers but not the rows.

    <vaadin-grid id="grid" items="[[_items]]">
      <table>
        <colgroup>

          <!-- FIXME: This shows blank columns... -->
          <!--<template is="dom-repeat" items="[[_columns]]" as="_col">-->
            <!--<col name="[[_col]]">-->
          <!--</template>-->

          <col name="last_name">
          <col name="first_name">
          <col name="email">
          <col name="phone">
        </colgroup>
        <thead>
          <tr>
            <template is="dom-repeat" items="[[_columnHeaders]]" as="_hdr">
              <th>[[_hdr]]</th>
            </template>
          </tr>
        </thead>
      </table>
    </vaadin-grid>

Has there been any news on this, I'm also trying to do something similar. To add the cols dynamically i've just added the HTML old school, is there any reason your avoiding this method?

_createGrid: function() {
        var div = document.createElement('div');
        var h = '';
        h += '<vaadin-grid id="lazy">';
        h += '<table>';
        h += '<colgroup>';
        h += this._addCols();
        h += ' </colgroup><thead><tr>';
        h += this._addHeaders();
        h += '</tr></thead></table></vaadin-grid>';

        div.innerHTML = h;
        this.$.holder.appendChild(div);
        return Promise.resolve();
      },

      _addHeaders: function() {
        var ths = '';
        for(var i = 0; i < this.selectedForm.inputs.length; i++) {
          var item = this.selectedForm.inputs

;
          var label = item.label;
          ths += '<th>' + label + '</th>';
        }
        return ths;
      },

      _addCols: function() {
        var cols = '';
        for(var i = 0; i < this.selectedForm.inputs.length; i++) {
          var item = this.selectedForm.inputs

;
          var key = item.$key;
          cols += '<col name="' + key + '"/>';
        }
        return cols;
      },

And i've just added this to my Promise based page load routine after I have the data.

Hi Dale,

I don’t really see a problem in your approach, if you’re just doing that once after the data is available. The problem with manipulating the lightDOM is that it will bootstrap the whole grid again is anything changes in it. So techinically it works, but it’s going to be slow, and might have some issues.

We just merged this feature for the upcoming 2.0 version, though, so you might want to give that a try instead. So install vaadin-grid#2.0-dev for the version, as the fix is not yet in any tagged release.