Knockout: Table Select Unselect Row. Issue/challenge with unselecting Row

Question

I have a Table using Knockout to fill in data and to select the rows. The challenge right now is I can select the row and it's details I can see. But when I click on paging or if on any particular search box I wish to deselect the Row.

Here is the Fiddle which will explain More

Below is the Model Code for the HTML Page

var RowModel = function(id, name, status) {
  this.ID = ko.observable(id);
  this.Name = ko.observable(name);
  this.Status = ko.observable(status);

};

RowModel.fromRawDataPoint = function(dataPoint) {
  return new RowModel(dataPoint.id, dataPoint.name, dataPoint.status);
};

If I understand your question, this functions: `firstpage`, `previous`, `next` and `lastpage`, should do the same as `self.select()`, that is, `self.selected(null);self.enableEdit(false);`. Also, your fiddle has an error when you unselect a row, because in `value: selected().ID`, `selected()` is null. :-) — Jose Luis, Aug 06 '18 at 15:58
@JoseLuis Yes you are right. I would also like to reflect my Fields ID,Name and Status to be empty — AnkUser, Aug 07 '18 at 08:07
Please, have a look at the Whith binding: http://knockoutjs.com/documentation/with-binding.html :-) — Jose Luis, Aug 07 '18 at 08:30

Ray · Accepted Answer · 2018-08-07T08:59:34.823

From the fiddle, I can see that you are implementing deselect by calling self.selected(null) and self.enableEdit(false).

So you can simply call these again whenever the page is changed or when a search is done.

self.deselect = function(){
    self.selected(null);
    self.enableEdit(false);
};

this.next = function() {
    self.deselect();
    if(self.pageNumber() < self.totalPages()) {
        self.pageNumber(self.pageNumber() + 1);
    }
}

this.lastpage = function() {
    self.deselect();
    if(self.pageNumber() < self.totalPages()) {
        self.pageNumber(self.totalPages());
    }
}


this.firstpage = function() {
    self.deselect();
    if(self.pageNumber() != 0) {
        self.pageNumber(self.pageNumber()-self.pageNumber());
        alert(self.pageNumber());
    }
}

this.previous = function() {
    self.deselect();
    if(self.pageNumber() != 0) {
        self.pageNumber(self.pageNumber() - 1);
    }
}

Edit: After your comment about the ID, Name and Status not getting updated, I added 3 new observables selectedName, selectedID and selectedStatus. I am using these observables in HTML so that they can be updated whenever selected is changed. This is done by using a subscribe function on selected.

HTML

<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />

JS

self.selected = ko.observable(self.items()[0]);
self.selectedID=ko.observable(self.items()[0].ID());
self.selectedName=ko.observable(self.items()[0].Name());
self.selectedStatus=ko.observable(self.items()[0].Status());

self.selected.subscribe(function(newValue){
  if (newValue === null){
    self.selectedID(null);
    self.selectedName(null);
    self.selectedStatus(null);
    return;
  }
  if (typeof newValue !== 'undefined'){
    self.selectedID(newValue.ID());
    self.selectedName(newValue.Name());
    self.selectedStatus(newValue.Status());
  }
});

this is almost I wish to achieve but how about reflect my Fields ID,Name and Status to be empty — AnkUser, Aug 07 '18 at 08:07
Here is the quick updated [Fiddle](https://jsfiddle.net/975ncawv/281/) There is an Button "Change Data" clicking on it will change data in Table. When data is changed I also wish to refresh/update Paging. For Ex: If you are on last page and then click Button, It should go to 1st page and paging arrows should be refresh. Any Idea how to break it thoirugh — AnkUser, Aug 08 '18 at 09:50
Here it is : https://stackoverflow.com/questions/51780997/in-knockout-change-paging-when-data-is-changed — AnkUser, Aug 10 '18 at 07:15

Knockout: Table Select Unselect Row. Issue/challenge with unselecting Row

1 Answers1