Structuring a text box to represent key-value pairs

GoJS
#1

Hi,

I have a text box in my component in which I need to represent some key-value pairs. I need all the keys to be present on the left. And all the values to be present on the right. Please refer to the following image for reference:

structure

How to structure the text box to bind an array of key-value pairs to display it in this format? Could you please provide an example?

#2

Use a “Table” Panel. https://gojs.net/latest/intro/tablePanels.html
If your node data object has an Array of property-value descriptors, then you will want to bind Panel.itemArray to that Array property name. And you will want your Panel.itemTemplate to be a “TableRow” Panel consisting of two TextBlocks. Something like:

$(go.Panel, "Table",
  new go.Binding("itemArray", "properties"),
  {
    stretch: go.GraphObject.Horizontal,
    itemTemplate:
      $(go.Panel, "TableRow",
        $(go.TextBlock, { column: 0, alignment: go.Spot.Left },
          new go.Binding("text", "name")),
        $(go.TextBlock, { column: 1, alignment: go.Spot.Right },
          new go.Binding("text", "value"))
      )
  })

By the way, if you find that our forum replies provided answers, it would be helpful if you marked them as “solving the problem”. It’s the checkbox button shown after clicking the horizontal three dots button. I noticed that you never responded to all of the other answers I’ve given you recently.