How to get access to a switch in a listview template

[Matt]

Hi,

Loving Kendo so far! sure this is an easy one ...

I am creating a grouped list view with a switch in it as follows -

$("#listview").kendoMobileListView({
                dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
                template: '${name} <input checked="${live}" type="checkbox" data-role="switch" data-align="right" />',
                headerTemplate: "<h2>Letter ${value}</h2>"
});

This all loads fine, and I can set the checked state on load :)

BUT I want to access the created switches so I can bind to the change event and in turn store the users choice when they flick the switch?

Sadly, I am not sure how I can access the auto-generated template switch objects (or any object for that matter) for use in js?

Thanks
Matt

[Petyo]

Hello,

You can use declarative event binding. Something like:

<script>
...
template: '${name} <input data-change="foo" checked="${live}" type="checkbox" data-role="switch" data-align="right" />',
...
</script>

<script>
function foo(e) {
e.sender // the switch instance
e.sender.element // the DOM element.
}
</script>

If you need some additional information from the data in the event handler, you can use additional custom data attributes in the input element.

All the best,
Petyo
the Telerik team

[Matt]

Thanks Petyo! 

I have now added data-customname to my template and I am accessing it successfully with

e.sender.element.context.dataset.customname

Is this the shortest path to my custom attribute?