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
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.

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>
<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>

Support & Learning Resources

Find Assistance