Hiding set of html table rows on a button click

Question

I am working on an Asp.Net MVC application in which I have an html table in which data is displayed in groups that are grouped by a product name using foreach loop in Knockout JS . Now I want to implement a hide and show button on the side of each product name which enables a user to hide and see data related to that product using the button.

Right now following picture shows how my table is put on the webpage

In the above picture Heavy, Sweet,Sour are my products which are highlighted and they have some rows of data under it which should be hidden on a button click.

I used the following script to structure my data in the html table

 <!--ko foreach: productshorizontal-->
            <tr>
                <td class="clientproductHeader" data-bind="text: $data"></td>
 <td><input type="submit" class="btn btn-danger clientproductHeader" value="Hide"></td>
                <td class="clientproductHeader" colspan="13"></td>
            </tr>
            <tbody data-bind="foreach: ko.observableArray($root.datainputhorizontal()).extendsdistinct('Product').index.Product()[$data]">
                <tr>
                  <td data-bind="text: Grade"></td>
                  <td data-bind="text: Term"></td>
                  <td data-bind="text:Pipeline"></td>
                  <td data-bind="text: Index"></td>
                  <td data-bind="text: Bid3"></td>
                  <td data-bind="text: Bid2"></td>
                  <td data-bind="text: Bid1"></td>
                  <td data-bind="text: Ask1"></td>
                  <td data-bind="text: Ask2"></td>
                  <td data-bind="text: Ask3"></td>
                </tr>
            </tbody>
            <!--/ko-->

My View model as in the answer

var CanadianCrudeViewModel = function (CanadianContext) {
    var self = this;


    self.productshorizontal = ko.observableArray();
----
----
----

self.productshorizontal = ko.computed(function () {
        var productshorizontal = ko.utils.arrayMap(ko.observableArray(self.datainputhorizontal()).extendsdistinct('Product')(), function (item) {
            return item.Product;
        })
        return ko.utils.arrayGetDistinctValues(productshorizontal);
    }, this);


    ProductViewModel = function (name) {
        this.name = name;
        this.isRelatedDataVisible = ko.observable();
    }
    function RootViewModel(data) {
        var productModels = data.map(function(name) {
            return new ProductViewModel(name);
        });
        this.productshorizontal = ko.observableArray(productModels);

        this.toggleReleatedDataVisible = function (prod) {
            prod.isRelatedDataVisible(!prod.isRelatedDataVisible());
        }
    }

and html is asfollows

<!--ko foreach: productshorizontal-->
   <tr>
     <td class="clientproductHeader" data-bind="text: name"></td>
     <td><input type="button" class="btn btn-danger clientproductHeader" data-bind="click: toggleReleatedDataVisible"></td>
     <td class="clientproductHeader" colspan="13"></td>
   </tr>
   <!-- ko if: isRelatedDataVisible -->
     <tbody data-bind="foreach: ko.observableArray($root.datainputhorizontal()).extendsdistinct('Product').index.Product()[$data]">
       ....
     </tbody>
   <!-- /ko -->
<!-- /ko -->

but the issue is in the javascript console it threw me an exception saying

Error: Cannot find closing comment tag to match: ko if: isRelatedDataVisible 

not sure why

Answer 1

You could use the visible binding combined with the click binding:

The rows you want to hide/show should have the visible thing binded to an observable. Whenever the user clicks one button (buttons should have the click binding), it could update the value of the observable making rows visible or not.

You can get the idea in this fiddle

    <tbody data-bind="foreach: people">
        <tr data-bind="visible: $parent.hideArray.indexOf(myParent) == -1">
            <td data-bind="text: name"></td>
            <td data-bind="text: surname"></td>
            <td>
                <button data-bind="visible: !myParent, click: $parent.showHide, text: buttonText"></button>
            </td>
        </tr>
    </tbody>