<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Gauge.Types.ArcGauge.DefaultCS" %>
<%@ 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>
<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:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadArcGauge1" LoadingPanelID="RadAjaxLoadingPanelConfiguration" />
<telerik:AjaxUpdatedControl ControlID="RadSlider1" />
<telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
<script>
function pageLoad() {
var arcGauge = $find("<%= RadArcGauge1.ClientID %>");
var slider = $find("<%= RadSlider1.ClientID %>");
arcGauge.set_value(slider.get_value());
}
function clientValueChanged(sender, args) {
var arcGauge = $find("<%= RadArcGauge1.ClientID %>");
arcGauge.set_value(args.get_newValue());
}
</script>
</telerik:RadScriptBlock>
<div class="demo-container no-bg size-thin">
<telerik:RadArcGauge runat="server" ID="RadArcGauge1">
</telerik:RadArcGauge>
<telerik:RadSlider runat="server" ID="RadSlider1" ForeColor="Blue"
MinimumValue="0" Value="51" MaximumValue="100" ShowDecreaseHandle="false"
ShowIncreaseHandle="false" OnClientValueChanged="clientValueChanged">
</telerik:RadSlider>
</div>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanelConfiguration">
</telerik:RadAjaxLoadingPanel>
<qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
<Views>
<qsf:View Title="General">
<qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Center Template</h4>
<telerik:RadToolTip runat="server" ID="RadToolTip1" TargetControlID="infoTip" IsClientID="true" AutoCloseDelay="3000">
RadArcGauge uses <a href="https://docs.telerik.com/kendo-ui/framework/templates/overview">Kendo UI Templates</a> to provide full control over the rendering of center element.<br />
To evaluate the current value of the Gauge in its center element use <b>#:value#</b>
</telerik:RadToolTip>
<span id="infoTip" class="p-icon p-i-help info-button"></span>
<qsf:TextBox runat="server" ID="tbTemplate" Text="#: value #%" AutoPostBack="true" Size="Medium" CssClass="templateInput"></qsf:TextBox>
</li>
<li>
<qsf:ColorPicker runat="server" ID="cpForeColor" ShowIcon="true" AutoPostBack="true" Label="Fore Color" Size="Narrow">
</qsf:ColorPicker>
</li>
<li>
<asp:CheckBox runat="server" ID="cbTransitions" Text="Transitions" Checked="true" AutoPostBack="true" />
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfigurationColumn2" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Scale Configuration</h4>
</li>
<li>
<div class="fb-sized">
<qsf:NumericTextBox runat="server" ID="ntbStartAngle" AutoPostBack="true" Label="Start Angle" Value="0" MinValue="0" MaxValue="360" Size="Narrow">
<NumberFormat DecimalDigits="0" />
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="ntbEndAngle" AutoPostBack="true" Label="End Angle" Value="180" MinValue="0" MaxValue="360" Size="Narrow">
<NumberFormat DecimalDigits="0" />
</qsf:NumericTextBox>
</div>
</li>
<li>
<div class="fb-sized">
<qsf:NumericTextBox runat="server" ID="ntbMin" AutoPostBack="true" Label="Min" Value="0" Size="Narrow">
<NumberFormat DecimalDigits="0" />
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="ntbMax" AutoPostBack="true" Label="Max" Value="100" Size="Narrow">
<NumberFormat DecimalDigits="0" />
</qsf:NumericTextBox>
</div>
</li>
<li>
<div class="fb-sized">
<qsf:NumericTextBox runat="server" ID="ntbRangeSize" AutoPostBack="true" Label="Range Size" Size="Narrow">
<NumberFormat DecimalDigits="1" />
</qsf:NumericTextBox>
</div>
</li>
<li>
<asp:CheckBox runat="server" ID="cbReversed" Text="Reversed" AutoPostBack="true" />
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Scale Appearance</h4>
</li>
<li>
<qsf:ColorPicker runat="server" ID="cpRangeColor" ShowIcon="true" AutoPostBack="true" Label="Range Color" Size="Narrow">
</qsf:ColorPicker>
</li>
<li>
<qsf:ColorPicker runat="server" ID="cpScalePlaceHolderColor" ShowIcon="true" AutoPostBack="true" Label="RangePlaceHolder Color" Size="Narrow">
</qsf:ColorPicker>
</li>
<li>
<span class="label">LineCap type</span>
<qsf:DropDownList runat="server" ID="ddlLineCapType" AutoPostBack="true" SelectedText="Round" Size="Medium"></qsf:DropDownList>
</li>
<li>
<asp:CheckBox runat="server" ID="cbMajorTicks" Text="Major ticks" AutoPostBack="true" />
<asp:CheckBox runat="server" ID="cbMinorTicks" Text="Minor ticks" AutoPostBack="true" />
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Scale Labels</h4>
</li>
<li>
<asp:CheckBox runat="server" ID="cbLabelsVisible" Text="Visible" AutoPostBack="true" />
</li>
<li>
<qsf:ColorPicker runat="server" ID="cpScaleLabelColor" ShowIcon="true" AutoPostBack="true" Label="Label Color" Size="Narrow">
</qsf:ColorPicker>
</li>
<li>
<span class="label">Position</span>
<qsf:DropDownList runat="server" ID="ddlScaleLabelsPosition" AutoPostBack="true" SelectedText="Outside" Size="Medium"></qsf:DropDownList>
</li>
<li>
<qsf:NumericTextBox runat="server" ID="ntbRangeDistance" AutoPostBack="true" Label="Distance" Size="Narrow" MinValue="0" Visible="false">
<NumberFormat DecimalDigits="1" />
</qsf:NumericTextBox>
</li>
</ul>
</qsf:ConfiguratorColumn>
</qsf:View>
<qsf:View Title="Appearance" >
<qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
<ul class="fb-group new">
<li>
<h4>Gauge Area</h4>
</li>
<li>
<qsf:NumericTextBox runat="server" ID="appHeight" AutoPostBack="true" Label="Height" MinValue="0" Size="Narrow">
<NumberFormat DecimalDigits="0" />
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="appWidth" AutoPostBack="true" Label="Width" MinValue="0" Size="Narrow">
<NumberFormat DecimalDigits="0" />
</qsf:NumericTextBox>
</li>
<li>
<qsf:ColorPicker runat="server" ID="backColor" ShowIcon="true" AutoPostBack="true" Label="Back Color" Size="Narrow">
</qsf:ColorPicker>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Border</h4>
</li>
<li>
<qsf:ColorPicker runat="server" ID="borderColor" ShowIcon="true" AutoPostBack="true" Label="Color" Size="Narrow">
</qsf:ColorPicker>
<qsf:NumericTextBox runat="server" ID="borderWidth" AutoPostBack="true" Label="Width" MinValue="0" Size="Narrow">
<NumberFormat DecimalDigits="1" />
</qsf:NumericTextBox>
</li>
<li>
<span class="label">DashType</span>
<qsf:DropDownList runat="server" ID="borderDashType" AutoPostBack="true" SelectedText="Solid" Size="Medium"></qsf:DropDownList>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn6" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Margin</h4>
</li>
<li>
<qsf:NumericTextBox runat="server" ID="ddlMarginTop" AutoPostBack="true" Label="Top" Size="Narrow" MinValue="0">
<NumberFormat DecimalDigits="1" />
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="ddlMarginBottom" AutoPostBack="true" Label="Bottom" Size="Narrow" MinValue="0">
<NumberFormat DecimalDigits="1" />
</qsf:NumericTextBox>
</li>
<li>
<qsf:NumericTextBox runat="server" ID="ddlMarginLeft" AutoPostBack="true" Label="Left" Size="Narrow" MinValue="0">
<NumberFormat DecimalDigits="1" />
</qsf:NumericTextBox>
<qsf:NumericTextBox runat="server" ID="ddlMarginRight" AutoPostBack="true" Label="Right" Size="Narrow" MinValue="0">
<NumberFormat DecimalDigits="1" />
</qsf:NumericTextBox>
</li>
</ul>
</qsf:ConfiguratorColumn>
</qsf:View>
</Views>
</qsf:ConfiguratorPanel>
</form>
</body>
</html>