Drop down list embedded in koGrid not working

Question

I am trying to get a drop down list to populate on each row of a koGrid. Here is the jsFiddle to illistrate (notice how there is no text in the drop down boxes)- http://jsfiddle.net/wood0615/sorg9na0/2/

Here is my html-

     <table border="0" style="width: 100%;">
    <tr>           
       <td colspan="6">
            <div class="gridStyle" data-bind="koGrid: gridOptions">&nbsp;</div>
       </td>

    </tr>
</table>

My viewmodel-

 function mainVm(){
this.WQOptions = ko.observableArray( [
                { decision: 'Approve', decisionValue: '10' },
                { decision: 'Pend', decisionValue: '5' }
    ]);

this.myData = ko.observableArray([
                { name: 'Jack Frost', age: '30' },
                { name: 'John Doe', age: '50' }]);

this.gridOptions = { 
    data: this.myData,
    autogenerateColumns: false,
    columnDefs: [
        {
            field: "name", 
            displayName: "Name"
        },
        {
            displayName: "Decision",
            cellTemplate: "<select id='Select6' data-bind=\" options: $parent.entity.WQOptions, optionsValue: $data.decisionValue, optionsText: $data.decision \"></select>"
        }

    ]
};
 };

 ko.applyBindings(new mainVm());

any idea on why the drop down boxes are empty without data?

Answer 1

To access the viewmodel used to build the grid, you should use $userViewModel:

cellTemplate: "<select id=\"Select6\" \
                       data-bind=\" options: $userViewModel.WQOptions, \
                                    optionsValue: 'decisionValue', \
                                    optionsText: 'decision' \"> \
               </select>"