Menu - Overview

Use RadContextMenu, in order to check the visualization of the app in various device viewports
All devices
content
  • All Devices
  • Phone
    • Portait
    • Landscape
  • Tablet
    • Portait
    • Landscape
  • Laptop
  • Desktop
  • Exit
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
The demo shows how the RadContextMenu could be used, in order to check the visualization of certain application in various device viewports. In addition, the custom attributes collection of the RadMenuItem is used for passing additional information to the OnClientItemClicked client-side function.
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox runat="server" ID="MessageBox1" Icon="Info" Type="Info">
        Use RadContextMenu, in order to check the visualization of the app in various device viewports
    </qsf:MessageBox>
    <div class="demo-container" id="demoContainer">
        <div class="header">
            <div class="deviceIconWrapper">
                <span class="deviceIcon"></span>
                <span class="callout"></span>
            </div>
            <asp:Label Text="All devices" runat="server" CssClass="title" />
        </div>
        <table class="content">
            <tr>
                <td>
                    <img id="desktop" src="images/content-allDevices.png" alt="content" />
                </td>
            </tr>
        </table>
    </div>
    <telerik:RadContextMenu runat="server" ID="ContextMenu1"
        EnableRoundedCorners="true" EnableShadows="true"
        OnClientItemClicked="OnClientItemClicked">
        <Targets>
            <telerik:ContextMenuElementTarget ElementID="demoContainer" />
        </Targets>
        <Items>
            <telerik:RadMenuItem Text="All Devices" Value="allDevices" />
            <telerik:RadMenuItem Text="Phone" Value="phoneP">
                <Items>
                    <telerik:RadMenuItem Text="Portait" Value="phoneP" Device="Phone"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Landscape" Value="phoneL" Device="Phone"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Tablet" Value="tabletP">
                <Items>
                    <telerik:RadMenuItem Text="Portait" Value="tabletP" Device="Tablet"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Landscape" Value="tabletL" Device="Tablet"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Laptop" Value="laptop" />
            <telerik:RadMenuItem Text="Desktop" Value="desktop" />
            <telerik:RadMenuItem Text="Exit" />
        </Items>
    </telerik:RadContextMenu>

    <script type="text/javascript">
        var $ = $telerik.$;

        function OnClientItemClicked(sender, args) {
            var item = args.get_item(),
                itemValue = item.get_value(),
                itemText = item.get_text(),
                itemAttribute = item.get_attributes().getAttribute("Device");


            if (itemValue != null) {
                $get("desktop").src = "./images/content-" + itemValue + ".png";

                $(".deviceIcon").attr("class", "deviceIcon " + itemValue)

                if (itemAttribute != null)
                    $telerik.$(".title").html(itemAttribute + " " + itemText);
                else
                    $telerik.$(".title").html(itemText);
            }

        }

    </script>


    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?