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

Make one Sortable to connectWith multiple Sortable

5 Answers 446 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Nariman
Top achievements
Rank 1
Nariman asked on 18 May 2014, 06:00 PM
Hi,

I've 4 sortable and want to connect all together such a way that elements from any of the sortable can be drag & dropped to any of the other 3 Sortables.
With JQuery UI Sortable this approach can be done (pls refer to this example: http://jsbin.com/aMIxUHi/1/edit).

However in Kendo UI Sortable when I try the following, it doesn't work:
                    $("#rightbar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#leftbar", "#centrebar"],
                        placeholder: placeholder,
                        hint: hint
                    });
                    $("#leftbar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#rightbar", "#centrebar"],
                        placeholder: placeholder,
                        hint: hint
                    });
                    $("#centrebar").kendoSortable({
                        filter: ">div",
                        cursor: "move",
                        connectWith: ["#leftbar", "#rightbar"],
                        placeholder: placeholder,
                        hint: hint
                    });
Please advise, If this approach is possible and supported in Kendo UI Sortable. If yes, please kindly provide a working example.
Thank you.  

5 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 19 May 2014, 08:41 AM
Hi Nariman,

The scenario is supported just there is a difference in the syntax. In Kendo Sortable the connectWith option accepts a string (jQuery selector) not an array of selectors. That said you should change connectWith: ["#leftbar", "#centrebar"] to connectWith: "#leftbar, #centrebar".


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nariman
Top achievements
Rank 1
answered on 19 May 2014, 09:31 AM
Thank you Alex, it works!
1. May I know if there is any max limit for number of elements we can put in connectWith string?
e.g: connectWith: "#a1, #a2, #a3, #a4, ............."

2. Also if we connectWith more elements does it affect the performance of Browser and/or SortedLists and/or Drag&Drop operations?

Thank you.
0
Accepted
Alexander Valchev
Telerik team
answered on 19 May 2014, 10:56 AM
Hi Nariman,

Regarding your questions:

1. May I know if there is any max limit for number of elements we can put in connectWith string?
There is no limitation of the elements that you can list as connected lists.

2. Also if we connectWith more elements does it affect the performance of Browser and/or SortedLists and/or Drag&Drop operations?
While the user drags Sortable widget constantly checks what is the drop target element - if the dragged element is not positioned over its own container than the widget starts checking all possible connected targets. That said the widget loops through all connected instances until it finds where the drop placeholder should be positioned. Having large amount of connectedLists will require looping through a larger collection which might cause performance issues in case the amount is really large.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nariman
Top achievements
Rank 1
answered on 19 May 2014, 11:20 AM
Very well, thank you Alex!
0
Scott
Top achievements
Rank 1
answered on 14 Oct 2015, 04:08 PM

Another option if you're worried about looping through lots of selectors is to use a CSS class instead.

$(".sortableList").kendoSortable({ connectWith: ".sortableList"});

 

Now anything with the sortableList class will be sortable and connected.

Tags
Sortable
Asked by
Nariman
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Nariman
Top achievements
Rank 1
Scott
Top achievements
Rank 1
Share this question
or