CODEWITHSUNDEEP
javascriptjqueryknockout.jsdatatable
capiono
capiono

Reputation: 2997

Bind Data to Modal on table cell click

I'm trying to bind KnockoutJS ViewModel to a datatable:

JsFiddle

<table class="table table-sm" id="user">
  <thead>
    <tr role="row">
      <th>Id</th>
      <th width="30%" class="text-uppercase">Email</th>
      <th width="15%" class="text-uppercase">Active</th>
      <th width="2%" class="text-center text-uppercase">Edit</th>
    </tr>
  </thead>
  <tbody>
    <!-- ko foreach: users() -->
    <tr>
      <td data-bind="text: $data.id"></td>
      <td data-bind="text: $data.email"></td>
      <td data-bind="text: $data.isDisabled"></td>
      <td class="text-center" data-bind="toggleClick: $root.showDialog"></td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>

When a user click the edit on each row it opens a modal dialog, where the data can be edited.

How do I bind the clicked row data to modal dialog form?

so I can do this:

  <div class="modal-body" data-bind="with: User">
    <input data-bind="text: email" />
    <input data-bind="text: isDisabled" />
  </div>

Upvotes: 0

Views: 1224

Answers (1)

Jason Spake
Jason Spake

Reputation: 4304

First off I would replace that toggleClick custom binding with a normal click function on your view-model as you really want to do more than just toggle the dialog. With a click function you can then access the row data that was clicked on, and then use that to set a current/selected user.

self.toggleClick = function(data){
    self.showDialog(!self.showDialog());
    self.selectedUser(data);
}

Example: https://jsfiddle.net/0vou6xs0/6/

You can then use a with binding like you had using the selected-user.

<div class="modal-body" data-bind="with: selectedUser">
    <input data-bind="value: email" />
    <input data-bind="value: isDisabled" />
</div>

Upvotes: 1

Related Questions