Select Kendo UI ListView Item

Question

Using a Kendo ListView and when my page reloads, if a selection has been made, I need to have my code automatically select the ListView Item that was previously selected. I'm able to obtain the Kendo DataItem by iterating over the datasource collection, but when I do listView.select(item) the UI does not display anything as selected.

Here is my list view:

$("#listview").kendoListView({
        dataSource: coverages,
        template: kendo.template($("#listTemplate").html()),
        selectable: true,
        change: function() {
            var index = this.select().index();
            dataItem = this.dataSource.view()[index];

            if (selectedCoverageCode == null) {
                selectedCoverageCode = dataItem;
            }

            onCodeChanged(categoryId, planId, dataItem);
        }
    });

And here is my code to set the previously selected item:

   function setSelectedCoverageCode(code) {
    var listView = $("#listview").data("kendoListView");
    var dataSource = listView.dataSource.view();
    if (listView) {
        $.each(dataSource, function(index, item) {
            if (item.Code === code) {
                listView.select(item);
                selectedCoverageCode = item;
            }
        });
    }
}

I need the DOM object not the data source DataItem, I believe. The above setSelectedCoverageCode function fires the Change event, but the actual element is not selected at that point in the DOM.

How can I do this so I can show the item as already selected whenever a reload happens? Suggestions?

Thanks

Answer 1

You can get the DOM element for the data item by looking for its UID.

var item = // the item out of the DataSource that you want to select
var listView = $("#listview").data("kendoListView");

listView.select(listView.element.find('[data-uid="' + item.uid + '"]'));