Check If Particular ListView Item Is Selected

Environment

Product	Progress® Kendo UI® ListView for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I check if a certain value corresponds to a DataItem property of the selected ListView items?

Solution

1. Use the select method of the Kendo UI ListView API to get a list of all the selected items.
2. Access its corresponding DataItem and properties by getting their index.

 <div id="example">
      <div id="listView"></div>
      <div id="pager" class="k-pager"></div>

      <script type="text/x-kendo-tmpl" id="template">
        <div class="product">
            <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" />
            <h3>#:ProductName#</h3>
        </div>
      </script>

      <script>
        function checked() {
          var Product = "Queso Cabrales",
            listView = $("#listView").data("kendoListView"),
            selected = listView.select();

          for (let i = 0; i < selected.length; i++) {
            var index = $(selected[i]).index(),
              dataItem = listView.dataSource.view()[index];
            if (dataItem.ProductName == Product) {
              alert("Queso Cabrales is Selected");
            }
          }
        }

        $(document).ready(function () {
          var dataSource = new kendo.data.DataSource({
            transport: {
              read: {
                url: "https://demos.telerik.com/service/v2/core/Products",
              }
            },
            pageSize: 15
          });

          $("#pager").kendoPager({
            dataSource: dataSource
          });

          $("#listView").kendoListView({
            dataSource: dataSource,
            selectable: "multiple",
            dataBound: onDataBound,
            change: onChange,
            template: kendo.template($("#template").html())
          });

          function onDataBound() {
            console.log("ListView data bound");
          }

          function onChange() {
            var data = dataSource.view(),
              selected = $.map(this.select(), function (item) {
                return data[$(item).index()].ProductName;
              });

            console.log(
              "Selected: " +
                selected.length +
                " item(s), [" +
                selected.join(", ") +
                "]"
            );
          }
        });
      </script>

      <style>
        .product {
          float: left;
          width: 220px;
          height: 110px;
          margin: 0;
          padding: 5px;
          cursor: pointer;
        }
        .product img {
          float: left;
          width: 110px;
          height: 110px;
        }
        .product h3 {
          margin: 0;
          padding: 10px 0 0 10px;
          font-size: 0.9em;
          overflow: hidden;
          font-weight: normal;
          float: left;
          max-width: 100px;
          text-transform: uppercase;
        }
        .k-pager {
          border-top: 0;
        }
        .demo-section .k-listview:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
        }
      </style>
    </div>

See Also

• API Reference of the select Method