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:
[code]
[/code]The same code works properly if cols element are static:
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.
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
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.
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?
[code]
_createGrid: function() {
var div = document.createElement(‘div’);
var h = ‘’;
h += ‘’;
h += ‘
’;
h += ‘’;
h += this._addCols();
h += ’ ';
h += this._addHeaders();
h += ‘
’;
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
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.