remove selected elements from multi list view

Question

Using Kendo UI, please tell me how can we remove element from multi listview. When i am selecting any item it is giving me value but i am unable to remove selected element.

PSB code:

var data = [
{ id: 1, text: "text 1" },
{ id: 2, text: "text 2" },
{ id: 3, text: "text 3" }
];


var d = $("#listview").kendoListView({
dataSource: data,
template: kendo.template($("#template").html()),
selectable: "multiple",
change: function() {
    var index = this.select().index(),
        dataItem = this.dataSource.view()[index];

    var d = $("#listview").data("kendoListView");
    alert(d.element.children().first());
    d.remove(dataItem.text);

    //log("id: " + dataItem.id + ", text: " + dataItem.text);
    var selected = $.map(this.select(), function(item) {
        return data[$(item).index()].id;
           });
    //data.remove(selected.id);
    //console.log(data);
    console.log(selected);
    //console.log("[" + selected.join(", ") + "]");
}
});

Answer 1

For removing an element is:

// Find selected 
var idx = this.select().index();
// Get reference to the DataSource
var ds = d.data("kendoListView").dataSource;
ds.remove(ds.at(idx));

This would remove the selected item as soon as you click on it (but doing it in change event handler does not actually allow you to remove multiple items).

But you can also directly remove one single item directly from the list using remove method:

// Find selected 
var selected = this.select();
d.data("kendoListView").remove(selected);

Check it here, click on an item and it will get removed.

The question is that these interfaces are able to remove one item per call. If you want to remove many, you can iterate on them:

// Find selected 
var items = d.select();
$.each(items, function(idx, elem) {
    d.remove($(elem));
});

See it here, select many and then click on "Remove" button.