Enable button when user has selected five or more items in SlickGrid

Question

I have a SlickGrid where users can select rows using the CheckboxSelectColumn plugin.

I have an html button where I want to data-bind the Submit button to only be visible once the user has selected five rows or disable the button if they uncheck enough rows to where less than five are checked.

<button data-bind="click: submit, enable: hasSelectedFivePolicies">Submit</button>

In my knockout script I have created an observable which sets the button to disabled when the page first loads. However, once the user has selected five or more items the button is not enabled.

How do I enable the button once a user has checked five or more items in SlickGrid?

function ViewModel() {
            var self = this;

            var hasFive = gridUnredeemed.getSelectedRows().length >= 5;
            self.hasSelectedFivePolicies = ko.observable(hasFive);

            self.getCheckedItems = function () {
                // get the selected stuff
                console.log("Getting checked items...");
                var selectedData = [], selectedIndexes;

                selectedIndexes = gridUnredeemed.getSelectedRows();
                $.each(selectedIndexes, function (index, value) {
                    var stuff = gridUnredeemed.getData()[value];
                    selectedData.push(stuff);
                    console.log(stuff);
                });
                return selectedData;
            }

            self.getSelectedPolicyNumbers = function () {
                var items = self.getCheckedItems();
                var policyNumbers = [];
                $.each(items, function () {
                    $.each(this, function (name, value) {
                        if (name === "PolicyNumber") policyNumbers.push(value);
                    });
                })
                return policyNumbers;
            }

            self.getSelectedPolicies = function () {
                var items = self.getCheckedItems();
                var policies = [];
                $.each(items, function () {
                    policies.push(new policyToRedeem(this.PolicyNumber, this.IssueDate, this.InsuredName, this.PolicyStatus, this.PolicyType));
                });

                return policies;
            }

Answer 1

The following line:

var hasFive = gridUnredeemed.getSelectedRows().length >= 5;

Is not enough to make Knockout create a dependency between getSelectedRows() and the hasSelectedFivePolicies observable.

Not only that, even if a dependency were created, it still wouldn't be enough because Knockout would not get notified when getSelectedRows is changed.

You need to manually subscribe for the onSelectedRowsChanged event, and change the hasSelectedFivePolicies observable value accordingly.

For example (assuming gridUnredeemed is the reference to your grid instance):

gridUnredeemed.onSelectedRowsChanged.subscribe(function(e) {
    var hasFiveRecalc = gridUnredeemed.getSelectedRows().length >= 5;
    self.hasSelectedFivePolicies(hasFiveRecalc);
});