I am working on this search feature which takes input through search box and then passed to kendo dataSource which hits the server and gets the results and renders my list view. Here's the code:
function searchClick(searchTerm) {
var searchText = searchTerm;
if (!searchTerm) {
return;
}
var listView = $("#listView").data("kendoListView");
if (!listView)
createUI(searchText);
else {
listView.dataSource.read({
searchTerm: searchText
});
}
}
> `function createUI(searchText) {`
var tmpl = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
serverPaging: true,
schema: {
data: "ListMedia",
total: "RowCount",
},
transport: {
read: {
url: gAppBaseURL + "Search/SearchData",
type: "GET",
dataType: "json",
data: {
searchTerm: searchText,
pageSize: 25,
page: 1
}
}
}
});
$("#listView").kendoListView({
dataSource: dataSource,
autoBind: false,
template: tmpl,
dataBound: function () {
var ds = $("#listView").data("kendoListView").dataSource;
if (ds.total() == 0) {
return;
}
}
});
var pager = $("#pager").kendoPager({
dataSource: dataSource,
autoBind: false,
}).data("kendoPager");
return dataSource.read();
}
and it then loads data into my listView and Pager:
Now the Problem is when I do paging, it passes the server my previously typed search value. For example I first typed 'Cat' then it would load results of cat records correctly(on first search), but when I search for dog the results on first page are correct, but when I switch to page two it passes 'Cat' as a parameter to the server which returns the results of a cat. and following is my HTML:
<div class="SearchResultPage">
<input type="text" name="searchTextbox" id="searchTextbox" class="k-textbox" style="width:400px"/>
<button type="submit" id="btn_submitQry" onclick="onClickSearch()"></button>
<script>
function onClickSearch() {
var searchTerm = $('#searchTextbox').val();
if (!searchTerm) {
searchTerm = "@ViewBag.SearchText";
$('#searchTextbox').val(searchTerm);
}
searchClick(searchTerm); //defined in universalSearch.js file
}
</script>
Every Time I switch to another page(the second time I search something), it passes the previous search Term to the server.
Your function createUI
define read data as constant value from parameter
instead of function. Paging in data source will trigger read
method, therefore your paging still use previous search term.
You can make a function like this to make read
data get new value(search term).
function getSearchTerm() {
return { searchTerm: $("#searchTextbox").val() };
}
and change your createUI
function to be like this
function createUI() {
var tmpl = kendo.template($("#template").html()),
dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 25
schema: {
data: "ListMedia",
total: "RowCount",
},
transport: {
read: {
url: gAppBaseURL + "Search/SearchData",
type: "GET",
dataType: "json",
data: {
searchTerm: getSearchTerm
}
}
}
});
}
Then everytime its doing read, it will run this function to get new value. And your search click should be like this
function searchClick(searchTerm) {
var searchText = searchTerm,
listView = $("#listView").getKendoListView();
if (!searchTerm) return;
if (!listView)
createUI();
else {
listView.dataSource.page(1); // reset paging and do read automatically
}
}