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

    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;
        
    }
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 23 Jan 2014 Link to this post

    Hi,

    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.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top