About group collapse style

Hi!
I think each change with&height and picture on group not expanded, But i can’t find about simple or API document.

Default collapse group style like this

Hope collapse group style like this

Who can help me.
Thanks!

How did you define your Group template?

nodeTemplate =
		_g(go.Node , 'Spot',

			{ width: 70, locationSpot: go.Spot.Center },

			_g(go.Panel, 'Vertical',

				_g(go.Panel, 'Auto',

					_g(go.Shape,
						{ fill: null , stroke: null},
						new go.Binding('stroke', 'light', function(msg){
							if(msg) return 'red';
							return null;
						})),

					_g(go.Picture,
						{ margin: 10, width: 50, height: 50},
						new go.Binding('source'))

					//_g(go.Panel, 'Spot',
					//	{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight},
					//	_g(go.Shape, 'Ellipse', { width: 20, height: 20, margin: 4, fill: 'red'}),
					//	_g(go.TextBlock, '1', { margin: 2, stroke: 'white' }, new go.Binding('text', 'num2'))
					//),
					//
					//_g(go.Panel, 'Spot',
					//	{ alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft },
					//	_g(go.Shape, 'Ellipse', { width: 20, height: 20, margin: 4, fill: 'blue'}),
					//	_g(go.TextBlock, '2', { margin: 2, stroke: 'white' }, new go.Binding('text', 'num2'))
					//)

				),

				_g(go.TextBlock,
					'Default Text',
					{ margin: 0, stroke: 'black', font: 'bold 12px sans-serif' },
					new go.Binding('text', 'name'), new go.Binding('stroke', 'light', function(msg){
						if(msg) return 'red';
						return 'gray';
					}))

			),

			_g('TreeExpanderButton',
				{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
				{ visible: true })
		);

That is clearly is not a Group but a regular Node.

Perhaps I am not understanding what it is that you want. Your two images are quite different from each other and I do not know what should be different and I do not understand what behavior you want before and after some event.

Are you sure that there are no samples at http://gojs.net/samples or any examples at http://gojs.net/intro that do what you want?

I just want group style different on collapse or expand. But node template only setting one fix style. When node collapse use template1, When node expand use template2.

OK, let’s assume you have two group templates. You can implement Group.subGraphExpanded event handlers to change the group’s Part.category.

I’ll assume that groups start off expanded by default, so I’ll use the empty string category name for expanded groups and “Collapsed” for collapsed groups.

  myDiagram.groupTemplate =
    $(go.Group, . . .,
      {
        subGraphExpanded: function(grp) { grp.category = "Collapsed"; }
      },
      // remember the expansion state in the model data
      new go.Binding("isSubGraphExpanded").makeTwoWay(),
      . . .
    );

  myDiagram.groupTemplateMap.add("Collapsed",
    $(go.Group, . . .,
      {
        isSubGraphExpanded: false,  // for groups using this template
        subGraphExpanded: function(grp) { grp.category = ""; }
      },
      // remember the expansion state in the model data
      new go.Binding("isSubGraphExpanded").makeTwoWay(),
      . . .
      // presumably this template does NOT have a Placeholder
    ));