about kendo ui listview and jquery rateit plugin

2 posts, 0 answers
  1. aa
    aa avatar
    1 posts
    Member since:
    Jan 2014

    Posted 22 Jan 2014 Link to this post

    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 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 + ")");
                    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;
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 23 Jan 2014 Link to this post


    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!
Back to Top