Forums Home / Spread / SpreadJS
Posted by: pedro.moraes on 8 March 2023, 1:57 am EST
pedro.moraes
Posted 8 March 2023, 1:58 am EST - Updated 8 March 2023, 2:03 am EST
Hello,
I’m using bindColumns() for my table, and I fetch the values by this function:
but when I type a new value in the table, it goes back to the previous value because the columns will always fetch the value of the function
How do I stay when I type a new value?
ankit.kumar
Posted 9 March 2023, 3:47 pm EST
Dear Pedro,
I noticed that you are not using the value function correctly. The primary purpose of the value function is to convert the displayed value of a cell. However, based on your screenshot, it seems that you are fetching data inside the value function. Consequently, whenever you enter a new value in the cell, the “_getValorPremisa()” function is triggered, causing the previous value to appear instead of the new one.
To avoid this issue, it is essential to use the “value” function exclusively for converting the desired value that you want to display. I recommend that you take a look at the following demos, which demonstrate how to properly bind columns to tables using the bindColumns() function:
Table Binding: https://www.grapecity.com/spreadjs/demos/features/data-binding/table-binding/purejs
Data Binding: https://www.grapecity.com/spreadjs/demos/features/tables/table-binding/purejs
I suggest implementing the examples shown in the demos and reaching out to us if you encounter any problems. We are always ready to assist you.
Best regards,
Ankit
pedro.moraes
Posted 10 March 2023, 1:20 am EST
Sorry I think I’m still not understanding, I’m putting a snippet of code to help the question
private build() {
const sheet = this.workbook.getActiveSheet();
sheet.deleteRows(0, sheet.getRowCount());
sheet.deleteColumns(0, sheet.getColumnCount());
this.workbook.suspendPaint();
this.workbook.suspendEvent();
this.colunas = [
{
name: 'metadata',
displayName: '',
width: 0,
visible: false,
resizable: false,
value: function (item: PremissaDetailDTO) {
return JSON.stringify(item);
},
},
{
name: 'checkbox',
displayName: '',
width: 50,
visible: true,
resizable: false,
cellType: new GC.Spread.Sheets.CellTypes.CheckBox(),
},
{
name: 'premissa',
displayName: 'Premissa',
width: 200,
visible: true,
resizable: false,
value: function (item: PremissaDetailDTO) {
return item.nome;
},
},
{
name: 'empresa',
displayName: 'Empresa',
width: 0,
visible: false,
resizable: false,
value: function (item: PremissaDetailDTO) {
return item.empresa.nome;
},
},
{
name: 'cc',
displayName: 'Centro de Custo',
width: 0,
visible: false,
resizable: false,
value: function (item: PremissaDetailDTO) {
return item.centroCusto ? item.centroCusto.centroCusto : '';
},
},
{
name: 'unidade',
displayName: 'Unidade',
width: 0,
visible: false,
resizable: false,
value: function (item: PremissaDetailDTO) {
return item.unidadeDeMedida;
},
},
{
name: 'moeda',
displayName: 'Moeda',
width: 50,
visible: false,
resizable: false,
value: function (item: PremissaDetailDTO) {
return item.moeda.nomeMoeda;
},
},
];
this.colunas.push(...this.construirColunaValores());
this.workbook.resumeEvent();
this.workbook.resumePaint();
this.workbook.refresh();
}
private construirColunaValores(): GC.Spread.Sheets.IColumn[] {
....
//meses is a string array
return meses.map((data) => {
return {
name: 'mes',
displayName: data,
width: 0,
visible: true,
resizable: false,
// the function extractValorDaPremissa returns a string value from the parameters
value: (item: PremissaDetailDTO) => this.extrairValorDaPremissa(item, data),
};
});
}Inside the “item” contains a list of values so I need to use the function
ankit.kumar
Posted 13 March 2023, 2:05 pm EST
Hello Pedro,
I would like to bring to your attention that the construirColunaValores() method sets a function to the “value” property of the column. Whenever there is a change in the sheet data or viewport, the method is triggered. Due to this behavior, the function currently being used in the method removes the newly added value and sets the previous value again.
However, using a function to initialize the column data is not the intended usage. Instead, you can utilize a data source to initialize the sheet columns data. A data source can be an array of objects with properties corresponding to different columns of the sheet. You can then bind the data source to the sheet using the setDataSource() method.
To illustrate this, I have attached a sample that demonstrates how you can create a data source and bind it to the sheet to initialize the sheet columns data. You can access the sample through this link: https://jscodemine.grapecity.com/share/Q3aOhYalu0OQECjmi32pFw/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}
If you encounter any issues, please do not hesitate to inform us. You can also refer to the following resources for more information:
Sheet binding demo: https://www.grapecity.com/spreadjs/demos/features/data-binding/sheet-level-binding/purejs
IColumn interface: https://www.grapecity.com/spreadjs/api/interfaces/GC.Spread.Sheets.IColumn
setDataSource() method: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#setdatasource
I hope this clarifies your query. Please let us know if you still face any issues.
Regards,
Ankit
