New to Kendo UI for jQuery? Download free 30-day trial

Filter the ListView by Using Slider Selection

Environment

Product Progress Kendo UI ListView for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I filter the data source of the ListView based on a Slider selection?

Solution

The following example demonstrates how to achieve this behavior and display the relevant items in the ListView.

    <h4>Slide to Filter by Unit Price</h4>
    <div id="rangeslider" class="slider">
      <input />
      <input />
    </div>

    <br>
    <br>
    <br>

    <div id="listView"></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}, $${UnitPrice}</h3>
          <p>${kendo.toString(UnitPrice, "c")}</p>
      </div>
    </script>
    <script>
      $("#rangeslider").kendoRangeSlider({
        min: 1,
        max: 77,
        smallStep: 5,
        largeStep: 10,
        tickPlacement: "both",
        change: function (e) {
          var filters = [],
              filter;

          filters.push({field: "UnitPrice", operator: "gte", value: e.sender.values()[0]});
          filters.push({field: "UnitPrice", operator: "lte", value: e.sender.values()[1]});

          filter = {
            logic: "and",
            filters: filters
          };
          dataSource.filter(filter);
        }
      });

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

      $("#listView").kendoListView({
        dataSource: dataSource,
        pageable: true,
        template: kendo.template($("#template").html())
      });
    </script>

See Also

In this article