knockout check all checkboxes in table column - foreach

Question

I am new to knockout and trying to implement a table with the first column as a checkbox. When I click the header the whole column should get checked / unchecked. At the moment, it works when I click table rows (all rows get checked/unchecked) but not on table header. Please let me know what is wrong with my code! Here is parts of my code :
<table>
<tr>
<th><input type="checkbox" data-bind="click: selectAll"></th>
<th>Notes</th>
</tr>
<tbody data-bind="foreach: DocumentRows">
<tr>
<td><input type="checkbox" data-bind="checked: $parent.IsSelected"></td>
<td><data-bind="text: Notes"></td>
</tr>
</tbody>
</table>
// Script.ts
```
define(['knockout', 'jquery', 'text!./Template'], (ko, $, htmlString) => {
//Document
class Document {
Id: KnockoutObservable<number>;
Notes: KnockoutObservable<string>;
constructor(data?) {
this.Id = ko.observable(0);
this.Notes = ko.observable("").extend({ defaultValue: "" });
if (data != null) {
ko.mapping.fromJS(data, {}, this);
}
}
};
//DocumentS VIEW MODEL
class DocumentsViewModel {
DocumentRows: KnockoutObservableArray<Document>;
IsSelected: KnockoutObservable<boolean>;
constructor(params) {
this.DocumentRows = ko.observableArray([]);
this.IsSelected = ko.observable(false);//
this.InitComputed();
this.Load();
}
InitComputed = () => {
selectAll = (Document: DocumentsViewModel) => {
var doc = Document.DocumentRows;
ko.utils.arrayForEach(doc(), function (item) {
item.IsSelected(true);
});
}
Load = () => {
DocumentsApiService.GetDocumentList(this);
}
}
//API SERVICE
class DocumentsApiService {
static GetDocumentList = (model: DocumentsViewModel) => {
$.ajax({
url: buildUrl(model.LoadListURL, { 'id': model.ObjectId(), 'additionalId': model.AdditionalId() }),
type: 'POST',
data: ko.mapping.toJSON(model.Filter),
contentType: 'application/json; charset=utf-8'
}).done(allData => {
var mapped = ko.mapping.fromJS(allData, DocumentsMapping);
model.DocumentRows(mapped.DocumentRows());
model.Filter.TotalCount(mapped.TotalCount());
model.Filter.PageIndex(mapped.Filter.PageIndex());
CalcCountTableStatus(model.Filter.PageIndex(), model.Filter.PageSize(), model.Filter.TotalCount(), 'documents-count-status-line');
}).fail(data => {
TSCore.OnFailure(data);
});
}
}
return { viewModel: DocumentsViewModel, template: htmlString }
});
```

Answer 1

When implementing such a selection feature, usually there are two approaches.
Have an isSelected boolean observable at the Document level
Put the isSelected observable on the Document model and no on the DocumentsViewModel, because each document must hold the information whether it's selected or not.
I guess you were trying to implement this approach, but at first glance, you do not have the IsSelected at the right place. Also, if you move IsSelected to the document, then in you view do not use $parent.IsSelected, but just IsSelected.
Maintain a selectedDocuments observable array of documents at the DocumentsViewModel level
This way you can have an observable array of all the currently selected documents, and maintain that when selecting all of them (like push all the rows to the selection)
In your view, you must use a parent reference to determine whether the document is selected similar to for example $parent.selectedDocuments.indexOf($data) >= 0.
I'll not cover all the pros and cons of the two approach for now, but I suggest you use the first one, if you can extend your document model with an IsSelected observable.
Other notes
It's not quite clear what you want to achieve with the InitComputeds stuff. Why don't you just have these actions as functions on your viewmodel class like
public selectAll(): void {
ko.utils.arrayForEach(this.DocumentRows(), function (item) {
item.IsSelected(true);
});
}
If you use this syntax, you must bind the function at the view level like $data.selectAll.bind($data). If you do not want that, and you want just purely selectAll, then you can use arrow function as a field syntax like this.
public selectAll = ():void => {
ko.utils.arrayForEach(this.DocumentRows(), function (item) {
item.IsSelected(true);
});
}
Hope I could give some valuable hints.

Answer 2

So, after changes
Table header:
<th><input type="checkbox" data-bind="click: selectAll, checked: selectedAll"></th>
Table body:
<td><input type="checkbox" data-bind="checked: IsSelected"></td>
Script:
//Document
class Document {
Id: KnockoutObservable<number>;
IsSelected: KnockoutObservable<boolean>;
constructor(data?) {
this.Id = ko.observable(0);
this.Notes = ko.observable("").extend({ defaultValue: "" });
this.IsSelected = ko.observable(false);
if (data != null) {
ko.mapping.fromJS(data, {}, this);
}
}
};
//DocumentS VIEW MODEL
class DocumentsViewModel {
selectedAll: KnockoutObservable<boolean>;
constructor(params) {
this.selectedAll = ko.observable(false);
}
InitComputed = () => {
this.selectedAll = ko.pureComputed({
read: function () {
return this.selectedIds().length === this.DocumentRows().length;
},
write: function (value) {
this.selectedIds(value ? this.DocumentRows.slice(0) : []);
},
owner: this
}
selectAll = (): void => {
if (this.selectedIds().length > 0) {
this.selectedIds.removeAll();
ko.utils.arrayForEach(this.DocumentRows(), function (item) {
item.IsSelected(false);
});
} else {
ko.utils.arrayPushAll(this.selectedIds(), this.DocumentRows())
ko.utils.arrayForEach(this.DocumentRows(), function (item) {
item.IsSelected(true);
});
}
}
}
It doesn't show the header to be checked when all rows are checked or unchecked when all are unchecked. Any pointers where I am going wrong please?