CODEWITHSUNDEEP
javascriptlistviewwindows-phone-8.1winjs
heisenberg
heisenberg

Reputation: 51

How to make sorting function for ListView in WinJS?

I have the following list:

var myData = new WinJS.Binding.List([
  { title: "001", text: "one", picture: "/images/001.png" },
  { title: "009", text: "nine", picture: "/images/009.png" },
]);

I tried to filter my list by using this code, but failed:

var filtered = myData.createFiltered(function (item) {
    return item.title == "001";
});

WinJS.Namespace.define("Sample.ListView", {
    data: filtered
});

How to make the "createFiltered" function work?

Upvotes: 0

Views: 404

Answers (1)

Kraig Brockschmidt - MSFT
Kraig Brockschmidt - MSFT

Reputation: 7024

With what you've showed here, the problem isn't with the filtering, which is working correctly if I remove the groupDataSource and groupHeaderTemplate from the data-win-options string of the ListView. If you use grouping, then you have to have called createGrouped on a WinJS.Binding.List and use that as the data source, otherwise it's groups.dataSource property will be null. The sample you refer to shows this, but in your case, having created only a filtered source, there is no grouping to work with and you get a crash.

That is, with the JS you show, the following HTML works fine, as I've omitted the group references:

    <div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="textContent: title"></h4>
            <h6 data-win-bind="textContent: text"></h6>
        </div>
    </div>
</div>

<div id="listView" class="win-selectionstylefilled"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{ itemDataSource: Sample.ListView.data.dataSource,
        itemTemplate: select('.smallListIconTextTemplate'),
        selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none',
        layout: { type: WinJS.UI.ListLayout, groupHeaderPosition: 'top'} }">
</div>

Here's the example from try.buildwinjs.com that does the grouping (and assumes English sort order):

var grouped = myData.createGrouped(function (item) {
    return item.title.toUpperCase().charAt(0);
}, function (item) {
    return {
        title: item.title.toUpperCase().charAt(0)
    };
}, function (left, right) {
    return left.charCodeAt(0) - right.charCodeAt(0);
});

WinJS.Namespace.define("Sample.ListView", {
    data: grouped
});

Just to mention it, this grouping function is NOT world-ready, as it assumes a sort order based on ASCII position. A real sort function should take localized sort order into account, which is demonstrated in the Windows SDK HTML Listview Grouping and Semantic Zoom sample, specifically in groupedData.js. Of course, that's shows doing this in WinRT whereas the try.buildwinjs.com has to be generic. In any case, it's an important consideration for grouping and sorting that I wanted to mention in this context.

Upvotes: 1

Related Questions