asked on November 21, 2019
I need to use decimal, thousand separator that are not supported by default, e.g. ' | ', I set it via property formats when create FlexMonster object, but these separator values don't appear in 'Format cells' inputs.
How to add new values for separators in 'Format cells' inputs and let user choose between values not supported by default, cause now, when I set custom separator, inputs become empty and immutable?
⋅ November 22, 2019
Hello, Rodion,
Thank you for your question.
In order to add custom thousand and decimal separators, Toolbar needs to be modified.
You can find its source code inside the folder named toolbar in your package. The dropdowns with symbols are adjusted right below // thousand_separator and // decimal_separator comments.
The desired symbol has to be added as an element of an appropriate array.
For example, the | symbol can be added using the following code:
thousandsSepDropDown.options[n] = new Option("|", "|");
* n defines position of a new symbol inside the dropdown list.
You can learn more about Toolbar customization by the link: customizing toolbar.
We sure hope it helps.
You are welcome to contact us in case of additional questions appear.
Kind Regards,
Illia
⋅ November 22, 2019
Hi Illia, We use npm to install FlexMonster package, so everytime we'll update version this change will have to be added again Is there any other way to do it?
⋅ November 22, 2019
Hello, Rodion,
The required functionality can be saved after update by overriding the necessary method of the original Toolbar.
Our team kindly suggest you following steps below:
flexmonster.full.js instead of flexmonster.js.flexmonster.css file inside the <head> tag.flexmonster.toolbar.js file to the directory you want it to be placed in.FlexmonsterToolbar.prototype.showFormatCellsDialog method.flexmonster.full.js is connected:<script type="text/javascript" src="path/flexmonster.full.js"></script>
<script type="text/javascript" src="path/customFlexmonster.toolbar.js"></script>
We sure hope it helps.
Best Regards,
Illia
⋅ December 9, 2019
Illia, thanks for your answer, we use import statements for file connectivity, can you give more detailed advice for this issue?
⋅ December 11, 2019
Hello, Rodion,
Thank you for your feedback.
We would like to provide a general approach independent of component import methods; The main idea is to override an appropriate method of the Toolbar in order to receive the desired functionality. Such an implementation is also achievable through import statements, as well as including .js files directly, as in the example above.
We hope it works for you.
In case it does not go for your case, we would like to kindly ask to provide more information about the context of using import statements.
Kind Regards,
Illia
⋅ December 26, 2019
Hi Illia, as we use import statements I need to import FlexmonsterToolbar to override function and then create Flexmonster object as you mentioned before, but in flexmonster.toolbar.js variable FlexmonsterToolbar is global and without export statement, so import is not supported for it. Is there any solution to override function in FlexmonsterToolbar before initialization of Flexmonster object using import statements?
⋅ December 26, 2019
Hello, Rodion,
Thank you for writing to us.
In order to get a better understanding of your case, we would like to kindly ask you to provide us with your sample project. That would greatly help us.
Kind regards,
Illia
⋅ December 27, 2019
Illia, Thanks for your answers, we've already found the solution for this issue.
We copied body of function showFormatCellsDialog to our new function customShowFormatCellsDialog, changed values we need.
When we create instance of flexmonster we used property beforetoolbarcreated and override function showFormatCellsDialog this way:
customizeToolbar = toolbar => {
toolbar.__proto__.showFormatCellsDialog = customShowFormatCellsDialog
}
Best Regards,
Rodion
⋅ December 27, 2019
Hello, Rodion,
Our team is happy to hear that you have found the solution.
You are welcome to contact us if any additional questions occur.
Kind regards,
Illia