This is a migrated thread and some comments may be shown as answers.

about kendo ui listview and jquery rateit plugin

1 Answer 23 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
aa asked on 22 Jan 2014, 11:31 AM
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.

<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" >
                        <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>
                <a  data-role="detailbutton"  data-rel="popover" href="#:popup#" class="GetGPSDetail" id="#:gpslatlng#" >...</a>


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>
    <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>
                    <span data-role="view-title"></span>
                    <ul data-role="listview" data-style="inset" >
                                <i></i><a data-role="button"  class="btn" id="DetailBtn" data-bind="value: title">Get Direction</a>


function listlist(LoadStartNo,LoadEndNo) {

    var Cat3 = {};
    NextStartNo = LoadStartNo;
    NextEndNo = LoadEndNo;

    if (NextEndNo == 0)

    var dataSource3 = new{

        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 + ")");
                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
                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;

1 Answer, 1 is accepted

Sort by
Kiril Nikolov
Telerik team
answered on 23 Jan 2014, 09:14 AM

In order to provide you with more information about the issue you are facing we will need a runnable sample. Please note that sending projects/code samples, which cannot be run and inspected quickly, unless we make multiple fixes and modifications, has unfavorable effect on our response time and is not in your best interest.

Thank you in advance for your cooperation.

Kiril Nikolov
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
ListView (Mobile)
Asked by
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question