Add dropdown (<select>) to Polymer Grid component

Hello - can someone help add a select dropdown to the Polymer Grid component?

I have the following code in my Polymer component:

<vaadin-grid id="employeeTable">
            <table>
                <colgroup>
                    <col name="name">
                    <col name="role">
                    <col name="jobNumber">
                    <col name="product">
                    <col name="pod">
                    <col name="location">                    
                    <col name="offerStatus">
                    <col name="startDate">                                                                              
                </colgroup>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Role</th>
                        <th>Job Number</th>
                        <th>Product</th>
                        <th>Pod</th>
                        <th>Location</th>
                        <th>Offer Status</th>
                        <th>Start Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                    </tr>
                </tbody>
            </table>
        </vaadin-grid>

attached: function() {
            var employeeTable = document.getElementById('employeeTable');
            employeeTable.columns = [                 {name: 'employee'},
                {name: 'role'},
                {name: 'jobNumber'},
                {name: 'product'},
                {name: 'pod'},
                {name: 'location'},
                {name: 'offerStatus'},
                {name: 'startDate'},                                
            ];
            employeeTable.columns[3].renderer = function(cell) {
                cell.element.innerHTML= "<select id='commonSelect'><option>Option 1</option><option>Option 2</option><option selected>Option 5</option><option>Option 4</option></select>";
            };            
        }

If I call employeeTable.columns it returns no columns unless I explicitly set the columns (like I do in the attached function)

Any feedback is greatly appreciated, thank you.

Hello, Nic

The problem here is that the <vaadin-grid> 1 initialized the columns asynchronously. Meaning that they’re not present yet at attached phase.
You can wrap the lines that set the column renderer inside "grid.then" to make sure the columns have been initialized:

employeeTable.then(function () {
  employeeTable.columns[3].renderer = function(cell) {
    cell.element.innerHTML= "<select id='commonSelect'><option>Option 1</option><option>Option 2</option><option selected>Option 5</option><option>Option 4</option></select>";
  };
});

I highly recommend trying out <vaadin-grid> 2 though, which makes all this a lot easier. It's currently at alpha stage but we're currently preparing it for beta release.

Latest release: https://github.com/vaadin/vaadin-grid/releases/tag/v2.0.0-alpha2
Live demos: https://cdn.vaadin.com/vaadin-grid/2.0.0-alpha2/demo/