Implementing 'moveTop' and 'moveBottom' Custom Tools

Environment

Product	Telerik UI for ASP.NET Core ListBox
Progress Telerik UI for ASP.NET Core version	Created with the 2023.3.1010 version

Description

How can I create custom tools (moveTop and moveBottom) that move the selected option at the top or the bottom of all ListBox options?

Solution

The ListBox supports MoveUp() and MoveDown() that move up and down the selected option. To create tools that move the option to the top or the bottom of the options list, follow the steps below:

1. Create two buttons and handle their Click events.

2. Get a reference to the ListBox and use the client-side API methods select() and reorder() to get the selected item and move it to the respective position.

3. To render the "moveTop" and "moveBottom" buttons within the toolbar, handle the DataBound event of the ListBox and use the jQuery append() method to append each button in the k-listbox-actions element.

   Razor

     @(Html.Kendo().ListBox()
           .Name("listBox")
           .Toolbar(toolbar =>
           {
               toolbar.Position(ListBoxToolbarPosition.Right);
               toolbar.Tools(tools => tools
                   .MoveUp()
                   .MoveDown()
                   .Remove()
               );
           })
           .Events(ev => ev.DataBound("onDataBound"))
           ...
       )
   
       @(Html.Kendo().Button()
           .Name("moveToTop")
           .Icon("chevron-double-up")
           .Content("<span class='k-icon' title='Move Top'></span>")
           .Events(ev => ev.Click("onClickTop"))
       )
   
       @(Html.Kendo().Button()
           .Name("moveToBottom")
           .Icon("chevron-double-down")
           .Content("<span class='k-icon' title='Move Bottom'></span>")
           .Events(ev => ev.Click("onClickBottom"))
       )

   Razor

       @addTagHelper *, Kendo.Mvc
       @{
           var tools = new string[] { "moveUp", "moveDown", "remove" };
       }
   
       <kendo-listbox name="listBox">
           <toolbar position="ListBoxToolbarPosition.Right" tools="tools"/>
           <!-- Other configuration -->
       </kendo-listbox>
   
       <kendo-button name="moveToTop" icon="chevron-double-up" on-click="onClickTop">
           <span class='k-icon' title='Move Top'></span>
       </kendo-button>
   
       <kendo-button name="moveToBottom" icon="chevron-double-down" on-click="onClickBottom">
           <span class='k-icon' title='Move Bottom'></span>
       </kendo-button>

   Html

       <script>
           function onClickTop() {
               var listBox = $("#listBox").data("kendoListBox");
               var selectedItems = listBox.select(); // Get the selected item element.
   
               if (selectedItems.length > 0) {
                   listBox.reorder(selectedItems[0], 0); // Move it at position 1 (index 0).
               }
           }
   
           function onClickBottom() {
               var listBox = $("#listBox").data("kendoListBox");
               var selectedItems = listBox.select(); // Get the selected item element.
               var items = listBox.items(); // Get all ListBox items.
   
               if (selectedItems.length > 0) {
                   listBox.reorder(selectedItems[0], (items.length - 1)); // Move it at the last position.
               }
           }
   
           function onDataBound() {
               $(".k-listbox-actions").append($("#moveToTop"));
               $(".k-listbox-actions").append($("#moveToBottom"));
           }
       </script>

For a runnable example based on the code above, refer to the following REPL samples:

• Sample code with the ListBox HtmlHelper
• Sample code with the ListBox TagHelper

More ASP.NET Core ListBox Resources

• ASP.NET Core ListBox Documentation

• ASP.NET Core ListBox Demos

• ASP.NET Core ListBox Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the ListBox for ASP.NET Core

• Server-Side API Reference of the ListBox for ASP.NET Core

• Server-Side TagHelper API Reference of the ListBox for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base