Forums Home / Spread / SpreadJS
Posted by: m.holland-moritz on 22 June 2022, 5:09 am EST
m.holland-moritz
Posted 22 June 2022, 5:09 am EST - Updated 3 October 2022, 9: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 24 June 2022, 12:12 am 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, 12:49 pm 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 30 June 2022, 3:58 am 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, 11:08 am EST - Updated 11 February 2024, 11: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, 11: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, 3:57 pm 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 16 February 2024, 7:24 am 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
diwakar.s.maurya
Posted 9 June 2024, 4:01 pm EST
priyam.kushwaha
Posted 10 June 2024, 7:31 am EST
Hi,
As per my understanding, you wish to change the default values for the import/export options and toggle them via code.
You can achieve this by using the setData and getData methods. First, retrieve the fileMenuSetting if it exists, then change the binding value of the options to alter the default value of options. I have attached a sample where the saveAsView option in the export settings is set to true when the designer initializes for the first time. You can toggle the settings in the same way and to get the binding value you can look into file menu template using “GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate)”. Refer to the attached sample.
Another way to achieve this is by using the FileMenuPanel command, which executes whenever the file menu panel opens. You can override this command to meet your requirements. Refer to the attached sample below for guidance.
Regarding your question about having default text in TextBlock while creating custom settings, so that when designer.getData(“fileMenuSetting”) is called, they already have some value: I am unable to understand this. Could you please elaborate and explain what you mean by this?
Regards,
Priyam
diwakar.s.maurya
Posted 16 June 2024, 12:13 pm EST
I liked the 1st solution and tried to use the same idea to do what I want but it did not work. I am able to mark the checkbox checked programatically, but it does not appear checked on UI.
Context: I have customized the File menu to allows users to import file from another place. In the customized menu, I want to check or uncheck a checkbox.
Here is the code that I tried based on your 1st example: https://jscodemine.mescius.io/sample/iZtJKGGod06Ap0HQTsFwXw/
priyam.kushwaha
Posted 18 June 2024, 9:08 am EST
Hi,
We are still investigating the issue at our end. We will let you know about our findings as soon as possible.
Regards,
Priyam
priyam.kushwaha
Posted 19 June 2024, 2:52 am EST
Hi,
The first method applies to built-in templates and properties. For custom items in file menu, you can use the second method by overriding the FileMenuPanel command and using the setData method to set the default options value for the custom item. Please refer to the attached snippet and sample for more details.
// Get the File Menu Panel Command
let fileMenuPanelCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel);
let oldGetStateFn = fileMenuPanelCommand.getState;
let oldExecuteFn = fileMenuPanelCommand.execute;
// Override the execute function
fileMenuPanelCommand.execute = function (context, propertyName, newValue) {
let result = oldExecuteFn.apply(this, arguments);
if (propertyName === "customIncludeFormulas") {
designer.setData("customIncludeFormulas", newValue);
}
return result;
}
// Override the getState function
fileMenuPanelCommand.getState = function (context, propertyName, newValue) {
let options = oldGetStateFn.apply(this, arguments);
// get the states and apply
options['customIncludeFormulas'] = designer.getData("customIncludeFormulas");
return options;
}
// Get the Default Config
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
fileMenuPanel: fileMenuPanelCommand
}
// Set the Designer's config
designer.setConfig(config);
designer.setData("customIncludeFormulas",shouldIncludeFormulasBeChecked);Regards,
Priyam
diwakar.s.maurya
Posted 24 June 2024, 11:07 am EST
Thank you. With the above code, i am able to show the customIncludeFormulas checkbox checked on first load.
But with the above code, it was apprearing checked on UI only. When i was trying to fetch its value back by doing designer.getData(“fileMenuSetting”) it was not getting fetched. I had to add below code also to do the both, i.e. show it checked on UI on first load and also get its value using designer.getData(“fileMenuSetting”)
const fileMenuSetting = designer.getData("fileMenuSetting") || {};
designer.setData("fileMenuSetting", { ...fileMenuSetting, customIncludeFormulas: shouldIncludeFormulasBeChecked });priyam.kushwaha
Posted 25 June 2024, 9:09 am EST
Hi,
We are still investigating the issue at our end. We will let you know about our findings as soon as possible.
Regards,
Priyam
priyam.kushwaha
Posted 25 June 2024, 11:57 pm EST
Hi,
Initially, it won’t show the items’ values if they have the default settings and haven’t been modified. However, once you change an item’s value, it will be reflected in fileMenuSetting. This behavior is expected. If you want to include the default value, you can set it like this: designer.setData(“fileMenuSetting”, { …fileMenuSetting, customIncludeFormulas: shouldIncludeFormulasBeChecked }).
Regards,
Priyam
