Mouse-over on item in a ListView

[Phil H.]

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

[Petyo]

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

 

 

[Phil H.]

Hi Petyo:

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

Phil

[Phil H.]

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

[Kiril Nikolov]

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

 

 

[Phil H.]

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

[Phil H.]

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

[Phil H.]

change the li to div.  The li were working, but change to div anyways.

[Kiril Nikolov]

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