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>