Client Side Events Tool

In This Topic

The client side events tool allows you capture client mouse events and execute JScript code on the client depending on the current chart or diagram element. The following code snippet shows how to capture the mouse down event on the client and display a simple alert.

Nevron Chart ThinWeb

C#	Copy Code
if (!NThinChartControl1.Initialized) { // get the default chart NChart chart = NThinChartControl1.Charts[0]; // add bar serires to the chart NBarSeries bar = new NBarSeries(); chart.Series.Add(bar); // add one bar bar.Values.Add(10); bar.FillStyle = new NColorFillStyle(Color.Blue); NInteractivityStyle interactivityStyle = new NInteractivityStyle(); interactivityStyle.ClientMouseEventAttribute.MouseDown = "alert(\"You clicked on the bar\");"; bar.InteractivityStyle = interactivityStyle; NThinChartControl1.Controller.Tools.Add(new NClientMouseEventTool()); }

Copy Code

if (!NThinChartControl1.Initialized)
{

// get the default chart
NChart chart = NThinChartControl1.Charts[0];

// add bar serires to the chart
NBarSeries bar = new NBarSeries();
chart.Series.Add(bar);

// add one bar
bar.Values.Add(10);
bar.FillStyle = new NColorFillStyle(Color.Blue);

NInteractivityStyle interactivityStyle = new NInteractivityStyle();
interactivityStyle.ClientMouseEventAttribute.MouseDown = "alert(\"You clicked on the bar\");";
bar.InteractivityStyle = interactivityStyle;

NThinChartControl1.Controller.Tools.Add(new NClientMouseEventTool());
}

Nevron Diagram ThinWeb

C#	Copy Code
if (!NThinDiagramControl1.Initialized) { // init the document NDrawingDocument document = NThinDiagramControl1.Document; document.BeginInit(); document.BackgroundStyle.FrameStyle.Visible = false; document.AutoBoundsPadding = new Nevron.Diagram.NMargins(10f, 10f, 10f, 10f); document.Style.FillStyle = new NColorFillStyle(Color.White); NBasicShapesFactory factory = new NBasicShapesFactory(document); NShape circle = factory.CreateShape(BasicShapes.Circle); circle.Bounds = new NRectangleF(0f, 0f, 200f, 200f); // apply interactivity NInteractivityStyle interactivityStyle = new NInteractivityStyle(); interactivityStyle.ClientMouseEventAttribute.MouseDown = "alert(\"You clicked on the circle\");"; circle.Style.InteractivityStyle = interactivityStyle; document.ActiveLayer.AddChild(circle); NThinDiagramControl1.SizeToContent(); // configure the controller NThinDiagramControl1.Controller.Tools.Add(new NClientMouseEventTool()); }

Copy Code

if (!NThinDiagramControl1.Initialized)

{

// init the document
NDrawingDocument document = NThinDiagramControl1.Document;
document.BeginInit();
document.BackgroundStyle.FrameStyle.Visible = false;
document.AutoBoundsPadding = new Nevron.Diagram.NMargins(10f, 10f, 10f, 10f);
document.Style.FillStyle = new NColorFillStyle(Color.White);

NBasicShapesFactory factory = new NBasicShapesFactory(document);
NShape circle = factory.CreateShape(BasicShapes.Circle);
circle.Bounds = new NRectangleF(0f, 0f, 200f, 200f);

// apply interactivity
NInteractivityStyle interactivityStyle = new NInteractivityStyle();
interactivityStyle.ClientMouseEventAttribute.MouseDown = "alert(\"You clicked on the circle\");";
circle.Style.InteractivityStyle = interactivityStyle;
document.ActiveLayer.AddChild(circle);

NThinDiagramControl1.SizeToContent();

// configure the controller
NThinDiagramControl1.Controller.Tools.Add(new NClientMouseEventTool());

}

Related Examples

Chart\Web Forms\ThinWeb\Client Side Events Tool
Chart\Mvc\ThinWeb\Client Side Events Tool

Diagram\Web Forms\ThinWeb\Client Side Events Tool
Diagram\Mvc\ThinWeb\Client Side Events Tool