In below Image I have three columns like index, name and symbol, I want to show all three headers in my scrolling table.
Image:
Note: on official website I am not getting any such kind of sample where scrolling table columns present with header
link: Scrolling Table Panels with ScrollBars | GoJS Diagramming Library
How have you defined your itemTemplate? In particular, what did you put in each column?
I am binding Item Array with scrolling Table:
Scrolling Table:
go.GraphObject.build(‘ScrollingTable’, {
row:2,
column:1,
columnSpan:2,
name: ‘SCROLLER’,
‘TABLE.itemTemplate’: DetailsTemplate,
‘TABLE.defaultRowSeparatorStroke’: ‘gray’,
‘TABLE.defaultRowSeparatorStrokeWidth’: 0.5,
‘TABLE.defaultSeparatorPadding’: new go.Margin(0, 3, 0, 3),
‘TABLE.rowSizing’: go.Sizing.None,
},)
.bind(‘TABLE.itemArray’, ‘ruledetails’)
Template:
var DetailsTemplate =
new go.Panel(‘TableRow’, {
//defaultStretch: go.Stretch.Horizontal,
defaultStretch: go.GraphObject.Vertical,
background: "#fef5d9",
click: onFieldClick,
mouseEnter: function (e: any, item: any) {
if (!isFieldSelected(item)) {
item.background = "#dbdbbe";
}
},
mouseLeave: function (e: any, item: any) {
if (!isFieldSelected(item) && item !== selectedRow) {
item.background = "#fef5d9";
}
}
},
)
.bind('portId', 'rulename') // each row is a port
.add( // add whatever you want as columns in the scrolled "Table" Panel
$(go.TextBlock, new go.Binding("text", "id"),
{
row: 1,
column: 0,
height:16,
name:"TextName",
textAlign: "center",
margin: new go.Margin(4, 7, 4, 4),
font: "14px sans-serif",
stretch: go.GraphObject.Fill,
overflow: go.TextBlock.OverflowEllipsis, //click: GotoIntellisysPage //Pseudo Code Page Call
},
//new go.Binding("width", "", setPanelWidth).ofObject(),
),
$(go.Panel, "Horizontal",
{row: 1, column: 1, height: 22,},
new go.Binding("width", "", setPanelWidth).ofObject(),
$(go.TextBlock, new go.Binding("text", "rulename"),
{
row: 1,
// //columnSpan: 2,
column: 1,
height: 16,
name: "RuleName",
// margin: 4,
margin: new go.Margin(5, 4, 3, 4),
font: "14px sans-serif",
stretch: go.GraphObject.Fill,
overflow: go.TextBlock.OverflowEllipsis, //click: GotoIntellisysPage //Pseudo Code Page Call
},
//new go.Binding("width", "", setPanelWidth).ofObject(),
),
$(go.TextBlock, new go.Binding("text", "refcount"),
{
row: 1,
// //columnSpan: 2,
column: 1,
height: 9,
// name:"TextName",
// margin: 4,
margin: new go.Margin(0, 2, 6, 6),
font: "12px sans-serif",
stretch: go.GraphObject.Fill,
overflow: go.TextBlock.OverflowEllipsis, //click: GotoIntellisysPage //Pseudo Code Page Call
},
//new go.Binding("width", "", setPanelWidth).ofObject(),
),
),
$(go.Panel, "Horizontal",
{
row: 1,
column: 2,
height: 24,
// margin: new go.Margin(2, 2, 2, 0),
},
$(go.Panel, "Spot",
{
height: 17,
width: 17,
//margin: new go.Margin(2, 2, 2, 0),
},
$(go.Shape, "Ellipse",
{
height: 15,
width: 15,
fill: "#fef5d9",
//fill: "#000000",
visible:false,
margin: new go.Margin(0, 0, 0, 0),
},
new go.Binding("visible", "rulemodifiedby", isShapeVisible),
{
toolTip:
$("ToolTip",
$(go.TextBlock, { margin: 4,height:10,font: "bold 10px sans-serif" },
new go.Binding("text", "rulemodifiedby")
),
new go.Binding("visible","rulemodifiedby",x=>x != "")
),
}
),
$(go.TextBlock,
{
//stroke:"#ffffff",
name: "RuleModified",
height: 10,
font: "bold 10px sans-serif",
textAlign: "center",
alignment: go.Spot.Center,
verticalAlignment: go.Spot.Center,
margin: new go.Margin(0, 0, 0, 0),
//overflow: go.TextBlock.OverflowEllipsis,
},
new go.Binding("text", "rulemodifiedby", isRuleModified),
{
toolTip:
$("ToolTip",
{height:24},
$(go.TextBlock, { margin: 4,height:10,font: "bold 10px sans-serif" },
new go.Binding("text", "rulemodifiedby")
),
new go.Binding("visible","rulemodifiedby",x=>x != "")
),
}
)
)
),
);
The row and column and rowSpan and columnSpan properties are ignored on elements that are not the immediate elements of a “Table” Panel. So don’t bother setting any of them on your elements of “Horizontal” Panels.
The row… properties are ignored for immediate elements of "TableRow** Panels. Only the column and columnSpan properties are useful on elements of a “TableRow” Panel. So don’t set row: 1 on the elements of the “TableRow” Panel.
Each element that you add to the “TableRow” Panel should have a column setting. Presumably they will have different column values unless you want multiple elements to share the same cell.
ok I have removed rowSpan and columnSpan and Row1 from TableRow as well,
Now please Help me to show header for every column present inside Scrolling Table TabaleRow.
The easiest way is to add an item in the data Array that is represented by a different kind of “TableRow” in your Panel.itemTemplateMap. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go.js"></script>
<script src="https://cdn.jsdelivr.net/npm/create-gojs-kit/dist/extensions/ScrollingTable.js"></script>
<script id="code">
const myDiagram =
new go.Diagram("myDiagramDiv", {
initialScale: 2,
LayoutCompleted: (e) => {
// update all of the scrollbars
e.diagram.nodes.each((n) => {
var table = n.findObject('TABLE');
if (table !== null && table.panel._updateScrollBar) table.panel._updateScrollBar(table);
});
},
"undoManager.isEnabled": true,
"ModelChanged": e => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
myDiagram.nodeTemplate =
new go.Node('Vertical', {
selectionObjectName: 'SCROLLER',
resizable: true, resizeObjectName: 'SCROLLER',
portSpreading: go.PortSpreading.None
})
.bindTwoWay('location', 'loc', go.Point.parse, go.Point.stringify)
.add(
new go.TextBlock({ font: 'bold 14px sans-serif' })
.bind('text', 'key'),
new go.Panel('Auto')
.add(
new go.Shape({ fill: 'white' }),
go.GraphObject.build('ScrollingTable', {
name: 'SCROLLER',
desiredSize: new go.Size(NaN, 60), // fixed height, but is resizable
defaultColumnSeparatorStroke: 'gray',
defaultColumnSeparatorStrokeWidth: 0.5,
'TABLE.itemTemplateMap':
new go.Map()
.set("",
new go.Panel('TableRow', {
defaultStretch: go.Stretch.Horizontal,
// each row is a port
fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides,
fromLinkable: true, toLinkable: true,
})
.bind('portId', 'name') // each row is a port
.add( // add whatever you want as columns in the scrolled "Table" Panel
new go.TextBlock({ column: 0 })
.bind('text', 'name'),
new go.TextBlock({ column: 1 })
.bind('text', 'value')
))
.set("Header",
new go.Panel("TableRow", { defaultStretch: go.Stretch.Horizontal, background: "lightgray" })
.add( // add whatever you want as headers for the columns
new go.TextBlock("Name", { column: 0, font: "bold 10pt sans-serif", wrap: go.Wrap.None, margin: new go.Margin(2, 2, 1, 0) }),
new go.TextBlock("Value", { column: 1, font: "bold 10pt sans-serif", wrap: go.Wrap.None, margin: new go.Margin(2, 0, 1, 2) })
)),
// style some of the properties of the "Table" Panel
'TABLE.defaultColumnSeparatorStroke': 'gray',
'TABLE.defaultColumnSeparatorStrokeWidth': 0.5,
'TABLE.defaultRowSeparatorStroke': 'gray',
'TABLE.defaultRowSeparatorStrokeWidth': 0.5,
'TABLE.defaultSeparatorPadding': new go.Margin(0, 3),
'TABLE.rowSizing': go.Sizing.None
})
.bind('TABLE.itemArray', 'items', a => { a.unshift({ category: "Header" }); return a; })
// This swaps the columns of the scrollbar and table.
// If you look at the ScrollingTable extension source, the scrolling table itself
// is implemented as a table with the scrollbar column 1 and the table content in column 0.
// This simply switches them to make the scrollbar appear on the left.
.bind('TABLE.column', 'left', left => left ? 2 : 0)
.bindTwoWay('desiredSize', 'size', go.Size.parse, go.Size.stringify)
)
);
myDiagram.model = new go.GraphLinksModel({
linkFromPortIdProperty: 'fromPort',
linkToPortIdProperty: 'toPort',
nodeDataArray: [
{
key: 'Alpha',
left: true,
loc: '0 0',
size: '110 70',
items: [
{ name: 'A', value: 1 },
{ name: 'B', value: 2 },
{ name: 'C', value: 3 },
{ name: 'D', value: 4 },
{ name: 'E', value: 5 },
{ name: 'F', value: 6 },
{ name: 'G', value: 7 }
]
},
{
key: 'Beta',
loc: '150 0',
size: '120 40',
items: [
{ name: 'Aa', value: 1 },
{ name: 'Bb', value: 2 },
{ name: 'Cc', value: 3 },
{ name: 'Dd', value: 4 },
{ name: 'Ee', value: 5 },
{ name: 'Ff', value: 6 },
{ name: 'Gg', value: 7 },
{ name: 'Hh', value: 8 },
{ name: 'Ii', value: 9 },
{ name: 'Jj', value: 10 },
{ name: 'Kk', value: 11 },
{ name: 'Ll', value: 12 },
{ name: 'Mm', value: 13 },
{ name: 'Nn', value: 14 }
]
}
],
linkDataArray: [
{ from: 'Alpha', fromPort: 'D', to: 'Beta', toPort: 'Ff' },
{ from: 'Alpha', fromPort: 'A', to: 'Beta', toPort: 'Nn' },
{ from: 'Alpha', fromPort: 'G', to: 'Beta', toPort: 'Aa' }
]
});
</script>
</body>
</html>
This is basically samples/ScrollingTable.html, but with an additional “Header” template in the Panel.itemTemplateMap and a { category: "Header" } object as the first element in each Array, added via a binding conversion function.
Ok, Above sample giving me issue with my nodeTemplate.
Exception:vendor.js:52930 ERROR Error: Panel.itemTemplate value is not an instance of Panel: Map()#1626
Sample Code: var SSDnodeTemplate =
$(go.Node,
“Auto”,
{
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
dragComputation: avoidNodeOverlap, //Avoid whenever we drag node
isShadowed: true,
shadowBlur: 2,
name:“mainNode”,
//shadowOffset: new go.Point(120, 6), //commented to move node in empty space
alignment: go.Spot.Center,
selectionAdorned: false,
},
new go.Binding("isShadowed", "category", exp => !(exp === 'Procedure' || exp === 'Section'|| exp === 'SECTION')),
new go.Binding("shadowColor", "isSelected",
(sel, shp) => sel ? shp.part.data.nodedetails.color : shp.part.data.nodedetails.shadowcolor).ofObject(),
new go.Binding("ItemsArray", "NodeDetails"),
new go.Binding("minSize", "category", exp => (exp === 'Procedure' || exp === 'Section' || exp === 'SECTION')
? new go.Size(120, 35) : new go.Size(0, 35)).ofObject(),
new go.Binding("fromSpot", "category", exp => (exp === 'Procedure' || exp === 'Section' || exp === 'SECTION')
? go.Spot.LeftSide : go.Spot.BottomSide).ofObject(),
new go.Binding("toSpot", "category", exp => (exp === 'Procedure' || exp === 'Section' || exp === 'SECTION')
? go.Spot.RightSide : go.Spot.TopSide).ofObject(),
$(go.Shape, "RoundedRectangle", {
name: "Icon",
stretch: go.GraphObject.Fill,
alignment: go.Spot.Center,
fromLinkableSelfNode: true,
toLinkableSelfNode: true,
strokeWidth: 0,
},
new go.Binding("fill", "isSelected",
(sel, shp) => sel ? shp.part.data.nodedetails.shadowcolor : shp.part.data.nodedetails.color).ofObject(),
new go.Binding("stroke", "isSelected", h => h ? "#0047AB" : "#5A5A5A").ofObject(), //Use For Select
new go.Binding("strokeWidth", "isSelected", h => h ? 6 : 0).ofObject(),
new go.Binding("stroke", "isHighlighted", h => h ? "#0047AB" : "#5A5A5A").ofObject(), //use For Search
new go.Binding("strokeWidth", "isHighlighted", h => h ? 4.8 : 0).ofObject(),
{
contextMenu: //Call For BRLD From SSD Node
$("ContextMenu",
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
},
$(go.TextBlock, "View Business Logic Linkage Diagram"),
{click: GoToURL},
new go.Binding("visible", "isbuttonvisible")
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
},
$(go.TextBlock, "CopyText"),
{click: copyText}
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
},
$(go.TextBlock, "PseudoCode"),
{click: GotoIntellisysPage},
new go.Binding("visible", "category", setBoolean)
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
},
$(go.TextBlock, "Neighborhood"),
{click: GoToNeibourHood},
new go.Binding("visible", "true")
)
) // end Adornment
}
),
$(go.Panel, 'Vertical',
$(go.Panel, "Table",
{
stretch: go.GraphObject.Fill,
defaultRowSeparatorStroke: go.Brush.lighten("grey"),
columnSpan: 2,
margin:new go.Margin(0, 0, 1.5, 0),
},
$(go.RowColumnDefinition, //changes for BugID: INT-574
{
row: 1,
isRow: true,
background: "#fef5d9",
stretch: go.GraphObject.Fill,
},),
$(go.RowColumnDefinition, {row: 0, sizing: go.RowColumnDefinition.None}),
$(go.TextBlock,
{
name: 'myTextBlock',
row: 0,
columnSpan: 2,
margin: 14,
textAlign: "center",
isMultiline: false,
editable: false,
height: 15,
font: "15px sans-serif",
},
new go.Binding("text", "text").makeTwoWay(),
{
contextMenu: //Call For BRLD From SSD Node
$("ContextMenu",
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
},
$(go.TextBlock, "View Business Logic Linkage Diagram"),
{click: GoToURL},
new go.Binding("visible", "isbuttonvisible")
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
},
$(go.TextBlock, "CopyText"),
{click: copyText},
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue",
"visible": false
},
$(go.TextBlock, "PseudoCode"),
{click: GotoIntellisysPage},
new go.Binding("visible", "category", setBoolean)
),
$("ContextMenuButton",
{
"ButtonBorder.fill": "white",
"_buttonFillOver": "skyblue"
},
$(go.TextBlock, "Neighborhood"),
{click: GoToNeibourHood},
new go.Binding("visible", "true")
)
) // end Adornment
},
),
$(go.TextBlock, {
row: 0,
column: 1,
alignment: go.Spot.BottomRight,
font: "9pt Sans-Serif",
},
new go.Binding("text", "nodedetails", nd => nd.extension)//File Extention
),
$(go.TextBlock, {
row: 0,
column: 0,
margin: 2,
alignment: go.Spot.BottomLeft,
font: "8pt Sans-Serif",
},
new go.Binding("text", "nodedetails", nd => nd.reference).makeTwoWay(),
),
$(go.TextBlock, {
row: 0,
column: 0,
margin: 1,
textAlign: "left",
alignment: go.Spot.TopLeft,
font: "8pt Sans-Serif",
},
new go.Binding("text", "isSelected",
(sel, shp) => shp.part.data.nodedetails.type=="" || shp.part.data.nodedetails.type=="N/a"? shp.part.data.category : shp.part.data.nodedetails.type).ofObject(),
),
$(go.TextBlock, {
row: 0,
column: 1,
margin: 2,
textAlign: "right",
alignment: go.Spot.TopRight,
font: "8pt Sans-Serif",
},
new go.Binding("text", "parentnode").makeTwoWay(),
),
$("PanelExpanderButton", "COLLAPSIBLE",
{
row: 0,
scale: 0.80,
column: 1,
alignment: go.Spot.TopRight,
click: FillBrList,
},
new go.Binding("visible", "isrulepresent", setBooleanvalue).makeTwoWay(),
go.GraphObject.make(go.Shape,
{
name: 'ButtonIcon',
width: 8,
height: 5,
scale: 0.80,
},
new go.Binding('geometryString', 'visible',
(vis) => {
return vis ? 'F M24.642,18.124l-1.768,1.768L16,13.017,9.124,19.892,7.357,18.124,16,9.481Zm0,0' : 'F M24.642,13.874l-1.768-1.768L16,18.981,9.124,12.106,7.357,13.874,16,22.517Zm0,0'
},
// ).ofObject('PROPTEXT')
).ofObject('COLLAPSIBLE')
)
),
),
$(go.Panel, 'Auto',
{name: "COLLAPSIBLE", visible: false,height:NaN, background:"#fef5d9",},
).add(
new go.Shape(
{stroke: "grey"}),
$(go.Panel, "Table",
{
background: "#fef5d9",
stretch: go.GraphObject.Fill, //height:25,
alignment: go.Spot.Left,
//alignment: go.Spot.Bottom,
margin: new go.Margin(0.5, 0, 0, 0),
},
$(go.Shape, "RoundedRectangle",{ //Search
row:0,
column:1,alignment: go.Spot.Left,
//margin:new go.Margin(1, 1, 1, 5),
margin:new go.Margin(1, 1, 1, 10),
width: 20, height: 20, fill: "#ffcc00",
},
// new go.Binding("margin", "",
// obj=>obj.part.data.ruledetails.length>=10?new go.Margin(0, 0, 0, 6):new go.Margin(0, 0, 0, 2)).ofObject(),
),
$(go.Shape, { //Search
row:0,
column:1,
alignment: go.Spot.Left,
//margin:new go.Margin(0, 0, 0, 8),
margin:new go.Margin(0, 0, 0, 13),
fill: "#ffcc00",
geometryString: "F M11.854 11.146l-2.698-2.698A4.25 4.25 0 1 0 8.75 9.25a4.25 4.25 0 0 0 2.698-.801l2.698 2.698a0.5 0.5 0 0 0 0.707-0.707zM5.25 8.75a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z",
//stroke: "black"
},
// new go.Binding("margin", "",
// obj=>obj.part.data.ruledetails.length>=10?new go.Margin(0, 0, 0, 9):new go.Margin(0, 0, 0, 5)).ofObject(),
),
// $(go.Panel, "Spot",
// {
// row:0,
// column:1,
// margin:1,
// height:30,
// // alignment: go.Spot.BottomCenter
// },
$(go.Shape, { // Transparent shape to handle click event
row: 0,
column: 1,
//height: 24,
height: 25,
fill: "white",
alignment: go.Spot.BottomCenter,
margin: new go.Margin(2, 0.8, 0.5, 0.8),
stroke: "grey"
},
new go.Binding("width", "", setPanelWidth).ofObject(),
),
//Search box
$(go.TextBlock,"",
{
//width:100,
row:0,
column:1,
background: "#FFFFFF",
name: "SearchText",
alignment: go.Spot.BottomCenter,
margin: new go.Margin(8, 0, 1.5, 0),
textAlign: "left",
isMultiline: false,
//height:22.5,
editable: true,
font: "14px sans-serif",
stretch: go.GraphObject.Fill,
},
new go.Binding("textEditor","",BindTextEditor),
new go.Binding("width", "", setTextWidth).ofObject(),
),
$(go.Panel, "TableRow",
{ isPanelMain: true, defaultAlignment: go.Spot.Center },
$(go.TextBlock, "Sr. No.", {row:1, column: 0 }),
$(go.TextBlock, "Business Logic", {row:1, column: 1 }),
$(go.TextBlock, "ModiFied Logic", {row:1, column: 2 }),
),
go.GraphObject.build('ScrollingTable', {
row:2,
column:1,
//columnSpan:3,
//width:300,
name: 'SCROLLER',
alignment: go.Spot.Left,
'TABLE.itemTemplate': new go.Map()
.set("",DetailsTemplate)
.set("Header",
new go.Panel("TableRow", {
defaultStretch: go.Stretch.Horizontal,
background: "lightgray"
})
.add( // add whatever you want as headers for the columns
new go.TextBlock("Name", {
column: 0,
font: "bold 10pt sans-serif",
wrap: go.Wrap.None,
margin: new go.Margin(2, 2, 1, 0)
}),
new go.TextBlock("Value", {
column: 1,
font: "bold 10pt sans-serif",
wrap: go.Wrap.None,
margin: new go.Margin(2, 0, 1, 2)
})
)),
'TABLE.defaultRowSeparatorStroke': 'gray',
'TABLE.defaultRowSeparatorStrokeWidth': 0.5,
'TABLE.defaultSeparatorPadding': new go.Margin(0, 3, 0, 3),
'TABLE.rowSizing': go.Sizing.None,
},)
.bind('TABLE.itemArray', 'ruledetails')
.bind("height", "ruledetails", setPanelHeight)
.bind('TABLE.column', 'left', left => left ? 2 : 0)
),
)
),
);
When one wants to use more than one item template, one has to use a go.Map, which maps string name keys to Panel values. Then you need to assign Panel.itemTemplateMap property, not the singular Panel.itemTemplate. In this case:
"TABLE.itemTemplateMap":
OK, now exception is resolve but facing issue with data binding.
1.Header is visible now but TABLE.itemArray not binding correctly.
Node:
Sample Code:
go.GraphObject.build(‘ScrollingTable’, {
row:2,
column:1,
name: ‘SCROLLER’,
alignment: go.Spot.Left,
//‘TABLE.itemTemplate’: DetailsTemplate,
‘TABLE.itemTemplateMap’: new go.Map()
.set(“”,
new go.Panel(‘TableRow’, {
defaultStretch: go.Stretch.Horizontal,
// each row is a port
fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides,
fromLinkable: true, toLinkable: true,
})
.bind(‘portId’, ‘name’) // each row is a port
.add( // add whatever you want as columns in the scrolled “Table” Panel
new go.TextBlock({column: 0})
.bind(‘text’, ‘id’),
new go.TextBlock({column: 1})
.bind(‘text’, ‘rulename’)
)
)
.set(“Header”,
new go.Panel(“TableRow”, {
defaultStretch: go.Stretch.Vertical,
//background: “lightgray”
})
.add( // add whatever you want as headers for the columns
new go.TextBlock(“Name”, {
column: 0,
//font: “bold 10pt sans-serif”,
wrap: go.Wrap.None,
margin: new go.Margin(2, 2, 1, 0)
}),
new go.TextBlock(“Value”, {
column: 1,
font: “bold 10pt sans-serif”,
//wrap: go.Wrap.None,
margin: new go.Margin(2, 0, 1, 2)
})
)),
‘TABLE.defaultRowSeparatorStroke’: ‘gray’,
‘TABLE.defaultRowSeparatorStrokeWidth’: 0.5,
‘TABLE.defaultSeparatorPadding’: new go.Margin(0, 3, 0, 3),
‘TABLE.rowSizing’: go.Sizing.None,
},)
//.bind(‘TABLE.itemArray’, ‘ruledetails’)
.bind(‘TABLE.itemArray’, ‘ruledetails’, a => {
a.unshift({category: “Header”});
return a;
})
Please confirm that the Panel.itemArray’s first item is a “Header” category object.
Is there needs to pass “Header” category object in model, but in sample no such kind of object present.
1.Using this binding .bind(‘TABLE.itemArray’, ‘ruledetails’) values are visible only.
2.Using this binding .bind(‘TABLE.itemArray’, ‘items’, a => {
a.unshift({category: “Header”});
return a; })
headers are visible only.
Yes, in this case the header row is just another row in the table that is based on the Panel.itemArray Array’s first item. If you want you could put additional properties in that { category: "Header" } and use data bindings in the “Header” item template, but that didn’t seem useful – it’s easy to just hard-code the “Name” and “Value” strings.
How can I use hardcode value do you have any related sample.
ok, its working for me but header is also scrolling now, I want fix header.
Code:
go.GraphObject.build(‘ScrollingTable’, {
row:2,
column:1,
name: ‘SCROLLER’,
alignment: go.Spot.Left,
//‘TABLE.itemTemplate’: DetailsTemplate,
‘TABLE.itemTemplateMap’: new go.Map()
.set(“”,DetailsTemplate
)
.set(“Header”,
new go.Panel(“TableRow”, {
//width:100,
height: 25,
defaultStretch: go.Stretch.Horizontal,
background: “#ffcc00”
})
.add( // add whatever you want as headers for the columns
new go.TextBlock(“Name”, {
//width:100,
height: 18,
text:“Sr.No.”,
column: 0,
font: “bold 11pt sans-serif”,
alignment: go.Spot.Left,
textAlign: “left”,
wrap: go.Wrap.None,
margin: new go.Margin(2, 2, 1, 0)
}),
new go.TextBlock(“Value”, {
// width:100,
height: 18,
text:“Business Logic List”,
column: 1,
alignment: go.Spot.Center,
textAlign: “center”,
font: “bold 11pt sans-serif”,
wrap: go.Wrap.None,
margin: new go.Margin(2, 0, 1, 2)
}),
new go.TextBlock(“Value”, {
width:60,
height: 18,
text:“Modified”,
column: 2,
alignment: go.Spot.Right,
textAlign: “right”,
font: “bold 11pt sans-serif”,
wrap: go.Wrap.None,
margin: new go.Margin(2, 0, 1, 0)
}),
new go.TextBlock(“Value”, {
width:100,
height: 18,
text:“RuleType”,
column: 3,
alignment: go.Spot.Center,
textAlign: “center”,
font: “bold 11pt sans-serif”,
wrap: go.Wrap.None,
margin: new go.Margin(2, 0, 1, 0)
})
)),
'TABLE.defaultRowSeparatorStroke': 'gray',
'TABLE.defaultRowSeparatorStrokeWidth': 0.5,
'TABLE.defaultSeparatorPadding': new go.Margin(0, 2, 0, 2),
'TABLE.rowSizing': go.Sizing.None,
},)
//.bind('TABLE.itemArray', 'ruledetails')
.bind('TABLE.itemArray', 'ruledetails', (a) => {
//a.push({category: "Header"});
// Create a new array with the header and the original data
const newArray = [{ category: "Header" }, ...a];
return newArray;
//return a;
})
It doesn’t support that feature. You could put the header outside of that “ScrollingTable” Panel, just above it, in a separate “Table” Panel. Basically just move the “Header” item template into its own “Table” Panel.
But because that header row would not be in the same “Table” Panel as all of your data rows, it would not naturally have the same column widths. However that might not be a problem if most of your columns have a fixed width.