Question

How can I update this UI based on the selection made in the select/dropdowns?

For example, if I select a member name from the select/dropdown, I want the table to update/filter to only show those member rows (member names are in far right column) AND their corresponding date header (the gray background).

If I select a provider name from the select/dropdown), I want the table to update/filter to only show those provider rows (provider names in left column) AND their corresponding date header (the gray background).

I’m using the KO mapping plugin. The dummy data is hard coded and would eventually be returned via ajax.

Here’s a fiddle of all the code (it’s all just inlined in the HTML pane). You could copy/paste this and run it locally if you wanted, as well.

http://jsfiddle.net/qBGTh/

Any help/direction is greatly appreciated!

Answer 1

My suggestion is to use a computed value at eob level returning the filtered array. To add this computed value during the mapping process, you must customize the eob object creation using a create callback in the mapping options parameter (see mapping doc)

Here is the updated fiddle to see it in action.

Also don’t forget to add 2 more observables to capture current values for the 2 select elements. The computed value will depend on those 2 observables.

Note: the provided fiddle will not run on IE as github where is located the
mapping javascript does not return the content-type header required by IE.