ListView : select does not fire change event

[Phil H.]

Hi:

I am not able to get the change event to get triggered.  I inspect the elements and the element does not appear to have been selected:

<select id="listView3" size="10" style="width: 150px;" class="k-list-container "></select>
<script>
    $("#listView3").kendoListView({
        dataSource: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" },
            { id: 3, name: "Grapes" },
            { id: 4, name: "Bananas" }
        ],
        template: '<option value="#: id #" class="k-item">#: name # (#: id #)</option>',
        dataTextField: "name",
        dataValueField: "id",
        selectable: "single",
        change: function (e) {
            // handle selected event
            alert(this.select().val());
        }
    });
</script>

Using a <div> tag version of ListView, the event works as expected and when I inspect the element it indicates that it is selected.

Phil

[Kiril Nikolov]

Hello Phil,

Initializing the ListView using a select element is not supported. You can use a div, span or ul element to initialize the ListView, but not a select one.

Regards,
Kiril Nikolov
Telerik

 

 

[Phil H.]

Hi Kiril:
Where does it say this in the documentation?
Phil

[Phil H.]

Hi Kiril:
I can do this in Backbone.
Phil

[Kiril Nikolov]

Hi Phil,

It is not written in the documentation however it is not semantically correct to initialize it from a select element as it is not an input widget.  Maybe it is a good idea to add the same in the documentation, so expect it you be added to the following article:

http://docs.telerik.com/kendo-ui/getting-started/web/listview/overview

Regards,
Kiril Nikolov
Telerik