CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
Ben
Ben

Reputation: 3060

Nesting a table with Knockout

I have a table, and I want to display a tr beneath a tr when it is clicked. It works fine, but I want to have the second tr be nested within a table. When I put it within a table, however, it fails to display.

    <table class="table table-striped">
    <thead>
    <tr>
        <th>Id</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: customers">
    <tr data-bind="click: $root.viewCustomerDetails">
        <td data-bind="text: id"></td>
        <td data-bind="text: first_name"></td>
        <td data-bind="text: last_name"></td>
        <td data-bind="text: email"></td>
    </tr>
    <tr data-bind="attr: {id: $data.id}, style: {color: 'red', display: 'none'}">
        <table>
            <tr>
                <td data-bind="text: $data.address"></td>
                <td data-bind="text: $data.last_logon"></td>
                <td data-bind="text: $data.telephone"></td>
                <td data-bind="text: $data.fraud"></td>
            </tr>
        </table>
    </tr>
</table>
</tbody>
</table>

And the Js:

self.viewCustomerDetails = function(i, e){
                var row = $('#' + i.id());
                $('#' + i.id()).toggle();
            }
        };

Upvotes: 0

Views: 232

Answers (1)

Fabio
Fabio

Reputation: 11990

You don't need jQuery to do this. You can do the following:

<tbody data-bind="foreach: customers">
    <tr data-bind="click: $root.viewCustomerDetails">
        <td data-bind="text: id"></td>
        <td data-bind="text: first_name"></td>
        <td data-bind="text: last_name"></td>
        <td data-bind="text: email"></td>
    </tr>
    <tr data-bind="visible: showDetails">
       <td colspan="4">
           <table>
                <tr>
                   <td data-bind="text: address"></td>
                   <td data-bind="text: last_logon"></td>
                   <td data-bind="text: telephone"></td>
                   <td data-bind="text: fraud"></td>
                </tr>
            </table>
        </td>
    </tr>
</tbody>

JS:

function Customer () {
   var self = this;
   //your properties id, first_name, last_name
   self.showDetails = ko.observable(false);
}

function CustomersViewModel() {
   var self = this;
   //your observableArrays, that contains a collection of Customer, declared above
   self.viewCustomerDetails = function (customer) {
       customer.showDetails(!customer.showDetails());
   }
}

ko.applyBindings(new CustomersViewModel());

Upvotes: 4

Related Questions