CODEWITHSUNDEEP
javascriptknockout.js
John S.
John S.

Reputation: 514

Problems creating dynamic attributes inside foreach: knockoutjs

I am having problems displaying data in the accordian, as shown in photo.

No matter what row you click, the same "hidden row" is displayed. And I see why... the following line sets the target of the accordian element. 

<tr data-toggle="collapse" data-target="#demo1"  class="accordion-toggle">

Somehow I need to make "#demo1" unique, and the hidden row as well.

Here is the code: How would I make sure each row gets it's own unique target id, as well as the hidden row?

Thanks!

Grid

<table class="table table-striped table-bordered notranslate">
   <thead>
      <tr>
         <th style="width: 10%">ID</th>
         <th>First</th>
         <th>Last</th>
         <th>Email</th>
         <th>Phone</th>
         <th>Actions</th>
      </tr>
   </thead>
   <tbody data-bind="foreach: customers">
      <tr data-toggle="collapse" data-target="#demo1"  class="accordion-toggle">
         <td>
            <i class="fa fa-plus" style="cursor: pointer"></i>
         </td>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
         <td data-bind="text: email"></td>
         <td data-bind="text: phone"></td>
         <td>  <i class="fa fa-pencil mr-1" data-bind="click: $root.editCustomer"></i> <i class="fa fa-trash mr-1" data-bind="click: $root.deleteCustomer"></i></td>
      </tr>
      <tr>
         <td colspan="6" class="hiddenRow">
            <div class="accordian-body collapse" id="demo1"  >
               <table class="" style="background-color: lightyellow; width: 100%;">
                  <tbody>
                     <tr>
                        <th>Address 1</th>
                        <th>Address 2</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip Code</th>
                     </tr>
                     <tr>
                        <td data-bind="text: address1"></td>
                        <td data-bind="text: address2"></td>
                        <td data-bind="text: city"></td>
                        <td data-bind="text: state"></td>
                        <td data-bind="text: zip"></td>
                     </tr>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Upvotes: 0

Views: 46

Answers (1)

Philip Bijker
Philip Bijker

Reputation: 5115

You should make sure the data-target and matching hidden row id are unique for each row. You can use the attr data-binding to dynamically set these attributes and utilize the $index context observable property of the foreach binding to construct unique matching values.

This could result in for example data-bind="attr: { 'data-target': '#demo' + $index() }" for the data-target and data-bind="attr: { id: 'demo' + $index() }" for the matching hidden row id. Have a look at the shortened example below:

ko.applyBindings({
  customers: [{}, {}, {}, {}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<table class="table table-striped table-bordered notranslate">
   <thead>
      <tr>
         <th style="width: 10%">ID</th>
         <th>First</th>
         <th>Last</th>
         <th>Email</th>
         <th>Phone</th>
         <th>Actions</th>
      </tr>
   </thead>
   <tbody data-bind="foreach: customers">
      <tr data-toggle="collapse" data-bind="attr: { 'data-target': '#demo' + $index() }"  class="accordion-toggle">
         <td colspan="6">Click to toggle</td>
      </tr>
      <tr>
         <td colspan="6" class="hiddenRow">
            <div class="accordian-body collapse" data-bind="attr: { id: 'demo' + $index() }">
               <table class="" style="background-color: lightyellow; width: 100%;">
                  <tbody>
                     <tr>
                        <th>Address 1</th>
                        <th>Address 2</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip Code</th>
                     </tr>
                     <tr>
                        <td colspan="5">...</td>
                     </tr>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>

Upvotes: 1

Related Questions