GoJS Palette Sticky Header

GoJS
1

I have the following group template that houses various nodes in my palette:

export const paletteGroupTemplate = () => {
  return new Group('Auto', {
    selectable: false,
    name: 'parentGroup',
    layout: new GridLayout({
      wrappingColumn: 1,
      comparer: nameSort,
    }),
  })
    .add(
      new Shape('RoundedRectangle', {
        fill: '#F5F5F5',
        stroke: null,
      }),
    )
    .add(
      new Panel('Table')
        .add(
          new TextBlock({
            margin: new Margin(0, 0, 0, 10),
            row: 0,
            column: 0,
            font: 'normal 600 14px Open Sans',
            alignment: Spot.Center,
            stroke: '#303030',
            textAlign: 'center',
          }).bind('text'),
        )
        .add(
          new Placeholder({ row: 1, columnSpan: 2, padding: 10 }),
        ),
    );
};

Here’s a video showing what each group looks like throughout the scroll interaction:
PaletteScroll

The palette scrolls through the group nodes as expected. However, would it be possible to implement the interaction of as a user scrolls, the header should be sticky at the top while the nodes scroll. The next integration Name should push the sticky one up and replace it as the list continues to scroll.

I know this is a common interaction with HTML/CSS but I was wondering if something like this were possible with my current GoJS group template structure?

Thanks in advance for any help!

2

That would be very difficult to do with a GoJS group. It might be possible using a ViewportBoundsChanged listener, but the bookkeeping to get it working wouldn’t be trivial. I’d recommend building it as HTML/CSS at that point with one “group” per palette.

3

Gotcha, thanks again for the insight, Simon!