How to pass an element bound to a KoGrid cell to 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 in ViewModel:

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

item that is passed to the removeItem function is not a row bound data item, but rather a KoGrid column. How can I get a data item bound to a string to pass it to the remove function in an observable array?

I tried to hook click events using jQuery and a lot of cell templates trying to pass a data item bound to a string without success.

Answer 1

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

$ data: kg.Column: // column object

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

So you need to change the binding:

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

JSFiddle demo.