Mouse-over on item in a ListView

9 posts, 1 answers
  1. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 05 Aug 2014 Link to this post

    Hi:

    I would like to bind the mouse-over event to items in a ListView.  I found this example with Observable.
        http://demos.telerik.com/kendo-ui/mvvm/event

    <ul id ="listView2" class="k-list-container" style="width: 200px;"></ul>
    <script id='officer-template2' type='text/x-kendo-template'>
        <li data-bind="events:{ mouseover: listener }"><h3>#= title #</h3> <div>#= name #</div></li>
    </script>
    <script type='text/javascript'>
        $("#listView2").kendoListView({
            dataSource: {
                data: [{ name: 'M.P.', title: 'President' },
                    { name: 'J.O.C.', title: 'Vice President' },
                    { name: 'P.H', title: 'Treasurer' },
                    { name: 'B.R.M.', title: 'Webmaster' }]
            },
            template: kendo.template($('#officer-template').html()),
            selectable: true
        });
    </script>

    Phil
  2.
  3. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 06 Aug 2014 Link to this post

    Hello Phil,

    In order for this approach to work, you should use kendo.bind like the docs show - instantiating a kendo widget does not automatically perform a binding. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 06 Aug 2014 in reply to Petyo Link to this post

    Hi Petyo:

    I thought that Model is derived from Observable and DataSource has-a Model.

    Phil
  7. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 07 Aug 2014 in reply to Phil H. Link to this post

    Hi Petyo:

    A hint would be appreciated... 
    The following crashes on jQuery apply.  I do not think 'data' is derived from observable.
    <script id='officer-template2' type='text/x-kendo-template'>
        <li  id='#: id #' data-bind='events:{ mouseover: listener }'><h3>#= title #</h3> <div>#= name #</div></li>
    </script>
    <ul id ="listView2" class="k-list-container" style="width: 200px;"></ul>
    <script type='text/javascript'>
        $("#listView2").kendoListView({
            dataSource: {
                data: [{ id: 1, name: 'M. P.', title: 'President' },
                    { id: 2, name: 'J. O. C.', title: 'Vice President' },
                    { id: 3, name: 'P. H.', title: 'Treasurer' },
                    { id: 4, name: 'B. M.', title: 'Webmaster' }],
            },
            template: kendo.template($('#officer-template2').html()),
            selectable: "single",
            listener: function (e) {
                console.log("Event: "); // + e.type);
            }
        });
        var listView2 = $("#listView2").data("kendoListView");
        kendo.bind($("#listView2"), listView2.dataSource.data());
    </script>

    Phil
  8.
  9. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 08 Aug 2014 Link to this post

    Hi Phil,

    In order to bind the template using MVVM you will also need to use MVVM to initialize the widget. Please check the following working example and let me know if it helps:

    http://dojo.telerik.com/unAP

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 08 Aug 2014 in reply to Kiril Nikolov Link to this post

    Thanks Kiril:
    the following is the important part of what was supplied:
    <div id="example">
        <div data-role="listview"
            data-template="template"
            data-bind="source: products, visible: isVisible, events: { save: onSave }"
            style="width: 420px; height: 200px; overflow: auto">
        </div>
        <script type="text/x-kendo-tmpl" id="template">
            <h2 data-bind='events:{ mouseover: onMouseOver }'>#:ProductName#</h2>
        </script>
    </div>
    <script  type='text/javascript'>
        var viewModel = kendo.observable({
            onMouseOver: function () {
                console.log(1);
            },
            isVisible: true,
            onSave: function (e) {
                kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");
            },
            products: new kendo.data.DataSource({
                schema: {
                    model: { id: "ProductID" }
                },
                batch: true,
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/products",
                        dataType: "jsonp"
                    }
                }
            })
        });
        kendo.bind($("#example"), viewModel);
    </script>

    Phil
  13. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 08 Aug 2014 in reply to Phil H. Link to this post

    Hi
    My version:
    <div id='listView2' class="k-list-container" data-role='listview'
        data-template='officer-template2' data-bind='source: officers'
        style="width: 420px;">
    </div>
    <script id='officer-template2' type='text/x-kendo-template'>
        <li  id='#: id #' data-bind='events:{ mouseover: listener }'><h3>#= title #</h3> <div>#= name #</div></li>
    </script>
    <script type='text/javascript'>
        var viewModel2 = kendo.observable({
            officers: [{ id: 1, name: 'M. P.', title: 'President' },
                    { id: 2, name: 'J. O. C.', title: 'Vice President' },
                    { id: 3, name: 'P. H.', title: 'Treasurer' },
                    { id: 4, name: 'B. M.', title: 'Webmaster' }],
            listener: function (e) {
               console.log("Event: " + e.type + ' ' + e.data.name);
            }
        });
        kendo.bind($("#listView2"), viewModel2);
    </script>

    Phil
  14.
  15. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 08 Aug 2014 in reply to Phil H. Link to this post

    change the li to div.  The li were working, but change to div anyways.
  17. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 11 Aug 2014 Link to this post

    Hello Phil,

    Using <li> elements will create invalid HTML, as there is no parent <ul> element that will hold the <li> items. So it is expected to create some issues, when the HTML is invalid.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top