Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

trying to refresh/update the listview after user presses a button

2 Answers 227 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Albert
Top achievements
Rank 2
Albert asked on 25 Sep 2013, 06:11 PM
I have a simple app that allows customers to look up inventory. Its as simple as the user enters a optional customer number and part. That occurs in the search view. Then they press the go button and are shown the results view. It list the product and stock count at our branch locations.

The issue I'm having is on mobile phones. The listview does not get updated. The data doesn't change.

Here is the code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="KochAirMobileInventory._Default" %>
 
<!DOCTYPE html>
 
<html>
<head id="Head1" runat="server">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <title>Part Lookup</title>
    <link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2013.2.716/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>
 
    <style>
        .glass {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            opacity: 0.3;
            background: #fff;
        }
         
    </style>
</head>
<body>   
    <!-- modal loading -->
    <div id="glass" class="glass" style="display: none;"></div>
 
    <!-- layout for the search view -->
    <div data-role="layout" data-id="SearchLayout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
 
    <!-- this view is for entering the cutomer and part nubmer to view stock status -->
    <div id="SearchView" data-role="view" data-title="Search" data-layout="SearchLayout">
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>Customer #
                        <input id="Customer" type="text" value="60506" />
                    </label>
                </li>
                <li>
                    <label>
                    Part
                    <input id="Part" type="text" value="CF58.C" />
                    </label>
                </li>
                <li style="text-align:center;">
                    <label>
                    <a class="button" data-role="button" href="#ResultsView" onclick="GetData();">Go</a><!-- onclick="GetData();" -->
                    </label>
                </li>
             
            </ul>    
    </div>
 
    <!-- layout for the results view -->
    <div data-role="layout" data-id="ResultsLayout">
        <header data-role="header">
            <div data-role="navbar">
                <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
 
    <!-- this is the results view that will show the branch and stock count for item searched -->
    <div data-role="view" id="ResultsView" data-transition="slide" data-init="mobileListViewDataBindInitFlat" data-title="Results" data-layout="ResultsLayout">
        <ul id="flat-listview" data-role="listview" data-style="inset"></ul>
    </div>
 
<script type="text/ecmascript">
    //data that is called via ajax for our listview in the
    //results view...
    var flatData;
 
    //sample of the data returned
    /*
    [{"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":2,"AvailQty":79,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":3,"AvailQty":105,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":4,"AvailQty":100,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":5,"AvailQty":66,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":6,"AvailQty":-11,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":7,"AvailQty":79,"Status":"A","Location":"usa"},
    {"CustomerId":"960506","CustomerName":"IAMS COM AIR          ","PartNumber":"58.C              ","Vnd":"CF","SellPrice":"        99.35","Id":8,"AvailQty":55,"Status":"A","Location":"usa"}]
    */
    function GetData() {
        showLoading();
         
        var customer = $("#Customer").val();
        var showPrice = false;
 
        if (customer == "") {
            customer = "60506";
        } else {
            showPrice = true;
        }
 
        $.ajax({
            url: "api/branchitem/?partnumber=" + $("#Part").val() + "&customer=" + customer,
            contentType: 'json',
            success: function (data) {
                flatData = "";
                 
                var price = "";
 
                $.each(data, function (index, item) {
                    flatData += item.Location + " Quantity:" + item.AvailQty + ',';
 
                    price = item.SellPrice
                });
                 
                flatData = flatData.substr(0, flatData.length - 1);
                 
                if (showPrice) {
                    flatData += ",Price: " + price.toString();
                }
                 
                flatData = flatData.split(",");
                 
                flatData = flatData;
 
                //attempt to destroy and recreate so the data will update...
                $('#flat-listview').data('kendoMobileListView').destroy();
                $("#flat-listview").kendoMobileListView({ dataSource: flatData });
 
                hideLoading();
            }
        });
    }
 
    function mobileListViewDataBindInitFlat() {
        //grab data from restful service
        GetData();
    }
 
    var app = new kendo.mobile.Application(document.body);
 
    function showLoading() {
        $("#glass").show();
        app.showLoading();
    }
 
    function hideLoading() {
        $("#glass").hide();
        app.hideLoading();
    }
    </script>
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Albert
Top achievements
Rank 2
answered on 25 Sep 2013, 09:59 PM
So I ended doing this in the end. There are several changes, I think its more one with kendo!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="KochAirMobileInventory._Default" %>
 
