click event in template generates error

6 posts, 1 answers
  1. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 11 Dec 2014 Link to this post

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

  2. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 11 Dec 2014 in reply to Alex Link to this post

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

  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Dec 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 14 Dec 2014 in reply to Petyo Link to this post

    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" }
                        }
                    }
                }
            })
  6. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 16 Dec 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 16 Dec 2014 in reply to Petyo Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready