Hi,
I want to display a listview grouped by a certain field.
My data is as follows
<div id="productTemplate" data-win-control="WinJS.Binding.Template">
<div class="productSummary">
<h1><span data-win-bind="innerText:Accno"></span></h1>
<h3><span data-win-bind="innerText:Address"></span></h3>
<h2><span data-win-bind="innerText:Status"></span></h2>
</div>
</div>
<div id="productGroupHeaderTemplate" data-win-control="WinJS.Binding.Template">
<div class="productGroupHeader">
<h1 data-win-bind="innerText: title"></h1>
</div>
</div>
<div id="SummaryGrid" data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource:DataExample.dataList.dataSource,
itemTemplate:select('#productTemplate'),
groupDataSource:DataExample.dataList.groups.dataSource,
groupHeaderTemplate:select('#productGroupHeaderTemplate'),
layout:{type:WinJS.UI.GridLayout}}">
</div>
My JS code is
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var dataList = new WinJS.Binding.List();
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
//document.getElementById("btnExample").addEventListener("click", JSonRecord, false);
JSonRecord();
GroupRecords();
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function JSonRecord(event) {
var baseURL = "url";
WinJS
.xhr(
{
type: "GET",
url: baseURL,
headers: { "Content-type": "application/json;charset=utf-8" }
}
)
.then
(
function (response) {
var sourceData = JSON.parse(response.responseText);
for (var i = 0; i < sourceData.length; i++) {
//dataList.push(sourceData[i]);
dataList.push({
Accno: sourceData[i].Accno,
Address: sourceData[i].Address,
Priority: sourceData[i].Priority,
Status: sourceData[i].Status
//firstname: sourceData[i].firstname,
//LastName: sourceData[i].LastName
});
}
}, function (error) {
console.log(error);
});
}
function GroupRecords(event) {
// Create grouped data source
var groupedProducts = dataList.createGrouped(
function (dataItem) {
return dataItem.Priority;
},
function (dataItem) {
return { title: dataItem.Priority };
},
function (group1, group2) {
return group1.charCodeAt(0) - group2.charCodeAt(0);
}
);
// Expose the grouped data source
WinJS.Namespace.define("DataExample", {
dataList: groupedProducts
});
//WinJS.Namespace.define("ListViewDemos", {
// products: groupedProducts
//});
}
app.start();
})();
When I use a static array of data it works fine but when using a REST service the application breaks in the debugger and nothing is displayed on the screen. What is wrong with this code. If I use the REST service without the grouping then it works perfectly.
Thanks,
Rajesh
