Telerik Context Menu With Check-Uncheck

Introduction

 

In this article, we will see how to work with a Telerik context menu control with Check-Uncheck items. In many cases, we need to show menu items with Check-Uncheck icons like copy and paste in Windows Forms. This can be done very easily in Windows applications but in web applications it is difficult. Telerik has provided a mind-blowing control to do it very easily; the RadContextMenu control.

 

To create the Context menu you need to use the steps given below. So let's start working with Telerik RadContextMenu.

 

Step 1: First drag and drop the Telerik Toolbar from the toolbox on your webform, as well as pull the RadToolBarDropDown as an item on the ToolBar for displaying the popup menu when clicking the dropdown.

<telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientDropDownOpening="OnClientDropDownOpening">
     <Items>
          <telerik:RadToolBarDropDown runat="server" Text="Take Action">
          </telerik:RadToolBarDropDown>
     </Items>
</telerik:RadToolBar>

In the preceding code the markup contains one ToolBar and only one item i.e. RadToolBarDropDown. Next on the ToolBar markup we have the OnClientDropDownOpening event; this event fires on the client side when the user clicks on the DropDown item on the ToolBar. Later we will see the method we called.

 

Step 2: Next pull the RadContextMenu from the toolbox with certain menu items in it like the following. Here I'm taking four menu items; that two are main menu items and two are subitems for the second main menu item.

<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="ContextMenuItemClickedOnClient" OnItemClick="RadMenuItem_Click">
     <Items>
          <telerik:RadMenuItem runat="server" Text="Item1" Value="1" PostBack="false"></telerik:RadMenuItem>
          <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
          <telerik:RadMenuItem runat="server" Text="Item2" PostBack="false" Value="2">
               <Items>
                    <telerik:RadMenuItem runat="server" Text="SubItem1" Value="S1" PostBack="false"></telerik:RadMenuItem>
                    <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="SubMenu2" Value="S2" PostBack="true"></telerik:RadMenuItem>
               </Items>
          </telerik:RadMenuItem>
     </Items>
</telerik:RadContextMenu>

In the preceding markup we have created RadContextMenu with some items. In the preceding markup one interesting thing to see is the RadContextMenu has both events, client side item clicked events as well as server side item clicked events. Here we will use both to do something on the client side and something on the server side.

 

Step 3 : Next create some hidden fields to store the state of the RadContextMenu menu items like the following. Here I've taken four items for four menu items.

<input type="hidden" id="hid1" runat="server" value="False" />
<input type="hidden" id="hid2" runat="server" value="False" />
<input type="hidden" id="hid3" runat="server" value="False" />
<input type="hidden" id="hid4" runat="server" value="False" />

Step 4: Now we are ready with the design but our main purpose of this article to check the item on click which is done with the following JavaScript method.

function ContextMenuItemClickedOnClient(sender, args) {
      var menu = $find("<%= RadContextMenu1.ClientID %>");
      var itemValue = args.get_item().get_value();
      if (itemValue == "1") {
            var stateofitem = $get("<%=hid1.ClientID %>").value;
            if (stateofitem == "False") {
                   var item = menu.findItemByValue("1");
                   item.set_imageUrl("checked.gif");
                   $get("<%=hid1.ClientID %>").value = "True";
            }
            else {
                   var item = menu.findItemByValue("1");
                   item.set_imageUrl("");
                   $get("<%=hid1.ClientID %>").value = "False";
            }
      }
      else if (itemValue == "2") {
             var stateofitem = $get("<%=hid2.ClientID %>").value;
             if (stateofitem == "False") {
                    var item = menu.findItemByValue("2");
                    item.set_imageUrl("checked.gif");
                    $get("<%=hid2.ClientID %>").value = "True";
             }
             else {
                    var item = menu.findItemByValue("2");
                    item.set_imageUrl("");
                    $get("<%=hid2.ClientID %>").value = "False";
             }
      }
      else if (itemValue == "S1") {
             var stateofitem = $get("<%=hid3.ClientID %>").value;
             if (stateofitem == "False") {
                    var item = menu.findItemByValue("S1");
                    item.set_imageUrl("checked.gif");
                    $get("<%=hid3.ClientID %>").value = "True";
             }
             else {
                    var item = menu.findItemByValue("S1");
                    item.set_imageUrl("");
                    $get("<%=hid3.ClientID %>").value = "False";
             }
      }
}

The preceding JavaScript method will be called when the user clicks the menuitem where we are getting the MenuitemValue which has been clicked by the user and after checking the value we are setting the image URL of an item.

 

Step 5 : In Step 1 we left the ToolBar DropDownopening event. Next write the following script to open our RadContextMenu on clicking the dropdown of the toolbar:

function OnClientDropDownOpening(sender, eventArgs) {
       var x = eventArgs.get_item().get_element().offsetLeft + 0;
       var y = eventArgs.get_item().get_element().offsetTop + 27;
       showMenuAt(eventArgs.get_domEvent(), x, y);
}
function showMenuAt(e, x, y) {
       var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
       if (isNaN(x) || isNaN(y)) {
           alert("Please provide valid integer coordinates");
           return;
       }
       contextMenu.showAt(x, y);
       $telerik.cancelRawEvent(e);
}

Step 6: Next write the following code in the page load event to maintain the state of menuitems on postbacks:

RadMenuItem _item1 = (RadMenuItem)RadContextMenu1.FindItemByValue("1");
RadMenuItem _item2 = (RadMenuItem)RadContextMenu1.FindItemByValue("2");
RadMenuItem _subitem1 = (RadMenuItem)RadContextMenu1.FindItemByValue("S1");
bool _itemonevalue = Convert.ToBoolean(hid1.Value);
bool _itemtwovalue = Convert.ToBoolean(hid2.Value);
bool _subitemonevalue = Convert.ToBoolean(hid3.Value);
if (_itemonevalue)
{
      _item1.ImageUrl = "~/checked.gif";
       hid1.Value = "True";
}
if (_itemtwovalue)
{
       _item2.ImageUrl = "~/checked.gif";
        hid2.Value = "True";
}
if (_subitemonevalue)
{
      _subitem1.ImageUrl = "~/checked.gif";
        hid3.Value = "True";
}

In the preceding code, we are checking the values of hidden fields and taking action to check the menuitems.

 

Step 7: Next write the server-side event for the RadContextMenu to do some useful tasks like the following:

protected void RadMenuItem_Click(object sender, RadMenuEventArgs e)
{
     //do Server Side Activity Here
     RadMenuItem _item = e.Item;
     bool _s2 = Convert.ToBoolean(hid4.Value);
     if (!_s2)
     {
         _item.ImageUrl = "~/checked.gif";
          hid4.Value = "True";
      }
      else
      {
          _item.ImageUrl = "";
          hid4.Value = "False";
      }
}

Step 8: Next run your application and see the output with the radcontextmenu with Check-Uncheck menuitems.

 

Conclusion

 

In this easy way, we can create attractive menus like Windows Forms menus for web forms using Telerik.