Edit this page

change

Fires when the ListView selection has changed.

The event handler function context (available via the this keyword) will be set to the widget instance.

Example

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div style="padding: 10px">
        #: ProductName#
  </div>
</script>

<script>
  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
      dataSource = new kendo.data.DataSource({
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
          }
        },
        pageSize: 10
      });

  var listView = $("#listView").kendoListView({
    dataSource: dataSource,
    selectable: "multiple",
    template: kendo.template($("#template").html()),
    change: function(e){
      // get ListView selection
      var selectedItems = e.sender.select();
      console.log(selectedItems);
    }
  }).data("kendoListView");
</script>

To set after initialization

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div style="padding: 10px">
        #: ProductName#
  </div>
</script>

<script>
  var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
      dataSource = new kendo.data.DataSource({
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
          }
        },
        pageSize: 10
      });

  var listView = $("#listView").kendoListView({
    dataSource: dataSource,
    selectable: "multiple",
    template: kendo.template($("#template").html())
  }).data("kendoListView");

  listView.bind("change", function(e){
    // get ListView selection
    var selectedItems = e.sender.select();
    console.log(selectedItems);
  });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy