KnockoutJs KoGrid unable to tick checkbox for selection

Question

I have a KnockoutJs Ko Grid which is configured to allow the user to select multiple rows. Rows can be selected, and I am able to determine which rows have been selected in JS functions bound to a button click. However, the display isn't quite right. When the user clicks the check box at the left of the grid it doesn't get ticked.

In my JS viewmodel I have the following gridOptions set. I've set selectedwithCheckboxOnly to true because one of the columns contains hyperlinks which I need the user to be able to action:

this.gridOptions = {
    data: self.myData,
    enablePaging: true,
    pagingOptions: self.pagingOptions,
    filterOptions: self.filterOptions,
    selectWithCheckboxOnly: true,
    selectedItems: self.selected,
    canSelectRows: true,
    displaySelectionCheckbox: true,
    columnDefs: [{ field: 'Timestamp', displayName: 'Timestamp', width: 130 },
                { field: 'State', displayName: 'State', width: 70 },
                { field: 'FaultApplication', displayName: 'Application', width: 110 },
                { field: 'FaultExceptionMessage', displayName: 'Exception Message', width: 400 },
                { field: 'FaultServiceName', displayName: 'ServiceName', width: 140 },
                { field: 'LinkToFaultsPage', displayName: 'Link to Fault', width: 80, cellTemplate: '<a data-bind="attr: { href: $parent.entity.LinkToFaultsPage}" >Fault</a>' }
    ]
};

I have found the same behavior at the following JsFiddle: http://jsfiddle.net/BizTalkers/oowgbj80/

Answer 1

It appears to be a known bug that has been solved by GitHub users ricred and kiaplayer here .

kogrid doesn't correctly update the selected state to which the checkbox is bound. If you add a custom afterSelectionChange method via your data-bind, you'll solve the issue. Update the HTML in your fiddle to this:

<div id="wrapper" data-bind="koGrid:{data:myObsArray, afterSelectionChange: function () { return true; } }"></div>

( example )