This is a migrated thread and some comments may be shown as answers.

Cannot read property 'getConnector'

3 Answers 138 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Svetlana
Top achievements
Rank 1
Svetlana asked on 29 Oct 2019, 04:22 PM

Good day. I am currently using diagram in our application. I use Server-Side Programming and bring all data from database. It builds diagram when I add a new shape to it, but when I added connection to existing shape (from 3 to 2) I've gotten the error( see attached files)

 private void BuildProcess()
    {
        ProcessDiagram.ShapesCollection.Clear();
        ProcessDiagram.ConnectionsCollection.Clear();
        string primaryEventGUID = SetPrimaryEvent();
        if (primaryEventGUID != string.Empty)
        {
            ProcessEvent primary = new ProcessEvent(primaryEventGUID);
     
            List<ProcessConnection> connecList = new List<ProcessConnection>();
            string vSQL = "SELECT ProcessConnectionGUID FROM tblBPM_ProcessConnections WHERE ProcessGUID='" + processGUID + "' ORDER BY OrderNumber";
            IDataReader getList = DB.GetRS(vSQL);
            while (getList.Read())
            {
                connecList.Add(new ProcessConnection(DB.RSFieldGUID(getList, "ProcessConnectionGUID")));
            }
            getList.Close();
            if (connecList.Count > 0)
            {
                foreach (ProcessConnection conn in connecList)
                {
                    DiagramConnection connection = new DiagramConnection();
                    connection.FromSettings.ShapeId = conn.eventGUID;
                    connection.ToSettings.ShapeId = conn.nextEventGUID;
                    connection.ContentSettings.FontWeight = "bold";
                    connection.Editable = false;
                    connection.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
                    connection.StrokeSettings.Width = 8;
                    connection.HoverSettings.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.DashDot;
                    connection.Id = conn.guid;
                    connection.ContentSettings.Text = conn.connection;
                    connection.FromSettings.Connector = "Bottom";
                    connection.ToSettings.Connector = "Top";
                    ProcessDiagram.ConnectionsCollection.Add(connection);
                }
            }

            List<ProcessEvent> eventList = new List<ProcessEvent>();
            vSQL = "SELECT ProcessEventGUID FROM tblBPM_ProcessEvents WHERE ProcessGUID='" + processGUID + "'";
            getList = DB.GetRS(vSQL);
            while (getList.Read())
            {
                eventList.Add(new ProcessEvent(DB.RSFieldGUID(getList, "ProcessEventGUID")));
            }
            getList.Close();
            if (eventList.Count > 0)
            {
                foreach (ProcessEvent item in eventList)
                {
                    EventType type;
                    if (item.guid == primary.guid)
                    {
                        type = EventType.PRIMARYEVENT;
                    }
                    else if (item.type == 3)
                    {
                        type = EventType.EVENT;
                    }
                    else
                    {
                        type = EventType.TERMINATE;
                    }
                    DiagramShape shape = GetShape(type, item.events, item.guid);
                    ProcessDiagram.ShapesCollection.Add(shape);
                }
            }
        }
    }

 private string SetPrimaryEvent()
    {
        string primaryGUID = string.Empty;
        string vSQL = "SELECT StartEventGUID FROM tblBPM_Processes WHERE ProcessGUID='" + processGUID + "'";
        IDataReader getPrimary = DB.GetRS(vSQL);
        if (getPrimary.Read())
        {
            primaryGUID = DB.RSField(getPrimary, "StartEventGUID");
        }
        getPrimary.Close();
        StartEventGUID = primaryGUID;
        ViewState["StartEvent"] = primaryGUID;
        return primaryGUID;
    }

 private DiagramShape GetShape(EventType type, string text, string value)
    {
        if (text.Length > 25)
        {
            text = text.Substring(0, 25) + "...";
        }
        if (type == EventType.TERMINATE)
        {
            text = "Ending Event";
        }
        DiagramShape shape = new DiagramShape();
        shape.Id = value;
        shape.ContentSettings.Text = text;
        shape.MinWidth = 10;
        shape.Width = 275;

        shape.Selectable = false;
        shape.ContentSettings.FontFamily = CobbleStoneCommon.AppLogic.AppConfig("UI_AppFontName");
        shape.Editable = false;
        shape.ContentSettings.Color = "#fff";
        shape.ContentSettings.FontStyle = "fill:white";

        switch (type)
        {
            case EventType.PRIMARYEVENT:
                {
                    shape.FillSettings.Color = "#4286f4";
                    break;
                }
            case EventType.EVENT:
                {
                    shape.FillSettings.Color = "#F18100";
                    break;
                }
            case EventType.TERMINATE:
                {
                    shape.FillSettings.Color = "#13d86f";
                    break;
                }
        }
        return shape;
    }

If it is possible to connect existing shape and what cause this error? Thank you.

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 01 Nov 2019, 12:07 PM

Hi Svetlana,

For some reason the mentioned attached files did not make it through - can you please attach them again?

Also, can you make sure that all set IDs start with a letter but not a number (integer)? It will be really helpful if you can attach a small runnable sample where I can replicate the thrown error and debug what is causing it.

Regards,
Vessy
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Svetlana
Top achievements
Rank 1
answered on 01 Nov 2019, 06:13 PM

Hi. I've attached these files again.

I tried to connect these shapes manually and i did it. After I eliminated this:

                    connection.FromSettings.Connector = "Bottom";
                    connection.ToSettings.Connector = "Top";  

I can build this connection using data from database, but the diagram looks like  on the third picture.

Thank you.

0
Vessy
Telerik team
answered on 06 Nov 2019, 01:29 PM

Hi Svetlana,

The "Cannot read property 'getconnector' of undefined" of the Diagram is usually thrown when the target shape set for connection cannot be found (e.g., the passed ID is wrong). Can you go though all connections which source is the "ManagerReview" shape and see if the IDs passed for Connection.ToSettings.ShapeId are proper and point to existing shapes?

For convenience, I am attaching a sample page demonstrating a Diagram bound on the server which is rendered as expected. In the GetConnections() method in the code-behind there is a commented connection, the targetShapeId of which is not valid (such shape does not exist). If you remove the comment the page will throw a JavaScript error.

If the comparing the attached page with your actual setup does not help to pinpoint the root of the problem, though, I will need to debug it at my end. Please, modify the attached page up to a point where the problem can be reproduced and send it back so I can examine it further on my side.

Regards,
Vessy
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Diagram
Asked by
Svetlana
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Svetlana
Top achievements
Rank 1
Share this question
or