Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Add new value to separators in Format > Format cells

Resolved
Rodion Lezhnyuk 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?

9 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Rodion Lezhnyuk 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?

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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:

  1. When including Flexmonster in your project, use flexmonster.full.js instead of flexmonster.js.
  2. Add a link to the flexmonster.css file inside the <head> tag.
  3. Copy the flexmonster.toolbar.js file to the directory you want it to be placed in.
  4. Change it in the appropriate way and delete methods that are not modified. In your case, the only method you need to leave is the FlexmonsterToolbar.prototype.showFormatCellsDialog method.
  5. Indicate the path to the new file right after 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

Public
Rodion Lezhnyuk December 9, 2019

Illia, thanks for your answer, we use import statements for file connectivity, can you give more detailed advice for this issue?

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Rodion Lezhnyuk 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? 

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Rodion Lezhnyuk 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Please login or Register to Submit Answer