KendoUI ListView Double Click Selected Item

kendo-ui, listview

Solution

In a Kendo UI ListView, `select` does not return the item but the HTML. You should use `index()` for getting the index of the element selected and the `dataSource.view()` for retrieving current displayed elements.

Your code should be:

function setItemDoubleClickEvent() {
    var items = $(".machineInstances");
    items.dblclick(function () {
        $("#menuInstances").click();
        var listView = $("#listView").data("kendoListView");
        var idx = listView.select().index();
        var item = listView.dataSource.view()[idx];
        alert(item.Name);
        alert("Double Click!");
    });
}

But I would recommend simplifying the code to:

function setItemDoubleClickEvent() {
    $(".machineInstances").on("dblclick", function () {
        var listView = $("#listView").data("kendoListView");
        var idx = $(this).index();
        var item = listView.dataSource.view()[idx];
        alert(item.Name);
        alert("Double Click!");
    });
}

Or using a completely different strategy for getting the same result:

var listView = $("#listView").data("kendoListView");
function setItemDoubleClickEvent() {
    $(".machineInstances", listView).on("dblclick", function () {
        var uid = $(this).data("uid");
        var item = listView.dataSource.getByUid(uid);
        alert(item.Name);
        alert("Double Click!");
    });
}

Where I get the `uid` of the double-clicked element and then retrieve the item data using `getByUid`.

Also setting listView outside prevents having to compute it each time we execute the function.

Example : http://jsfiddle.net/OnaBai/3wQaK/

Problem

I am attempting to get the Name from the template of a KendoUI ListItem after the user double clicks. I cannot seem to find a way to get the value of the selected item. The alert is coming back as undefined. ``` <script type="text/x-kendo-tmpl" id="template"> <div class="machineInstances"> #:Name# [#:Environment#] #:Description# </div> </script> $("#listView").kendoListView({ dataSource: dataSource, selectable: "single" , dataBound: setItemDoubleClickEvent , template: kendo.template($("#template").html()) }); function setItemDoubleClickEvent() { var items = $(".machineInstances"); items.dblclick(function () { $("#menuInstances").click(); var selected = $("#listView").data("kendoListView").select(); alert(selected.Name); alert("Double Click!"); }); } ``` Thank you, Drew

Original source