CODEWITHSUNDEEP
javascriptlistviewwindows-8winjs
TaLha Khan
TaLha Khan

Reputation: 2433

How to remove an element from group listView in Windows 8 app using JavaScript

I want user to select an item from listview and then from the appbar click on the delete button to remove the selected item....
I have done this kind of thing many times before but on a simple listview that is which doesnt have any groups, but that method of deleting an item from listView is not applicable here as it is a group listview because it sorts the objects in some order and hence mixing all the indices (index).

This is the method I have used to delete an element from simple (un-grouped) listview:

var deleteIndex=0;
var listView=document.getElementById('listview').winControl;
listView.addEventListener('selectionchanged', function () {
          deleteIndex=listView.selection.getIndices();
        });

  function deleteButtonOnClick(){
         data.splice(deleteIndex,1);
     }

This is not working on group listview, it deletes some other item in listView... I am really stuck at this point, i have to complete my app by tomorrow.

Upvotes: 1

Views: 520

Answers (2)

Sushil
Sushil

Reputation: 5535

you would have created groups from list if the listview is displaying grouped data. splice needs to be invoked on the groups object.

// this is for example. your data model will be different and hence, 
// the createGrouped call details will be different.
var list = new WinJS.Binding.List(data);
var groups = list.createGrouped(
    function groupKey(item)
    {
        return item.brand;
    },
    function groupData(item)
    {
        var result = { title: item.brand };
        return result;
    }
    );
this.groups = groups;
listView.winControl.itemDataSource = groups.dataSource;
listView.winControl.groupDataSource = groups.groups.dataSource;

now, you appbar cmd handler will delete the selected list item something like this. note - it should not be done in the selectionchanged event handler.

_oncmdclick: function oncmdclick(event)
{
    var indices = listView.winControl.selection.getIndices();
    // assuming that delete should only handle single item selection
    if (indices && indices.length == 1)
    {
        this.groups.splice(indices[0], 1);
    }
},

Upvotes: 0

invertedSpear
invertedSpear

Reputation: 11054

I can't give you a code sample since I'm lacking your data model, but the general concept is

  1. have some identifiable data in each object in the array. If it's coming from a DB, you probably have an ID field.
  2. on selectionchanged get that id for the selected item
  3. in you deleteButtonOnClick function first loop through your data array, checking if the id matches with the selected item's, when it does, you have the index of your object
  4. now using that index, splice it out of your array

Upvotes: 1

Related Questions