Hi,

I defined a new class that derives from ShapeNode class.
I try to add my custom ShapeNode class to a NodeListView (canavas mode), but when I run my application there is nothing in the NodeListView, it's not displaying anything.
But when I use Mindfusions ShapeNode class, nodes are displayed in the NodeListview.

My code ex.:

var workflowStart = new CustomShapeNode(WorkflowShapeType.WorkflowStart);

var start = new MindFusion.Diagramming.ShapeNode();

nodeListView.AddNode(workflowStart, "Start"); // This node is not displayed when running app

nodeListView.AddNode(start, "Workflow");
 

So what is the problem, why it is not displaying anything, maybe I need something to declare?

Slavcho wrote on Oct 20^th, 2016 at 1:27pm:



Well, I had implemented node class in JS and created and registered converters, I did this by example that you mentioned.

Maybe I need something to declare in order it to work?

I tried adding NodeListView to MindFusion IconNodes sample, I am getting same problem.

Added this code to IconNode Example:

<ndiag:NodeListView
  ID="nodeListView"
  runat="server"
  ClientSideMode="Canvas"
JsLibraryLocation="Scripts/MindFusion/MindFusion.Diagramming.js"
style="position: absolute; top: 5px; left: 0px; right: 0px; bottom: 0px; width: 200px; height: auto; overflow: auto;" />
 

var custom= new CustomNode();
 nodeListView.AddNode(custom, "Custom"); // NodeListView not showing this node
 

It works only if I use as prototype:

var workflowStart = new CustomNode();
workflowStart.Shape = Shapes.Arrow3;

var start = new MindFusion.Diagramming.ShapeNode(workflowStart); 

Slavcho wrote on Oct 21^st, 2016 at 10:12am:



I didn't change Mindfusions example code, I just added custom code, that add node to a NodeListView.

    protected void Page_Init(object sender, EventArgs e)
    {
        // register custom item types, their serialization identifiers and JavaScript class names

		// this class demonstrates custom drawing in Canvas mode, see Scripts/CustomNode.js
        diagramView.RegisterItemType(typeof(CustomNode), "CustomNode", "CustomNode", 100);

		// these classes demonstrate custom drawing in ImageMap mode, see IconNode.cs and IconLink.cs
        diagramView.RegisterItemType(typeof(IconNode), "IconNode", "IconNode", 100);
        diagramView.RegisterItemType(typeof(IconLink), "IconLink", "IconLink", 100);

		// register converters for serializing .NET items into JSON objects
        diagramView.RegisterConverters(new JavaScriptConverter[]
		{
            new CustomNodeConverter(diagramView),
            new IconNodeConverter(diagramView),
            new IconLinkConverter(diagramView)
		});
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        diagramView.ClientSideMode = radioButtonList.SelectedIndex == 0 ?
			ClientSideMode.Canvas : ClientSideMode.ImageMap;

        // let users draw CustomNode objects in Canvas mode
        if (diagramView.ClientSideMode == ClientSideMode.Canvas)
        {
            diagramView.CustomNodeType = typeof(CustomNode);
            diagramView.NodeClickedScript = "onNodeClicked";
        }

        // let users draw IconNode/IconLink objects in ImageMap mode
        else if (diagramView.ClientSideMode == ClientSideMode.ImageMap)
        {
            diagramView.CustomNodeType = typeof(IconNode);
            diagramView.CustomLinkType = typeof(IconLink);
        }

        // ***** CUSTOM NODE *****
        var custom = new CustomNode();
        nodeListView.AddNode(custom, "Custom");
    }
 

Slavcho wrote on Oct 21^st, 2016 at 1:01pm:


Ok that worked.
Thank you

Last question, can I declare node style just in the C# class or, do I need to declare in the javascript to?

Slavcho wrote on Oct 21^st, 2016 at 1:01pm:


Well, it works fine now. Thank you!

But I ran into a problem, can I adjust seperate ShapeNodes sizes in the NodeListView?

(ex. ShapeNode1(width = 80, height = 40),
ShapeNode2 width = 40, height = 40), like one node is bigger, than the other is smaller);

Slavcho wrote on Oct 25^th, 2016 at 7:59am:


I supposed to declare it like this?:

Because like this it is not working.

        <div>
            <table>
                <tr>
                    <td>
                        <ndiag:NodeListView
                            ID="nodeListView"
                            runat="server"
                            ClientSideMode="Canvas"
                            JsLibraryLocation="../../Scripts/MindFusion/MindFusion.Diagramming.js"
                            style="position: absolute; top: 15px; left: 5px; right: 0px; bottom: 0px; width: 200px; height: auto; overflow: auto; margin: 5px;" />
                    </td>
                    <td>
                        <ndiag:DiagramView
                            ID="diagramView"
                            runat="server"
                            ClientSideMode="Canvas"
                            JsLibraryLocation="../../Scripts/MindFusion/MindFusion.Diagramming.js"
                            ShapeLibraryLocation="~/Designer/Dependencies/DlxCustomShapeLibrary.xml"
                            style="position: absolute; left: 201px; top: 0px; right: 0px; bottom: 0px;">
                            <Diagram GridStyle="Lines" AlignToGrid="True" ShowGrid="True" GridColor="#1B000000" GridSizeY="10" GridSizeX="10"></Diagram>
                        </ndiag:DiagramView>
                    </td>

                </tr>
            </table>
        </div>
 

JS code:

 <script type="text/javascript">
        Sys.Application.add_init(function () {

            var nodeList = $get("nodeListView");
            if (nodeList != null) {
                nodeList.setIconSize(null);
                alert("NodeList set");
            }

            // Refresh shape library after load
            MindFusion.Diagramming.Shape.loadFromLibPending = true;

        });
    </script>
 

Is it possible to arrange Nodes in the NodeListView like this?