Hi,
Please see my attached screenshot. Each time a user click on the search button, my listview should repopulate with the new results. I have tried the dataSource.read() / refresh() methods in the button click but it’s not working. Any one from telerik, please go through my code and give me a working solution.
CODE
<head>
<title></title>
<script src="Mobile_JS/jquery.min.js" type="text/javascript"></script>
<script src="Mobile_JS/kendo.mobile.min.js" type="text/javascript"></script>
<link href="Mobile_CSS/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="vw_AddTradeRequest" data-role="view" data-title="New Trade Request" data-init="intSecModal">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="backbutton">Back</a> <span data-role="view-title">
</span>
</div>
</header>
<ul id="lvw_formElement" data-role="listview" data-style="inset">
<li>Security
<ul style="list-style-type:none;"><li><input type="text" style="right:2.2em;"/>
<a data-role="detailbutton" data-rel="modalview" data-icon="more" href="#mvw_SearchSec"></a></li></ul>
</li>
</ul>
<div data-role="modalview" id="mvw_SearchSec" style="width: 90%;">
<header data-role="header">
<div data-role="navbar">
<input id="txt_SearchSecurity"
type="text" style="border: 1px solid Gray;margin-right:0.1em;" data-align="left" value="amgn"/><a data-role="button" id="btn_searchSecurity" data-align="left">Search</a>
<a data-role="button" id="btn_clearSearchSec" data-align="left">Clear</a>
<a data-role="button" data-align="right" data-click="closeSecSearchModalView">Close</a>
</div>
</header>
<ul id="lvw_Search" data-role="listview">
<li>
</li>
</ul>
<ul id="lvw_Security" />
</div>
</div>
<script id="kt_SecurityListTemplate" type="text/x-kendo-template">
<div>
#= SYMBOL #
</div>
</script>
<script id="kt_SecurityHeadTemplate" type="text/x-kendo-template">
<h3> HI</h3>
</script>
<script>
function intSecModal() {
var secData = new kendo.data.DataSource({
transport: {
read: {
url: "mypage.aspx?security=&sm=0&ft=" + $("#txt_SearchSecurity").val(), // the remove service url
dataType: "json"
}
}
});
$("#lvw_Security").kendoMobileListView({
dataSource: secData,
template: $("#kt_SecurityListTemplate").text(),
click: function (e) {
console.log(e.dataItem.SYMBOL);
}
});
$("#btn_searchSecurity").click(function () {
var lvwObjSecurity = $("#lvw_Security").data("kendoMobileListView");
lvwObjSecurity.dataSource.read();
});
$("#btn_clearSearchSec").click(function () { $("#txt_SearchSecurity").val("");});
}
function closeSecSearchModalView() {
$("#mvw_SearchSec").kendoMobileModalView("close");
}
</script>
</body>
Thanks and Regards,
Sibin
6 Answers, 1 is accepted
Rank 1
I also have a search page.
This works unless I am on page 2 or more..
function refreshLV() { dataSource.options.transport.read.url = "GetJSON.asmx/GetResults?q=" + document.getElementById("q").value; dataSource.page(1); //dataSource.read(); }Regards, Danilo
Rank 1
var listView = $('#olj-pages').data("kendoMobileListView"); listView.dataSource.transport.options.read.url = listView.dataSource.transport.options.read.url.replace( /&searchString=(.+?)(&|$)/, '' ) + '&searchString=' + OljMobile.pageSearch['searchString']; listView.dataSource.page(1); listView.refresh();
Rank 1
You should use the widget click event instead.
All the best,Petyo
the Telerik team
Rank 1
var searched = false;
var dsSearch;
function searchActivities() {
if ($("#SearchString").val() == "") {
alert("Please enter a valid search string");
return;
}
if (searched) {
var lvSearch = $("#lstSearchResults").data("kendoMobileListView");
lvSearch.refresh();
lvSearch.dataSource.read()
return;
}
searched = true;
dsSearch = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "WebServices/Activities.asmx/SearchActivities",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: function () {
return GetSearchOptions()
}
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
schema: {
data: function (data) {
//alert("data is " + data.d.ProjectID); /*Data Return Successfully*/
return data.d;
}
},
error: function (e) {
alert("Error " + e);
}
});
$("#lstSearchResults").kendoMobileListView({
template: $("#tplSearchResult").text(),
dataSource: dsSearch,
loadMore: true,
click: function (e) {
showActivity(e.dataItem.EventID);
},
dataBound: function () {
if (this.dataSource.total() == 0) {
$("#lstSearchResults").html("No Data");
}
}
});
}
function GetSearchOptions() {
return { ProjectID: $("#SearchProjects").val(),
ActivityType: $("#SearchActivityType").val(),
SearchString: $("#SearchString").val()
}
}
Rank 2
http://www.kingwilder.com/downloads/kendouimobilesearch.zip - VS 2012
I have my own Forum thread going on here: http://www.kendoui.com/forums/mobile/listview/use-search-field-to-populate-listview.aspx
I hope it helps. I'll update it when it's working completely.
King Wilder