Listview

[Tonih]

Hi,

I have a listview component that uses a template like so:

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

<script type="text/x-kendo-tmpl" id="template">
            <div class="listItem">
                <input type="checkbox" value="#= id #"/>
            </div>
</script>

What I would like is for the checkbox to fire the listview change event, instead of the listview itself. How do I accomplish this? Thanks.

Tonih

[Tonih]

Figured this out. I simply added an onchange event to the template checkbox component like so:

<script type="text/x-kendo-tmpl" id="template">
            <div class="listItem">
                <input type="checkbox" value="#= id #" onchange="alert(this.value)"/>
            </div>
        </script>

Tonih

[Tonih]

Hi, I am still having a bit of problem with this. As in my initial post to this question, I have a listview component that uses a template like so:

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

<script type="text/x-kendo-tmpl" id="template">
            <div class="listItem">
                <input type="checkbox" value="#= id #"/>
            </div>
</script>

I would like for the checkbox in my template to handle the #listView change: function() instead of the listview itself. The reason being is that I don't want the entire row of the list to be clickable and fire the change event, i only want when the checkbox onchange is fired, then the exact change function in the listview should execute. How can I achieve this? Hope I was clear thanks.

Tonih

[Alexander Valchev]

Hi Tonih,

If I understood correctly you would like to select the ListView items with checkboxes. This functionality is not supported however you can easily implement it with a custom JavaScript logic.
Please check this example and let me know if I missed something: http://jsbin.com/olicag/2/edit

Regards,
Alexander Valchev
Telerik