I’m actually trying to do both… highlight a node that contains the value I’m searching for, which is working great, and then highlight the item within the node’s table itemarray that matches what I was searching for. So I have this:
function tableRowStroke(h) {
return h ? “yellow” : “white”;
}
),
$(go.Panel, “Table”,
new go.Binding(“itemArray”, “fields”),
{
//visible: false,
defaultAlignment: go.Spot.Left,
//name: "LIST",
stretch: go.GraphObject.Fill,
itemTemplate:
$(go.Panel, "TableRow",
$(go.TextBlock,
{
column: 0,
stroke: "white",
isMultiline: false,
editable: false,
margin: new go.Margin(3,5,0,3),
font: "12px sans-serif"
},
new go.Binding("text", "shortname"),
**new go.Binding("stroke", "highlighted", tableRowStroke),**
),
$("Button",
{
column: 2,
margin: new go.Margin(2, 0, 2, 5),
desiredSize: new go.Size(8, 8),
// set properties on the border Shape of the "Button"
"ButtonBorder.figure": "TriangleRight",
"ButtonBorder.fill": "transparent",
"ButtonBorder.stroke": "grey",
"ButtonBorder.strokeWidth": 3,
// set properties on the "Button" itself used by its event handlers
"_buttonFillOver": "white",
"_buttonStrokeOver": "cyan",
"_buttonFillPressed": "lightgray",
click: function (e, button) { alert(button.findObject("ButtonBorder").stroke); }
},
$(go.TextBlock, "+")
)
)
}
)
With an array object that looks like this: (Field)
{ key: field.id, caption: field.caption, scope: field.fieldType, dataType: field.dataType, shortname: shortname, highlighted: false };
This is the main data object that I’m binding to the node itself
{ key: id, parent: parentID, scope: getScope(pObject), minOccurs: pObject.minOccurs, maxOccurs: pObject.maxOccurs, path: pObject.path, fields: f, inherited: pObject.inherited };
“fields” is an array of Field (above)
You can see in the screenshot in the original post, that I am setting highlighted to true, for some of the records, then setting the value of the ‘fields’ (in node data) to the new array. Just seems like the table might not be picking up on the change for some reason.
The complete node template is below… but it works great except for this 1 thing which I’m suspicious is simply not ‘refreshing’ something.
var groupWithFieldsTemplate2 =
$(go.Node, “Horizontal”,
{
shadowBlur: 0,
isShadowed: false,
deletable: false,
isTreeExpanded: true
},
new go.Binding(“isShadowed”, “maxOccurs”, shadowConverter),
new go.Binding(“shadowColor”, “scope”, scopeBrushConverter),
$(go.Panel, “Auto”,
{},
$(go.Shape, "RoundedRectangle",
{
//fill: "lightgray",
fill: "transparent", strokeWidth: 3,
stretch: go.GraphObject.Fill,
//width: 600
name: "SHAPE"
},
new go.Binding("fill", "", fillConverter).ofObject(),
new go.Binding("stroke", "scope", scopeBrushConverter),
new go.Binding("strokeWidth", "", inheritedStrokeConverter),
new go.Binding("strokeDashArray", "", inheritedDashConverter)
),
$(go.Panel, "Vertical",
{ stretch: go.GraphObject.Horizontal, defaultAlignment: go.Spot.Left },
$(go.Panel, "Horizontal",
{ stretch: go.GraphObject.Fill, portId: "Fld", toSpot: go.Spot.Left },
$("PanelExpanderButton", "LIST", // the name of the element whose visibility this button toggles
{
"ButtonIcon.stroke": "white",
width: 20
},
new go.Binding("visible", "fields", function (flds) { return flds.length > 0; })
),
$(go.TextBlock,
{
stroke: "white",
margin: new go.Margin(5, 25, 5, 5),
verticalAlignment: go.Spot.Top,
stretch: go.GraphObject.Horizontal,
overflow: go.TextBlock.OverflowEllipsis,
font: " bold 12px sans-serif"
},
new go.Binding("text", "key")
)
),
// the collapse/expand area (will be mapped template)
$(go.Panel, "Auto",
{
stretch: go.GraphObject.Fill, visible: false,
name: "LIST"
},
$(go.Shape, "Rectangle",
{
fill: "black",
stretch: go.GraphObject.Fill,
name: "SHAPE2"
}
),
$(go.Panel, "Table",
new go.Binding("itemArray", "fields"),
{
defaultAlignment: go.Spot.Left,
stretch: go.GraphObject.Fill,
itemTemplate:
$(go.Panel, "TableRow",
$(go.TextBlock,
{
column: 0,
stroke: "white",
isMultiline: false,
editable: false,
margin: new go.Margin(3,5,0,3),
font: "12px sans-serif"
},
new go.Binding("text", "shortname"),
new go.Binding("stroke", "highlighted", tableRowStroke),
),
$("Button",
{
column: 2,
margin: new go.Margin(2, 0, 2, 5),
desiredSize: new go.Size(8, 8),
// set properties on the border Shape of the "Button"
"ButtonBorder.figure": "TriangleRight",
"ButtonBorder.fill": "transparent",
"ButtonBorder.stroke": "grey",
"ButtonBorder.strokeWidth": 3,
// set properties on the "Button" itself used by its event handlers
"_buttonFillOver": "white",
"_buttonStrokeOver": "cyan",
"_buttonFillPressed": "lightgray",
click: function (e, button) { alert(button.findObject("ButtonBorder").stroke); }
},
$(go.TextBlock, "+")
)
)
}
)
)
)
),
$(go.Panel, "Vertical", { height: 15, width: 15, margin: 1 },
$("TreeExpanderButton", { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left })
)
);
