Forums Home / Spread / SpreadJS
Posted by: murugesh.p on 21 March 2022, 3:51 am EST
murugesh.p
Posted 21 March 2022, 3:51 am EST
We want to show the dynamic column width according to the width of the text in the cell. We have come across autofit does this match for this requirement and did spread JS supports functional-based components for react js?
avinash.pathak
Posted 21 March 2022, 8:00 am EST
Hi,
For this, you may use the autoFitCOlumn method whenever the cell gets Changed. Please refer to the following code snippet and let me know if you face any issues.
let sheet = spread.getActiveSheet()
sheet.bind(GC.Spread.Sheets.Events.CellChanged,(s,e) => {
sheet.autoFitColumn(e.col)
});
sample: https://jscodemine.grapecity.com/share/yzA8X_9x0EmjN5OPLXQ5KQ/
autoFitColumn: https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.Worksheet~autoFitColumn.html
Regards,
Avinash
murugesh.p
Posted 21 March 2022, 8:23 am EST
Hi Avinash,
And I could see that you have been using the Design class component which is been imported from the spreadsheet but we are using the Spreadsheet functional component and worksheet functional component for me it is not working. And is that necessary to use class-based components only? I have enclosed the screenshot for your reference.[
murugesh.p
Posted 21 March 2022, 8:43 am EST
Hi Avinash,
If possible can you please share any functional-based component docs to implement spreadjs in our project?
avinash.pathak
Posted 22 March 2022, 3:43 am EST
Hi,
The SpreadJS supports both the functional component and the class component. Please refer to the following sample is the same example but in the functional component. I just changed the class component syntax to function component syntax.
sample: https://jscodemine.grapecity.com/share/6qyt9HSDAk6DQO8XN0wVHQ/
Regards,
Avinash
murugesh.p
Posted 22 March 2022, 5:55 am EST
Hi Avinash,
I Tried to load the dynamic JSON value to the Designer component but I could not find any docs for passing dynamic values to this component.
avinash.pathak
Posted 24 March 2022, 12:37 am EST
Hi,
We are sorry but there are no props that accept the JSON. for this need to call the designer.getWorkbook().fromJSON method whenever you need to change the JSON data. Please refer to the following code snippet and let me know if you face any issues.
function App(props){
let designer=null
const designerInitialized = (designer) => {
designer = designer;
changeJSON({});/* paas the json you want to set */
let spread = designer.getWorkbook()
let sheet = spread.getActiveSheet()
sheet.bind(GC.Spread.Sheets.Events.CellChanged,(s,e) => {
let value = sheet.getValue(e.row,e.col)
sheet.autoFitColumn(e.col)
})
sheet.setValue(0,0,'grapecity')
}
/*call this method whenver you need to change the json */
const changeJSON = (json)=>{
designer.getWorkbook().fromJSON(json)
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<Designer
spreadOptions={{sheetCount: 3}}
styleInfo={{height: '100%'}}
designerInitialized = {designerInitialized}
></Designer>
</div>
</div>);
Regards,
Avinash
murugesh.p
Posted 24 March 2022, 1:26 am EST
Hi Avinash,
I need to pass a JSON file like this below to this component
var colInfos = [
{ name: “position”, displayName: “Position” },
{ name: “name”, displayName: “Display Name” },
{ name: “birthday”, displayName: “Birthday” },
{ name: “age”, displayName: “Age” },
];
As we are passing the JSON to the worksheet like below
<SpreadSheets
backColor={spreadBackColor}
hostStyle={hostStyle}
enterCell={(a, b) => console.log(b)}
valueChanged={(a, b, c, d, e, f) =>
spreadSheetValueChange(a, b, c, d, e, f)()
}
cellChanged={(a, b) => console.log(a, b)}
workbookInitialized={(spread) => spreadFunction(spread)}
>
Kindly please let me know how we can pass the same JSON to the designer component or do we have to add the worksheet ?
And please let me know the structure of JSON to pass inside
const changeJSON = (json)=>{
designer.getWorkbook().fromJSON(json)
}
avinash.pathak
Posted 25 March 2022, 8:27 am EST
Hi,
We are sorry but we can not directly pass the columns info in to deisgner component. For this, you need to first get the worksheet object in designerInitialized event and then you may call the bind columns method with column JSON it. Please refer to the following code snippet and let me know if you face any issues.
const designerInitialized = (designer) => {
designer = designer;
changeJSON({});/* paas the json you want to set */
let spread = designer.getWorkbook()
let sheet = spread.getActiveSheet();
/*setDataSource*/
sheet.setDataSource(dataSource)/*add the dataSource*/
/*bind columns with col infos*/
sheet.bindColumns(colInfos);
}
return (
<Designer
spreadOptions={{sheetCount: 3}}
styleInfo={{height: '100%'}}
designerInitialized = {designerInitialized}
></Designer>
)
Regards,
Avinash
murugesh.p
Posted 26 March 2022, 12:31 pm EST
HI Avinash,
Can you please give the same code of passing dynamic JSON with inserted heading columns
ankit.kumar
Posted 28 March 2022, 1:58 am EST
Hi Murugesh,
Please refer to the following sample I have created for you that demonstrate using JSON with column headers: https://jscodemine.grapecity.com/share/OtyEQ3-Askuwx21L8c3zhQ/
You can also refer to the demo on Data Source Serialization: * “https://www.grapecity.com/spreadjs/demos/features/workbook/data-source-serialization/react”
Please let us know if you face any further issues.
Regards
Ankit
murugesh.p
Posted 28 March 2022, 5:03 am EST
Hi Ankit,
It is working correctly for the dynamic JSON but in the JSON in the data.jsx file the header for the excel is given with custom column header size. I want it has to be dynamically according to the length of the column name.
ankit.kumar
Posted 29 March 2022, 6:44 am EST
Hi Murugesh,
As per my understanding, you want to autoFit the columns with the cells and the column headers. For this, you need to set the the autoFitType to cellWithHeader. Simply use ```
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader
You can refer to the following sample that I have created for you: https://jscodemine.grapecity.com/share/cvfllJ__uEuycdm6BxXmgw/
Please let us know if you need any further assistance.
Regards
Ankitmurugesh.p
Posted 29 March 2022, 9:09 am EST
Hi, Ankit in the above solution I can’t modify the column header is there any possibility of modifying the column header?
ankit.kumar
Posted 29 March 2022, 1:09 pm EST
Hi Murugesh,
You can modify the column header by using the sheet.setValue() method and passing the sheetArea(4th argument) as GC.Spread.Sheets.SheetArea.colHeader
Please refer to the following sample that I have created for you: https://jscodemine.grapecity.com/share/olBQOFHMYkGw2aN6-Vh0jA/
setValue method: https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.Worksheet~setValue.html
SheetArea Enumeration: https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.SheetArea.html
Please let us know if you face any further issues.
Regards
Ankit
murugesh.p
Posted 30 March 2022, 9:50 am EST
Hi Ankit,
In the above solution that you suggested it is getting the value from the input and changing the header but I want to change the header directly by selecting the column which has to be changed.
ankit.kumar
Posted 31 March 2022, 7:10 am EST
Hi Murugesh,
For your required functionality, you need to create custom header type.
For example, you can refer to the following sample that I have created for you: https://jscodemine.grapecity.com/share/z1NhmCiI60qGJdsCQdX1KQ/
You can handle all other events on the input header.
Custom Header Demo: https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/custom-header/purejs
Please let us know if you need further assistance.
Regards
Ankit
