Trying to bind a local datasource data to a listview in Kendo MVVM

Question

I am new in Kendo MVVM. Trying to bind datasource data to a listview but it does not show the data.Tried to mix and match all available examples. Want to use the template which is not working. Here is the code sample

http://dojo.telerik.com/IwawE

Answer 1

Modified the dojo with the fixes

http://dojo.telerik.com/IwawE/5

Answer 2

Your data binding declaration is incomplete and results in javascript errors when kendo tries to instantiate the listview.

data-bind="source:gsSystem,
           visible: isVisible,
           events: { click:  }"

Firstly, there is no 'isVisible' property on your view model so the binding will return 'undefined' resulting in the listview not being shown. Either remove that binding or add the property as part of the model, for example:

isVisible: true

Secondly, there is no function defined for the click event. Usually you would specify one such as:

events: { click: onClick }

and add the handler to the model:

onClick: function (e) {
    alert("Clicked");
}

However in the case of the ListView, there is no click event available. Instead, remove the event from the ListView declaration and add it to the div within the template instead:

<script type="text/x-kendo-template" id="tmpl">
    <div data-bind="events: { click: onClick }">#:text#</div>
</script>