Knockout: Select in simpleGrid example

Question

I am using the knockout simple grid found here: http://knockoutjs.com/examples/grid.html

I want to be able to add a select into the grid, which has a data-bind attribute assigned to an object array in my vm.

So I have added another column from the example:

this.gridViewModel = new ko.simpleGrid.viewModel({
    data: this.items,
    columns: [
        { headerText: "Item Name", rowText: "name" },
        { headerText: "Sales Count", rowText: "sales" },
        { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } },
        *{ headerText: "Select", rowText: function (item) { return "<select data-bind=\"options:items, optionsText: 'name', optionsValue: 'name'\"></select>" } }*
    ],
    pageSize: 4
});

And changed the text attribute to html within the control:

<td data-bind=\"*html*: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] \"></td>\

The Selects appear, but not populated with data from my object array.

JSFiddle found here: http://jsfiddle.net/vwj2p/1/ (I have pasted in the code from the simple grid above as I made a change to the simplegrid code).

Answer 1

{ headerText: "Select", rowText: function (item) { return "<select data-bind=\"options:$root.items, optionsText: 'name', optionsValue: 'name'\"></select>" } }

I'm assuming each item object doesn't have an items property and you're trying to reference the viewModel's items array? If so, change your code to the above.

This still won't work, however. If you look at the html binding documentation, you'll see that it's only going to spit out static html. During the binding process when this is all getting rendered, KO doesn't applyBindings to the generated HTML.

I tried playing around with the code a bit to try and do ko.applyBindingsToDescendants(viewModel, {td element}), where {td element} is a reference to the parent element with the html binding on it, when the items observableArray updated but that didn't seem to do anything.

Bottom line, I don't think you're going to get this to work without doing a lot of plumbing work to the simpleGrid. It is just a simple grid, after all.