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:
-
Create two buttons and handle their
Click
events. -
Get a reference to the ListBox and use the client-side API methods
select()
andreorder()
to get the selected item and move it to the respective position. -
To render the "moveTop" and "moveBottom" buttons within the toolbar, handle the
DataBound
event of the ListBox and use the jQueryappend()
method to append each button in thek-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")) )
For a runnable example based on the code above, refer to the following REPL samples: