Search results

Events

Using events in Circular Gauge component

In the following example, the event OnDragMove binds to the circular gauge component, so the event handler UpdatePointerValue will be called when you drag the pointer and update the pointer value in the div element.

@using Syncfusion.EJ2.Blazor.CircularGauge

<div style="width:250px">
    <div style="text-align: center">@pointerValue</div>
    <EjsCircularGauge EnablePointerDrag="true" Height="250px" Width="250px">
        <CircularGaugeEvents OnDragMove="@UpdatePointerValue"></CircularGaugeEvents>
        <CircularGaugeAxes>
            <CircularGaugeAxis>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="@pointerValue"></CircularGaugePointer>
                </CircularGaugePointers>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </EjsCircularGauge>
</div>

@code {
    private double pointerValue = 10;
    void UpdatePointerValue(IPointerDragEventArgs args)
    {
        pointerValue = args.CurrentValue;
    }
}

Event binding in Circular gauge

Available events

AnimationCompleted

Description: Triggers, after animation is completed.

Argument name Description
Axis Specifies the axis instance
Name Specifies the event name
Pointer Specifies the pointer instance

AnnotationRendering

Description: Triggers, before rendering on each annotation. You can customize annotations using these arguments.

Argument name Description
Annotation Specifies the annotation instance
Axis Specifies the axis instance
Cancel Set to true, cancel the rendering content
Content Specifies the annotation content
Name Specifies the event name
TextStyle To customize the text style

AxisLabelRendering

Description: Triggers, before rendering on each axis label. You can customize the labels using these arguments.

Argument name Description
Axis Specifies the axis instance
Cancel Set to true, cancel the rendering of the current axis labels
Name Specifies the event name
Text Specifies the text instance
Value Specifies the axis label, you can customize this

Loaded

Description: Triggers, after the gauge component has been loaded.

Argument name Description
Name Name of the event
Gauge CircularGauge instance

OnDragEnd

Description: Triggers, when you finished dragging the pointer needle.

Argument name Description
Axis Axis instance
AxisIndex Specifies the current axis index value
CurrentValue Specifies the current value of label
Name Name of the event
Pointer Pointer instance
PointerIndex Index of the current pointer instance
PreviousValue PreviousValue instance

OnDragMove

Description: Triggers, when you dragging the pointer needle.

Argument name Description
Axis Axis instance
AxisIndex Specifies the axis index value
CurrentValue Specifies the current value of label
Name Name of the event
Pointer Pointer instance
PointerIndex Index of the current pointer instance
PreviousValue PreviousValue instance

OnDragStart

Description: Triggers, when you start to drag the pointer needle.

Argument name Description
Axis Axis instance
AxisIndex Specifies the axis index value
CurrentValue Specifies the current value of label
Name Name of the event
Pointer Pointer instance
PointerIndex Index of the current pointer instance
PreviousValue PreviousValue instance

OnGaugeMouseDown

Description: Triggers, when you click the mouse on the gauge.

Argument name Description
Cancel Defines the event cancel status
Name Defines the name of the event
Target Defines current mouse event target id
X Define the current mouse x location
Y Define the current mouse y location

OnGaugeMouseLeave

Description: Triggers, when the mouse pointer is moved out of the gauge.

Argument name Description
Cancel Defines the event cancel status
Name Defines the name of the event
Target Defines current mouse event target id
X Define the current mouse x location
Y Define the current mouse y location

OnGaugeMouseMove

Description: Triggers on cursor moving on the gauge.

Argument name Description
Cancel Defines the event cancel status
Name Defines the name of the event
Target Defines current mouse event target id
X Define the current mouse x location
Y Define the current mouse Y location

OnGaugeMouseUp

Description: Triggers, when you releasing a mouse on the gauge.

Argument name Description
Name Defines the name of the event
Target Defines current mouse event target id
X Define the current mouse x location
Y Define the current mouse Y location

OnLoad

Description: Triggers, before rendering the gauge. Gauge will trigger this event first.

Argument name Description
Cancel Defines the event cancel status
Name Defines the name of the event
Gauge CircularGauge instance

OnRadiusCalculate

Description: Triggers, before the radius get calculated for the gauge. You can customize the gauge radius using these arguments.

Argument name Description
Axis Axis event argument
CurrentRadius Specifies the current radius value
Gauge CircularGauge instance
MidPoint Specifies the mid point of the gauge location
Name Defines the name of the event

Resizing

Description: Triggers, when you resize the gauges.

Argument name Description
CurrentSize Define the current size of the gauge
Gauge CircularGauge instance
Name Defines the name of the event
PreviousSize Define the previous size of the gauge

TooltipRendering

Description: Triggers, before rendering the gauge tooltip.

Argument name Description
Axis axis instance
Cancel Defines the event cancel status
Content Specifies the tooltip text
Event Specifies the mouse arguments
Gauge CircularGauge instance
Name Defines the name of the event
Location Specifies the tooltip location
Pointer Define the pointer event argument
Tooltip Tooltip instance, to customize the tooltip settings