<%@ Page Language="vb" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-containers">
<div class="demo-container">
<telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" Width="130px" Height="360px">
<Pointer Value="32">
</Pointer>
<Scale Min="-10" Max="40" MajorUnit="10" MinorUnit="2">
<Labels Template="#=value# points" />
<Ranges>
<telerik:GaugeRange Color="Green" From="30" To="40" />
<telerik:GaugeRange Color="Yellow" From="15" To="30" />
<telerik:GaugeRange Color="Red" From="-10" To="15" />
</Ranges>
</Scale>
</telerik:RadLinearGauge>
</div>
<div class="demo-container">
<telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Width="360px" Height="360px">
<Pointer Value="32">
</Pointer>
<Scale Min="-10" Max="40" MajorUnit="10" MinorUnit="2">
<Labels Template="#=value# points" />
<Ranges>
<telerik:GaugeRange Color="Green" From="30" To="40" />
<telerik:GaugeRange Color="Yellow" From="15" To="30" />
<telerik:GaugeRange Color="Red" From="-10" To="15" />
</Ranges>
</Scale>
</telerik:RadRadialGauge>
</div>
</div>
<script type="text/javascript">
Sys.Application.add_load(function() {
telerikDemo.valueNumericBox = $find("<%=ValueNumericBox.ClientID %>");
telerikDemo.heightNumericBox = $find("<%=HeightNumericBox.ClientID %>");
telerikDemo.widthNumericBox = $find("<%=WidthNumericBox.ClientID %>");
telerikDemo.linearGauge = $find("<%=RadLinearGauge1.ClientID %>");
telerikDemo.radialGauge = $find("<%=RadRadialGauge1.ClientID %>");
telerikDemo.showDimensions();
telerikDemo.showValues();
});
</script>
<qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
<Views>
<qsf:View>
<qsf:ConfiguratorColumn runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<qsf:NumericTextBox Size="Wide" Label="Set Value" runat="server" ID="ValueNumericBox">
</qsf:NumericTextBox>
</li>
<li>
<qsf:NumericTextBox Size="Narrow" Label="Set Height" runat="server" ID="HeightNumericBox">
</qsf:NumericTextBox>
<qsf:NumericTextBox Size="Narrow" Label="Set Width" runat="server" ID="WidthNumericBox">
</qsf:NumericTextBox>
</li>
<li>
<qsf:Button runat="server" Size="Wide" ID="ConfigureButton" Text="Set configuration" AutoPostBack="false" OnClientClicked="telerikDemo.configureGauges">
</qsf:Button>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn runat="server" Size="Wide">
<ul class="fb-group">
<li>
<qsf:Button runat="server" ID="GetDimensionsButton" Text="Get Dimensions" AutoPostBack="false" OnClientClicked="telerikDemo.showDimensions"></qsf:Button>
<qsf:Button runat="server" ID="GetValuesButton" Text="Get Values" AutoPostBack="false" OnClientClicked="telerikDemo.showValues">
</qsf:Button>
<div id="dataHolder" style="padding: 15px 0 0 0;">
The LinearGauge properties
<br />
Width: <span id="lgWidth"></span>px
<br />
Height: <span id="lgHeight"></span>px
<br />
Value: <span id="lgValue"></span>
<br />
<br />
The RadialGauge properties
<br />
Width: <span id="rgWidth"></span>px
<br />
Height: <span id="rgHeight"></span>px
<br />
Value: <span id="rgValue"></span>
</div>
</li>
</ul>
</qsf:ConfiguratorColumn>
</qsf:View>
</Views>
</qsf:ConfiguratorPanel>
</form>
</body>
</html>