Stuck with creating grid web component

Question

My goal is to create a grid web component with Polymer. Unlike this post, I don't want user <template> element inside my <column> elements. I want that my html file look like this :

<my-grid>
    <my-delete-column></my-delete-column>
    <my-column name="numero" title="Titre"></my-column>
    ...
</my-grid>

With a different web component for each different column (image, boolean, action, custom, ...).

So, in my grid element, I put a <content> element into the main repeater template (based on data source). But only one line is created and my three columns are in the first cell...

What is wrong ?

Here is a Github repository with this little project : https://github.com/olofweb/wc-grid

Here are my three files :

my-simple-grid.comp.html :

<link rel="import"  href="/node_modules/Polymer/polymer.html">
<dom-module id="my-simple-grid">
    <style>
        th {
            text-align: left;
        }
        div {
            font-family: 'segoe ui', arial, sans-serif;
        }
    </style>

    <template>
        <div>
            <table>
                <thead>
                    <tr>
                        <template is="dom-repeat" items={{columns}} as="column">
                            <th>{{column.title}}</th>
                        </template>
                    </tr>
                </thead>
                <tbody>
                    <template id="mySimpleGridContent" is="dom-repeat" items="{{dataSource}}" as="row">
                        <tr>
                            <content></content>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </template>

  <script>
    Polymer({
      is: "my-simple-grid",
      properties: {
          dataSource: {
              type: Array,
              value: []
          },
          columns: {
              type: Array,
              value: []
          }
      },
      attached: function() {
        this.set('columns', this.getContentChildren());
      }
    });
  </script>
</dom-module>

my-simple-column.comp.html :

<link rel="import"  href="/node_modules/Polymer/polymer.html">

<dom-module id="my-simple-column">
    <style>
        div {
            font-family: 'segoe ui', arial, sans-serif;
        }
    </style>

    <template>
        <span>Column content !!!</span>
    </template>

    <script>
        Polymer({
            is: "my-simple-column",
            properties: {
                name: String,
                title: String
            },
            // événements du cycle de vie
            ready: function() {
            }
        });
    </script>
</dom-module>

index.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
      <meta charset="utf-8">
    <script src="./node_modules/webcomponents.js/webcomponents-lite.js"></script>
    <link rel="import" href="./build/polymer-es5/my-simple-grid/my-simple-grid.comp.html">
    <link rel="import" href="./build/polymer-es5/my-simple-grid/my-simple-column.comp.html">
  </head>
  <body>
    <my-simple-grid id="mainGrid">
        <my-simple-column name="numero" title="Numéro"></my-simple-column>
        <my-simple-column name="nom" title="Nom"></my-simple-column>
        <my-simple-column name="prenom" title="Prénom"></my-simple-column>
    </my-simple-grid>
    <script>
        // window.addEventListener('WebComponentsReady', function(e) {
            var data = [
                {
                    numero: 12345,
                    nom: "Garnier",
                    prenom: "Francis",
                    sexe: "M"
                },
                {
                    numero: 12346,
                    nom: "Garnier",
                    prenom: "Sylvie",
                    sexe: "F"
                }
            ];

            document.querySelector('#mainGrid').dataSource = data;
        // });
      </script>
  </body>
</html>

Charlie Kelmeckis Charlie Kelmeckis · Accepted Answer · 2017-03-02T15:11:59

It looks like you're not using data-binding on your elements. In order to retrieve the information from data property, try this:

<my-simple-grid id="mainGrid">
    <my-simple-column name="{{data.0.numero}}" title="Numéro"></my-simple-column>
    <my-simple-column name="{{data.0.nom}}" title="Nom"></my-simple-column>
    <my-simple-column name="{{data.0.prenom}}" title="Prénom"></my-simple-column>
</my-simple-grid>

Of course this is only to verify it works. You'll later want to wrap your <my-simple-grid> items in a dom-repeat and iterate over your data.

Stuck with creating grid web component

1 Answers