Edit this page

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.