KoGrid Row Selection Binding

Question

I am using the KoGrid plugin to have a knockout grid with selection checkboxes. I have the following code so far.

    function columnDefsVM() {
    var self = this;
    this.myData = ko.observableArray(GlobalJson);
    this.mySelectedData = ko.observableArray(SelectedJson);

    this.gridOptions = {
        data: self.myData,
        columnDefs: [{ field: 'TestEventId', displayName: 'Name' }],
        selectedItems: self.mySelectedData,
        enablePaging: false,
    };
}
ko.applyBindings(new columnDefsVM());

Im just wondering how to I access the selectedItems property so that I can pass the selected values to an ajax call?

Or can I not do this and have to manually push the selected Id to an array using the afterSelectionChange option?

Answer 1

In your gridOptions you're passing in a reference to your mySelectedData observable array to use as the SelectedItems so you should be able to use the original mySelectedData variable instead of SelectedItems ; they are equivalent. mySelectedData will be updated when the grid selection changes.

 function columnDefsVM() { var self = this; this.myData = ko.observableArray([ {TestEventId: 1, Name: 'Object 1'}, {TestEventId: 2, Name: 'Object 2'}, {TestEventId: 3, Name: 'Object 3'}, ]); this.mySelectedData = ko.observableArray([]); this.gridOptions = { data: self.myData, columnDefs: [{ field: 'TestEventId', displayName: 'Name' }], selectedItems: self.mySelectedData, enablePaging: false, }; } ko.applyBindings(new columnDefsVM()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/Knockout-Contrib/KoGrid@2.0.6/koGrid-2.0.6.debug.js"></script> <link href="https://cdn.jsdelivr.net/gh/Knockout-Contrib/KoGrid@2.0.6/KoGrid.css" rel="stylesheet" /> <label>mySelectedData: </label><span data-bind="text: ko.toJSON(mySelectedData)"></span> <br/> <br/> <div style="height:200px;" data-bind="koGrid: gridOptions"></div>