To allow users to view (and set, if desired) column formulas in a tablesheet, we can start by creating a text and a button element; we'll make it look similar to a formula bar:
<body>
<input type="text" id="tbsInput" style="width: 400px"/>
<input type="button" id="btn" value="Set"/>
<br/>
<br/>
<div id="app" style="height: 80%;"></div>
</body>Next, we need to add logic that handles the SelectionChanged event and stores the column index. We'll display the column value in the text element. We also have the button element configured to allow the user to set a new column formula, in which the formula displayed in the text element will be updated should it change:
calculatedColumnHeader(sheet, table) {
let activeColumnIndex = 0;
let inputEl = document.getElementById("tbsInput");
let colInfo;
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, args) {
let newSelections = args.newSelections[0];
if (newSelections.row === -1) {
activeColumnIndex = newSelections.col;
colInfo = sheet.getDataView().getColumn();
let columnValue = colInfo[activeColumnIndex].value;
inputEl.value = columnValue;
} else {
inputEl.value = "";
}
})
document.getElementById("btn").addEventListener("click", function () {
let updatedValue = inputEl.value;
if (updatedValue !== "") {
colInfo[activeColumnIndex].value = updatedValue;
let newView = table.addView("newView", colInfo);
sheet.setDataView(newView)
}
})
}You can find a sample with the working code here (thanks to Ankit Kumar):
Tye Glenz