Alignment/Stretch of row header in table panel

GoJS
1

Hi,

I would like to add a header row to a table but avoid having a column index in the model.
Please see this example with a header row here: https://codepen.io/anon/pen/jQbrzq?editors=1010 (based on: Record Mapper)
To assign the column captions to the column index within a TableRow, I need to set the column property. I have added a horizontal panel instead and added a binding from this panel to my columns array.
The columns are created in the horizontal panel, but the panel itself is not stretched to the full width of the parent.
If I set the columnSpan to 2, the horizontal panel is stretched to the correct width, but if I set it to 3 the width is wrong. Can you tell me where my mistake is?
Also, why do I need to set the columnSpan at all? Shouldn’t it be enough to set the stretch property of the horizontal panel to fill?

2

If you look at the last example of GoJS Item Arrays-- Northwoods Software, is this what you want? I am not following what you are saying. Providing a very simple example, both what the data is and what the visual results should be, would be helpful.

3

Hi @walter, thanks for your reply.

Your link led me to the itemTemplateMap appoach, which is better. I would like to modify the third example (Example of Table Header Showing Item Data) on that page: GoJS Template Maps -- Northwoods Software
The problem with that example is that the amount of the columns is hardcoded in the template. If I extend the model by adding further columns, then I also need to modify the template.
I would like to be able to extend the model by a flexible amount of columns, without the need to modify the template, e.g.:

nodeDataArray: [{
    key: "group1",
    people: [{
        name: "Person",
        phone: "Phone",
        loc: "Location",
        state: "State",
        category: "Header"
      }, {
        name: "Alice",
        phone: "2345",
        loc: "C4-E18",
        state: "C"
      }, {
        name: "Bob",
        phone: "9876",
        loc: "E1-B34",
        state: "A"
      }, {
        name: "Carol",
        phone: "1111",
        loc: "C4-E23",
        state: "B"
      }, {
        name: "Ted",
        phone: "2222",
        loc: "C4-E197",
        state: "AB"
      }, {
        name: "Robert",
        phone: "5656",
        loc: "B1-A27",
        state: "D"
      }, {
        name: "Natalie",
        phone: "5698",
        loc: "B1-B6",
        state: "A"
      }
    ]
  }
]

How can I bind the columns of the header template to the header item in the model?
My aim is to have a table like structure in my model with a flexible amount of columns and rows and to show that data as a data table.

4

If you want to have a variable number of columns and have all of the data in the node data structure, it gets more complicated to implement.

It is demonstrated in Add or Remove Columns. Note how there is a separate property holding an Array of column definitions, in addition to a property holding an Array of rows. Each row is implemented as an Array of objects providing values for each column: attr and text. Of course it’s easy for you to change the actual property names and to add properties for your own purposes.

5

In the example you’ve linked the model contains the columnDefinitions:

columnDefinitions: [
                // each column definition needs to specify the column used
                { attr: "name", text: "Name", column: 0 },
                { attr: "phone", text: "Phone #", column: 1 },
                { attr: "office", text: "Office", column: 2 }
              ],

Each column is assigned an index. In the item template the index is bound to the TableRow (new go.Binding("column"))

Is it possible to omit the column property in the model and infer the column from the actual position in the columnDefinitions array?

6

Well, it’s easy for the header row:

              itemTemplate:  // bound to a column definition object
                $(go.Panel,
                  new go.Binding("column", "itemIndex").ofObject(),

For the other itemTemplate, I’m not sure, because there are a lot of uses of the column property. You’ll have to change a good bit of the code.

1 Like