Framework / Thin Web / Tools / Server Side Events Tool
In This Topic
    Server Side Events Tool
    In This Topic

    The server side events allows you to capture client side mouse events on the server and optionally update the control contents through Ajax. For this purpose you first need to create an instance of the NServerMouseEvent tool and register a callback for the mouse event you want to track. The following code snippets show how to achieve this for the mouse down event and highlight a chart or diagram element dynamically based on the mouse position on the client.

    Nevron Chart ThinWeb

    C#
    Copy Code

    protected void Page_Load(object sender, EventArgs e)

    {

    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);

    NServerMouseEventTool serverMouseEventTool = new NServerMouseEventTool();

    serverMouseEventTool.MouseDown = new ChartMouseDownCallback();

    NThinChartControl1.Controller.Tools.Add(serverMouseEventTool);

    }

    }

    /// <summary>
    /// Mouse down callback called when the client presses a mouse button
    /// </summary>
    [Serializable]
    class ChartMouseDownCallback : INMouseEventCallback
    {
    #region INMouseEventCallback Members

    public void OnMouseEvent(NAspNetThinWebControl control, NBrowserMouseEventArgs e)
    {
    if (e.MouseButton == MouseButton.Left)
    {
    NThinChartControl chartControl = (NThinChartControl)control;
    // hit test
    NHitTestResult hitTestResult = chartControl.HitTest(e.X, e.Y);
    NBarSeries bar = (NBarSeries)chartControl.Charts[0].Series[0];

    if (hitTestResult.ChartElement == ChartElement.DataPoint)
    {
    bar.FillStyle =
    new NColorFillStyle(Color.Red);
    }
    else
    {
    bar.FillStyle =
    new NColorFillStyle(Color.Blue);
    }

    chartControl.UpdateView();
    }

    }

    #endregion

    }

    The above snippet will change the bar color to red if the user clicks on the bar and revert to blue if the click is somewhere else in the control.

    Nevron Diagram ThinWeb

    C#
    Copy Code

    protected void Page_Load(object sender, EventArgs e)

    {

    if (!NThinDiagramControl1.Initialized)
    {

    // add the client mouse event tool
    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);
    document.ActiveLayer.AddChild(circle);
    NThinDiagramControl1.SizeToContent();

    NServerMouseEventTool serverMouseEventTool = new NServerMouseEventTool();
    serverMouseEventTool.MouseDown =
    new DiagramMouseDownCallback();
    // configure the controller

    NThinDiagramControl1.Controller.Tools.Add(serverMouseEventTool);

    }

    }

    /// <summary>
    /// Mouse down callback called when the client presses a mouse button
    /// </summary>
    [Serializable]
    class DiagramMouseDownCallback : INMouseEventCallback
    {

    #region INMouseEventCallback Members

    public void OnMouseEvent(NAspNetThinWebControl control, NBrowserMouseEventArgs e)

    {

    if (e.MouseButton == MouseButton.Left)
    {

    NThinDiagramControl diagramControl = (NThinDiagramControl)control;
    NNodeList allShapes = diagramControl.Document.ActiveLayer.Children(Nevron.Diagram.Filters.NFilters.Shape2D);
    NNodeList affectedNodes = diagramControl.HitTest(new NPointF(e.X, e.Y));
    NNodeList affectedShapes = affectedNodes.Filter(Nevron.Diagram.Filters.NFilters.Shape2D);
     

    int length;
    length = allShapes.Count;
    for (int i = 0; i < length; i++)
    {
    NShape shape = allShapes[i] as NShape;
    if (shape != null)
    {
    shape.Style.FillStyle =
    new NColorFillStyle(Color.Blue);
    }
    }

    length = affectedShapes.Count;

    for (int i = 0; i < length; i++)
    {

    NShape shape = affectedShapes[i] as NShape;
    if (shape != null)
    {
    shape.Style.FillStyle =
    new NColorFillStyle(Color.Red);
    }

    }

    diagramControl.Update();

    }

    }

    #endregion

    }

    All callbacks that you register must be marked as Serializable, because they are persisted with the controller in the control session state.
     Related Examples

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

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