click event in template generates error

[Alex]

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);

[Alex]

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

[Petyo]

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

 

 

[Alex]

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" }
                    }
                }
            }
        })

[Petyo]

Hello Alex,

thanks for the update. Indeed, the issue is related to the multiple items per page passed. I think this is due to an array of items being passed to the binding, which does not allow the parent method to be located correctly. I have logged this as an issue  - we should be able to address it shortly. 

Meanwhile, you can work around this issue by using a touch widget and bind to its tap event using regular data-tap="myModel.tap" syntax.

Regards,
Petyo
Telerik

 

 

[Alex]

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.