Vaadin-grid: Unable to slot column content

[stramel]

Tested in 3.0 and master

https://jsbin.com/yukafuv/edit?html,output

@tomivirkki

[yveslange]

I am having the same issue. I want to "inject" a component or template into the cells (or the slot column content)

MY APPLICATION

<dom-module id="my-app">
  <template>
    <style></style>

    <my-grid> <!-- my-grid wraps vaadin-grid -->
      <template>
        A dynamic template <!-- this might be another custom-element -->
      </template>
    </my-grid>

  </template>
  ...
</dom-module>

MY ELEMENT

<dom-module id="my-gird">
  <template>
    <style></style>

    <vaadin-grid>
      <template is="dom-repeat" items="[[columnsArray]]">
        <vaadin-grid-column>
          <template class="header">[[columnsArray]]</template>
          <!-- 
          I wish I could have a slot here so i can place an element
          that would parse the value and display an <input...>, <dropdown...>, etc... 
          -->
          <slot></slot>
        </vaadin-grid-column>
      </template>
   </vaadin-grid>
  </template>

[yveslange]

I also tried to stamp the template inside the dom-repeat. As you might already know, it's not possible :(

[yveslange]

vaadin-grid-column.html

It seems that this is because of the current implementation

L187    _prepareBodyTemplate() {
L188      return this._prepareTemplatizer(this._findTemplate('template:not(.header):not(.footer)' || null, {}));
L189    }

[tomivirkki]

Prototyped this in a separate branch. Does this work for your case?

[yveslange]

Yes, with your branch I was able to insert a template in a slot. I noticed that trying something else than a template will not work since vaadin-grid-column takes implicitly a template to render the cell content. Few months back, it was difficult (for me) to understand this point without reading the src code of the vaadin-grid-column. The vaadin-grid-column takes the first non header or footer template as the cell content.

Works:

    <my-grid>
      <template slot="cell">
        [[item.firstName]]
      </template>
    </my-grid>

Won't work:

    <my-grid>
      <div slot="cell">
        Constant string
      </div>
    </my-grid>

But this is fine, it is possible to pass a template that contains a <div>.

Cheers

[stramel]

@tomivirkki It does appear to work properly

https://jsbin.com/lojefifida/edit?html,output

[stramel]

Will wait to close until the changes are fixed in master.

[yveslange]

Any updates ?

[tomivirkki]

Sorry, no updates on this front yet. We're focusing 100% on the "Valo as default theme" migration and new releases currently. We'll fix this but a PR would really speed this up ;)

[stramel]

@tomivirkki Do you have an update?

[tomivirkki]

Sorry for the delay, the fix is now in review: https://github.com/vaadin/vaadin-grid/pull/1251