Mobile ListView is not refreshing on button click

7 posts, 0 answers
  1. sk
    sk avatar
    5 posts
    Member since:
    Jun 2007

    Posted 20 Jul 2012 Link to this post

    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

  2. Danilo
    Danilo avatar
    3 posts
    Member since:
    Mar 2012

    Posted 06 Aug 2012 Link to this post

    Hi.

    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
  3. Kendo UI is VS 2017 Ready
  4. Matt
    Matt avatar
    6 posts
    Member since:
    Jul 2012

    Posted 17 Sep 2012 Link to this post

    This worked for me:

    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();
  5. Danilo
    Danilo avatar
    3 posts
    Member since:
    Mar 2012

    Posted 01 Oct 2012 Link to this post

    It is not working for me in version kendoui.mobile.2012.2.924 or in version 2012.2.913.
  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 01 Oct 2012 Link to this post

    Hi,

    You should use the widget click event instead.

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Sam
    Sam avatar
    60 posts
    Member since:
    Mar 2011

    Posted 10 Dec 2012 Link to this post

    I find it incomprehensible that there is no complete solution on refreshing a list view if using a datasource with dynamic parameters.  As complete and robust as the documentation is on Telerik's ASP.NET controls, it is equally absent here with Kendo UI.  I love this product, but most people learn better by examples (hence the thousands of great examples on your main site).  I've found bits and pieces on this subject here and the documentation is vague at best.  You have a lot of do this and do that but without a working solution.  After endless searching and trial and error, this is the solution that works for me.  Hopefully it will help someone else.

    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()
        }
    }

  8. King Wilder
    King Wilder avatar
    240 posts
    Member since:
    Oct 2007

    Posted 14 Jan 2013 Link to this post

    I too, somewhat solved this issue, but I now have other issues.  But I've built a small sample application with it working if you are interested.

    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
Back to Top
Kendo UI is VS 2017 Ready