Hi,
i have try to use kendo ui mobile listview with jquery plugin (rateit - it is a star rating). when i data-init my view it will show. but when i manually insert data into listview it disappear. below is my code.
template
<script id="tmp" type="text/x-kendo-template">
<img src="#:banner#" class="Banner" />
<div class="listitem-tab km-listview-link" data-role="content">
<a data-role="listview-link" href="#:link#" style="text-decoration:none;" class="GoToNearBySub1" >
<div>
<img class="pullImage" src="#:url#" />
<h3 class="MerchantName">#:title#</h3>
<p class="MerchantDetail">#:description#</p>
<span class="MerchantDetail2">Rate:</span><div class="rateit" data-rateit-value="2.5" styles="margin:0;"></div><span class="MerchantDetail2">#:rate#</span>
</div>
</a>
<a data-role="detailbutton" data-rel="popover" href="#:popup#" class="GetGPSDetail" id="#:gpslatlng#" >...</a>
</div>
</script>
my view
<div data-role="view" data-title="Near By" id="listview_home" data-layout="mobile-tabstrip" data-init="CallJs" data-after-show="showstar" data-transition="slide">
<header data-role="header">
<link href='myStyles/rateit.css' type="text/css" rel="stylesheet"/>
<div data-role="navbar">
<span data-role="view-title"></span>
<a href="#SearchList" data-align="right" data-icon="search" data-role="button" data-click="ResetScrollBar"></a>
</div>
</header>
<!--
<ul id="NearbyList" data-role="listview" data-source="dataSource" data-template="tmp"></ul>
-->
<ul id="NearbyList" data-role="listview"></ul>
<ul id="AddBtnDiv" data-role="listview"><a data-role="button" id="PressLoad" class="btn">Load More</a></ul> (press thius button to load data from listlist function)
<div id="GetDirection" data-role="popover">
<div data-role="view" data-title="Direction">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<span data-role="view-title"></span>
<ul data-role="listview" data-style="inset" >
<li>
<i></i><a data-role="button" class="btn" id="DetailBtn" data-bind="value: title">Get Direction</a>
</li>
</ul>
</div>
</div>
</div>
function listlist(LoadStartNo,LoadEndNo) {
var Cat3 = {};
NextStartNo = LoadStartNo;
NextEndNo = LoadEndNo;
if (NextEndNo == 0)
{
return;
}
var dataSource3 = new kendo.data.DataSource({
transport: {
read: {
type: "Post",
url: "http://localhost:57613/api/merchant/PostPagingMerchant",
data: { "StartPoint": NextStartNo, "EndPoint": NextEndNo },
}
},
schema: {
parse: function (response) {
Cat3 = JSON.stringify(response);
var obj = eval("(" + Cat3 + ")");
//alert(obj.Table.length);
for (var i = 0; i < obj.Table.length; i++) {
var product = {
title: obj.Table[i].title,
url: obj.Table[i].url,
description: obj.Table[i].description,
rate: obj.Table[i].rate,
popup: obj.Table[i].popup,
banner: obj.Table[i].banner,
gpslatlng: "3.01181,101.63124",
link: obj.Table[i].link
};
PressLoadProduct.push(product);
}
return PressLoadProduct;
},
total: function () { return PressLoadProduct.length; }
},
serverPaging: true,
pageSize: 18,
serverSorting: true
});
var listview2 = $("#NearbyList").kendoMobileListView({
dataSource: dataSource3,
template: $("#tmp").html()
//endlessScroll: true
});
NextStartNo = NextEndNo + 1;
NextEndNo = NextEndNo + 5;
}
i have try to use kendo ui mobile listview with jquery plugin (rateit - it is a star rating). when i data-init my view it will show. but when i manually insert data into listview it disappear. below is my code.
template
<script id="tmp" type="text/x-kendo-template">
<img src="#:banner#" class="Banner" />
<div class="listitem-tab km-listview-link" data-role="content">
<a data-role="listview-link" href="#:link#" style="text-decoration:none;" class="GoToNearBySub1" >
<div>
<img class="pullImage" src="#:url#" />
<h3 class="MerchantName">#:title#</h3>
<p class="MerchantDetail">#:description#</p>
<span class="MerchantDetail2">Rate:</span><div class="rateit" data-rateit-value="2.5" styles="margin:0;"></div><span class="MerchantDetail2">#:rate#</span>
</div>
</a>
<a data-role="detailbutton" data-rel="popover" href="#:popup#" class="GetGPSDetail" id="#:gpslatlng#" >...</a>
</div>
</script>
my view
<div data-role="view" data-title="Near By" id="listview_home" data-layout="mobile-tabstrip" data-init="CallJs" data-after-show="showstar" data-transition="slide">
<header data-role="header">
<link href='myStyles/rateit.css' type="text/css" rel="stylesheet"/>
<div data-role="navbar">
<span data-role="view-title"></span>
<a href="#SearchList" data-align="right" data-icon="search" data-role="button" data-click="ResetScrollBar"></a>
</div>
</header>
<!--
<ul id="NearbyList" data-role="listview" data-source="dataSource" data-template="tmp"></ul>
-->
<ul id="NearbyList" data-role="listview"></ul>
<ul id="AddBtnDiv" data-role="listview"><a data-role="button" id="PressLoad" class="btn">Load More</a></ul> (press thius button to load data from listlist function)
<div id="GetDirection" data-role="popover">
<div data-role="view" data-title="Direction">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<span data-role="view-title"></span>
<ul data-role="listview" data-style="inset" >
<li>
<i></i><a data-role="button" class="btn" id="DetailBtn" data-bind="value: title">Get Direction</a>
</li>
</ul>
</div>
</div>
</div>
function listlist(LoadStartNo,LoadEndNo) {
var Cat3 = {};
NextStartNo = LoadStartNo;
NextEndNo = LoadEndNo;
if (NextEndNo == 0)
{
return;
}
var dataSource3 = new kendo.data.DataSource({
transport: {
read: {
type: "Post",
url: "http://localhost:57613/api/merchant/PostPagingMerchant",
data: { "StartPoint": NextStartNo, "EndPoint": NextEndNo },
}
},
schema: {
parse: function (response) {
Cat3 = JSON.stringify(response);
var obj = eval("(" + Cat3 + ")");
//alert(obj.Table.length);
for (var i = 0; i < obj.Table.length; i++) {
var product = {
title: obj.Table[i].title,
url: obj.Table[i].url,
description: obj.Table[i].description,
rate: obj.Table[i].rate,
popup: obj.Table[i].popup,
banner: obj.Table[i].banner,
gpslatlng: "3.01181,101.63124",
link: obj.Table[i].link
};
PressLoadProduct.push(product);
}
return PressLoadProduct;
},
total: function () { return PressLoadProduct.length; }
},
serverPaging: true,
pageSize: 18,
serverSorting: true
});
var listview2 = $("#NearbyList").kendoMobileListView({
dataSource: dataSource3,
template: $("#tmp").html()
//endlessScroll: true
});
NextStartNo = NextEndNo + 1;
NextEndNo = NextEndNo + 5;
}