CODEWITHSUNDEEP
javascriptknockout.js
dmikester1
dmikester1

Reputation: 1362

knockoutjs - highlight table row with hasFocus subscription

I am trying to figure out how to highlight my table row when a given input receives focus in that row. I have a hasFocus observable that has a subscription function that already does some stuff. But I think I need the row index and not sure how to get that index into the function. I did find another SO Q&A which helped me out some, but not all the way. Highlight table row using knockout.js

Here is my table of rows with inputs(all observable):

<tbody data-bind="foreach: items">
                <tr data-bind="css: { diffColor: $root.HighlightedRowIndex() == $index }">
                    <td><input type="text" data-bind="value: itemNo, insertPress: $index, deletePress: $index, hasFocus: invalidItemNum, selected: invalidItemNum, event: { blur: function(){ $parent.checkItemNo($data, $index); } }, attr: { name: 'sellerItems[' + $index() + '].itemNo', id: 'sellerItems_' + $index() + '__itemNo', tabindex: 4 + $index()}" class="form-control" /></td>
                    <td>
                        <input type="text" data-bind="value: qty, insertPress: $index, tabEnterPress: '#tallyEntry', hasFocus: qtyFocus, deletePress: $index, event: { blur: function(){ $parent.calcTotal($data); } }, attr: { name: 'sellerItems[' + $index() + '].qty', id: 'sellerItems_' + $index() + '__qty', tabindex: 5 + $index() }" class="form-control" />
                        <input type="hidden" data-bind="value: locCode, attr: { name: 'sellerItems[' + $index() + '].locationCode', id: 'sellerItems_' + $index() + '__locationCode' }" />
                    </td>
                    <td><input type="text" data-bind="value: price, attr: { name: 'sellerItems[' + $index() + '].retail', id: 'sellerItems_' + $index() + '__retail' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td>
                        <input type="text" data-bind="value: bro, attr: { name: 'sellerItems[' + $index() + '].brocCode', id: 'sellerItems_' + $index() + '__brocCode' }" class="form-control" readonly="readonly" tabindex="-1" />
                        <input type="hidden" data-bind="value: broID, attr: { name: 'sellerItems[' + $index() + '].brochureId', id: 'sellerItems_' + $index() + '__brochureId' }" />
                    </td>
                    <td><input type="text" data-bind="value: desc, attr: { name: 'sellerItems[' + $index() + '].itemDesc', id: 'sellerItems_' + $index() + '__itemDesc' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td><input type="text" data-bind="value: total, attr: { name: 'sellerItems[' + $index() + '].total', id: 'sellerItems_' + $index() + '__total' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                    <td><input type="text" data-bind="value: seq, attr: { name: 'sellerItems[' + $index() + '].itemRow', id: 'sellerItems_' + $index() + '__itemRow' }" class="form-control" readonly="readonly" tabindex="-1" /></td>
                </tr>
            </tbody>

And here is my KO subscription where I want to highlight the row:

self.invalidItemNum.subscribe(function() {
  easyGlanceModel.bigItemNo(self.itemNo());
  easyGlanceModel.bigQty(self.qty());
  self.highlightedRowIndex(???)
});

Upvotes: 0

Views: 132

Answers (1)

stackoverfloweth
stackoverfloweth

Reputation: 6917

It's hard to give advice without seeing the bigger picture. My recommendation would be to pass an index to the item when you create it. Add it as an observable and then you can reference self.index which should match it's index within the parent items

I'm assuming you're populating items with an array of JSON data or something similar, so it should be as simple as adding 

for (var i=0;i<data.length;i++){
    self.items.push(new itemViewModel({
        itemNo: data[i].itemNo,
        qty: data[i].qty,
        index: i
    }));
}

again, I'm making the assumption that you built the constructor to take an object for initial values. Regardless, do you get the idea?

Upvotes: 1

Related Questions