Dragging and Dropping

To enable the drag-and-drop feature of the ListBox, set its draggable property to true.

You can also customize the drag-and-drop behavior of the widget by using its draggable.placeholder and draggable.hint options.


    <kendo-listbox name="listbox" template-id="template" selectable="ListBoxSelectable.Multiple"  datatextfield="ProductName" datavaluefield="ProductID">
            <draggable hint="hint" enabled="true" placeholder="placeholder" />
            <datasource>
                <transport>
                    <read datatype="jsonp" url="https://demos.telerik.com/kendo-ui/service/Products" />
                </transport>
            </datasource>
            <toolbar position="ListBoxToolbarPosition.Right"
                        tools='new string[] { "moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"}' />
        </kendo-listbox>

    <script type="text/kendo-x-tmpl" id="template">
        <h5 style="background-color:aqua">#=ProductName#</h5>
    </script>


    @(Html.Kendo().ListBox().Name("listbox")
                        .DataTextField("ProductName")
                        .TemplateId("template")
                        .Selectable(ListBoxSelectable.Multiple)
                        .DataValueField("ProductID")
                        .Toolbar(x => x.Position(ListBoxToolbarPosition.Right)
                            .Tools(y =>
                            {
                                y.MoveUp();
                                y.MoveDown();
                                y.TransferTo();
                                y.TransferFrom();
                                y.TransferAllTo();
                                y.TransferAllFrom();
                                y.Remove();

                            }))
                        .DataSource(x =>
                            x.Custom()
                            .Transport(y => y.Read(z => z.Url("https://demos.telerik.com/kendo-ui/service/Products").DataType("jsonp"))))
    )

    <script type="text/kendo-x-tmpl" id="template">
        <h5 style="background-color:aqua">#=ProductName#</h5>
    </script>

See Also

In this article
Not finding the help you need? Improve this article