How Can I Pass The Item Bound To A KoGrid Cell To The ViewModel

Question

HTML:

<div data-bind="koGrid: gridOptions" style="height:600px;border:solid 1px #ccc;"></div>

JS:

Column definitions:

{ field: 'orderCatalogUpdateID', cellTemplate: '<button data-bind="click: $userViewModel.removeItem">X</button>', displayName: ' ', width: '2%' }`

removeItem function on the ViewModel:

self.removeItem = function (item) {
    self.list.remove(item);
}

The item that gets passed to the removeItem function is not the data item that is bound to the row but rather the KoGrid column. How can I get the data item that is bound to the row so I can pass it to the remove function on the observable array?

I have tried wiring up click events with jQuery and a variety of cell templates trying to pass in the data item being bound to the row with no success.

Answer 1

By default the current datacontext gets passed to the click handler which is the current column object as described in the documentation:

$data: kg.Column: //the column entity

What you need to pass in is the $parent.entity: //your data model which is the current row entity.

So you need to change your binding:

{ 
    field: 'orderCatalogUpdateID', 
    cellTemplate: '<button data-bind="click: ' + 
       ' function() { $userViewModel.removeItem($parent.entity); }">X</button>', 
    displayName: ' ', 
    width: '2%' 
}

Demo JSFiddle.