CODEWITHSUNDEEP
javascripthtmlknockout.jshtml-tableknockout-3.0
AnkUser
AnkUser

Reputation: 5531

Knockout Table : Highlight a Table Row

I have an Example Fiddle here. In this Table I wish to achieve Highlighting a Particular Row selected. If unselected Row should not be highlighted. One of many sample I found Fiddle but I am unable to incorporate them inside my Example Fiddle Above. Below is the HTML Code which shows basic Table.

<table id="devtable">
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
    </tr>
</thead>
<tbody data-bind="foreach: items">
    <tr data-bind=" click: $parent.select  ">
        <td data-bind="text: ID"></td>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Status"></td>
    </tr>
</tbody>

ID :
Name :
Status :

Here is the knockout function to do manipulations

<Script>
var rowModel = function (id, name, status) {
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.Status = ko.observable(status);
};

var myData = [{
    id: "001",
    name: "Jhon",
    status: "Single"
}, {
    id: "002",
    name: "Mike",
    status: "Married"
}, {
    id: "003",
    name: "Marrie",
    status: "Complicated"
}];

function MyVM(data) {
    var self = this;

    self.items = ko.observableArray(data.map(function (i) {
        return new rowModel(i.id, i.name, i.status);
    }));

    self.select = function(item) {
        self.selected(item);
        self.enableEdit(true);
    };


    self.flashCss = ko.computed(function () {
        //just an example

        return 'flash';
    });


    self.selected = ko.observable(self.items()[0]);

    self.enableEdit = ko.observable(false);

    self.changeTableData = function() {
// How do I change the Data here and it should also reflect on the Page.
// If I do binding depending on condition it gives me error
if(true){
var myData = [{
    id: "001",
    name: "Jhon",
    status: "Single"
}, {
    id: "002",
    name: "Mike",
    status: "Married"
}, {
    id: "003",
    name: "Marrie",
    status: "Complicated"
}];
}
else{
 myData = [{
    id: "111",
    name: "ABC",
    status: "Single"
}, {
    id: "222",
    name: "XYZ",
    status: "Married"
}, {
    id: "3333",
    name: "PQR",
    status: "Complicated"
}];
}
}   

}

ko.applyBindings(new MyVM(myData));
</script>

CSS code below

.flash { background-color: yellow; }

Upvotes: 0

Views: 899

Answers (1)

user3297291
user3297291

Reputation: 23372

You can use the css binding to add the .flash class based on the currently selected value:

<tr data-bind="click: $parent.select, 
               css: { flash: $parent.selected() === $data }">
  ...
</tr>

If you don't like this logic being defined in the view, you can pass a reference to the selected observable and create a computed property inside your RowModel:

var RowModel = function( /* ... */ selectedRow) {
  // ...
  this.isSelected = ko.pureComputed(function() {
    return selectedRow() === this;
  }, this);
}

Here's the quick fix in your fiddle:

http://jsfiddle.net/wa78zoe4/

P.S. if you want toggle-behavior, update select to:

self.select = function(item) {
  if (item === self.selected()) {
    self.selected(null);
    self.enableEdit(false);
  } else {
    self.selected(item);
    self.enableEdit(true);
  }
};

Upvotes: 1

Related Questions