This is a migrated thread and some comments may be shown as answers.

Mouse-over on item in a ListView

8 Answers 480 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Phil H.
Top achievements
Rank 2
Phil H. asked on 05 Aug 2014, 10:11 PM
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

8 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 06 Aug 2014, 01:02 PM
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!
 
0
Phil H.
Top achievements
Rank 2
answered on 06 Aug 2014, 10:38 PM
Hi Petyo:

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

Phil
0
Phil H.
Top achievements
Rank 2
answered on 07 Aug 2014, 11:48 PM
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
0
Accepted
Kiril Nikolov
Telerik team
answered on 08 Aug 2014, 01:58 PM
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!
 
0
Phil H.
Top achievements
Rank 2
answered on 08 Aug 2014, 10:52 PM
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
0
Phil H.
Top achievements
Rank 2
answered on 09 Aug 2014, 12:10 AM
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
0
Phil H.
Top achievements
Rank 2
answered on 09 Aug 2014, 12:18 AM
change the li to div.  The li were working, but change to div anyways.
0
Kiril Nikolov
Telerik team
answered on 11 Aug 2014, 11:07 AM
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!
 
Tags
ListView
Asked by
Phil H.
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Phil H.
Top achievements
Rank 2
Kiril Nikolov
Telerik team
Share this question
or