Creating sections for each different item in a table in html/knockout js

Question

I am working on an application in which I have different products with some other data associated with it in an html table with data binded using knockout js. The below code doesnot display products in sections but each product gets displayed as a different product though they are same.

HTML

<table class="productTable" data-bind="visible: !loading()">

    <thead>

        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    <tbody data-bind="foreach: canadiancrudes" >
        <tr >
            <td data-bind="text:Product"></td>
        </tr>
        <tr>
<td data-bind="text: Term"></td>
    <td data-bind="text: Location"></td>
    <td data-bind="text: Pipeline"></td>
    <td data-bind="text: BidCP"></td>
    <td data-bind="text: BidVolume"></td>
    <td data-bind="text: Index"></td>
    <td>
        <input type="text" id="txbReadBid"  data-bind="value: Bid" /></td>
    <td>
        <input type="text" id="txbReadOffer" data-bind="value: Offer" /></td>
    <td data-bind="text: OfferVolume"></td>
    <td data-bind="text: OfferCP"></td>
    <td></td>
    <td>
        <a href="#" title="Edit" data-bind="click: $root.edit">
            <img src= '@Url.Content("~/Images/edit.png")' /></a></td>

    <td><a href="#" title="Delete" data-bind="click: $root.remove">
        <img src= '@Url.Content("~/Images/delete.png")' /></a></td>
    <td>
        <a href="#" title="Copy" data-bind="click: $root.copy">
            <img src= '@Url.Content("~/Images/add.png")' /></a>
    </td>
</tr>

    </tbody>

    <tfoot>
        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </tfoot>
</table>

From the below screen shot you can see that I have similar products with different other fields but they are not sectioned. Now I would like t have a section for each product like Product C5 has four entries in the table so, I want all of them in a single section and whenever I click on '+' image on the right it adds a row with same product associated with that '+' image and I am trying to add it to the same product section.

Answer 1

I have figured out a solution as follows

Index.cshtml

<!--ko foreach: products-->
<h3 data-bind="text: $data"></h3>
<table class="productTable">

    <thead>

        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>

        </tr>

    </thead>

    <tbody data-bind="foreach: $root.subsetcanadiancrudes.index.Product()[$data]">

        <tr>
            <td data-bind="text: Term"></td>
            <td data-bind="text: Location"></td>
            <td data-bind="text: Pipeline"></td>
            <td data-bind="text: BidCP"></td>
            <td data-bind="text: BidVolume"></td>
            <td data-bind="text: Index"></td>

            <td data-bind="text: Bid"></td>
            <td data-bind="text: Offer"></td>
            <td data-bind="text: OfferVolume"></td>
            <td data-bind="text: OfferCP"></td>
        </tr>

    </tbody>


    <tfoot>
        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>

        </tr>

    </tfoot>
</table>
<!--/ko-->

Knockout JS

ko.observableArray.fn.extendsdistinct = function (attrib) {var me = this;me.index = {};me.index[attrib] = ko.observable({});ko.computed(function () {var attribIndex = {};ko.utils.arrayForEach(me(), function (item) {var key = ko.utils.unwrapObservable(item[attrib]);if (key) {attribIndex[key] = attribIndex[key] || [];attribIndex[key].push(item);}});me.index[attrib](attribIndex);});return me;};
var CanadianCrudeViewModel = function (CanadianContext) {
    var self = this;
    self.canadiancrudes = ko.observableArray();
    self.products = ko.observableArray();
    self.datainput = ko.observableArray();
    self.loading = ko.observable(true);

self.subsetcanadiancrudes = ko.observableArray(self.datainput()).extendsdistinct('Product');
        self.products = ko.computed(function () {
        var products = ko.utils.arrayMap(self.subsetcanadiancrudes(), function (item) {
            return item.Product;
            })
        return ko.utils.arrayGetDistinctValues(products).sort();
        });
 viewModel.canadiancrudes.push(obsCanadianCrude);
        viewModel.subsetcanadiancrudes.push(obsCanadianCrude);
        viewModel.canadiancrudes.sort(function (left, right) { return left.Product() === right.Product() ? 0 : (left.Product() < right.Product() ? -1 : 1) });