BulletGraph
BulletGraph
Direction
This example demonstrates how to use the direction properties with the BulletGraph controls.
Features
Settings
Direction: Left
Description
This example demonstrates how to use the direction properties with the BulletGraph controls.
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 | using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class BulletGraphController : Controller { public ActionResult Direction() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateDirectionSettings() }; return View(); } private static IDictionary<string, object[]> CreateDirectionSettings() { var settings = new Dictionary<string, object[]> { {"Direction", new object[]{"Left", "Right", "Down", "Up"}} }; 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 | @{ ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @section Scripts{ <script> function customChangeDirection(control, value) { control.direction = value; control.invalidate(); if (value === "Left" || value === "Right") { control.hostElement.style.width = "500px"; control.hostElement.style.height = "1.2em"; } else { control.hostElement.style.width = "1.2em"; control.hostElement.style.height = "500px"; } } </script>} <c1-bullet-graph id="@demoSettingsModel.ControlId" min="0" max="10" good="3" bad="4" value="5" target="6" direction="Left" width="500px"> </c1-bullet-graph> @section Description{ @Html.Raw(BulletGraphRes.Direction_Text0) } |