CODEWITHSUNDEEP
htmlcssknockout.js
SP1
SP1

Reputation: 1202

Binding knockout foreach with a table row

I have the below table structure

<table style="width: 100%;">                                 
 <tr>
 <td><b>Fund Value:</b></td>
 <td data-bind="text: ItemDetails().FundValue"></td>
 <td><b>Fund Code:</b></td>
 <td data-bind="text: ItemDetails().FundCode"></td>
 <td><b>Fund Desc:</b></td>
 <td data-bind="text: ItemDetails().FundDesc"></td>
    </tr>
<tr data-bind="foreach: ItemDetails().PriceRebates">                        

 <td><b>Rebate Value:</b></td>
  <td data-bind="text: RebateValue"></td>
  <td><b>Rebate Code:</b></td>
  <td  data-bind="text: RebateCode"></td>
  <td><b>Rebate Desc:</b></td>
  <td  data-bind="text: RebateDesc"></td>

   </tr>
 </table>

It's bound to the knockout viewmodel. The issue I am having is that the tr is bound to the foreach loop and so it is creating multiple td for the ItemDetails().PriceRebates knockout data which I do not want. I want multiple tr to be created for the ItemDetails().PriceRebates data. Can someone please tell me how I can achieve that.

Thanks

Upvotes: 3

Views: 3989

Answers (1)

apruden
apruden

Reputation: 378

You can use foreach without a container element:

<!-- ko foreach: ItemDetails().PriceRebates -->
<tr>                        
  <td><b>Rebate Value:</b></td>
  <td data-bind="text: RebateValue"></td>
  <td><b>Rebate Code:</b></td>
  <td  data-bind="text: RebateCode"></td>
  <td><b>Rebate Desc:</b></td>
  <td  data-bind="text: RebateDesc"></td>
</tr>
<!-- /ko -->

Upvotes: 12

Related Questions