Organize groups in order

GoJS
#1

How can I organize the groups in order? I have this array but they come out in a disorganized way.

                { key: "S1", isGroup: true, text: "Semestre 1"},
                { key: "S2", isGroup: true, text: "Semestre 2"},
                { key: "S3", isGroup: true, text: "Semestre 3"},
                { key: "S4", isGroup: true, text: "Semestre 4"},
                { key: "S5", isGroup: true, text: "Semestre 5"},
                { key: "S6", isGroup: true, text: "Semestre 6"},
                { key: "S7", isGroup: true, text: "Semestre 7"},
                { key: "S8", isGroup: true, text: "Semestre 8"},
                { key: "S9", isGroup: true, text: "Semestre 9"},
                { key: "S10", isGroup: true, text: "Semestre 10"},

appears:

problema11.png730×162 5.44 KB

The order is diferent :(

#2

What are you using for the Diagram.layout?

#3

I have this:

 myDiagram =
                $(go.Diagram, "myDiagramDiv",
                    {
                        initialAutoScale: go.Diagram.Uniform,                            
                        initialContentAlignment: go.Spot.Center, 
                        allowZoom: true,
                        layout: $(go.GridLayout,{wrappingColumn: 10, wrappingWidth: Infinity}) 
                    });
#4

Set GridLayout | GoJS API

#5

I use this

layout: $(go.GridLayout,{wrappingColumn: 10, wrappingWidth: Infinity, sorting: go.GridLayout.SortingAscending})

But i get this error:
GridLayout.sorting value is not an instance of a constant of class GridLayout: undefined

Why my key 1 is 2 and my key 6 is 1??

#6

That’s not a defined constant. Use this instead: GridLayout | GoJS API

But you really need to set comparer, as I just said.

#7

I have to do this in principal layout or in group template layoutt.

myDiagram.groupTemplate = //Crear grupos
                $(go.Group, "Auto",
                    // declare the Group.layout:
                    { layout: $(go.LayeredDigraphLayout,{ direction: 0, columnSpacing: 20 }),
                        avoidable: false},
                    $(go.Shape, "RoundedRectangle",  
                        { parameter1: 10, fill:"white", /*"rgba(128,128,128,0.33)"*/ stroke:"white"}),
                    $(go.Panel, "Vertical",  // position header above the subgraph
                        $(go.TextBlock,     // group title near top, next to button
                            { font: "Bold 12pt Sans-Serif", margin: 10 },
                            new go.Binding("text", "text")),
                        $(go.Placeholder,    
                            { padding: 5, background: "white" })
                    )
                );
#8

LayeredDigraphLayout is supposed to re-order nodes within a layer in order to reduce link crossings, so there is no support for ordering the nodes.

But ordering (via the comparer functional property) is supported by GridLayout, TreeLayout, and CircularLayout.

#9

Can I pass you my code and you can help me? because I have many errors :(

#10

Hi walter This is my code…

function myCompareFunction(a, b) {
                var at = a.data.text; 
                var bt = b.data.text;
                if (at < bt) return -1;
                if (at > bt) return 1;
                return 0;
            }

            myDiagram =
                $(go.Diagram, "myDiagramDiv",
                    {
                        initialAutoScale: go.Diagram.Uniform,
                        //initialPosition:
                        initialContentAlignment: go.Spot.Center,
                        allowZoom: true,
                        layout: $(go.GridLayout,{wrappingColumn: 10, wrappingWidth: Infinity,comparer: myCompareFunction}) 
                    });
#11

We really cannot debug people’s apps for them.

In this case I think the problem is that you have added an unbound Node, and the GridLayout is trying to sort it along with the rest of the nodes. But your comparer function is blindly assuming that there is a value for Node.data, which is not the case for that one “legend” Node. Don’t assume that Node.data is an instance of a JavaScript Object.

#12

Thank you walter, if I erase the unbound Node, the others nodes are order, but I need the legend node.
How can I put that node under the table that does not change the order of the others?

#13

If you debug your code, you should see why the exception is happening. Just check for null there to avoid the null exception.