Introduction
In this article I describe how to create Windows Store App for Custom Data Group using JavaScript. The item data adapter needs to supply the items sorted by group. It also must provide a group Key for each item to specify the group.
I assume you can create a simple Windows Store App using JavaScript; for more help visit Simple Windows Store Apps using JavaScript.
To start the creation of the app, add one JavaScript page by right-clicking on the js folder in the Solution Explorer and select "Add" > "New item" > "JavaScript Page" and then provide an appropriate name. In the same way, add a HTML page to your project.
![custom-group-in-windows-store-app-.jpg]()
Write the following code in the default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-light.css" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body role="application"style="background-color:lightpink">
<center><div id="rootGrid">
<div id="content">
<h1 id="featureLabel"></h1>
<div id="contentHost"></div>
</div>
</div></center>
</body>
</html>
Write the following code in the default.js
(function () {
"use strict";
var appTitle = "";
var pages = [
{ url: "page.html"}
];
function activated(eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventObject.setPromise(WinJS.UI.processAll().then(function () {
var url = WinJS.Application.sessionState.lastUrl || pages[0].url;
return WinJS.Navigation.navigate(url);
}));
}
}
WinJS.Navigation.addEventListener("navigated", function (eventObject) {
var url = eventObject.detail.location;
var host = document.getElementById("contentHost");
host.winControl && host.winControl.unload && host.winControl.unload();
WinJS.Utilities.empty(host);
eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).done(function () {
WinJS.Application.sessionState.lastUrl = url;
}));
});
WinJS.Namespace.define("App", {
appTitle: appTitle,
pages: pages
});
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Application.start();
})();
Write the following code in the page.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script.js"></script>
</head>
<body>
<div data-win-control="App.pageInput">
</div>
<div data-win-control="App.pageOutput">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div class="mediumListIconTextItem">
<img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
<div class="mediumListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
</div>
</div>
</div>
<div id="groupTemplate" data-win-control="WinJS.Binding.Template">
<div class="groupHeader">
<h2 data-win-bind="innerText: type"></h2>
</div>
</div>
<div id="listView4" class="win-selectionstylefilled">
</div>
</div>
</body>
</html>
Write the following code in the script.js
(function () {
"use strict";
var page = WinJS.UI.Pages.define("page.html", {
ready: function (element, options) {
initData();
var listView4 = new WinJS.UI.ListView(document.getElementById("listView4"), {
itemDataSource: itemDataSource,
groupDataSource: groupDataSource,
itemTemplate: document.getElementById("mediumListIconTextTemplate"),
groupHeaderTemplate: document.getElementById("groupTemplate"),
layout: new WinJS.UI.GridLayout()
});
}
});
var flavors = [
{ title: "1", kind: "1", picture: "images/1.jpg", stock: "in_stock" },
{ title: "2", kind: "1", picture: "images/2.jpg", stock: "in_stock" },
{ title: "1", kind: "2", picture: "images/1.jpg", stock: "in_stock" },
{ title: "2", kind: "2", picture: "images/2.jpg", stock: "in_stock" }
];
var desertTypes = [
{ key: "1", type: "group1" },
{ key: "2", type: "group2" }
];
var itemDataSource, groupDataSource;
function initData() {
var groupKeys = [];
for (var i = 0; i < desertTypes.length; i++) {
groupKeys[i] = desertTypes[i].key;
}
var itemData = flavors;
itemData.sort(function CompareForSort(item1, item2) {
var first = groupKeys.indexOf(item1.kind), second = groupKeys.indexOf(item2.kind);
if (first === second) { return 0; }
else if (first < second) { return -1; }
else { return 1; }
});
var itemIndex = 0;
for (var j = 0, len = desertTypes.length; j < len; j++) {
desertTypes[j].firstItemIndex = itemIndex;
var key = desertTypes[j].key;
for (var k = itemIndex, len2 = itemData.length; k < len2; k++) {
if (itemData[k].kind !== key) {
itemIndex = k;
break;
}
}
}
itemDataSource = new flavorsDataSource(itemData);
groupDataSource = new desertsDataSource(desertTypes);
}
var flavorsDataAdapter = WinJS.Class.define(
function (data) {
this._itemData = data;
},
{
getCount: function () {
var that = this;
return WinJS.Promise.wrap(that._itemData.length);
},
itemsFromIndex: function (requestIndex, countBefore, countAfter) {
var that = this;
if (requestIndex >= that._itemData.length) {
return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
}
var lastFetchIndex = Math.min(requestIndex + countAfter, that._itemData.length - 1);
var fetchIndex = Math.max(requestIndex - countBefore, 0);
var results = [];
for (var i = fetchIndex; i <= lastFetchIndex; i++) {
var item = that._itemData[i];
results.push({
key: i.toString(),
groupKey: item.kind,
data: item
});
}
return WinJS.Promise.wrap({
items: results,
offset: requestIndex - fetchIndex,
totalCount: that._itemData.length
});
}
});
var flavorsDataSource = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource, function (data) {
this._baseDataSourceConstructor(new flavorsDataAdapter(data));
});
var desertsDataAdapter = WinJS.Class.define(
function (groupData) {
this._groupData = groupData;
},
{
getCount: function () {
var that = this;
return WinJS.Promise.wrap(that._groupData.length);
},
itemsFromIndex: function (requestIndex, countBefore, countAfter) {
var that = this;
if (requestIndex >= that._groupData.length) {
return Promise.wrapError(new WinJS.ErrorFromName(UI.FetchError.doesNotExist));
}
var lastFetchIndex = Math.min(requestIndex + countAfter, that._groupData.length - 1);
var fetchIndex = Math.max(requestIndex - countBefore, 0);
var results = [];
for (var i = fetchIndex; i <= lastFetchIndex; i++) {
var group = that._groupData[i];
results.push({
key: group.key,
firstItemIndexHint: group.firstItemIndex,
data: group
});
}
return WinJS.Promise.wrap({
items: results,
offset: requestIndex - fetchIndex,
totalCount: that._groupData.length
});
},
itemsFromKey: function (requestKey, countBefore, countAfter) {
var that = this;
var requestIndex = null;
for (var i = 0, len = that._groupData.length; i < len; i++) {
if (that._groupData[i].key === requestKey) {
requestIndex = i;
break;
}
}
if (requestIndex === null) {
return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
}
var lastFetchIndex = Math.min(requestIndex + countAfter, that._groupData.length - 1);
var fetchIndex = Math.max(requestIndex - countBefore, 0);
var results = [];
for (var j = fetchIndex; j <= lastFetchIndex; j++) {
var group = that._groupData[j];
results.push({
key: group.key,
firstItemIndexHint: group.firstItemIndex,
data: group
});
}
return WinJS.Promise.wrap({
items: results,
offset: requestIndex - fetchIndex,
absoluteIndex: requestIndex,
totalCount: that._groupData.length
});
},
});
var desertsDataSource = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource, function (data) {
this._baseDataSourceConstructor(new desertsDataAdapter(data));
});
})();
Output
![custom-group-in-windows-store-app.jpg]()
Summary
In this article I described how to create a Windows Store App for Custom Data Group using JavaScript. I hope this article has helped you to understand this topic. Please share it. If you know more about this, your feedback and constructive contributions are welcome.