asked on December 6, 2023
Hi team,
I'm trying to implement the flex monster grid in React. I need to save a report on clicking the "Save" button and retrieve the same config (not data) subsequently.
How can I save a report to the server by clicking the "Save" tab?
⋅ December 6, 2023
Hello,
Thank you for reaching out to us.
You can save your report to a remote server using the save() method. This method creates an XMLHttpRequest object and sends it in a POST request.
Your server should accept and handle this request. Then, the report can be saved to the server or any other location. For example:
flexmonster.save({
filename: "report.json",
destination: "server",
url: "https://example.com/",
serverContentType: "application/json"
});
To add this functionality to the Toolbar, you can use the beforetoolbarcreated event:
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
beforetoolbarcreated: customizeToolbar,
// other properties
});
function customizeToolbar(toolbar) {
let tabs = toolbar.getTabs();
toolbar.getTabs = function() {
let saveTab = tabs.find(tab => tab.id == "fm-tab-save");
if (!saveTab) return tabs;
saveTab.handler = saveToServer;
return tabs;
}
}
You are welcome to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/q4njzt2a/
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ December 13, 2023
Hello,
Hope you are doing well.
We were wondering if you had a chance to check the suggested approach. Could you please confirm if it works for you?
Looking forward to hearing your feedback.
Kind regards,
Nadia