Add dynamic data to TextBlock using add button

GoJS
1

Hi,
Implemented a panel with PanelExpanderButton,TextBlock and Add Button. Requirement is to hide PanelExpanderButton if there is no text in text block. User can add an empty string using the Add button and then he should be able to edit the data. The problem is I was not able to figure out a way to make PanelExpanderButton as visible when user clicks on Add button. I tried to use two way binding on visible property of PanelExpanderButton but this didn’t work for me.

As shown below when I have data while creating diagram PanelExpanderButton is visible

In below scenario I don’t have data during diagram creation. So user will use Add button to add the data

Any help on this is appreciated

2

Below given is the code

$(go.Panel, “Table”,
//{ defaultRowSeparatorStroke: “black” },
$(go.RowColumnDefinition, { row: 0, separatorStroke: “black” }),
$(go.RowColumnDefinition, { row: 1, separatorStroke: “black” }),
$(go.RowColumnDefinition, { row: 3, separatorStroke: “black” }),
// header
$(go.TextBlock,
{
row: 0, columnSpan: 2, margin:3, textAlign: “center”,stretch: go.GraphObject.Fill
},
new go.Binding(“text”, “name”).makeTwoWay(),
new go.Binding(“background”, “color”),
new go.Binding(“font”, “font”),
new go.Binding(“editable”, “editable”,function(val:any) { return val; })
),
// properties
$(go.TextBlock, “Properties”,
{ row: 1, font: “italic 10pt sans-serif” },
new go.Binding(“visible”, “visible”, function(v:any) { return !v; }).ofObject(“PROPERTIES”)
),
$(go.Panel, “Vertical”,
{ name: “PROPERTIES”,visible:false,columnSpan: 2,margin: 8},
new go.Binding(“itemArray”, “properties”),
{
row: 1, margin: 8, stretch: go.GraphObject.Fill,
defaultAlignment: go.Spot.Left, background: “lightyellow”,
itemTemplate: propertyTemplate
}
),
$(“PanelExpanderButton”, “PROPERTIES”,
{ row: 1, column: 1, alignment: go.Spot.TopRight, visible: false },
new go.Binding(“visible”, “properties”, function(arr:any) { console.log(“Panel Exp”);return arr.length > 0; })
),
$(go.Panel, “Horizontal”,
{ row: 2,columnSpan: 2},
$(“Button”,
{ row: 2,columnSpan: 2},
{
click: function(e:any, obj:any) {
let type = obj.part.data.key;
let propData:any[] = [];
console.log(obj.part.data)
console.log("Add new prop = "+type)
propData = obj.part.data.properties;
console.log(propData)
let emptyData = {name:null,type:null,text:null};
if(!_this.typeProperiesMap.has(type)){
var propData1 = propData.slice();
_this.typeProperiesMap.set(type,propData1);
}
_this.classDiagram.startTransaction(“add prop item”);
_this.classDiagram.model.addArrayItem(obj.part.data.properties, emptyData);
_this.classDiagram.model.setDataProperty(obj.part.data.properties,“name”,“Test”);
_this.classDiagram.commitTransaction(“add prop item”);
}
},
$(go.TextBlock, “Add”)
),

3

If you add a call to updateTargetBindings after your addArrayItem call, does it work?

4

It worked thanks