I am using the foreach binding to generate a table and in each row there is a drop down list. Based on their selection I need to display additional columns. The issue I am having is I need to subscribe to this drop down list to let me table header know that it needs to display the additional column headers.
How can I subscribe to the select list that is generated from a foreach loop of objects?
Here's a jsfiddle i slapped together to show you how it could work:
http://jsfiddle.net/vzkaY/5/
You can use ko.computeds to determine what state the other cells in that row are in, and if they are valid, let the next cell be visible
self.col3data.active = ko.computed(function () {
if (self.col2data() === "item B")
return true;
return false;
}, self);
and in the markup
<td><select data-bind="options: col2items, value: col2data"></select></td>
<td><select data-bind="visible: col3data.active, options: col3items, value: col3data"></select></td>
I think that you might want to show all of the headers regardless of whether any row should show its cell data for that column. the reason being, if one row has all columns visible, and you change some values in another row to "hide" the column header, then you would be impacting the other rows. its possible to collapse the header if all rows are not in the right state to show that column.
