Make one Sortable to connectWith multiple Sortable

6 posts, 2 answers
  1. Nariman
    Nariman avatar
    32 posts
    Member since:
    Aug 2013

    Posted 18 May 2014 Link to this post

    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.  
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 19 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Nariman
    Nariman avatar
    32 posts
    Member since:
    Aug 2013

    Posted 19 May 2014 in reply to Alexander Valchev Link to this post

    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.
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 19 May 2014 Link to this post

    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!
     
  6. Nariman
    Nariman avatar
    32 posts
    Member since:
    Aug 2013

    Posted 19 May 2014 in reply to Alexander Valchev Link to this post

    Very well, thank you Alex!
  7. Scott
    Scott avatar
    18 posts
    Member since:
    Mar 2015

    Posted 14 Oct 2015 in reply to Nariman Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready