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

Mobile ListView is not refreshing on button click

6 Answers 544 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
sk
Top achievements
Rank 1
sk asked on 20 Jul 2012, 01:08 PM

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

6 Answers, 1 is accepted

Sort by
0
Danilo
Top achievements
Rank 1
answered on 06 Aug 2012, 09:20 AM
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
0
Matt
Top achievements
Rank 1
answered on 17 Sep 2012, 07:04 PM
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();
0
Danilo
Top achievements
Rank 1
answered on 01 Oct 2012, 09:43 AM
It is not working for me in version kendoui.mobile.2012.2.924 or in version 2012.2.913.
0
Petyo
Telerik team
answered on 01 Oct 2012, 10:27 AM
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!
0
Sam
Top achievements
Rank 1
answered on 10 Dec 2012, 08:35 PM
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()
    }
}

0
King Wilder
Top achievements
Rank 2
answered on 14 Jan 2013, 06:08 PM
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
Tags
ListView (Mobile)
Asked by
sk
Top achievements
Rank 1
Answers by
Danilo
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Petyo
Telerik team
Sam
Top achievements
Rank 1
King Wilder
Top achievements
Rank 2
Share this question
or