Clear selected programatically does not work

[AndersMalmgren]

I need to clear selected programatically (Not the checbox in header), it does not work

http://jsfiddle.net/eyPzH/

[ZiadJ]

I've struggled with this before and wrote this little function to take care of it all:

function kgClearSelection(data, selectedItems) {
    for(var i = 0; i <  selectedItems().length; i++)
        selectedItems()[i].__kg_selected__ = false;

    var dataValue = data();
    selectedItems([]);
    data([]);
    data(dataValue);
}

The downside of this method is that it requires the data to be reloaded.

Here's the updated fiddle: http://jsfiddle.net/eyPzH/1/

[AndersMalmgren]

Yeah I ended up doing something similar. Should be supported by native grid though :D My code

            ko.utils.arrayForEach(this.items(), function (item) {
                item.__kg_selected__ = false;
            });
            this.selected([]);

[steedums]

I had to use ZiadJ solution. Unfortunately, reloading the data is slow.

edit: I found it was faster to select the selected rows: $('#tableid div.kgRow.selected') and then invoke the click event on the select rows: .trigger('click');

[huer12]

You need to get a reference to the ko-grid row. On this row you can call row.selected(false); I have single selction table, so I can listen to the event 'afterSelectionChange'. In this event the first argument is the row from which I keep the reference.

this.gridOptionsInactiveItems = { data: this.inactiveItems,

            afterSelectionChange: $.proxy(this.OnSelectedInactiveItemChanged, this)
        };

private OnSelectedActiveItemChanged(newRow) { this.selectedRow = newRow; }

function clearSelection(){ if (this.selectedRow != null) { this.selectedRow.selected(false); } }

[huer12]

This plugin works for me:

var KoGridRowSelectionPlugin = (function () {
    function KoGridRowSelectionPlugin(selectedItems) {
        this.selectedItems = selectedItems;
    }
    KoGridRowSelectionPlugin.prototype.onGridInit = function (grid) {
        var _this = this;
        this._grid = grid;

        this.selectedItems.subscribe(function (newValues) {
            if (_this._grid.$$selectionPhase == true)
                return;

            for (var j = 0; j < newValues.length; j++) {
                var newValue = newValues[j];

                for (var i = 0; i < _this._grid.rowFactory.rowCache.length; i++) {
                    var rowCache = _this._grid.rowFactory.rowCache[i];
                    if (rowCache.entity == newValue) {
                        _this._grid.selectionService.setSelection(rowCache, true);
                        _this._grid.selectionService.lastClickedRow = rowCache;
                        break;
                    }
                }
            }
        });
    };
    return KoGridRowSelectionPlugin;
})();

Just add it in the grid options to the list of plugins.

[PurpleD423]

My goal for this is to have two KoGrids and between the two of them have only one active selection. I took AndersMalmgren updated solution and tweaked it a bit, you have to make sure to kick off the valueHasMutated() for the observableArray() so anything bound to it will then be updated:

function KoView() {
    var self = this;

    self.paymentMethodACHEntries = ko.observableArray([]);
    self.paymentMethodCCEntries = ko.observableArray([]);
    self.selectedACHMethod = ko.observableArray([]);
    self.selectedCCMethod = ko.observableArray([]);
    self.selectedPaymentMethod = ko.observableArray([]);

    self.selectedACHMethod.subscribe(function (item) {
        if (item == null || item.length === 0)
            return;
        self.selectedPaymentMethod(item);
    });

    self.selectedCCMethod.subscribe(function (item) {
        if (item == null || item.length === 0)
            return;
        self.selectedPaymentMethod(item);
    });

    self.paymentMethodSelectACHDataGrid = {
        data: self.paymentMethodACHEntries,
        afterSelectionChange: function() {
            ko.utils.arrayForEach(self.paymentMethodCCEntries(), function (item) {
                item.__kg_selected__ = false;
            });
            self.paymentMethodCCEntries.valueHasMutated();
            return true;
        },
        selectedItems: self.selectedACHMethod,
        displaySelectionCheckbox: true,
        multiSelect: false,
        canSelectRows: true,
        keepLastSelected: false,
        selectWithCheckboxOnly: true
    };

    self.paymentMethodSelectCCDataGrid = {
        data: self.paymentMethodCCEntries,
        afterSelectionChange: function () {
            ko.utils.arrayForEach(self.paymentMethodACHEntries(), function (item) {
                item.__kg_selected__ = false;
            });
            self.paymentMethodACHEntries.valueHasMutated();
            return true;
        },
        selectedItems: self.selectedCCMethod,
        displaySelectionCheckbox: true,
        multiSelect: false,
        canSelectRows: true,
        keepLastSelected: false,
        selectWithCheckboxOnly: true
    };
}

In this example, both paymentMethodACHEntries and paymentMethodCCEntries are separate observableArray() objects that I want to clear the selection from, when the opposite dataGrid has it's selection changed. I used the .subscribe method of each selection's observableArray() to then update a single observableArray() with the single selected value: self.selectedPaymentMethod()