Use RadContextMenu with RadListBox

This article will show you how to integrate RadContextMenu in RadListBox. Right clicking on the list item will show the context menu with several options: Delete, Move Up and Move Down.

Here is the declaration:

<telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1"
   Skin="Vista"
   Height="150px"
   AllowReorder="true"
   AllowDelete="true"
   OnClientContextMenu="showContextMenu"
   runat="server">
   <Items>
       <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />
       <telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />
       <telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />
   </Items>
   <ButtonSettings ShowDelete="false" ShowReorder="false" />
 </telerik:RadListBox>
<telerik:RadContextMenu ID="cm1"
   runat="server"
   OnClientItemClicked="onItemClicked"
   Skin="Vista">
   <Items>
       <telerik:RadMenuItem Text="Delete"></telerik:RadMenuItem>
       <telerik:RadMenuItem Text="Move Up"></telerik:RadMenuItem>
       <telerik:RadMenuItem Text="Move Down"></telerik:RadMenuItem>
   </Items>
</telerik:RadContextMenu>           

and the javascript code:

function showContextMenu(sender, e) {
    var menu = $find("<%= cm1.ClientID %>");
    var rawEvent = e.get_domEvent().rawEvent; menu.show(rawEvent);
    e.get_item().select();
    $telerik.cancelRawEvent(rawEvent);

}
function onItemClicked(sender, e) {
    var listBox = $find("<%= RadListBox1.ClientID %>");
    var listItem = listBox.get_selectedItem();
    var menuItem = e.get_item();
    switch (menuItem.get_text()) {
        case "Delete": listBox.deleteItem(listItem);
            break;
        case "Move Up": listBox.reorderItem(listItem, listItem.get_index() > 1 ? listItem.get_index() - 1 : 0);
            break;
        case "Move Down": var maxIndex = listBox.get_items().get_count() - 1; listBox.reorderItem(listItem, listItem.get_index() < maxIndex ? listItem.get_index() + 1 : maxIndex); break;
    }
}   

The example uses the OnClientContextMenu event of the listbox to show the RadContextMenu. Then, based on the clicked menu item - the listbox item is either deleted or reordered using the client-side API of the RadListBox object.