KendoUI connect draggable to sortable

Question

Is there any way that I can connect KendoUI draggable item to be added to KendoUI sortable list as the example with jQueryUI here: http://jqueryui.com/draggable/#sortable. I'm hitting my head for a day with this and its becoming medium funny. Should I switch to jQueryUI?

I have requested this feature at the Kendo UI Feedback site, if enough people vote for it, they may add the functionality: http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/6938646-drag-items-from-a-draggable-to-a-sortable — Alejo, Jan 15 '15 at 15:16

OnaBai · Answer 1 · 2014-04-15T18:01:29.983

5

Did you check KendoUI Sortable widget. It is actually pretty easy to use.

If this is your HTML list elements:

<ul id="sortable">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
</ul>

You just need to do:

$("#sortable").kendoSortable({
});

Check it here : http://jsfiddle.net/OnaBai/gN3jV/

With this default initialization you have the dragged element look like the original one (same CSS style) but you can change it by defining a hint handler:

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    }
});

Where I add to the dragged element the CSS class ob-hint.

See the previous example modified: http://jsfiddle.net/OnaBai/gN3jV/1/

And you can also style the placeholder (where to drop) by defining a handler that adds a class to the element or even a text.

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    },
    placeholder:function(element) {
        return element.clone().addClass("ob-placeholder").text("drop it here");
    },
});

The modified example here : http://jsfiddle.net/OnaBai/gN3jV/2/

edited Apr 15 '14 at 18:01

answered Apr 15 '14 at 17:53

OnaBai

40,767
6
96
125

Do you happen to know which version of Kendo UI is required for this component? – Rick S Apr 15 '14 at 18:02
Yes, latest v2014.1.318 – OnaBai Apr 15 '14 at 18:03
Thanks for the example OnaBai but i'm already using the kendo sortable.My concern is how to drag element from elswhere into kendo sortable..Look at the example i provided in jqueryUI there is option for the draggable connectToSortable.. in Kendo there are no such things so my problem is how to do the same as in the JqueryUI example from the page ( take draggable item and put its copy into sortable collection ) p.S the Kendo version is the latest.. downloaded it 2 days ago – Emil Dimitrov Apr 15 '14 at 20:45
1

If so, you should probably take a look into `kendoDraggable`, `kendoDraggable` and `kendoDropTarget` but depending on how your elements are organized in the page, you might also do it with `kendoSortable` and configuring `connectWith`, `filter` and maybe `container`. Can you use JSFiddle to show the structure of your elements? Then I can work on the best solution for that specific case. As you can see it depends on your exact requirements – OnaBai Apr 16 '14 at 09:53

score 3 · Answer 2 · answered Nov 04 '15 at 17:09

There is no way to do this in the Kendo UI controls. Telerik says they have no plans to do this and have lots of excuses why they are not going to do it.

However, using some JavaScript, there is a way around it. If you make both lists sortable, you can filter the 'draggable' items, so they do not change positions.

$("#draggable").kendoSortable({
   connectWith: "#sortable",    
   start: function () {
     $("#draggable div").each(function () {
       $(this).removeClass("sortable");
     });
   }
});

This fiddle shows this: http://jsfiddle.net/kgjertsen/r4xmLevq/

The only drawback is the 'draggable' item disappears until you drop it on the sortable area.

KendoUI connect draggable to sortable

2 Answers2