Hi,
I am using Kendo Web UI and am trying to filter a listView using multiple rangeSliders. I've seen a few examples of filtering, but never with a listview using range sliders. Pretty much all of the examples I've seen involve filtering a grid with a dropdown. I am curious about filtering a listview with multiple range sliders. I know how to filter a listview but don't know how to hook up the range sliders to do the filtering (on change, on slide). Could someone please point me in the right direction? I've successfully been able to filter the listview with a textbox and button.
This is what I have so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="Stylesheet" href="search.css" type="text/css" />
<link href="examples-offline.css" rel="stylesheet">
<link href="kendo.common.min.css" rel="stylesheet">
<link href="kendo.default.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="kendo.web.min.js"></script>
<script src="console.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="menuholder">
<div class="menu"></div>
</div>
<div class="holder">
<div class="params">
<div id="rangeslider" class="humidity">
<input />
<input />
</div>
<br />
<br />
<input id="txtSearch" name="txtSearch" type="text" value="" />
<input id="btnSearch" type="button" value="search" />
</div>
<div class="vspacer"></div>
<div class="display">
<div id="example" class="k-content">
<div id="listView"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="${Code}.jpg" alt="${Name} image" />
<h3>${Name}</h3>
<div class="edit-buttons">
<a class="k-button k-button-icontext k-update-button" href="\\#">View</a>
<a class="k-button k-button-icontext k-cancel-button" href="\\#">Build</a>
</div>
</div>
</script>
<script>
function rangeSliderOnSlide(e) {
listResult.data("kendoListView").dataSource.filter({ field:"Name", operator:"startswith", value:"c"});
}
function rangeSliderOnChange(e) {
listResult.data("kendoListView").dataSource.filter({ field:"Name", operator:"startswith", value:"c"});
}
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "jsonfile.json",
dataType: "json"
}
},
});
var listResult = $("#listView").kendoListView({
dataSource: dataSource,
selectable: "multiple",
template: kendo.template($("#template").html())
});
$(".k-add-button").click(function(e) {
listView.add();
e.preventDefault();
});
var rslider = $("#rangeslider").kendoRangeSlider({
change: rangeSliderOnChange,
slide: rangeSliderOnSlide,
min: 0,
max: 10,
smallStep: 1,
largeStep: 2,
tickPlacement: "both"
});
//----------------------------------
$("#btnSearch").click(function () {
$filter = new Array();
$x = $("#txtSearch").val();
if ($x) {
$filter.push({ field:"Name", operator:"startswith", value:$x});
}
listResult.data("kendoListView").dataSource.filter($filter);
});
//-------------------------------------------------------------------
});
</script>
</div>
</div>
</div>
</div>
</form>
</body>
</html>