Overview

    Use RadContextMenu, in order to check the visualization of the app in various device viewports
    All devices
    content
    telerik ninja image
    New to Telerik UI for ASP.NET AJAX?

    Telerik UI for ASP.NET AJAX is professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

    Download Free Trial
    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.
    • DefaultVB.aspx
    • styles.css
    <%@ Page Language="vb"  %>
     
    <!DOCTYPE html>
    <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 ID="Label1" 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>

    Support & Learning Resources

    Find Assistance