winJS ListView dynamic datasource edit issue - microsoft-metro

Question

winJS ListView issue
I am working on a winJS application.I have listview.I need to add new data to an existing list view.How can i do that?

Answer 1

Normally the listview is bound with a WinJS.Binding.List, just add new items to that list and they'll appear inside listview.

Answer 2

Suggest use WinJS.Binding.List.createSorted() first and createGrouped on the sorted list. if your sort function can ensure that the newly inserted item comes ahead in sort order - it should appear first in the group.
_initializeListView: function initializeListView()
{
var data = [{ title: 'parle-ggg', brand: 'parle' }, { title: 'parle-gg', brand: 'parle' }, { title: 'parle-g', brand: 'parle' },
{ title: 'maggi-sauce', brand: 'maggi' }, { title: 'maggi-sauce-2', brand: 'maggi' }, { title: 'maggi-sauce-3', brand: 'maggi' }];
var list = new WinJS.Binding.List(data);
var sortedList = list.createSorted(function sorter(item1, item2)
{
var result;
if (item1.title < item2.title)
result = -1;
else if (item1.title == item2.title)
result = 0;
else
result = 1;
return result;
});
var groups = sortedList.createGrouped(
function groupKey(item)
{
return item.brand;
},
function groupData(item)
{
var result = { title: item.brand };
return result;
}
);
listView.winControl.itemDataSource = groups.dataSource;
listView.winControl.groupDataSource = groups.groups.dataSource;
this.sortedList = sortedList;
},
_oncmdclick: function oncmdclick(event) // this is event handler where you want to add new item
{
this.sortedList.push(newItem);
},
the above code snippet is tries to create a list sorted by title and grouped by brand. on inserting an item later in sortedList - inserted item is placed in the group properly. for example - adding an item by title 'parle-f' will place it first in the parle brand group whereas adding an item by title 'parle-h' will place it last in the parle brand group.
HTH.