ASP .NET Core jqxKnob Tag Helper API

allowValueChangeOnClick	bool	true
Sets or gets the `allowValueChangeOnClick` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob allow-value-change-on-click="true"></jqx-knob>
allowValueChangeOnDrag	bool	true
Sets or gets the `allowValueChangeOnDrag` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob allow-value-change-on-drag="true"></jqx-knob>
allowValueChangeOnMouseWheel	bool	true
Sets or gets the `allowValueChangeOnMouseWheel` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob ></jqx-knob>
changing	string	null
Sets or gets the `changing` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob changing="changing"></jqx-knob>
dragEndAngle	int	0
Sets or gets the `dragEndAngle` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob drag-end-angle="420"></jqx-knob>
dragStartAngle	int	360
Sets or gets the `dragStartAngle` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob drag-start-angle="120"></jqx-knob>
disabled	bool	false
Sets or gets the `disabled` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob disabled="true"></jqx-knob>
dial	string	null
Sets or gets the `dial` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob dial="dial"></jqx-knob>
endAngle	int	360
Sets or gets the `endAngle` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob end-angle="420"></jqx-knob>
height	int	400
Sets or gets the `height` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob height="400"></jqx-knob>
labels	string	null
Sets or gets the `labels` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob labels="labels"></jqx-knob>
marks	string	null
Sets or gets the `marks` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob marks="marks"></jqx-knob>
min	int	0
Sets or gets the `min` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob min="min"></jqx-knob>
max	int	100
Sets or gets the `max` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob max="150"></jqx-knob>
progressBar	string	null
Sets or gets the `progressBar` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob progress-bar="progressBar"></jqx-knob>
pointer	string	null
Sets or gets the `pointer` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob pointer="pointer"></jqx-knob>
pointerGrabAction	string	"normal"
Sets or gets the `pointerGrabAction` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob pointer-grab-action="normal"></jqx-knob>
rotation	string	"clockwise"
Sets or gets the `rotation` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob rotation="counterclockwise"></jqx-knob>
startAngle	int	0
Sets or gets the `startAngle` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob start-angle="120"></jqx-knob>
spinner	string	null
Sets or gets the `spinner` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob spinner="spinner"></jqx-knob>
style	string	null
Sets or gets the `style` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob style="{ stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }"></jqx-knob>
step	int	1
Sets or gets the `step` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob step="10"></jqx-knob>
snapToStep	bool	true
Sets or gets the `snapToStep` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob snap-to-step="false"></jqx-knob>
value	int	0
Sets or gets the `value` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob value="60"></jqx-knob>
width	int	400
Sets or gets the `width` property. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob width="500"></jqx-knob>
Events
change	Event
Code examples Bind to the `change` event of jqxKnob. <script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob min="0" max="100" value="60" start-angle="120" end-angle="420" on-change="eventHandler()"></jqx-knob> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
Methods
destroy	Method
<script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob instance="getInstance()"></jqx-knob> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["destroy"](); } </script> }
val	Method
<script src="~/jqwidgets/jqxknob.js"></script> @using jQWidgets.AspNetCore.Mvc.TagHelpers; @{ ViewData["Title"] = "ASP .NET MVC Knob Example"; KnobMarks marks = new KnobMarks() { ColorProgress = new KnobColor() { Color = "#00a4e1", Border = "#00a4e1" }, ColorRemaining = new KnobColor() { Color = "#grey", Border = "#grey" }, Type = "line", Offset = "71%", Thickness = 3, Size = "6%", MajorSize = "9%", MajorInterval = 10, MinorInterval = 2 }; KnobStyle style = new KnobStyle() { Stroke = "#dfe3e9", StrokeWidth = 3, Fill = new KnobGradientFill() { Color = "#fefefe", GradientStops = new List<string>() { "[0, 1]", "[50, 0.9]", "[100, 1]" } } }; KnobLabels labels = new KnobLabels() { Offset = "88%", Step = 10 }; KnobProgressBar progressBar = new KnobProgressBar() { Style = new KnobStyle() { Fill = new KnobGradientFill() { Color = "#00a4e1" }, Stroke = "grey" }, Size = "9%", Offset = "60%", Background = new KnobStyle() { Fill = new KnobGradientFill() { Color = "gray" }, Stroke = "gray" } }; KnobDial dial = new KnobDial() { StartAngle = 120, EndAngle = 420, InnerRadius = "10%", OuterRadius = "20%" }; } <jqx-knob instance="getInstance()"></jqx-knob> @section scripts { <script type="text/javascript"> function getInstance(instance) { var result = instance["val"](); } </script> }

Properties

Events

Code examples

Methods