CODEWITHSUNDEEP
mvvmkendo-uikendo-grid
Scott
Scott

Reputation: 2760

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

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?

Upvotes: 1

Views: 2111

Answers (1)

OnaBai
OnaBai

Reputation: 40917

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/

Upvotes: 3

Related Questions