I want combine this two example
and
to make a table that can add or delete rows/columns, and also can resize the width/height.
but width/height data binding puzzle me few days.
how to bind the
$go(go.RowColumnDefinition, { row: x, height: hh})
$go(go.RowColumnDefinition, { column: x, width: ww })
to the changing rows/columns, that maybe deleted or added?
I’ll assume that your data and node template are oriented by rows. For example, that your panel with the binding of Panel.itemArray is a “Table” Panel and its Panel.itemTemplate is a “TableRow” Panel.
If that’s the case, then it’s easy to add or remove rows – just call Model.addArrayItem or Model.insertArrayItem or Model.removeArrayItem on the item Array, all in a transaction. You can do that in the Column and Row Resizing sample right now.
But since the data is row-oriented, it’s not so natural to deal with columns. If you want to add a column, you’ll either need to add an element to each existing row panel or else leave those cells blank. Similarly, you’ll need to add an element for the new column in the itemTemplate. And you’ll need to do the opposite when removing a column.
As far as resizing the widths of columns is concerned, note that there is no natural place to save the columns widths. One cannot put it on any row data object, so the sample adds a separate node data property to hold an Array of widths. Note how in the node template there are all of these bindings:
$(go.RowColumnDefinition, makeWidthBinding(0)),
$(go.RowColumnDefinition, makeWidthBinding(1)),
$(go.RowColumnDefinition, makeWidthBinding(2)),
You’ll have to make sure to add such a RowColumnDefinition exists for each column that exists. And you’ll need to make sure that the length of the node data “widths” property has the correct number of width values (or NaN) in that Array that is used to hold column widths by the ColumnResizingTool.
thank you kindly explain,
the addRemoveColumns example work prefect that is what I want,
but the problem is how to bind RowColumnDefinition it to the Variable array.
I understand the $(go.RowColumnDefinition, makeWidthBinding(colIdx)) binding,
but when we add or remove Column to the table, the index also been changed.
In the AddRemoveColumns sample, each node (data) has a “columnDefinitions” property that is an Array of column descriptors: attribute id, header text, and column number.
In the ColumnResizing sample, each node (data) has a “widths” property that is an Array of numbers.
I suppose it’s OK to use two different properties to hold information about columns, but you might want to consider merging the width information into the property descriptor data used by the AddRemoveColumns sample. The two samples were developed at quite different times and their implementations were not coordinated, so it’s more work to integrate them than it could have been.
The ColumnResizingTool only operates on actual RowColumnDefinitions, so that’s not a problem. However I do notice that when the number of columns has changed, the Adornment showing the column resize handles isn’t updated to show the correct number of columns, until the Adornment is re-made.
Yes, i want to
Merging the width information into the property descriptor data used by the AddRemoveColumns sample.
also want Merge the height info to the property descriptor data.
right now I put
itemTemplate: // bound to a column definition object
$go(go.Panel,
new go.Binding("column"),
new go.Binding("width").makeTwoWay(),
new go.Binding("height").makeTwoWay(),
this, but it seems just change the Panel width/height not the RowColumnDefinition s
Maybe need to change the ColumnResizingTool code or binding other key words. still research.
itemTemplate: // bound to a column definition object
$go(go.Panel,
new go.Binding("column"),
new go.Binding("height", "height", function(h, item){
console.log(item.row);
}),
first time on loading, the row number is always 0, after render it will become real row number.
if at the first time is was not 0 , much easy implement, could you possible fix it ?
Your conversion function needs to return the desired height value.
Also, since the itemTemplate isn’t of panel type “TableRow”, its row property isn’t set. I can’t see how the containing Panel is defined, but I’m assuming it’s of type “Table”.
the all code is
new go.Binding("itemArray", "rows"),
{ // the rows for the people
itemTemplate: // bound to a person/row data object
$go(go.Panel, "TableRow",
new go.Binding("itemArray", "row"),
// you could also have other Bindings here for the whole row
{
itemTemplate: // bound to a cell object
$go(go.Panel, // each of which as "attr" and "text" properties
{ stretch: go.GraphObject.Fill, alignment: go.Spot.TopLeft },
new go.Binding("column", "attr",
function (a, elt) { // ELT is this bound item/cell Panel
var cd = findColumnDefinitionForName(elt.part.data, a);
if (cd !== null) return cd.column;
throw new Error("unknown column name: " + a);
}),
new go.Binding("rowheight", "rowheight", function (h,item) { // for row height
console.log(item.row, h, item); // item.row is 0 first time
setTimeout(() => {
console.log(item.row, h, item); // item.row not 0
}, 1);
return h;
}),
$go(go.TextBlock, { editable: true , textEditor: MyTextEditor },
{ margin: new go.Margin(2, 2, 0, 2), wrap: go.TextBlock.None },
new go.Binding("text").makeTwoWay())
)
}
)
}
Is there a reason you could not accept my suggestion of making it a “TableRow” Panel?
Because I want add remove row/columns, Maybe I did not understand?
I move the row “rowheight” binding to the “TableRow” panel it works, not first time row number is 0.
thank you very much walter.