<%@ Page Language="c#" AutoEventWireup="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script>
function convertToRome(value) {
var rome = new Array("", "", "", "III", "", "", "VI", "", "", "IX", "", "", "XII");
if (0 <= value <= 12) {
return rome[value];
}
}
function test(sender) {
var selectedTime = sender.get_value();
var value = selectedTime.split(":");
var hours = value[0];
var minutes = value[1];
var gauge1 = $find("<%=RadRadialGauge1.ClientID %>").get_kendoWidget();
gauge1.options.pointer[0].value = hours;
gauge1.options.pointer[1].value = parseInt(minutes) / 5;
gauge1.redraw()
setGaugeTime($find("<%=RadRadialGauge2.ClientID %>").get_kendoWidget(), 5, hours, minutes);
setGaugeTime($find("<%=RadRadialGauge3.ClientID %>").get_kendoWidget(), 13, hours, minutes);
}
function setGaugeTime(gauge, diff, hours, minutes) {
if ((parseInt(hours) + diff) > 12) {
gauge.options.pointer[0].value = (parseInt(hours) + diff - 12);
gauge.options.pointer[1].value = parseInt(minutes) / 5;
}
else {
gauge.options.pointer[0].value = parseInt(hours) + diff;
gauge.options.pointer[1].value = parseInt(minutes) / 5;
}
gauge.redraw();
}
</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadTimePicker1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadTimePicker1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<div class="demo-container size-thin" runat="server" id="containerDiv">
<div class="header">
<h3>Set Time for New York:</h3>
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" Width="285px" DateInput-OnClientDateChanged="test" runat="server"></telerik:RadTimePicker>
</div>
<div class="cellsWrapper">
<div class="demo-cell">
<div class="backgroundNewYork">
<div class="backgroundHolder">
<telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="150px" Width="150px">
<Pointers>
<telerik:RadialPointer Value="5">
<Cap Color="#ffffff" Size="0.25" />
</telerik:RadialPointer>
<telerik:RadialPointer Value="8" Color="#778890">
<Cap Size="0.08" />
</telerik:RadialPointer>
</Pointers>
<Scale Min="0" Max="12" MajorUnit="1" MinorUnit="0.2" StartAngle="-270" EndAngle="90">
<Labels Format="{0}" Position="Inside" Template="#=convertToRome(value)#" Font="bold 12px Arial,Segoe UI,Verdana,Tahoma" />
<MajorTicks Size="15" />
<MinorTicks Size="5" />
</Scale>
</telerik:RadRadialGauge>
</div>
</div>
</div>
<div class="demo-cell">
<div class="backgroundLondon">
<div class="backgroundHolder">
<telerik:RadRadialGauge runat="server" ID="RadRadialGauge2" Height="150px" Width="150px">
<Pointers>
<telerik:RadialPointer Value="7">
<Cap Color="#ffffff" Size="0.25" />
</telerik:RadialPointer>
<telerik:RadialPointer Value="5" Color="#778890">
<Cap Size="0.1" />
</telerik:RadialPointer>
</Pointers>
<Scale Min="0" Max="12" MajorUnit="1" MinorUnit="0.2" StartAngle="-270" EndAngle="90">
<Labels Format="{0}" Position="Inside" Template="#=convertToRome(value)#" Font="bold 12px Arial,Segoe UI,Verdana,Tahoma" />
<MajorTicks Size="15" />
<MinorTicks Size="5" />
</Scale>
</telerik:RadRadialGauge>
</div>
</div>
</div>
<div class="demo-cell">
<div class="backgroundTokyo">
<div class="backgroundHolder">
<telerik:RadRadialGauge runat="server" ID="RadRadialGauge3" Height="150px" Width="150px">
<Pointers>
<telerik:RadialPointer Value="10">
<Cap Color="#ffffff" Size="0.25" />
</telerik:RadialPointer>
<telerik:RadialPointer Value="5" Color="#778890">
<Cap Size="0.1" />
</telerik:RadialPointer>
</Pointers>
<Scale Min="0" Max="12" MajorUnit="1" MinorUnit="0.2" StartAngle="-270" EndAngle="90">
<Labels Format="{0}" Position="Inside" Template="#=convertToRome(value)#" Font="bold 12px Arial,Segoe UI,Verdana,Tahoma" />
<MajorTicks Size="15" />
<MinorTicks Size="5" />
</Scale>
</telerik:RadRadialGauge>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>