Question

I´m trying to bind and event inside a RowTemplate to a viewModel function, using Kendo Grid MVVM.

However, after calling kendo.bind an error is displayed in then console, and the event does not get fired, however the grid displays correctly. Here is the error:

Uncaught Error: The mouseover binding is not supported by the button element kendo.editor.js:890

I tried to change the element type inside the row template to any other thing, with same results.

Here is my html code:

<div id="content">
<div>
    <div id="grid" data-role="grid" data-bind="source: ordersSource"
                    data-selectable="True" data-columns='["OrderID", "ShipName", "ShipCity"]' data-row-template="rowTemplate" />
</div>            
</div>
<script id="rowTemplate" type="text/x-kendo-template">
        <tr data-uid="#= uid #">
            <td><button data-bind="mouseover: listener">#: OrderID #</button></td>
            <td>#: ShipName #</td>
            <td>#: ShipCity #</td>
        </tr>
</script>

And here is my viewModel code:

var ordersDatasource = new kendo.data.DataSource({
type: "odata",
transport: {
    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
    model: {
        id: "OrderID",
        fields: {
            OrderID: { type: "number" },
            ShipName: { type: "string" },
            ShipCity: { type: "string" }
        }
    }
},
pageSize: 5,
});

var viewModel = kendo.observable({
   ordersSource: ordersDatasource,
   listener: function (e) {
    alert("Event: " + e.type);
    }
});

kendo.bind($('#content'), viewModel);

Here is the jsFiddle if you want to try.

The first column button should fire the event when passing the mouse over it, however it does not.

Was it helpful?

Solution

The correct syntax to bind events is:

<button data-bind="events: { mouseover: listener }">#: OrderID #</button

(updated demo)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top