Forums Home / Spread / SpreadJS
Posted by: m.holland-moritz on 21 June 2022, 8:09 pm EST
m.holland-moritz
Posted 21 June 2022, 8:09 pm EST - Updated 3 October 2022, 12:12 am EST
Hello,
We have recognized that some of our customers work with Open Documents and therefore use the .ods file type. Do you plan to support this file format in the future?
If not, we would integrate a solution ourselves. Therefore another question:
Is it possible to add more custom file formats in the open dialog of the designer components as seen in the picture?
Regards
Maik
ankit.kumar
Posted 23 June 2022, 3:12 pm EST
Hi,
Apologies for the late reply. Currently, Open Documents file type is not supported in SpreadJS. We have asked the devs if this will be available in the future. The internal id for this is: SJS-13538. We will let you know when we hear from the devs.
Please refer to the following sample that describes how you can add another file formats in the SpreadJS Designer: https://jscodemine.grapecity.com/share/iLcJh0PYMUmxtOrGpdWpEQ/
API Docs:
getTemplate method: https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJSDesigner~GC.Spread.Sheets.Designer~getTemplate.html
registerTemplate method:
https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJSDesigner~GC.Spread.Sheets.Designer~registerTemplate.html
Designer Customizations:
https://www.grapecity.com/spreadjs/docs/latest/online/customizations.html
Please let us know if you need further assistance with this query. We would be happy to help you.
Regards
Ankit
ankit.kumar
Posted 24 June 2022, 3:49 am EST
Hi,
The devs have informed that the workload to support this feature will be quite large and we have added this to the product backlog. Currently, there is no ETA for this. We will let you know when we have an update for you.
Regards
Ankit
m.holland-moritz
Posted 29 June 2022, 6:58 pm EST
Hey,
Thank you a lot, that will work for us and thanks again for the info on your plans.
Regards
Maik
diwakar.s.maurya
Posted 11 February 2024, 2:08 am EST - Updated 11 February 2024, 2:14 am EST
Hi
In the example https://jscodemine.grapecity.com/share/iLcJh0PYMUmxtOrGpdWpEQ/, I want to take in some options from user while importing the file, just like how it is available while importing Excel (see example screenshot). How can I do it?
ankit.kumar
Posted 12 February 2024, 2:31 pm EST
Hi,
As per my understanding, you wish to add options before importing.
You could achieve that by customizing FileMenuPanelTemplate . Refer below snippet.
function addCustomItem(fileMenuTemplate) {
let importContainer =
fileMenuTemplate["content"][0]["children"][0]["children"][1]["children"][1];
let firstColumnList = importContainer["children"][1]["children"][0]["children"][0]["items"];
// Add the Item to the ItemsList
firstColumnList.push({
text: "Open Documents Files",
value: "Odf"
});
let secondColumnList = importContainer["children"][1]["children"][1]["children"];
let OdfContainer = {
children: [
{
margin: "0 0 15px 50px",
style: "color:green;font-size:22px;",
text: "Odf File",
type: "TextBlock"
},
{
margin: "0 0 0 50px",
text: "Flags",
type: "TextBlock"
},
{
bindingPath: "openDocumentsFilesSettings.customOption",
margin: "0 0 0 50px",
text: "Custom option",
type: "CheckBox"
},
{
bindingPath: "button_import_ssjson",
height: 120,
iconClass: "icon-common icon-ssjson",
iconPosition: "top",
margin: "20px 50px",
text: "Import Odf File",
type: "Button",
width: 120,
commands: [
"customCommand"
]
}
],
className: "file-menu-setting-container",
type: "Container",
visibleWhen: "activeCategory_import=Odf",
commands: [
"customCommand"
]
}
secondColumnList.push(OdfContainer);
}
And after that make to register the customized template. Refer below snippet.
GC.Spread.Sheets.Designer.registerTemplate(
GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate,
fileMenuTemplate
);I have provided a sample where I added a custom option named “Custom option” under the “Open Documents Files” section. Please try clicking “Import ODF File” while toggling this option
.
Sample: https://jscodemine.grapecity.com/share/_sqTdHwl_UqwRm3YjGbtVg/?defaultOpen={“OpenedFileName”%3A[“%2Findex.html”%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}
References:
Customize File Menu: https://developer.mescius.com/spreadjs/docs/spreadjs_designer_component/customizations/customize-file-menu
Best regards,
Ankit
diwakar.s.maurya
Posted 15 February 2024, 6:57 am EST
Please also tell how to get the value of what user selected in “Custom option” or how to read the value of “openDocumentsFilesSettings.customOption”. I tried to find it in documentation and forums but couldn’t.
GC.Spread.Sheets.Designer.FileMenuHandler.importJson_online = async function (designer) {
// print value of openDocumentsFilesSettings.customOption
}
priyam.kushwaha
Posted 15 February 2024, 10:24 pm EST
Hi,
You can determine whether the custom option is selected by accessing
designer.getData("fileMenuSetting").In the provided sample above, a custom option is added to the “Open Documents Files” section in the import section, with a binding path named openDocumentsFilesSettings.customOption, while customizing the file menu template.
When the “importJson_online” handler is called, you can check which option is selected using designer.getData(“fileMenuSetting”). If openDocumentsFilesSettings_customOption is true, it indicates that the option is selected. If it is not present or false, it means the option is not selected.
Refer below snippet.
GC.Spread.Sheets.Designer.FileMenuHandler.importJson_online = function (designer) {
let el = document.querySelectorAll("div.gc-list-control-item.gc-list-control-selected-item[data-value='Odf']");
if (el.length) {
let fileMenuSetting = designer.getData("fileMenuSetting") || {};
alert(`Settings--> Custom option:${fileMenuSetting.openDocumentsFilesSettings_customOption} \n Import Odf File Button Clicked`)
} else {
// JSON Import
let input = document.createElement('input');
input.type = 'file';
input.onchange = _ => {
let files = Array.from(input.files);
console.log(files[0].name);
files[0].text().then(res => {
let spread = GC.Spread.Sheets.findControl(document.querySelector('div[gcuielement="gcSpread"]'))
spread.fromJSON(JSON.parse(res));
designer.setData("FileMenu_show", false);
}).catch(err => {
console.log(err);
})
}
input.click();
}
}Try clicking “Import Odf File” in above provided sample, it will show alert in which I have showed if custom option is true or false and undefined.
Best regards,
Priyam
