Access other component with OnMouseEvent server side


https://www.nevron.com/Forum/Topic8727.aspx
Print Topic | Close Window

By Cristianf - 10 Years Ago
I have 2 NThinWeb components (NThinDiagramControl1 and NThinDiagramControl2) in my webform
and I'm using this example to fire OnMouseEvent (server side) on the first NThin component, link:
http://examplesaspnetdiagram.nevron.com/Frames/NExampleFrame.aspx?ExampleUrl=Examples/ThinWeb/NServerSideEventsToolUC.ascx

What I'm trying to do is to access NThinDiagramControl2 component when user clicks on the NThinDiagramControl1.
I tried to pass the entire webform (with a public accessor) to the serializable class but it doesn't work Sad
When I debug it seems that the OnMouseEvent doesn't even fire up, maybe because I set a public variable in the class? don't know.......

ALL MY CODE below:

WebForm1


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using Nevron.Diagram;
    using Nevron.ThinWeb;
    using Nevron.Diagram.Shapes;
    using Nevron.Diagram.ThinWeb;
    using Nevron.GraphicsCore;
    using Nevron.Dom;
    using Nevron.Presentation;
     
    using System.Drawing;
     
    namespace WebApplication3
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
                NServerMouseEventTool serverMouseEventTool;
     
                if (!NThinDiagramControl1.Initialized)
                {
                    // begin view init
                    NDrawingDocument document = NThinDiagramControl1.Document;
                    NDrawingDocument document2 = NThinDiagramControl2.Document;
     
                    // init NThinDiagramControl1.document.
                    document.BeginInit();
                    InitDocument(document);
                    InitDocument(document2);
                    document.EndInit();
     
                    NThinDiagramControl1.View.Layout = CanvasLayout.Fit;
                    NThinDiagramControl1.Toolbar.Visible = true;
                    NThinDiagramControl1.Toolbar.Items.Add(new NToolbarButton(new NZoomInAction()));
                    NThinDiagramControl1.Toolbar.Items.Add(new NToolbarButton(new NZoomOutAction()));
     
                    // configure the controller
                    serverMouseEventTool = new NServerMouseEventTool();
                    NThinDiagramControl1.Controller.Tools.Add(serverMouseEventTool);
                }
                else
                {
                    serverMouseEventTool = NThinDiagramControl1.Controller.Tools[0] as NServerMouseEventTool;
                }
     
                serverMouseEventTool.MouseDown = new NMouseEventCallback(this);
     
     
            }
     
            #region Implementation
     
     
     
     
            protected void InitDocument(NDrawingDocument document)
            {
                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 outerCircle = factory.CreateShape(BasicShapes.Circle);
                outerCircle.Bounds = new NRectangleF(0f, 0f, 200f, 200f);
                document.ActiveLayer.AddChild(outerCircle);
     
                NShape rect = factory.CreateShape(BasicShapes.Rectangle);
                rect.Bounds = new NRectangleF(42f, 42f, 50f, 50f);
                rect.Style.FillStyle = new NColorFillStyle(Color.Orange);
                document.ActiveLayer.AddChild(rect);
     
                NShape triangle = factory.CreateShape(BasicShapes.Triangle);
                triangle.Bounds = new NRectangleF(121f, 57f, 60f, 55f);
                triangle.Style.FillStyle = new NColorFillStyle(Color.LightGray);
                document.ActiveLayer.AddChild(triangle);
     
                NShape pentagon = factory.CreateShape(BasicShapes.Pentagon);
                pentagon.Bounds = new NRectangleF(60f, 120f, 54f, 50f);
                pentagon.Style.FillStyle = new NColorFillStyle(Color.WhiteSmoke);
                document.ActiveLayer.AddChild(pentagon);
     
                document.SizeToContent();
            }
            #endregion
     
     
            public NThinDiagramControl ProvaAccess
            {
                get { return this.NThinDiagramControl2; }
                set { this.NThinDiagramControl2 = value; }
            }
           
        }
    }



NMouseEventCallback class



    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
     
     
    using Nevron.Diagram;
    using Nevron.ThinWeb;
    using Nevron.Diagram.Shapes;
    using Nevron.Diagram.ThinWeb;
    using Nevron.GraphicsCore;
    using Nevron.Dom;
    using Nevron.Presentation;
     
     
    namespace WebApplication3
    {
     
        [Serializable]
        class NMouseEventCallback : INMouseEventCallback
        {
     
            public WebForm1 pagina;
     
            #region INMouseEventCallback Members
     
            public NMouseEventCallback (WebForm1 pagina) {
                this.pagina = pagina;
            }
     
     
            void INMouseEventCallback.OnMouseEvent(NAspNetThinWebControl control, NBrowserMouseEventArgs e)
            {
                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);
     
                pagina.ProvaAccess.document.Reset(); // trying to access NThinDiagramControl2
                pagina.ProvaAccess.UpdateView();
            }
            #endregion
        }
    }



Can someone help me please?

By Nevron Support - 10 Years Ago
Hi Cristianf,
The problem with the code is that the mouse event callback is not serializable (as it contains reference to a non serializable class:

public WebForm1 pagina;

That's the reason why the event does not fire. In order to access the second control you need to use one of the following approaches:
1. Use postback - that way all form members are initialized.
2. Use server mouse event for the first control, that in turn generates a custom command, which in generates a custom request to the second diagram. Custom commands and requests are illustrated in the chart thin web examples, however the approach is the same for the diagram.

Hope this helps - let us know if you have any questions or meet any problems.

By Cristianf - 10 Years Ago
Thanks for the help, I successfully made it work with the 2 method you advised me.
I didn't use the first one because in my webpart I fire the onmouse event only when users click on the decorators.
With postback approach it reloads the page every time a user clicks on the entire component and I don't know how to fire postback when decorator is clicked...so for this reason I prefered the server-side approach.
Thank you once again.