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

3 posts, 0 answers
  1. Albert
    Albert avatar
    6 posts
    Member since:
    May 2012

    Posted 25 Sep 2013 Link to this post

    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. Albert
    Albert avatar
    6 posts
    Member since:
    May 2012

    Posted 25 Sep 2013 Link to this post

    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>
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 26 Sep 2013 Link to this post

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