|
40 events, carrying the .NET event names. A C# handler transliterates: the event is the same event, the payload carries the same fields, and only the subscribe syntax differs.
Events Live On The Control
As in .NET, the events belong to the control rather than to the property surface. In the shape this chapter uses, that is chart, not Pego1.
|
const ctl = new PeControl(host, { module: m, kind: 'graph' });
const Pego1 = ctl.attach(attachApi); // properties here //
ctl.PeDataHotSpot.add(function (sender, ev) {
console.log('subset', ev.subset, 'point', ev.point);
});
|
Subscribing Is Additive
JavaScript has no += operator for events, so the .NET operators become methods. A second handler adds; it does not replace.
|
JavaScript
|
C#
|
Does
|
PeZoomIn.add(fn) |
PeZoomIn += fn |
Adds a handler. |
PeZoomIn.remove(fn) |
PeZoomIn -= fn |
Removes that one handler. |
PeZoomIn.clear() |
- |
Removes all of them. |
PeZoomIn.count |
- |
How many are attached. |
A handler receives the control and the event argument: function (sender, ev), the same two the .NET delegate takes. If one handler throws, the rest still run, because a bad handler silently unsubscribing the next one looks exactly like an event that stopped firing.
Which Events A Chart Has
Scoped per object, the same scoping the .NET controls use. A Pie chart has no PeXAxis, and it is not given one.
An event a chart does not carry is undefined, not a handle that never fires. So a mistyped name fails immediately rather than looking subscribed. A small number of events are declared in .NET but cannot be raised in the browser; those are also undefined, and the control lists them:
|
console.log(chart.eventsBlocked); // names that cannot fire here //
|
Hot Spots: The 20 Events A Click Raises
Click a data point, an axis, a title or an annotation and the matching event fires with what was hit. This is the same dispatch the desktop controls perform, so a C# hot-spot handler ports across unchanged. Nothing fires when the click hit nothing.
|
Event
|
Carries
|
PeDataHotSpot |
subset, point |
PeSubsetHotSpot |
subset |
PePointHotSpot |
point |
PeGraphHotSpot |
axis, and the graph x and y of the click |
PeGridNumber |
the grid number and its value, with a Y, right Y or zoom window discriminator |
PeTableHotSpot |
row, column |
PeTableAnnotation |
table, row, column |
PeXAxis, PeYAxis |
which axis, and the graph coordinate under the pointer |
PeXAxisLabel, PeYAxisLabel |
which axis label |
PeMainTitle, PeSubTitle |
the click alone |
PeMultiSubTitle, PeMultiBottomTitle |
index and justification |
PeGraphAnnotHotSpot |
annotation index |
PeXAxisAnnotHotSpot, PeYAxisAnnotHotSpot |
annotation index |
PeHorzLineAnnotHotSpot, PeVertLineAnnotHotSpot |
annotation index |
Every hot-spot event also carries whether the click was a double click. See Annotations and How do I use Hot Spots?.
The Other 20
Raised by interaction and by the chart's own work rather than by a hot-spot click: zooming (PeZoomIn, PeZoomOut), scrolling (PeHorzScroll, PeVertScroll, PePreHScroll, PePreVScroll), the tracking cursor (PeCursorMoved, PePreCursorMove), dragging annotations (PeGraphAnnotationMoved, PeTAMoved), the popup menu (PePopupMenu), a property change (PeParamUpdate), and the text customization events (PeCustomGridNumber, PeCustomTrackingDataText, PeCustomTrackingOtherText).
The customization events let you replace text. PeCustomTrackingDataText returns the string you want the tracking cursor to show; PeCustomGridNumber rewrites a grid label through the event argument.
If You Already Use The camelCase Handlers
They keep working and nothing was replaced. Thirteen events shipped earlier as single-assignment handlers, and those continue to fire.
|
chart.onZoomIn = fn; // still works, single assignment //
ctl.PeZoomIn.add(fn); // the .NET name, additive //
|
Where an event has both routes both run, the camelCase handler first, and both see the same event argument. The thirteen are onZoomIn, onZoomOut, onHorzScroll, onVertScroll, onCursorMoved, onPreCursorMove, onParamUpdate, onPopupMenu, onTAMoved, onGraphAnnotationMoved, onCustomGridNumber, onCustomTrackingDataText and onCustomTrackingOtherText.
Use the .NET names for new code. A single-assignment handler is replaced silently by a second assignment, which is the failure the additive form removes.
Deployment Note
The .NET-named events arrive with pe-events.js. A page that does not load it keeps every camelCase handler it already had. See ProEssentialsJS Deployment.
Next
ProEssentialsJS Overview, Walkthrough, Example Code, Real-Time Charts, and the JS / .NET Events Reference for the full index with per-event parameters.
|
