Trying to create onclick event in node js grid using KOGrid

I would like to have a nice interactive grid view in an HTML page. I am using nodejs, express, twitterbootstrap, knockoutjs, for my technology stack. I am trying to use KOGrid to display various data points with some nice built in column sorting and other grid functionality.

My issue is trying to fire an event when a button is clicked in a row. And pass to that event, some of the various data fields from that specific row. So in KOGrid specifics, I am using cellTemplates and I need to call some function in the onclick event, but pass that function some KOGRID data bounded values. So, in my input element I would have data-bind="onclick: [Name of my function]( [name of some data bounded variable], [name of some other data bounded variable])

Can someone show me how to do this?

Here is a sample of my code...the input/onclick in the CBTemplate is where I am having issues.

CBTEMPLATE:

<script type="text/html" id="actionTemplate">
<div data-bind="kgCell: $cell">
<input type="checkbox" value="1" class="checkbox" checked="checked" data-bind="onclick: 'MyOnClickFunction( siteId(), status() )'"/>
</div>
</script>

DIV TAG:

<div data-bind="koGrid: { data: offer.siteCounts,
                    columnDefs: [ { field: 'templateField0', displayName: 'Site', cellTemplate: 'siteTemplate', width: 150},
                                 { field: 'status', displayName: 'Current Status', cellClass: 'site', cellTemplate: 'statusTemplate', width: 115},
                                 { field: 'details', displayName: 'Details', width: 175},
                                 { field: 'actionField0', displayName: 'Action', cellTemplate: 'cbTemplate', width: 200}],
                    autogenerateColumns: false,
                    displaySelectionCheckbox: false,
                    isMultiSelect: false }">
</div>

The click event binding should look like this with KO:

data-bind="click: function(data,event) { MyOnClickFunction(siteId(), status()) }"

Here is a working JSFiddle where you can play with it.

Some sidenotes:

  • In my sample I have used the $root binding context property to access the sample function: $root.offer.MyOnClickFunction. You will need to adjust this depending on which level you have defined the MyOnClickFunction on your viewmodels.

  • You need to return true from the click binding handler if you do want to let the default click action proceed (e.g checking the checkbox etc.)