This is a migrated thread and some comments may be shown as answers.

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

3 Answers 95 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 1
Veteran
Brett asked on 09 Aug 2020, 06:30 AM

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);
}
});

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 11 Aug 2020, 03:24 PM

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

0
Brett
Top achievements
Rank 1
Veteran
answered on 13 Aug 2020, 06:27 AM

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

0
Viktor Tachev
Telerik team
answered on 14 Aug 2020, 01:35 PM

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

Tags
ListView
Asked by
Brett
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Brett
Top achievements
Rank 1
Veteran
Viktor Tachev
Telerik team
Share this question
or