itemTemplate not being used

GoJS
1

I have been working my way through this for a couple of days, and still can’t seem to figure out what I could possible be doing wrong. Although data is actually being displayed, its NOT using the itemTemplate I’ve created, its just displaying the ‘key’ in the array that its bound to. Also, when I try to switch it from a Horizontal panel to a Table panel, using a TableRow panel (instead of a Horizontal panel), it gets completely crazy, and just puts everything on top of itself…

This is the basic code using a vertical and a horizontal panel.

        var groupWithFieldsTemplate =
            $(go.Node, "Auto",
                { deletable: false, isTreeExpanded: true },
                $(go.Shape, "RoundedRectangle",
                    {
                        //fill: "lightgray",
                        stroke: null, strokeWidth: 0,
                        stretch: go.GraphObject.Fill,
                        //width: 600

                    },
                    new go.Binding("fill", "scope", scopeBrushConverter)
                ),
                $(go.Panel, "Vertical",
                    { stretch: go.GraphObject.Horizontal, defaultAlignment: go.Spot.Left },
                    $(go.Panel, "Horizontal",
                        { stretch: go.GraphObject.Fill, portId: "Fld", toSpot: go.Spot.Left },
                        $("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
                            {
                                width: 20
                            },
                            new go.Binding("visible", "fields", function (flds) { return flds.length > 0;})
                        ),
                        $(go.TextBlock,
                            {
                                margin: new go.Margin(5, 25, 5, 5),
                                verticalAlignment: go.Spot.Top,
                                stretch: go.GraphObject.Horizontal,
                                overflow: go.TextBlock.OverflowEllipsis,
                                font: " bold 12px sans-serif"
                            },
                            new go.Binding("text", "key")
                        )
                    ),

                    // the collapse/expand area (will be mapped template)

                    $(go.Panel, "Vertical",
                        new go.Binding("itemArray", "fields"),
                        
                        {
                            //visible: false,
                            defaultAlignment: go.Spot.Left,
                            name: "LIST",
                            stretch: go.GraphObject.Horizontal,

                            itemTemplate:
                                $(go.Panel, "Horizontal",
                                    
                                    $(go.TextBlock,
                                        { isMultiline: false, editable: false, margin: 3 },
                                        new go.Binding("text", "dataType")
                                    ),
                                    $(go.TextBlock,
                                        { isMultiline: false, editable: false, margin: 3 },
                                        new go.Binding("text", "key")
                                    )
                                )
                        }
                    )  
                ),  
                $("TreeExpanderButton", { margin: new go.Margin(0,0,0,25), alignment: go.Spot.Right, alignmentFocus: go.Spot.Top })
            );

THis is what a node looks like… it should have 2 textboxes to include dataType and key, but only key is showing

image

2

I just tried your node template verbatim except for replacing the use of the scopeBrushConverter function of which I have no knowledge.

This node data:

{ key: 1, text: "Alpha", fields: [ { dataType: "int", key: "key1" }, { dataType: "u16", key: "key2" }, ] },

produced:
image

This looks correct to me. Maybe you should check your data or property name or something?

3

Here’s the json for the object the node is bound to

{
“key”: “AdditionalOtherInterestInput”,
“parent”: “AdditionalOtherInterest”,
“scope”: “private”,
“minOccurs”: “1”,
“maxOccurs”: “1”,
“path”: “”,
“fields”: [
{
“key”: “AdditionalOtherInterestInput.Address1”,
“caption”: “Address 1”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 0
},
{
“key”: “AdditionalOtherInterestInput.Address2”,
“caption”: “Address 2”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 1
},
{
“key”: “AdditionalOtherInterestInput.CertificateOfInsurance”,
“caption”: “Certificate Of Insurance”,
“scope”: “public”,
“dataType”: “boolean”,
“category”: “field”,
“iter”: 9
},
{
“key”: “AdditionalOtherInterestInput.City”,
“caption”: “City”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 2
},
{
“key”: “AdditionalOtherInterestInput.CorrespondenceName”,
“caption”: “Additional Other Interest Input Correspondence Name”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 11
},
{
“key”: “AdditionalOtherInterestInput.CountryCode”,
“caption”: “Country Code”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 13
},
{
“key”: “AdditionalOtherInterestInput.DatabaseId”,
“caption”: “Additional Other Interest Input Database Id”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 10
},
{
“key”: “AdditionalOtherInterestInput.Description”,
“caption”: “Other Description”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 8
},
{
“key”: “AdditionalOtherInterestInput.FirstName”,
“caption”: “First Name”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 12
},
{
“key”: “AdditionalOtherInterestInput.LocationCountryCode”,
“caption”: “Location Country Code”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 14
},
{
“key”: “AdditionalOtherInterestInput.Name”,
“caption”: “Last Name”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 6
},
{
“key”: “AdditionalOtherInterestInput.PrimaryPhone”,
“caption”: “Phone”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 3
},
{
“key”: “AdditionalOtherInterestInput.State”,
“caption”: “”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 4
},
{
“key”: “AdditionalOtherInterestInput.Type”,
“caption”: “Import a:”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 7
},
{
“key”: “AdditionalOtherInterestInput.ZipCode”,
“caption”: “”,
“scope”: “public”,
“dataType”: “string”,
“category”: “field”,
“iter”: 5
}
]
}

4

The problem is that you set the category property on each field descriptor object, but there is no template named “field”, so it uses the default template.

Although I think it’s an inconsistency between your template and your data, maybe we should have the assigned itemTemplate be used when it cannot find the category name in the itemTemplateMap.

5

Wow, now see, I wouldn’t have caught that. I’m not using a map, so didn’t even occur to me that the ‘category’ (kind of a reserved label) would get picked up in there. Removed it, and it works great.