Should I be able to attach a click event to an item in the template for a scrollview?

No matter how simplified I make the template,  there is  always an error of "undefined is not a function" arises if I put a click event on any html item in the scrollview template. But the function is definitely in the view model.  In fact of course putting a fake click method to invoke in the    template generates the same error, so it leads me to think that the template is not bound to the viewModel.

<div data-role="view"
            data-title="debug"
            data-model="app.friendsService.viewModel"
            data-stretch="true">        
                    <div 
                    id="toddlersScrollview"
                    data-role="scrollview" 
                    data-items-per-page="6"     
                    data-bind="source:friendsDS" 
                    data-template="allfriends-template"
                    data-enable-pager="false"
                    style="height:200px;">
                    </div>
                </div>

                </div>
                
                <script type="text/x-kendo-template" id="allfriends-template">                  
           <div data-bind="click:onfriendClick"></div>
                </script>
             </div>     
</div>




Viewmodel snippet:

function (global) {
    var friendsViewModel,
        app = global.app = global.app || {};
    friendsViewModel = kendo.data.ObservableObject.extend({ 
        roomid:null,
        childid:null,
        fname:null,
        mname:null,
        friendsDS:null,
        onfriendClick: function(e) {
            console.log("something");
        },
    friendsDS: new kendo.data.DataSource({
            transport: {
                read: {
                     url: "http://someurl.com/v1/room/param/children",
                    dataType: "json",
                    data: function() {
                       var roomid =  app.friendsService.viewModel.get("roomid")
                       return {roomid: roomid};
                    },
                    type: "GET"
                },
                update: {
                    url: "http://acorn.xander.com/api/rooms",
                    type: "PUT"}
            },
            schema: {
                model: { "id":"id",
                    fields: {
                        id: { type: "number" },
                        fname: { type: "string" },
                        mname: { type: "string" },
                        lname: { type: "string" }
                    }
                }
            }
        })
    });       
        app.friendsService = {
        viewModel: new friendsViewModel()
    };

})(window);

I think after reviewing the docs for this control, there is no event for the click available,so this not going to work.

Hello Alex,

Actually, your approach should work (although I would not recommend using the click event), unless you are using primitive values as data items. Please check this jsbin.

Regards,
Petyo
Telerik

Thank you Petyo,  your sample was instructive while it demonstrated the click event does work; but I found the error I was getting is being created when the event is fired in a multiple items template.

I changed the sample a bit to have a multiple items template:

http://dojo.telerik.com/@xmanalex/UvUDe

The error I am getting in the AppBuilder client where I have the source file of kendo.all.js points to line 9922 

 handler = source.get(path);

of the EventBinding function 

var EventBinding = Binding.extend( {
        get: function() {
            var source = this.source,
                path = this.path,
                index = 0,
                handler;

            handler = source.get(path);

            while (!handler && source) {
                source = this.parents[++index];

                if (source instanceof ObservableObject) {
                    handler = source.get(path);
                }
            }

            return proxy(handler, source);
        }
    });

Is there something I should be doing different with the event binding within a multiple items template?

Also just to confirm I have the  datasource in the viewmodel defined as required in the documentation with the total and pageSize set : 

friendsDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "http://myurl.com/v1/room/param/children",
                    dataType: "json",
                    data: function() {
                       var roomid =  app.friendsService.viewModel.get("roomid")
                       return {roomid: roomid};
                    },
                    type: "GET"
                }
            },
            pageSize: 20,
            serverPaging: true,   
            schema: {
               data:"data",
               total:"total",
                model: { "id":"id",
                    fields: {
                        id: { type: "number" },
                        fname: { type: "string" },
                        mname: { type: "string" },
                        lname: { type: "string" },
                        photo: { type: "string" }
                    }
                }
            }
        })

Thank you very much Petyo for the advice to use the touch widget workaround, I was unable to  implement the project interface otherwise (the listview control could not be made suitable).  Had been hitting roadblocks for days.  thanks again.