How to get access to a switch in a listview template

3 posts, 1 answers
  1. Matt
    Matt avatar
    58 posts
    Member since:
    Jun 2009

    Posted 04 Apr 2012 Link to this post

    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
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Matt
    Matt avatar
    58 posts
    Member since:
    Jun 2009

    Posted 05 Apr 2012 Link to this post

    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?


Back to Top