RadialGauge
RadialGauge
Editing Values
This example demonstrates how to use the isReadOnly and step properties with the RadialGauge control.
Features
Settings
Is Read Only: False
Step: 0.5
Show Ticks: False
Show Tick Text: False
Needle Shape: None
Needle Length: Outer
Description
This example demonstrates how to use the isReadOnly and step properties with the RadialGauge control.
ShowTicks: determines whether the gauge should display tickmarks at each step or tickSpacing value.
ShowTickText: determines whether the gauge should display the text value of each tick mark.
NeedleShape: determines the shape of the gauge's needle element.
NeedleLength: determines the length of the gauge's needle element with respect to the pointer range.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | using MvcExplorer.Models;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class RadialGaugeController : Controller { public ActionResult Editing() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateEditingSettings() }; return View(); } private static IDictionary<string, object[]> CreateEditingSettings() { var settings = new Dictionary<string, object[]> { {"IsReadOnly", new object[]{false, true }}, {"Step", new object[]{0.5, 1, 2}}, {"ShowTicks", new object[]{ false, true}}, {"ShowTickText", new object[]{ false, true}}, {"NeedleShape", new object[]{ "None", "Triangle", "Diamond", "Hexagon", "Rectangle", "Arrow", "WideArrow", "Pointer", "WidePointer", "Outer"}}, {"NeedleLength", new object[]{ "Outer", "Middle", "Inner"}}, }; return settings; } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | @{ ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;}@section Styles{ <style> .wj-gauge .wj-tick-text text { opacity: 1; font-family: Courier; font-size: 8pt; fill: purple; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } </style>}@(Html.C1().RadialGauge().Id(demoSettingsModel.ControlId) .Min(0).Max(10).Value(5).Format("") .IsReadOnly(false).Step(0.5) .Width(300).Height(250).CssStyle("padding-left","25px").CssStyle("overflow", "inherit") .ShowTicks(false).ShowTickText(false) .ShowText(ShowText.None) .NeedleShape(NeedleShape.None) .NeedleLength(NeedleLength.Outer))@section Description{ <p>@Html.Raw(Resources.RadialGauge.Editing_Text0)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text1)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text2)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text3)</p> <p>@Html.Raw(Resources.RadialGauge.Editing_Text4)</p>} |