Can I have a ListView have and a kendoDropTarget method and a kendoSortable method?

[Brett]

I have an application that has 2 ListViews.  I have one ListView that lists products and I'm able to drag the products over to the other ListView.  I'm able to drag over the items.  The issue that I'm running into is when I try to resort the items on the second ListView.  The application breaks.  I'm not sure how to fix this.

I've copied over some of my code to see if someone can spot the issue

$("#products-list").kendoListView({
selectable: "single",
dataSource: productsList,
template: kendo.template($('#item-template').html())
});

$("#products-list").kendoDraggable({
filter: ".item",
hint: function (element) {
return element.clone();
},
kendoDropTarget: "#selected-products-list",
});

$("#selected-products-list").kendoListView({
dataSource: selectedProducts,
template: kendo.template($('#selected-item-template').html())
});

$("#selected-products-list").kendoDropTarget({
drop: function (e) { // Apply the changes to the data after an item is dropped.
var draggableElement = e.draggable.currentTarget,
dataItem = productsList.getByUid(draggableElement.data("uid")); // Find the corresponding dataItem by uid.

selectedProducts.add(dataItem); 
}
});

$("#selected-products-list").kendoSortable({
filter: ".item",
cursor: "move",
placeholder: function (element) {
return element.clone().css("opacity", 0.1);
},
hint: function (element) {
return element.clone().removeClass("k-state-selected");
},
change: function (e) {
var oldIndex = e.oldIndex,
newIndex = e.newIndex,
data = selectedProducts.data(),
dataItem = selectedProducts.getByUid(e.item.data("uid"));
selectedProducts.remove(dataItem);
selectedProducts.insert(newIndex, dataItem);
}
});

[Alex Hajigeorgieva]

Hello, Brett,

Thank you for the provided code snippets.

The Kendo Sortable incorporates draggable and droptarget and using all three over the same element might interfere with the desired functionality. You can use the sortable connectWith property instead to accomplish your requirement as we have demonstrated in this knowledge base article:

https://docs.telerik.com/kendo-ui/knowledge-base/listview-drag-drop-sortable-items

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Brett]

Alex,

That worked for me!  But I have another question. 

On my listview on the right, I have sub categories that appear under each item.  If I resort the items, the sub categories don't update correctly.  I would like to do a refresh of the list on the right.  How would I go about that?

Thanks,

Brett

[Viktor Tachev]

Hi Brett,

 

I examined the screenshots and it seems like the ListView ot the right is showing hierarchical items. Have in mind that the widget was not intended for displaying hierarchy.

Nevertheless, in order to have a hierarchy-like appearance for the ListView items I would suggest having the template for each item include the smaller sub-items in it. This way the appearance of the widget will be similar and when reordering items the smaller ones will be automatically placed correctly.

Regards,
Viktor Tachev
Progress Telerik