Selection

The ListBox provides a single and a multiple selection mode.

By default, the single selection mode of the ListBox is enabled. To set the multiple selection mode, add selectable="ListBoxSelectable.Multiple". When the multiple selectino mode is enabled, all selected items move together, that is, the selected items are transferred to another Telerik UI ListBox TagHelper together or reordered as a set among other items.

You can reorder selected items by using any of the following approaches:

  • The Move Up and Move Down command buttons of the toolbar.
  • The drag-and-drop functionality if the widget is draggable.
  • The Ctrl+Shift+ or Ctrl+Shift+ keyboard combinations.

Currently, the ListBox does not support the drag-and-drop feature for multiple selected items.


    <kendo-listbox name="listbox" datatextfield="ProductName" datavaluefield="ProductID">
        <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>

        @(Html.Kendo().ListBox().Name("listbox")
                    .DataTextField("ProductName")
                    .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"))))
            )

See Also

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