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