CODEWITHSUNDEEP
javascriptasp.net-mvcdatatableknockout.js
MrMustafa
MrMustafa

Reputation: 305

Knockout and DataTable and custom data binding

In ASP.NET MVC Project I am using Knockout and DataTable for data binding,

I add data to table like that:

    <tbody data-bind="dataTablesForEach: {data: customerList, dataTableOptions: tableOptions}">
       <tr>
          <td data-bind="text: customerName"></td>
          <td data-bind="text: creationDate"></td>
          <td data-bind="text: transType"></td>
          <td data-bind="text: address"></td>
       </tr>
    </tbody>

But in my case the customers list, each item contains sub list called skillsList So, I want to add data to table like that:

    <tbody data-bind="dataTablesForEach: {data: customerList, dataTableOptions: tableOptions}">
       <tr>
          <td data-bind="text: customerName"></td>
          <td data-bind="text: creationDate"></td>
          <td data-bind="text: phone"></td>
          <td data-bind="text: address"></td>
          <td data-bind="text: mainSkill"></td>
       </tr>
       
       foreach(var skill in skills) 
       {
          <tr>
             <td data-bind="text: customerName"></td>
             <td data-bind="text: creationDate"></td>
             <td data-bind="text: phone"></td>
             <td data-bind="text: address"></td>
             <td data-bind="text: skill"></td>
          </tr>
       }
       
    </tbody>

So, In the second tr the data is repeated but last td will contain skill instead of main skill

I hope you understand what I need

Upvotes: 0

Views: 104

Answers (1)

Nathan Fisher
Nathan Fisher

Reputation: 7941

I'm not sure if this will work, but I would be trying something like this,

<tbody data-bind="dataTablesForEach: {data: customerList, dataTableOptions: tableOptions}">
   <tr>
      <td data-bind="text: customerName"></td>
      <td data-bind="text: creationDate"></td>
      <td data-bind="text: phone"></td>
      <td data-bind="text: address"></td>
      <td data-bind="text: mainSkill"></td>
   </tr>
   <!-- ko dataTablesForEach: {data: skills, dataTableOptions: tableOptions}

      <tr>
         <td data-bind="text: customerName"></td>
         <td data-bind="text: creationDate"></td>
         <td data-bind="text: phone"></td>
         <td data-bind="text: address"></td>
         <td data-bind="text: skill"></td>
      </tr>
   <!-- /ko -->
</tbody>

Upvotes: 1

Related Questions