Kendo MVVM Grid - How to respond to row click event? - mvvm

Question

I have the following Kendo MVVM grid:
<div>
<div id="systemsGrid" data-role="grid"
data-sortable="true"
data-scrollable="true"
data-editable="false"
data-selectable="true"
data-toolbar="['create', 'save', 'cancel']"
data-bind="source: systems"
data-auto-bind="true
data-columns="[
{ 'field': 'SystemName', 'width': 200 },
{ 'field': 'SystemKey', 'width': 200 },
{ 'command': [{name: 'destroy', text: 'Delete'}], 'width': 38 }
]">
</div>
</div>
When a given row is clicked on, I want to use the SystemKey to look up additional data and display it on another grid. How do I capture this click event? I added this:
$("#systemsGrid").on("click", gridClick);
But this will also fire even if, say, the "Add new record" button is clicked. What is the proper way to respond to just a click on a row of the grid?

Answer 1

Why do not simply bind the change event to your gridClick?
Something like:
<div>
<div id="systemsGrid" data-role="grid"
data-sortable="true"
data-scrollable="true"
data-editable="false"
data-selectable="true"
data-toolbar="['create', 'save', 'cancel']"
data-bind="source: systems, events: { change: gridClick }"
data-auto-bind="true"
data-columns="[
{ 'field': 'FirstName', 'width': 100 },
{ 'field': 'City', 'width': 100 },
{ 'command': [{name: 'destroy', text: 'Delete'}], 'width': 100 }
]">
</div>
</div>
Where I bound gridClick using events: { change: gridClick }
You can see it here: http://jsfiddle.net/OnaBai/6XALD/2/