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 310 Views

ListView (Mobile)

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

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>

<div id="glass" class="glass" style="display: none;"></div>

<div data-role="layout" data-id="SearchLayout">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

</div>

<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>

</label>

</li>

</ul>

</div>

<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>

<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

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>

<div id="glass" class="glass" style="display: none;"></div>

<div data-role="layout" data-id="SearchLayout">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

</div>

<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>

</label>

</li>

</ul>

</div>

<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>

<script type="text/x-kendo-template" id="template">

#: Location #

Qty: #: AvailQty #

#if(showPrice){#

Price: #: SellPrice #

#}#

</script>

</body>

</html>