ComboBox in Grid Header

Flow
1

I put some comboboxes and inputs in the header-row like this:
grid.header.getCell(0, 0).content = ‘’;
grid.header.getCell(0, 1).content = ‘’;
grid.header.getCell(0, 2).content = ‘’;
When i select any row in my grid, the components don’t react anymore. Combobox overlay does not expand, events are not fired and so on…
Any idea how to achive a normal behavior of my components after selecting a row ?

2

Hi! You should use custom renderers like these:
https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/
(Remote Data Source example)

3

Why are you setting the content of the header cell with HTML? setting the innerHTML in this way it’s difficult to take the reference to the element since it would be in the shadow dom (unless you use shady dom). I would create the element in JS and set it as an HTML instance.

I think your problem should be that you might be using sorting or some feature that repaints the header so since you gave a string, it is creating a new element each time the header is repainted.

Try this approach:

    <paper-input label="projectName" id="searchFnr"></paper-input>
    <vaadin-grid demo>
      ...
    </vaadin-grid>
var grid = document.querySelector('vaadin-grid');
var input = document.getElementById('searchFnr');
HTMLImports.whenReady(function() {
  grid.header.getCell(0, 0).content = input;
}