Listview

4 posts, 1 answers
  1. Tonih
    Tonih avatar
    35 posts
    Member since:
    Nov 2012

    Posted 15 May 2013 Link to this post

    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

  2. Tonih
    Tonih avatar
    35 posts
    Member since:
    Nov 2012

    Posted 15 May 2013 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Tonih
    Tonih avatar
    35 posts
    Member since:
    Nov 2012

    Posted 10 Jun 2013 Link to this post

    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
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready