Need a special offer?Find out if your project fits.
+

how to update existing tab in toolbar?

Answered
sabby asked on August 25, 2017

 i want to export data in grid after expanding (all data should be exporting not just colpased data in view)
so how can i update exitsing tool bar tab ?
if i add new one , how can i get existing exprt tab functinality ?

16 answers

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster August 28, 2017

Hello Sabby,
Thank you for your question. Our answers are below. 
1. Please note that the existing exporting feature exports the current state of the grid. Therefore when you need to export all the data you should have it appeared on the grid. In order to implement your case please follow the next workaround. First step - use getReport().slice method to save the current report state. The next step is expandAllData() method - it makes all the available expands and displays all the data. Then you should perform the export. Please use exportTo() API call for this. After the export is performed, you can use the runQuery() method to apply the initial state from the first step. All the necessary information about the API calls mentioned above you can find in our documentation - http://www.flexmonster.com/api/.
2. You can add the additional toolbar tab using the customize toolbar feature - http://www.flexmonster.com/api/beforetoolbarcreated/. Such approach allows removing the unnecessary tabs and also adding the new behavior. You can add the tab which implements the behavior described in the first paragraph. It should solve your case.
Please let us know if it works for you.
Regards,
Dmytro.

Public
sabby August 28, 2017

My question is more on "how to update the existing tab in toolbar ? i want to keep existing export functionality and add one extra feature on export to excel (to expand all) before it exports. 
 
OR if i have to write new tab feature ( i need all the existing export code to create new tab and all expand all feature) 

Public
Dmytro Zvazhii Dmytro Zvazhii Flexmonster August 29, 2017

Sabby,
You can find the source code of the toolbar in flexmonster.toolbar.js file. You are free to make all changes you need.

Thanks,
  Dmytro

Public
sabby August 29, 2017

flexmonster.toolbar.js   where is this file?

Public
sabby August 29, 2017

 got it. thanks. i can use and add flexmonster toolbar in my project ?initially i didnt add this file in my project. now after adding it , how do i make sure my project uses this ? where shld i import this?
i tried ti import in flexmonster.react.js but i get errorS:

/flexmonster/toolbar/flexmonster.toolbar.js
Line 321: 'isMultipleValDisabled' is not defined no-undef
Line 1529: Unexpected use of 'top' no-restricted-globals
Line 1562: Unexpected use of 'top' no-restricted-globals
Line 1582: Unexpected use of 'screen' no-restricted-globals
Line 1582: Unexpected use of 'screen' no-restricted-globals
Public
sabby August 29, 2017

kindly help to know if i need to use flexmonster.toobar.js and add this file in my project ? after fixisng above error  , can i add below bold line to make sure data exported includes ALLL data and not just in whats expanded by user in grid
 
// Export tab
FlexmonsterToolbar.prototype.printHandler = function () {
if (type == "csv" || type == "excel" ){
window.flexmonster.expandAllData();
}
this.pivot.print();
}

Public
sabby August 29, 2017

also , how can i handle/cusrtomize the sequence of tabs in toolbar . I think once am able to include and use your flexmosnter.toolbar js file ,  i can customize the sequence. 
 
kindly assist

Public
sabby August 29, 2017

i am looking farward to add this today , any suggestion?

Public
sabby August 29, 2017

since am using flexmonster.js from <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
 i think toobar.js path is within flexmonster.js which i cant change or override.
 

Public
sabby August 29, 2017

any ideA?

Public
sabby August 30, 2017

hi Team , i need to know how to implment this. any advice?

Public
Tanya Gryshko Tanya Gryshko Flexmonster August 30, 2017

Hello Sabby,
To modify flexmonster.toolbar.js your application should refer to your local component, not our CDN. You can achieve this by updating the componentFolder in app/containers/HomePage/index.js.
Please check the updated project in the attachment. Run this project and click on Grid tab to see the message.
There were some changes in internals/webpack/webpack.base.babel.js as well.
1. npm install copy-webpack-plugin --save-dev
2. const CopyWebpackPlugin = require('copy-webpack-plugin');
3.

module.exports = {
...
plugins: [
...
new CopyWebpackPlugin([
{ from: 'flexmonster' }
]),
]
}

Please note, if you are using custom toolbar, this may cause some issues while updating the component. That is why we recommend using beforetoolbarcreated event. Let us know if everything works fine.
Regards,
Tanya

Public
sabby August 30, 2017

this zip is blocked for download. is there any other way i can downbloaD?

Public
Tanya Gryshko Tanya Gryshko Flexmonster August 30, 2017

Sabby,
Please try downloading from here: https://s3.amazonaws.com/flexmonster/sabby/flexmonster-react-ES6.zip.
Regards,
Tanya

Public
sabby August 30, 2017

also , can i add multiple hanlder?
 { title: "Export Print", id:"fm-tab-export-print", handler: window.flexmonster.expandAll(),this.printHandler, icon: this.icons.export_print },  ??? 

Public
Tanya Gryshko Tanya Gryshko Flexmonster August 31, 2017

Sabby,

Yes, you can use multiple handlers but please keep in mind that some calls require time for data loading and rendering. So they will not work correctly if you do not wait while the component is ready to run next handler. 
Please find here an appropriate demo http://www.flexmonster.com/examples/

Thanks,
  Tanya

Please login or Register to Submit Answer