<!DOCTYPE html>
 
<html>
<head id="Head1" runat="server">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <title>Part Lookup</title>
    <link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="Content/kendo/2013.2.716/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="Scripts/kendo/2013.2.716/kendo.all.min.js" type="text/javascript"></script>
 
    <style>
        .glass {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            opacity: 0.3;
            background: #fff;
        }
         
    </style>
</head>
<body>   
    <!-- modal loading -->
    <div id="glass" class="glass" style="display: none;"></div>
 
    <!-- layout for the search view -->
    <div data-role="layout" data-id="SearchLayout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
 
    <!-- this view is for entering the cutomer and part nubmer to view stock status -->
    <div id="SearchView" data-role="view" data-title="Search" data-layout="SearchLayout">
            <ul data-role="listview" data-style="inset">
                <li>
                    <label>Customer #
                        <input id="Customer" type="number" value="" />
                    </label>
                </li>
                <li>
                    <label>
                    Part
                    <input id="Part" type="text" value="CF58.C" />
                    </label>
                </li>
                <li style="text-align:center;">
                    <label>
                    <a class="button" data-role="button" href="#ResultsView" data-click="GetData">Go</a><!-- onclick="GetData();" -->
                    </label>
                </li>
             
            </ul>    
    </div>
 
    <!-- layout for the results view -->
    <div data-role="layout" data-id="ResultsLayout">
        <header data-role="header">
            <div data-role="navbar">
                <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
 
    <!-- this is the results view that will show the branch and stock count for item searched data-init="mobileListViewDataBindInitFlat" -->
    <div data-role="view" id="ResultsView" data-transition="slide" data-title="Results" data-layout="ResultsLayout">
        <ul id="flat-listview" data-role="listview" data-style="inset" data-source="flatData" data-template="template"></ul>
    </div>
 
 
<script type="text/ecmascript">
    var showPrice = false;
    //data that is called via ajax for our listview in the
    //results view...
    var flatData = new kendo.data.DataSource({
        data: [{ "CustomerId": "960506", "CustomerName": "IAMS COM AIR          ", "PartNumber": "58.C              ", "Vnd": "CF", "SellPrice": "        99.35", "Id": 2, "AvailQty": 79, "Status": "A", "Location": "usa"}]
    });
 
    function GetData() {
        showLoading();
         
        var customer = $("#Customer").val();
 
        if (customer == "") {
            customer = "60506";
            showPrice = false;
        } else {
            showPrice = true;
        }
 
        $.ajax({
            url: "api/branchitem/?partnumber=" + $("#Part").val() + "&customer=" + customer,
            contentType: 'json',
            success: function (data) {
                flatData.data(data);
 
                hideLoading();
            }
        });
    }
 
    var app = new kendo.mobile.Application(document.body);
 
    function showLoading() {
        $("#glass").show();
        app.showLoading();
    }
 
    function hideLoading() {
        $("#glass").hide();
        app.hideLoading();
    }
    </script>
    <!-- template for the list -->
    <script type="text/x-kendo-template" id="template">
        #: Location #
        Qty: #: AvailQty #
        #if(showPrice){#
            Price: #: SellPrice #
        #}#
    </script>
</body>
</html>
0
Kiril Nikolov
Telerik team
answered on 26 Sep 2013, 11:01 AM
Hello Albert,

I am glad to hear that everything is working now.

Your configuration seems to be correct.

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