Knockout: Selectable table rows without extending the model?

Question

I have the following table template that is rendered through knockout:

            <table class="gv" data-bind="visible: products().length > 0">
                <thead>
                    <th>Type</th>
                    <th>Name</th>
                </thead>
                <tbody data-bind="foreach: products">
                    <tr data-bind="click: $root.selectProduct">
                        <td data-bind="text: type"></td>
                        <td data-bind="text: name"></td>
                    </tr>
                </tbody>
            </table>

Now I want to make the rows clickable and want to assign a css class if a row is selected. Only 1 (!) row could be selected at a time, so others have to be unchecked.

The simplest way would be to extend my model (product class) with a selected property but this would destroy my 1:1 mapping with the server side.

How should I solve this issue? How would you handle this?

timmkrause · Accepted Answer · 2013-05-06T12:33:13.590

16

This was my final solution now, no extra hidden radio buttons:

<tr data-bind="click: $root.selectProduct, css: { 'active-row': $root.selectedProduct() === $data }">

And the selectedProduct implementation within the ViewModel:

function AppViewModel() {
    // Private
    var self = this;

    // Public Properties
    self.selectedProduct = ko.observable();

edited May 06 '13 at 12:33

answered Mar 30 '12 at 05:49

timmkrause

3,367
4
32
59

For completeness of answer, I'd love to see selectProduct defined. – TelegramSam May 22 '12 at 16:23
1

@TelegramSam A bit late but here it is. – timmkrause Jun 25 '12 at 10:50
@jtkrause Why is your selectProduct property an observableArray and not an observable only - an object - when you allow only single selection? – Elisabeth Apr 29 '13 at 11:56
what happens if the user tabs into this row? – Peter Munnings Jul 28 '13 at 17:39
REALLY late to the party here, but how do you bind `self.selectedProduct` to the producted associated to the clicked row? – James Love Jan 15 '14 at 22:51
I got it, in your click handler (`selectProduct`) you call `selectedProduct(data)`, where `data` is the argument of your click handler that contains the data for the current row. Awesome. – James Love Jan 15 '14 at 23:07
Right. I have to admit that the AppViewModel snippet isn't as obvious as it should be. – timmkrause Jan 16 '14 at 08:27

score 1 · Answer 2 · answered Mar 26 '12 at 11:52

1

You could add a hidden radio button group to the table, and when the row is selected calling selectProduct the radio button is selected.

This ensures that only one row is selected.

Alternatively you could write a custom binding using the jQuery .data() to specify the selected row.

answered Mar 26 '12 at 11:52

Darbio

11,286
12
60
100

The radio button sounds good and it uses standard browser/html techniques to handle the unique selection. Would you also prefer this solution? – timmkrause Mar 26 '12 at 12:00
That's how I would tackle it first - but I would be aware that if, in the future, I required multiple selection, I would have to rewrite it. – Darbio Mar 26 '12 at 12:01
This will definitely not happen! Thank you! – timmkrause Mar 26 '12 at 12:04
Mh, can you give me a quick example? With "" I´m not able to select any of those radio buttons. And how do I bind the css binding to a checked radio button? jQuery? – timmkrause Mar 26 '12 at 12:25
Select the radio button in the `selectProduct` function programatically [http://stackoverflow.com/questions/977137/how-to-reset-radiobuttons-in-jquery-so-that-none-is-checked]. As the radio button will be part of the `activeproduct` group, only one will be selectable. – Darbio Mar 27 '12 at 11:10

score 0 · Answer 3 · answered Jul 10 '18 at 23:50

I created a jsfiddle for myself and you, since the answered one doesn't actually work

The key is a combination of using an observable for the selected item and utilizing knockout's automatic binding of the current item for click events:

ViewModel = function() {
  self = this;
  this.selectedItem = ko.observable();
  this.items = ko.observableArray();

}
ViewModel.prototype.selectItem = function(item) {
  self.selectedItem(item);
}

and the html:

  <ul class="results__container">
    <!-- ko foreach: items -->
    <li class="results__item" data-bind="css: { 'results__item--selected': $root.selectedItem() === $data }, click: $root.selectItem">
      <span data-bind="text: Title"></span>
    </li>
    <!-- /ko -->
  </ul>

http://jsfiddle.net/enorl76/9hLgfzot/

Knockout: Selectable table rows without extending the model?

3 Answers3

Linked